그전에 알면 좋은 CSS 상속

• CSS 상속이란 상위 태그에서 지정한 스타일이 하위 태그에도 자동으로 적용되는 특징
  • 만약 p 태그를 감싸는 div 태그에 color 속성을 줬을때, p 태그에 별도로 color 속성이 지정되어있지 않다면 div 태그에서 지정한 color 속성이 자동으로 지정됨
  • 상속이 되는 속성과 되지않는 속성이 구분되어 있다.

color

• color 속성은 텍스트 요소의 색상을 지정하는 속성이다.
• css 기본 색상명 혹은 hex, rgb 등의 색상 코드를 사용하여 지정할 수 있다.

.element {
	color: blue; /* 글자 색상이 파란색으로 지정됨 */
}

font-size, font-weight, font-family

• font-size 속성은 텍스트 요소의 글씨 크기를 지정하는 속성
  • 픽셀 (px), rem 등의 다양한 단위 사용 가능
  • rem 단위란? HTML 문서의 기본 폰트 크기를 1rem으로 표현, 기본적으로 16px

.element {
	font-size: 16px;
}

.element2 {
	font-size: 1rem; /* 1rem당 16px */
}

• font-weight 속성은 텍스트 요소의 굵기를 지정하는 속성
  • normal, bold 등의 키워드로 지정 가능
  • 100 ~ 900 사이의 숫자를 통해서 굵기 정도를 지정 가능

.element {
	font-weight: bold;
}

.element2 {
	font-weight: 700; /* 기본적으로 700가 bold 속성은 동일한 굵기 */
}

• font-family 속성은 텍스트 요소의 폰트체를 지정하는 속성

• 지정하지 않으면 브라우저에서 기본으로 제공하는 폰트를 사용한다.

  • 브라우저 기본 글꼴: https://ranidiant.tistory.com/entry/CSS-국가별-웹-기본-글꼴
  • CSS에서 제공하는 기본 폰트들 (Generic fonts)

  이름	설명
  serif	삐침 있는 명조 계열의 글꼴
  sans-serif	삐침 없고 굵기가 일정한 고딕 계열의 글꼴
  monospace	글자 폭과 간격이 일정한 글꼴
  cursive	손으로 쓴 것 같은 필기 계열의 글꼴
  fantasy	화려한 글꼴

• 커스텀 폰트를 사용하기 위해서는 font-face를 정의해서 사용해야한다.
  • 최근 대부분의 사이트는 커스텀 폰트를 사용함

.element2 {
	font-family: 'Malgun Gothic', '-apple-system', 'Nanum Gothic';
}

@font-face {
	src: url('./assets/fonts/noto_sans_kr.woff2');
	font-family: 'Noto-Sans-KR-Regular';
	font-display: swap;
}

@font-face {
	src: url('./assets/fonts/noto_sans_kr_bold.woff2');
	font-family: 'Noto-Sans-KR-Bold';
	font-display: swap;
}

.element {
	font-family: 'Noto-Sans-KR-Regular';
}

line-height

• line-height 속성은 텍스트 줄 간의 간격을 지정할 수 있는 속성
• 픽셀(px) 단위를 사용하기 보다는, 1 ~ 2 사이의 숫자를 입력하여 지정해준다.
  • 픽셀을 사용할경우, 고정값이기에 변경되는 글씨 크기에 맞춰지지 않는다.
  • 1.5: 텍스트 크기의 1.5배 만큼의 줄 높이를 가진다.
• TODO: 구현 사진