HTML/CSS/JS Ch 8. CSS 속성(Part1)

---

박스모델

• width, height
  요소의 가로/세로 너비
  기본값 : auto
  단위 : px, em, vw ...
  
  
• max-width, max-height
  요소가 커질 수 있는 최대 가로/세로 너비
  기본값 : none
  단위 : px, em, vw ...
  
  
• min-width, min-height
  요소가 작아질 수 있는 최소 가로/세로 너비
  기본값 : 0
  단위 : px, em, vw ...

---

단위

단위	이름
px	픽셀
%	상대적 백분율
em	요소의 글꼴 크기
rem	루트 요소의 글꼴 크기
vw	viewport 가로 너비의 백분율
vh	viewport 세로 너비의 백분율

---

여백

• margin
  요소의 외부 여백을 지정하는 단축 속성
  음수 사용 가능
  기본값 : 0
  auto, 단위, % 가능
  margin: top,right,bottom,left;
  margin: top,bottom left,right; -> 십자가
  margin: top left,right bottom; -> 상중하
  margin: top right bottom left; -> 시계방향

• padding
  요소의 내부 여백을 지정하는 단축 속성
  기본값 : 0
  auto, 단위, % 가능
  여백이 생긴만큼 요소의 크기가 커짐
  padding: top,right,bottom,left;
  padding: top,bottom left,right; -> 십자가
  padding: top left,right bottom; -> 상중하
  padding: top right bottom left; -> 시계방향

• border
  요소의 테두리 선을 지정하는 단축 속성
  테두리 만큼 요소의 크기가 커짐

  border: border-width border-style border-color;

  기본값: medium none black
  border-width: 방향성
  border-style: none, solid, dashed(파선)
  border-color: 색상

• border-raidus

border-raidus: 10px;
border-raidus: 0 10px 0 0;
오른쪽 상단 모서리 (좌측 상단 모서리부터 시계방향)

---

색상표현

• 색상이름: red, blue, yellow...
• Hex: 16진수 색상 #FFFFFF ...
• RGB: rgb(255, 255, 255)
• RGBA: RGB+투명도 rgb(0, 0, 0, 0.5)

---

• box-sizing
  요소의 크기 계산 기준을 지정
  기본값: content-box
  content-box: 요소의 내용으로 계산
  border-box: 요소의 내용 + padding +border로 계산
  

---

• overflow
  요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 단축 속성
  기본값: visible
  visible: 넘친 내용을 그대로 보여줌
  hidden: 넘친 내용을 잘라냄
  scroll: 스크롤 생성
  auto: 넘친 축만 스크롤 생성

---

• display
  요소의 화면 출력 특성
  기본값(요소별): block, inline, inline-block
  flex, grid, none(사라짐), etc...

---

• opacity
  요소의 투명도
  기본값: 1 (불투명)
  (투명)0~1(불투명)

---

font

• font-style
  글짜의 기울기
  기본값: normal
  italic, oblique

• font-weight
  글짜의 두께
  기본값: normal(400)
  bold, 100 ~ 900

• font-size
  글짜의 크기
  기본값: 16px
  px, em, rem etc...

• line-height
  한 줄의 높이, 행간과 유사
  요소의 글꼴 크기의 배수로 지정

• font-family
  font-family: 글꼴1, 글꼴2, ... 글꼴계열;
  글꼴계열: serif, sans-serif, monospace, cursive, fantasy

---

문자

• color
  글자의 색상
  기본값: rgb(0,0,0)

• text-align
  문자의 정렬방식
  기본값: left
  right, center

• text-decoration
  기본값: none(장식없음)
  underline, overline, line-through

• text-indent
  기본값: 0 (들여쓰기 없음)
  음수를 이용해서 outdent(내여쓰기 가능)

---

배경

• background-color
  배경 색상
  기본값: transparent(투명함)

• background-image
  배경 이미지 삽입
  url("img_path")

• background-repeat
  기본값: repeat(수직, 수평 반복)
  repeat-x, repeat-y, no-repeat

• background-position
  기본값: 0% 0%(왼쪽상단)
  top, bottom, left, right, center, top right ...
  px, em, rem... (x축, y축)

• background-size
  요소의 배경 이미지 크기
  기본값: auto(이미지의 실제 크기)
  px, em, rem...
  cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤 (이미지가 잘림)
  contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤 (이미지가 다 보임)

• background-attachment
  요소의 배경 이미지 스크롤 특성
  기본값: scroll(이미지가 요소를 따라 같이 스크롤)
  fixed: viewport에 고정 (스크롤 X)

---

배치

• position
  요소의 위치 지정 기준
  기본값: static(기준없음)
  relative: 요소 자신을 기준
  absolute: 위치 상 부모 요소를 기준
  -> 부모 요소의 position이 relative로 지정되어 있어야 함, 계속해서 순차적으로 상위요소를 찾다가 없으면 viewport를 기준으로 배치됨
  fixed: viewport 기준
  sticky: 스크롤 영역 기준
  
  absolute와 fixed가 지정된 요소는, display 속성이 block으로 변경된다
  
  

• Stack order
  요소가 사용자와 더 가깝게 있는지 결정
  1. 요소에 position 속성의 값이 있는 경우 위에 쌓임(static 제외)
  2. 1번 조건이 같은 경우, z-index 속성의 값이 높을 수록 위에 쌓임
  3. HTML의 다음 구조일 수록 위에 쌓임

• z-index
  요소의 쌓임 정도를 지정
  기본값: auto(0,부모요소와 같은 쌓임 정도)