margin(외부 여백)

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

• auto -> 브라우저가가 여백을 계산
• 단위 : px, em, vw등 단위로 지정
• % : 부모 요소의 가로 너비에 대한 비율로 지정 -> 잘 사용하지 않음.

단축속성

padding(요소 내부)

요소의 내부 여백(공간)을 지정하는 단축 속성
요소의 크기가 커진다.

• 단위 : px, em, vw등 단위로 지정
• % : 부모 요소의 가로너비에 대한 비율로 지정

border(요소 테두리 선)

요소의 크기가 커진다. -> 두께, 종류, 선

• border-width
• border-style
• border-color

색상 표현

• 색상 이름 : 브라우저에서 제공하는 색상 이름 => red
• Hex 색상코드 : 16진수 색상(Hexadecimal Colors) => #000
• RGB : 빛의 삼원색
• RGBA : 빛의 삼원색 + 투명도
• HSL : 색상, 채도, 명도
• HSLA : 색상, 채도, 명도 + 투명도

border-radius

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

box-sizing(크기 계산)

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

• content-box : 요소의 내용(content)으로 크기 계산
• border-box : 요소의 내용 + padding + border로 크기 계산

overflow(넘침 제어)

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

• visiable : 넘친 내용을 그대로 보여줌(기본값)
• hidden : 넘친 내용을 잘라냄
• scroll : 넘친 내용을 잘라냄, 스크롤바 생성
• auto : 넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성

overflow-x

overflow-y

display(출력 특성)

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

• block : 상자(레이아웃)요소
• inline : 글자 요소
• inline-box : 글자 + 상자 요소
• flex : 플렉스 박스 (1차원 레이아웃)
• grid : 그리드 (2차원 레이아웃)
• none : 보여짐 특성 없음, 화면에서 사라짐
• 기타 : table, talbe-row, table-cell 등등

opacity

요소 투명도

• 1=> 불투명(기본값)
• 0~1 => 0부터 1사이의 소수점 숫자

글꼴