font 속성 - 글꼴 속성을 한꺼번에 지정하기
CSS에서 글꼴을 지정할 때 많은 속성들을 한꺼번에 설정하고 싶은 경우가 있을 수 있습니다. 이때 사용되는 속성이 font 속성입니다. font 속성은 다양한 글꼴 속성들을 함께 설정할 수 있으며, 간단하게 한 줄로 작성할 수 있는 장점이 있습니다.
1. font-family
font-family 속성을 사용하여 글꼴을 지정할 수 있습니다. 여러 글꼴 중에서 사용자 컴퓨터에 해당 글꼴이 설치되어 있으면 해당 글꼴을 사용하고, 없을 경우에는 다음 순서에 해당하는 글꼴이 fallback으로 사용됩니다.
font-family: "Arial", sans-serif;위 코드에서 "Arial" 글꼴이 사용자 컴퓨터에 설치되어 있으면 "Arial" 글꼴이 사용되며, 그렇지 않은 경우 sans-serif 글꼴이 사용됩니다.
2. font-size
font-size 속성을 사용하여 글꼴의 크기를 지정할 수 있습니다. 키워드 값 (ex: small, medium, large) 또는 절대 크기 단위 (ex: px, em)로 설정할 수 있습니다.
font-size: 16px;위 코드에서 글꼴의 크기가 16px로 설정됩니다.
3. font-weight
font-weight 속성을 사용하여 글꼴의 굵기를 설정할 수 있습니다. 숫자 값 (ex: 100, 400, 700) 또는 키워드 값 (ex: normal, bold)로 설정할 수 있습니다.
font-weight: bold;위 코드에서 글꼴의 굵기가 bold로 설정됩니다.
4. font-style
font-style 속성을 사용하여 글꼴의 스타일을 지정할 수 있습니다. 키워드 값 (ex: normal, italic, oblique)로 설정할 수 있습니다.
font-style: italic;위 코드에서 글꼴의 스타일이 italic로 설정됩니다.
5. font-variant
font-variant 속성을 사용하여 글꼴의 변형을 지정할 수 있습니다. 키워드 값 (ex: normal, small-caps)로 설정할 수 있습니다.
font-variant: small-caps;위 코드에서 글꼴의 변형이 small-caps로 설정됩니다.
마무리
font 속성을 사용하면 font-family, font-size, font-weight, font-style, font-variant 등 여러 글꼴 속성들을 한꺼번에 설정할 수 있습니다. 이를 통해 효율적으로 글꼴을 디자인할 수 있으며, 코드도 간결하게 작성할 수 있습니다.
댓글