[CSS]박스(Box Model)

 

 

CSS Box Model

웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용

웹 문서 전체 레이아웃 정의

CSS 속성은 상속받는다. 자손 태그에 스타일이 적용된다. ex) font-family

(*박스 모델 관련 속성 : 상속받지 않는다!!)

 

1. Box

	블록 요소	인라인 요소	인라인-블록 요소
영역	부모 태그 영역의 가로 영역 전부(한줄)	컨텐츠 영역 만큼	컨텐츠 영역 만큼
문서 흐름	위에서 아래로	왼쪽에서 오른쪽으로	왼쪽에서 오른쪽으로
크기 설정	가능(width, height)	설정해도 적용 x	가능(width, height)
예시	<div>, <p>, <h1> 등등	<a>, <span>	<img>

 

 

2. 박스 기본 속성

*단위 : px, cm, %(부모 요소의 영역을 기준으로 계산)

 

(1) 크기 - width, height

tag {
    width:300px;
    height:200px;
}

 

-블록 요소 특징

너비를 특정하면 오른쪽으로 여백이 있는 것처럼 보이지만 '블록' 요소이기 때문에 한 줄을 차지함.

div {
    width:350px; height:200px;
    background-color:yellow;
} /*화면에 노란색의 350x200 크기 상자가 표시되어서 오른쪽으로 여백이 있는 것처럼 보이지만
    '블록' 요소이기 때문에 실제로는 한줄을 전부 차지하고 있음.*/

 

 

(2) 여백 - padding, margin

종류	기준	범위
padding	테두리(border)	안쪽 여백
margin		바깥쪽 여백

 

-수치 설정하는 방법 종류(padding도 똑같음)

 시계방향 순서로 설정

p { margin-top:5px; margin-right:5px; margin-bottm:5px; margin-left:5px;}
p { margin : 5px 5px 5px 5px;}
p { margin : 5px 5px 5px;} /* top right&left bottom */
p { margin : 5px 5px;} /* top&bottom right&left */
p { margin : 5px;} /* top & right & bottom & left */

 

(3) 경계선 - border

border-width : 수치값(px, cm, %) / thin / medium(기본값) / thick

border-color : 이름 / 16진수 / rgb

border-style : solid(기본값) / none / hidden / dashed / 등등

border-radius : 수치(px, %, )

                    모서리 둥글게만드는 효과

div {
    border-width:1px;
    border-color:blue;
    border-style:solid;
    border-radius:15px 15px 15px 15px;    
} /* 아래처럼 짧게 쓸 수 있음 */
div {
    border:1px solid blue;
    border-radius:15px;
}

 

(4) 그림자 - box shadow

tag { box-shadow : h-shadow v-shadow blur spread color inset;}

h-shadow	그림자의 수평 거리 지정	그림자 위치 : 좌(음수), 우(양수)
v-shadow	그림자의 수직 거리 지정	그림자 위치 : 상(음수), 하(양수)
blur	그림자의 흐림 정도 지정
spread	그림자의 번짐 정도 지정
color	그림자의 색상 지정
inset	그림자를 박스 안쪽에 표현