1. 박스 모델
1) content
태그가 차지하는 공간
width와 height가 차지하는 공간
텍스트, 이미지 등
2) border
padding = 여백
원하는 곳에만 패딩을 줄 수도 있음
3) padding
요소 안의, content 주변의 보이지 않는 공간,
cntent와 border 사이의 공간이라고 봐도 될 듯
4) margin
요소 바깥의 공간, 요소들 사이의 공간임
5) fill area
border안의 면적, 백그라운드 색이나 백그라운드 이미지로 채워지는 곳
예시
벽에 걸린 액자로 생각하면 더 쉽다
한 액자 안의 그림은 content, 액자의 끝면은 border, 액자와 그림 사이의 공간은 padding, 액자 면적 전체는 fill area, 액자 사이의 간격은 margin
2. 셀렉터 우선순위
-
!important
사용법: html에서 [property: value !important;] -
인라인
html 자체에서 [style=""] -
id
css에서 [#selector{}] 설정 후, html에 적용 -
class
css에서 [.selector{}] 설정 후, html에 적용 -
pseudo 클래스
css에서 [a:클래스(link, visited, hover, active 중에 한 개){}] 설정 -
태그 선택자
css에서 a, img, span, h1, h2 등 태그 자체에 대해 설정, [a{}]의 형태 -
전체 선택자
*, css에서 사용
pseudo 순서
LVHA의 순서
Link -> Visited -> Hover -> Active
이 순서대로 작성하지 않으면, 작동하지 않음.
Link보다 hover의 코드 작성 위치가 높다면, 제대로 작동안됨.
3. 블록레벨과 인라인 박스
블록레벨
부모 요소의 넓이는 100퍼센트 차지하는 것이 블록 레벨 요소
수직(vertial)하게 요소가 쌓이게 됨
기본적인 요소들은, body, main, header, footer, section, div, p, ul, ol, ul, nav, aside 등이 있다.
css에서 블록레벨이 아닌 요소를 블록레벨로 바꾸려면, display: block;을 하면 된다.
인라인
오직 content의 공간만 차지함(부모 요소 말고)
padding, margin이 수평적으로만 적용됨
