1. CSS 박스 모델 (Box Model)
ㅇ CSS는 웹 페이지 내 보이는 모든 요소들을 사각형 박스 모델로 다룸
- 즉, 이를 통해, 원하는 크기,모양의 조절, 원하는 위치에 배치할 수 있음
ㅇ 요소별 유형 ☞ 블록 요소, 인라인 요소, 인라인 블록 요소, disply 속성 참조
- block 요소 : 요소를 박스화시켜, 위아래에 줄바꿈이 일어나도록 함
- inline 요소 : 요소들을 같은 줄에 표시함으로써, 폭,높이 및 상하 여백 조정 불가
- inline-block 요소 : 요소들을 같은 줄에 표시하되, 폭,높이 및 상하 여백 조정이 가능토록 함
2. CSS 박스 모델의 영역별 구분
ㅇ margin (마진) : 바깥 여백
ㅇ border (테두리선) : 경계선
ㅇ padding (페딩) : 안 여백
ㅇ content (내용) : 실제 표시할 내용
ㅇ background (배경) : border,padding,content 영역 만 해당 (margin 제외)
3. CSS 박스 모델에서, `영역 결정` 및 `크기 조정`
ㅇ 박스 크기 조정
- 기본적으로, width, height 속성에 의해 크기(폭,높이)를 조정하나,
- 선택된 영역(box-sizing 속성으로 조절 가능)이 어느 것인지에 따라 다름
* 마진은 박스 크기에 포함되지 않음
ㅇ 선택된 영역
- 기본 => (content) 영역 만 해당
- 옵션 => (padding + content) 영역, (border + padding + content) 영역
. 옵션에 의한 박스 크기 조정은,
. 아래와 같이, box-sizing 속성 {box-sizing:옵션선택}에 의함
ㅇ box-sizing 속성 : 박스의 폭(width),높이(height)를 영역에 따라 다르게 계산하는 방식
- box-sizing : content-box => (content) 영역 만 해당
. 기본값(default) 임
- box-sizing : padding-box => (padding + content) 영역 만 포함된 것으로 계산
- box-sizing : border-box => (border + padding + content) 영역
. 이 경우, background 영역에 해당되는 것과 같음
4. CSS 박스 모델에서, (여백, 테두리, 패딩)의 조절
ㅇ 여백 (Margin) { margin : 값 }
- 여백 위치별 지정 : (top, right, bottom, left)
. margin-top, margin-right, margin-bottom, margin-left
- [참고] `여백 색` 지정
. 기본이 투명이고, 배경색이 비춰 보임
- [참고] `마진 병합` 현상
. margin-top,margin-bottom 동시 적용시, 둘 간에 큰 속성값 하나 만 설정됨
. 부모,자식 간에 margin-top,margin-bottom 적용시, 둘 중 하나가 다른 것에 영향을 미침
- [참고] 가장 기본적인 `가로 중앙 정렬`
. { maring: 0 auto; } => 해당 요소에, 위아래 여백 주지 않고, 가로 중앙 정렬 함
ㅇ 테두리 (Border) { border : 값 } ☞ w3schools CSS Borders 참조
- 테두리 위치별 지정 : (top, right, bottom, left)
. border-top, border-right, border-bottom, border-left
- border-width
. 위치별 : border-top-width, border-right-width, border-bottom-width, border-left-width
- border-style { border-style : 값; }
. 값 : dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
- border-color
. 값 : black, red 등
- border-radius ☞ 아래. 5항 (모서리를 둥글게 만들기) 참조
- 例) CSS 단축형 { border : solid black 5px; } // 두꺼운 검은색의 5 픽셀 테두리
ㅇ 패딩 (Padding) { padding : 값 }
- 패딩 위치별 지정 : (top, right, bottom, left)
. padding-top, padding-right, padding-bottom, padding-left
- [참고] 패딩 색 지정은 따로 없음
5. CSS 박스 모델에서, 모서리를 둥글게 만들기
ㅇ 모서리 { border-radius : 값; } ☞ Coding Factory 강좌 참조
- border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
border-bottom-left-radius
- 例)
. 원 박스 표현 : weight,height,border-radius 모두 같은 속성값 지정
.. 例) { weight: 100px, height: 100px, border-radius: 100px }
. 반원 박스 표현
.. 例) { weight: 200px, height: 100px, border-radius: 100px 100px 0 0 }
. 1/4원 박스 표현
.. 例) { weight: 100px, height: 100px, border-radius: 100px 0 0 0 }
6. CSS 박스 모델에서, 컨텐츠의 크기(폭, 높이)
ㅇ 폭 : { width : 값 }
- [참고] ☞ MDN : width CSS 속성
ㅇ 높이 : { height : 값 }
- [참고] ☞ MDN : height CSS 속성
ㅇ 속성 값 표기의 종류
- 크기(픽셀 등 고정 크기), 백분율(%,웹브라우저 창 크기에 따른 백분율), auto(기본값)
※ 例)
- #some_box { max-width : 100%; height : auto; vertical-align : bottom; }
. 이미지,텍스트 크기가 박스 크기 보다 클 때,
. 그 박스 너비 크기에 최대한 맞춰서(이미지 크기,텍스트 줄바꿈을 조절해) 보여주고,
. 이미지,텍스트를 바닥선에 맞춰서, 하단에 공백이 없도록 수직 하단 정렬 함
- #some_box { min-width : 300px; max-width : 500px; }
. 이미지,텍스트 폭이 300px를 넘으면, 자동으로 박스 크기 늘려주다가, 500px 넘으면 중단
7. CSS 박스 모델에서, 컨텐츠의 넘침 조절
ㅇ overflow 속성 : 지정된 폭,높이 보다 표시될 내용이 넘칠 때의 동작 방식
- overflow : visible => 넘친 내용 그대로 표시하는 기본값(default)
- overflow : scroll => 항상 스크롤바 나타남
- overflow : auto => 넘치면 스크롤바 나타남
- overflow : hidden => 넘친 내용이 안보임
. 자손들이 차지하는 화면 너비 모두를 감싸는 특성 있음 ☞ CSS 정렬 참조
.. (즉, clear : both 효과 있음)
. 특히, float된 자손 요소들로 인해, 부모 요소가 차지하지 못한 빈공간에,
.. 경계선,배경색 등이 침범하지 않도록, 레이아웃할 때 유용함