Web
html
html tag
빈태그 ->
블록레벨 요소 vs 인라인 요소
vs 인라인-블록 요소
html5 구조
CSS
CSS Box Model
box-sizing : border-box로 하기 ?
CSS 선택자
결합선택자 中 자손 vs 자식
형제 선택자
가상 클래스 vs 가상 요소
속성 선택자
구체성 <- 첨들어봄 대박
cascading <- css 중 c가 cascading임
position
쌓임 맥락 (z-index)
대박 첨알았음
transform 렌더링 속도 관련
flex
flex container (부모)
flex-wrap
justify-content vs align-items
align-items vs align-content
gap
flex items (자식)
order
flex-grow
flex-shrink
grid
grid container
fr
repeat
grid-template-areas <- 이거 첨알았오 대박
.container {
grid-template-areas:
"header header header"
" a main b "
" . . . "
"footer footer footer";
}
.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의하세요 */
기타
nth-child
nth-child(n)