CSS 속성(1)

박스 모델
글꼴, 문자
배경
배치
플렉스(정렬)
전환
변환
띄움
애니메이션
그리드
다단
필터

너비(width, height)

• width, height
  요소의 가로/ 세로 너비
• max-width, max-height
  최대 너비 제한 없음
• min-width, min-height
  최소 너비 제한 없음

CSS 단위

종류
px	픽셀
%	상대적 백분율
em	요소의 글꼴 크기
rem	루트 요소(html)의 글꼴 크기
vw	뷰포트 가로 너비의 백분율
vh	뷰포트 세로 너비의 백분율

외부 여백(margin)

• margin
  요소의 외부 여백(공간)을 지정하는 단축 속성
• margin-방향
  요소의 외부 여백(공간)을 지정하는 기타 개별 속성들

내부 여백(padding)

• padding
  요소의 내부 여백(공간)을 지정하는 단축 속성
• padding-방향
  요소의 내부 여백(공간)을 지정하는 기타 개별 속성들

테두리 선(border)과 색상 표현

• border
  요소의 테두리 선을 지정하는 단축 속성
• border-width
  요소 테두리 선의 두께
• border-style
  요소 테두리 선의 종류
• border-color
  요소 테두리 선의 색상을 지정하는 단축 속성
• border-방향, border-방향-속성
  요소 테두리 선을 지정하는 기타 속성들

모서리 둥글게(border-radius)

• border-radius
  요소의 모서리를 둥글게 깎음

크기 계산(box-sizing)

• box-sizing
  요소의 크기 계산 기준을 지정

넘침 제어(overflow)

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

출력 특성(display)

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

투명도

• opacity
  요소 투명도

글꼴

• font-style
  글자의 기울기
• font-weight
  글자의 두께(가중치)
• font-size
  글자의 크기
• line-height
  한 줄의 높이, 행간과 유사
• font-family
  글꼴(서체) 지정

문자

• color
  글자의 색상
• text-align
  문자의 정렬 방식
• text-decoration
  문자의 장식(선)
• text-indent
  문자 첫 줄의 들여쓰기

배경

• background-color
  요소의 배경 색상
• background-image
  요소의 배경 이미지 삽입
• background-repeat
  요소의 배경 이미지 반복
• background-position
  요소의 배경 이미지 위치
• background-size
  요소의 배경 이미지 크기
• background-attachment
  요소의 배경 이미지 스크롤 특성