[CSS]기초

컴포넌트 기능별로 묶어서 제작

화면의 구성이나 배치(레이아웃 디자인)

굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

글꼴

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

• 따옴표
• 글꼴이 존재하지 않거나, 지원하지 않는 경우 대비 fallback 글꼴 추가
• fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분, 순서대로 fallback 적용

무료 폰트 서비스 - https://fonts.google.com/

• 굵기 - font-weight
• 밑줄, 가로줄 - text-decoration
• 자간 - letter-spacing
• 행간 - line-height

---

정렬

가로로 정렬 - text-align. 유효한 값으로 left, right, center, justify(양쪽 정렬)

세로로 정렬 - vertical-align 속성이 있지만, 부모 요소의 display 속성이 반드시 table-cell

정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용 가능

---

사이즈

절대적인 크기로 정하는 경우 px

일반적인 경우 상대 단위인 rem

화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh

.scroll-container,
.snapped-area {
  max-width: 100vw;
  height: 100vh;
  font-size: 60px;
}

.scroll-container {
  overflow: auto;
  scroll-snap-type: y proximity;
}

.snapped-area {
  scroll-snap-align: end;
}

1vw 너비가 변동됨에 따라 보이는 영역 너비의 1/100, 1vh 는 보이는 영역 높이의 1/100을 뜻

overflow 컨텐츠가 블록의 서식보다 클 때

1. visible - 블록을 넘겨서 보이게
2. hidden - 숨김
3. scroll - 스크롤
4. auto

scroll-snap-type - 스냅포인트가 얼마나 엄격한지에 대한 정의

scroll-snap-align - 스냅 컨테이너의 스냅 위치 정렬(start, end, center)