[CSS기초] 5. CSS속성 - 박스모델

5. CSS속성 – 박스모델

5.1. width, height 박스요소 – 기본 width = 100%, 기본 height = 0px 인라인요소 – 기본 width = 0px, 기본 height = 0px

 

5.2. max-width, min-width, max-height, min-height max-width : 요소가 가질 수 있는 최대 넓이. min-width : 요소가 가질 수 있는 최소 넓이. max-height : 요소가 가질 수 있는 최대 높이. min-height : 요소가 가질 수 있는 최소 높이.

 

5.3. margin – 박스요소의 외부의 여백 선언방법 margin : 1px 1px 1px 1px // 위, 오른쪽, 아래, 왼쪽 margin : 1px 1px 1px // 위, 좌우, 아래 margin : 1px 1px //위아래, 좌우 margin : 1px //위아래좌우 각각 선언하는 경우 margin-top : 1px margin-bottom : 1px margin-right : 1px margin-left : 1px 마진합병            1. 형제요소들의 위 아래가 만났을 때            2. 부모 요소의 margin-top 과 자식 요소의 margin-top이 만났을 때            3. 부모 요소의 margin-bottom 과 자식 요소의 margin-bottom이 만났을 때

 

5.4. padding – 박스요소 내부의 여백 선언방법 padding : 1px 1px 1px 1px // 위, 오른쪽, 아래, 왼쪽 padding : 1px 1px 1px // 위, 좌우, 아래 padding : 1px 1px //위아래, 좌우 padding : 1px //위아래좌우 각각 선언하는 경우 padding-top : 1px padding-bottom : 1px padding-right : 1px padding-left : 1px *paddling으로 여백을 삽입하면 요소는 padding의 넓이만큼 늘어남. 이를 피하고 싶을 경우

 

5.5. border

값	의미	기본값
border-width	선의 두께	medium
border-style	선의 종류	none
border-color	선의 색상	black

 

border : 두께 종류 색상

ex) border : 1px solid red;

 

개별속성 (border-style, border-color에도 그대로 적용됨)

border-width : 1px 1px 1px 1px // 위, 오른쪽, 아래, 왼쪽

border-width: 1px 1px 1px // 위, 좌우, 아래

border-width: 1px 1px //위아래, 좌우

border-width: 1px //위아래좌우

 

5.6. box-sizing

box-sizing : content-box; // 컨텐츠 사이즈 + 보더/패딩사이즈

box-sizing : border-box; // 컨텐츠사이즈는 보더사이즈 계산되서 자동으로 줄어듬.

 

5.7. display

값	의미	기본값
block	블록요소 <div>
inline	인라인요소 <span>
inline-block	인라인-블록 <input>
기타	table, table-cell, felx
none	디스플레이 요소없음

 

ex)

display : inline;

display : block;

 

5.8. overflow – 자식요소가 부모요소의 크기를 넘어섰을경우

값	의미	기본값
visible	넘친부분을 그대로 보여줌	visible
hidden	넘친부분을 잘라냄
scroll	넘친부분을 스크롤로 내림(스크롤바 있음)
auto	님친부분이 있는경우만 잘라내고 스트롤바를 이용하면 볼수있게함 (스크롤바 없음)

 

5.9. opacity – 투명도 설정

값	의미	기본값
숫자	0과1사이의 소수점(낮을수록 불투명)	1

References: heropy.blog