달성목표
🚆 CSS 기초
- CSS를 HTML에 적용하는 방법에 대해서 이해할 수 있다.
직접 HTML 안에 CSS를 정의하는 것을 권장하지 않는 이유를 이해할 수 있다.
1) 인라인 스타일: 같은 줄에서 스타일을 적용.
2) 내부 스타일 시트: CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성.
3) 외부 스타일 시트:<link rel="stylesheet" href="index.css" />처럼 외부에 있는 CSS파일을 HTML 내에 연결.
HTML의 태그 안에
style="을 사용하여 직접 넣을 수도 있다. 하지만, 하나에 집중하기 위해 파일이나 구간을 구분하는 관심사 분리 측면에서 권장하지 않는다.
- id 및 class와 관련된 selector 규칙을 이해할 수 있다.
id가 있는 요소를 선택할 때에는 #기호를 이용. id는 하나의 문서에서 한 요소에만 사용 가능.
class가 있는 요소를 선택할 때에는 .기호를 이용. 여러 요로를 그룹으로 묶는데 사용 가능.
| id | class |
|---|---|
#으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
- CSS를 이용해 텍스트를 꾸밀 수 있다
- CSS에서 쓰이는 단위의 두가지 구분을 이해할 수 있다.
각 단위가 적합한 경우를 구분할 수 있다.
1) 절대단위:
px등 (접근성에 불리)
2) 상대단위:rem,em,vw,vh,%등 (접근성에 유리)
- CSS 박스 모델을 이해할 수 있다
모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다. 박스는 항상 직사각형이고, 너비(width)와 높이(height)를 가진다.
Box model
줄바꿈이 되는 태그:
<h1>,<p>
줄바꿈이 되지 않는 태그:<span>(inline 박스는 width, height 속성이 적용되지 않음. 단display: inline-block;처럼 수동으로 display 속성값을 변경해 주면 width, height 수정 가능하다.
margin, padding, border
margin (바깥 여백):
margin: 10px 20px 30px 40px;top, right, bottom, left로 시계방향으로 작성.
margin: 10px 20px;두개만 넣으면 top과 bottom이 10px, left 및 right가 20px.
margin: 10px;하나만 넣으면 모든 방향의 바깥 여백이 10px.
박스 크기를 측정하는 두가지 기준의 차이를 이해할 수 있다.
content-box vs border box
"content-box"의 경우 박스의 크기를 측정하는 기본적인 방법으로 콘텐츠가 담기는 박스의 크기만 고려하는 반면, "border box"는 여백과 테두리 두께를 포함한 박스 계산한다.
모든 요소에box-sizing: border-box적용하는 경우 모든 박스에서 여백과 테두리를 포함한 크기로 계산한다.
- MDN 또는 w3school 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.
