CSS - 속성(박스 모델)

width

; 요소의 가로 너비를 지정. *auto=브라우저가 너비를 계산, 단위=px, em, cm 등

height

; 요소의 세로 너비를 지정. *auto=브라우저가 너비를 계산, 단위=px, em, cm 등

max-width

; 요소의 최대 가로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산.

min-widh

; 요소의 최소 가로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산.

max-height

; 요소의 최대 세로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산.

min-height

; 요소의 최소 세로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산.

-

margin, margin-top, margin-bottom, margin-right, margin-left.

; 요소의 '외부(바깥) 여백'을 지정. 

*음수값 사용 가능.

 단위=px, em, cm 등, auto=브라우저가 너비를 계산. %=부모 요소의 너비에 대한 비율로 지정.

margin - collapse(중복)

; 마진의 특정 값들이 '중복'되어 합쳐지는 현상. 

*형제 요소들의 margin-top과 margin-bottom 이 만났을때.

 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을때.

 부모 요소의 margin-bottom과 자식 요소의 margin-bottom 이 만났을때.

child의 margin-top으로 인해 parent에도 margin-top 값이 적용됨.(중복)

-

padding

; 요소의 '내부(안) 여백'을 지정. 

*단위=px, em, cm 등, %=부모 요소의 너비에 대한 비율로 지정.

 추가된 padding 값만큼 요소의 크기가 커지는 현상이 발생.

추가된 padding 값에 대한 제어.

-

border

; 요소의 '테두리 선'을 지정.

 
/* border: 두께 종류 색상 */
.box {
    border: 1px solid red;
}

-

box-sizing

; 요소의 크기 계산 기준을 지정.

content-box : 너비(width, height)만으로 요소의 크기를 계산.

border-box : 너비(width, height)에 안쪽 여백(padding)과 테두리 선(border)을 포함하여 요소의 크기를 계산.

-

display

; 요소의 박스 타입(유형)을 설정.

block : 블록 요소(<div>등)

inline : 인라인 요소(<span>등)

inline-block : 인라인 블록 요소(<input>등)

기타 : table, table-cell, flex 등

none : 요소의 박스 타입이 없음(요소가 사라짐)

-

overflow

; 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때, 내용의 보여짐을 제어.

visible : 넘친 부분을 자르지 않고 그대로 보여줌.

hidden : 넘친 부분을 잘라내고 보이지 않도록 함.

scroll : 넘친 부분을 잘라내고 스크롤바를 이용하여 볼 수 있도록 함.

auto : 넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용하여 볼 수 있도록 함.

-

opacity

; 요소의 투명도를 지정. *0에서 1까지의 숫자값.