반응형
CSS 박스 모델
- 화면에 배치되는 태그 요소를 어떻게 표현할 것인지 설정하는 속성
- display 속성으로 설정한다
- width, height
- border
- padding, margin
- 위 다섯가지 속성이 박스 모델에 따라 표현되는 방법이 달라진다
- block 모델
- 영역을 설정하고 공간을 차지하는 요소
- 너비의 기본 설정이 부모요소의 크기만큼(100%) 되어있다.
- 컨텐츠(내용)의 크기가 block 요소보다 커지면 넘치는 부분이 발생한다.
- 컨텐츠가 넘친 부분에 대한 표현방법으로 Overflow 속성을 사용한다.
- 종결 block 요소
- h1 ~ h6, p, caption, dt, address, blockquote 등등
- 종결 블락요소는 다른 블락요소를 자식대그로 가질 수 없다
- 인라인 요소만 컨텐츠로 포함할 수 있다.
- 자체 레이아웃
- width, height 속성 적용가능, 기본 값은 auto
- width - 부모요소의 너비만큼 (100%)
- height - 내부 요소의 높이만큼(auto)
- margin - 외부 요소와의 간격을 설정하는 속성(외부 여백), margin 영역에 서로 만날 때 밀어내지 않고 겹쳐진다. 음수로 지정하면 컨텐츠 영역이 겹쳐진다. width가 설정된 블락요소에 margin: 0 auto; 를 설정하면 외부정렬(가운데정렬)이 가능하다.(부모 요소의 가운데로 정렬되는 것)
- Overflow 속성
- 블락 요소 내의 내용물이 컨텐츠 영역보다 커서 넘친 부분에 대한 표현 방법을 설정하는 속성
- visible : 넘친 부분 보여주기
- hidden : 넘친 부분 감추기(잘라내기)
- scroll : 상하, 좌우 스크롤바 생성하기
- 상하 스크롤바 == 수직 스크롤바 == vscroll == vertical scroll
- 좌우 스크롤바 == 수평 스크롤바 == hscroll == horizontal scroll
- auto : 내용물이 넘친 방향에만 스크롤 생성하기
- overflow-x, overflow-y 의 통합 속성
- overflow-x : 좌우방향(수평방향)에 대한 넘친부분 처리 속성
- overflow-y : 상하방향(수직방향)에 대한 넘친부분 처리 속성
- ex) overflow-x : scroll; overflow-y : hidden;
반응형
'FrontEnd > CSS' 카테고리의 다른 글
[CSS] CSS3 벤더 프리픽스란 (0) | 2020.10.09 |
---|---|
[CSS] CSS3 텍스트 속성 정리 (0) | 2020.10.09 |
[CSS] CSS 스타일 적용 우선순위 (0) | 2020.09.29 |
[CSS] CSS의 색상 단위 (0) | 2020.09.29 |
[CSS] CSS 레이아웃 (0) | 2020.09.29 |