728x90
HTML은 뼈대, CSS는 꾸미기
👉 HTML은 구역과 텍스트를 나타내는 코드,
CSS는 잡은 구역을 꾸며주는 것으로 생각.
HTML 내 style 속성으로 꾸미기를 할 수 있긴하나 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생!
HTML 코드 내에 CSS 파일을 불러와서 적용하면 된다.
▪️HTML 기초
HTML은 크게<head>와 <body>로 구성
- 안에는 페이지의 속성 정보를,안에는 페이지의 내용
- 안에 들어가는 대표적인 요소들: meta, script, link, title 등
- 페이지의 속성을 정의하거나, 필요한 스크립트들을 부름. 즉, 눈에 안 보이는 필요한 것들을 담는 것. - <div>: 구역 나눔
- <p>: 문단
- <h1~h6>: h1은 제목 / h2는 소제목
- <span>: 글자 꾸밀 때 사용
<span style="color:red">글자</span>- <a>: 하이퍼링크
<a href="http://daum.net/">하이퍼링크</a>- <img>: 이미지 태그
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />- <input>
<input type="text" />- <button>
<button>버튼</button>- <textarea>
<textarea>Who am I?</textarea>
▪️CSS 기초
- 빨간색 div 안에, 초록색/파란색 div가 들어있다. 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동
- 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리
➣ 사용법
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성
더보기
👉 자주 사용되는 것
배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy color
간격
margin
padding
'개발일지 > Web Development' 카테고리의 다른 글
| Javascript 연습하기 (0) | 2022.01.24 |
|---|---|
| Javascript 기초 문법 - 2 (0) | 2022.01.24 |
| Javascript 기초 문법 - 1 (0) | 2022.01.24 |
| Javascript 자바스크립트 기초 (0) | 2022.01.24 |
| 웹의 동작 개념 (2) | 2022.01.24 |
