[CSS] 너비 (width,height,margin,padding,border) + 단위, 색상

width, height

; 요소의 가로/세로 너비

auto ; 기본값 / 단위(px,ev,vm)

 

max-width, max-height

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

none ; 기본값 / 단위

 

min-width, max-height

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

0 ; 기본값 / 단위

 

margin

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

0 ; 기본값 / auto ; 가로(세로)너비가 있는 요소의 가운데 정렬에 활용 / 단위

-음수도 가능

 

padding

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

0 ; 기본값 / 단위 / % ; 부모 요소의 가로 너비에 대한 비율로 지정

-음수도 가능

 

border-radius

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

 

border

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

ex) border : 선두께 선종류 선색상

선종류 ; none(선 없음) / solid(실선) / dashed(파선)

선색 ; 색상 / transparent(투명)

 

 

padding과 border의 경우 생기면 요소가 커짐

-> 해결책 ; box-sizing

- content-box ; 요소의 내용으로 크기 계산

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

ex) div{ box-sizing : border-box } ; div의 width크기 안에 padding과 border도 포함

 

margin,padding,border의 경우

상하좌우 / 상하 좌우 / 상 좌우 하 / 상 우 하 좌

or ABC-top/right/bottom/left로 설정 가능

 

---

 

단위

px ; 픽셀 

% ; 상대적 백분율

em ; 요소의 글꼴 크기

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

vw ; 뷰포트 가로 너비의 백분율 ex) 50vw ->뷰포트의 절반 차지

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

 

 

색상 표현

색상 이름 ex) red, tomato, blue

Hex 색상 코드  ex) #000, #FFFFFF

RGB ; 빛의 삼원색 ex) rgb(255,255,255)

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