[CSS] CSS 속성 - 박스 모델 (width, height, margin, padding, border, box-sizing, overflow, display, opacity)

width, height

요소의 가로/세로 너비

기본값 auto

 

max-width, max-height

요소가 커질 수 있는 최대 가로/세로 너비

기본값 none

 

min-width, min-height

요소가 작아질 수 있는 최소 가로/세로 너비

기본값 0

 

단위

px : 픽셀

% : 상대적 백분율 (부모 자식)

em : 요소의 글꼴 크기 (글꼴 크기가 12px면 1em = 24px)

rem : 루트 요소(html)의 글꼴 크기

vw : 뷰포트 가로 너비의 백분율

vh : 뷰포트 세로 너비의 백분율

 

margin

요소의 외부 여백(공간)을 지정하는 단축 속성

기본값 0

auto :  가로(세로) 너비가 있는 요소의 가운데 정렬에 활용

 

margin-top
margin-bottom
margin-left
margin-right

요소의 외부 여백(공간)을 지정하는 기타 개별 속성들

 

표현법(시계방향순)

margin: 10px;

margin: top, right, bottom, left;

 

margin: 10px 20px;

margin: (top, bottom) (left, right);

 

margin: 10px 20px 30px;

margin: top (left, right) bottom;

 

margin: 10px 20px 30px 40px;

margin: top right bottom left;

 

padding

요소의 내부 여백(공간)을 지정하는 단축 속성

기본값 0

% : 부모 요소의 가로 너비에 대한 비율로 지정

요소의 크기가 커짐

 

padding-top
padding-bottom
padding-left
padding-right

요소의 내부 여백(공간)을 지정하는 기타 개별 속성들

 

표현법(시계방향순)

padding: 10px;

padding: top, right, bottom, left;

 

padding: 10px 20px;

padding: (top, bottom) (left, right);

 

padding: 10px 20px 30px;

padding: top (left, right) bottom;

 

padding: 10px 20px 30px 40px;

padding: top right bottom left;

 

border

요소의 테두리 선을 지정하는 단축 속성

border: 선-두께 선-종류 선-색상;

border: border-with border-style border-color;

기본값: medium none black;

 

border-width

요소 테두리 선의 두께

4방향 표현법(시계방향순)

 

border-style

요소 테두리 선의 종류

solid(실선), dashed(파선)

4방향 표현법(시계방향순)

 

border-color

요소 테두리 선의 색상을 지정하는 단축 속성

transparent(투명)

4방향 표현법(시계방향순)

 

색상 표현

색을 사용하는 모든 속성에 적용 가능한 색상 표현 

색상 이름       - 브라우저에서 제공하는 색상 이름  - red, tomato, royalblue

Hex 색상코드 - 16진수 색상(Hexadecimal Colors) - #000, #FFFFFF

RGB               - 빛의 삼원색                                    - rgb(255, 255, 255)

RGBA             - 빛의 삼원색 + 투명도                     - rgba(0, 0, 0, 0.5)

 

border-방향
border-방향-속성

요소의 테두리 선을 지정하는 기타 속성들

 

border-radius

요소의 모서리를 둥글게 깎음

기본값 0

 

box-sizing

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

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

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

 

overflow

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

기본값 visible 넘친 내용을 그대로 보여줌

hidden 넘친 내용을 잘라냄

auto 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성(없으면 스크롤바 생성x)

 

overflow-x
overflow-y

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

 

display

요소의 화면 출력(보여짐) 특성

block,inline,inline-block,flex,grid,none,table

 

opacity

요소 투명도

기본값 1 불투명

0부터 1 사이의 소수점 숫자