CSS 속성 알아보기 (요소의 크기와 출력 형태)

 

box-sizing

 

box-sizing: 값;

box-sizing: border-box;

요소의 크기 계산 기준을 지정하는 속성

 

기본값(content-box) - 요소의 내용(content)으로 크기 계산

border-box - 요소의 내용 + padding + border로 크기 계산

 

overflow

 

overflow: 값; /* 부모 요소에다 작성 */

overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

/* 개별 속성으로 제어도 가능하다 */
overflow-x: 값;
overflow-y: 값;

요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 속성

 

기본값(Visible) - 넘친 내용을 그대로 보여줌

hidden - 넘친 내용을 잘라냄

auto - 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

 

display

 

display: 값;

display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;
display: 기타(table, table-row, table-cell 등)

요소의 화면 출력(보여짐) 특성을 지정하는 속성

 

기본값(block) - 상자(레이아웃) 요소

기본값(inline) - 글자 요소

기본값(inline-block) - 글자 + 상자 요소

flex - 플렉스 박스 (1차원 레이아웃)

grid - 그리드 (2차원 레이아웃)

none - 보여짐 특성 없음, 화면에서 사라짐

 

기본값이 다양한데, 각 요소에 특성에 맞게 이미 값이 지정되어 있기 때문

 

opacity

 

opacity: 값;

opacity: 1;
opacity: 0.5;

요소의 투명도

 

기본값(1) - 불투명

0~1 - 0~1 사이의 소수점 숫자