박스
콘텐츠 영역 : width, height 공간
padding 영역 : 안쪽 여백(콘텐츠와 테두리의 영역) -> 실제 크기에 변화를 줌
border 영역 : 테두리 영역
margin 영역 : 바깥쪽 여백
block , inline
block
- 자동으로 줄바꿈이 되는 요소로 화면 전체를 사용
- width 미지정 시 화면공간 100%
- block 안에 block요소와 inline 요소를 포함할 수 있다.
inline
- 태그안 콘텐츠만큼 width가 자동으로 지정
- width와 height를 변경할 수 없음
- inline 안에 inline을 포함할 수 있지만 block은 포함할 수 없다.
선택자
BEM (.block__Element--Modifier)
- .header .nav { (X) } /* 이렇게 하면 nav가 header 구조에 종속이 된다. */
- .header__nav { (O) } /* 구조도 표현하면서 종속 관계가 없다. */
'HTML > CSS' 카테고리의 다른 글
css 초기화 (0) | 2022.08.03 |
---|---|
플렉서블 박스 (0) | 2022.07.28 |
미디어 쿼리와 뷰포트 (0) | 2022.07.27 |
가변 그리드 (0) | 2022.07.26 |
반응형 웹 기본 개념 (0) | 2022.07.19 |