CSS 상속
이란 상위 태그에서 지정한 스타일이 하위 태그에도 자동으로 적용되는 특징
p 태그
를 감싸는 div 태그
에 color
속성을 줬을때, p 태그에 별도로 color 속성이 지정되어있지 않다면 div
태그에서 지정한 color
속성이 자동으로 지정됨color
속성은 텍스트 요소의 색상을 지정하는 속성이다.hex
, rgb
등의 색상 코드를 사용하여 지정할 수 있다..element {
color: blue; /* 글자 색상이 파란색으로 지정됨 */
}
font-size
속성은 텍스트 요소의 글씨 크기를 지정하는 속성
픽셀 (px)
, rem
등의 다양한 단위 사용 가능rem
단위란? HTML 문서의 기본 폰트 크기를 1rem
으로 표현, 기본적으로 16px
.element {
font-size: 16px;
}
.element2 {
font-size: 1rem; /* 1rem당 16px */
}
font-weight
속성은 텍스트 요소의 굵기를 지정하는 속성
.element {
font-weight: bold;
}
.element2 {
font-weight: 700; /* 기본적으로 700가 bold 속성은 동일한 굵기 */
}
font-family
속성은 텍스트 요소의 폰트체를 지정하는 속성
지정하지 않으면 브라우저에서 기본으로 제공하는 폰트를 사용한다.
이름 | 설명 |
---|---|
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
속성은 텍스트 줄 간의 간격을 지정할 수 있는 속성픽셀(px)
단위를 사용하기 보다는, 1 ~ 2 사이의 숫자를 입력하여 지정해준다.