css 박스 모델
웹브라우저는 각 요소를 박스로 간주하거 화면에 배치한다.
컨텐츠(content) : 박스의 내용물, 텍스트와 이미지가 나타나는 부분이다.
패딩 (padding) : 콘텐츠 주위의 영역, 패딩은 투명 하다
경계(border) : 패딩과 내용물을 감싸는 경계, 경계는 박스의 경계색에 의하여 영향을 받는다.
마진(margin) : 경계 주위의 영역, 마진은 투명 하다.
경계선 스타일
border-style 상 하 좌 우 선택 가능
none
dotted
dashed
solid
double
groove
ridge
inset
outset
경계선의 폭
border-width 상 하 좌 우 선택 가능
thin
medium
thick
경계선 컬러
border-color
색상(green)
rgb(0, 255, 0)
"#00ff00"
둥근 경계선
border-raius 둥근 코너의 반지름
25px
경계선의 그림자
box-shadow 가로오프셋 세로오프셋 번지는정도 그림자색
경계 이미지
border-image
-webkit-border-image : url() 30 30 round /* safari 5 */
-o-border-image : url() 30 30 round /* opera */
border-image : url() 30 30 round /* chrome */
마진과 패딩
요소 크기 설정
css 에서는 모든 요소의 크기를 width 와 height 속성을 이용해 설정 할 수 있다
요소 크기 변경
resize 속성을 이용할 경우 양방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이와 너비를 모두 조정할 수 있게 한다.
resize 의 깂은 both, horizontal, vertical, none
마진 설정 하기
auto : 브라우저가 마젠을 계산 한다.
length : 마진을 px, pt, cm 단위로 지정할 수 있다, 디폴트 0pz
% : 미진을 요소 폭의 퍼센트로 지정 한다.
inherit : 마진이 부모 요소로부터 상속된다.
마진의 각 변을 별도로 지정 하는 방법
margin-top : 10px
margin-right : 10px
margin-bottom : 10px
margin-left : 10px
margin : top right bottom left
패딩 설정 하기
패딩은 콘텐츠와 경계 사이의 간격 이다.
length : px, pt, em 단위로 패딩응 설정한다.
% : 패딩을 내용물의 퍼센트로 지정 한다.
마진의 각 변을 별도로 지정하는 방법
padding-top : 10px
padding-right : 10px
padding-bottom : 10px
padding-left : 10px
한 줄에서 모든 변에 대한 값을 지정 하는 방법
padding : top right bottom left
마진과 패딩의 값을 설정할때 음수로 설정 할 수 있다
이 경우 요소가 겹쳐서 보이게 된다.
웹디자인 에서 이것을 고의적으로 이용하는 경우도 많다.
특히 이미지와 텍스트를 나란히 표시할 때 사용한다.
박스의 크기계산
css 를 통하여 요소의 width, height 속성을 설정하면 요소 안에서 콘텐츠 영역의 크기가 설정된다.
요소의 전체 크기를 계산하려면 여기에 패딩, 경계, 마진을 더해야 한다.
ex)
#target {
width:200px;
padding:10px;
border: 5px solid red;
margin : 20px;
}
마진 20+ 20
경계 5+ 5
패딩 10 + 10
내용물 200
으로 270 이다.
margin 속성을 이용한 수평 정렬
어떤 HTML 요소를 화면의 중앙에 위치시키고자 하면, align='center' 로 하면 되었다.
html5 에서 align 속성을 삭제 하였다.
css만을 사용하여 어떤 요소를 중앙 정렬하려면 어떻게 해야 하는가?
- 인라인요소
테스트나 <em>과 같은 인라인 요소를 컨테이너의 중앙에 놓으려면 컨테이너의 text-align 속성을 사용하면 된다.
그렇게 하면 블록 수준의 컨테이너 안에서 인라인 요소가 중앙 정렬된다.
예를 들어 <em> 요소를 <p> 안에서 중앙 정렬 해보자.
ex) p, em, strong, div { border: dotted 3px red; }
style="text-align : center"
- 블록요소
