Ch.8 CSS 속성
CSS에서 속성은 Properties로 HTML의 속성 Attributes와는 표현이 약간 다르다. 크게 박스 모델, 글꼴 문자, 배경, 배치, 플렉스, 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터로 나눌 수 있다.
width 와 height는 요소의 가로 세로 너비를 지정해준다. span 은 인라인 요소로 기본값은 포함한 콘텐츠 크기만큼 설정되고, div 는 블록 요소로 기본값은 가로는 부모 요소의 크기만큼, 세로는 포함한 콘텐츠 크기만큼 설정된다. 인라인 요소는 가로 너비가 최대한 줄어들려 하고, 블록 요소는 최대한 늘어나려 한다는 게 차이점이다. 그리고 인라인에는 width와 height를 설정할 수 없다는 점 다시 상기하자!!
max-width, max-height나 min-width, min-height로 요소의 최대 최소 가로/세로 너비를 지정할 수도 있다.
표현 단위로는 px(픽셀), %(상대적 백분율), em(글꼴 크기), rem(루트 요소의 글꼴 크기), vw(뷰포트 가로 너비의 백분율), vh(뷰포트 세로 너비의 백분율)이 있다. 물론 외에도 더 많은 단위들이 있다~
vw의 경우에 뷰포트의 전체를 100으로 보고, 1vw=뷰포트의 100분의 1 과 같은 의미이다. 즉 가로 세로 너비를 vw 단위로 설정하면 화면을 늘이고 줄일때 뷰포트의 크기에 맞게 요소의 사이즈가 변한다.
브라우저의 기본 글꼴 크기는 16px이다. 기본적으로 1em은 16px과 같은 의미로 보면 된다. 즉 10em은 160px인 셈! 또한 폰트 사이즈는 상속되는 속성이다. 만약 부모의 폰트 사이즈가 10px이면, 자식들을 포함해서 1em은 10px이 될 것이다. 따라서 em은 상대적으로 크기가 변할 수 있으니 주의가 필요하다.
rem은 html 요소에 지정된 폰트 사이즈만 기준으로 적용한다.
※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'etc... > 패스트캠퍼스 챌린지' 카테고리의 다른 글
| 패스트캠퍼스 챌린지 12일차 - Part1. Ch8 (0) | 2021.11.12 |
|---|---|
| 패스트캠퍼스 챌린지 11일차 - Part1. Ch8 (0) | 2021.11.11 |
| 패스트캠퍼스 챌린지 9일차 - Part1. Ch7 (0) | 2021.11.09 |
| 패스트캠퍼스 챌린지 8일차 - Part1. Ch7 (0) | 2021.11.08 |
| 패스트캠퍼스 챌린지 7일차 - Part1. Ch6 (0) | 2021.11.07 |