CSS의 font 정리
CSS의 폰트에 대해서 알아봅시다!
CSS(Cascading Style Sheets)를 정의하는 방법으로는 “내부 스타일시트”, “외부 스타일시트”, “인라인 스타일시트” 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하지만 간단한 스타일은 내부 스타일만으로도 사용 할 수 있습니다.
1. font-family
1
font-family: "적용 해야하는 폰트 이름";
font-family 속성은 웹 페이지에 사용할 글꼴을 지정합니다. 이 속성은 쉼표로 구분된 글꼴 이름 목록을 받으며, 브라우저는 목록에서 처음 발견된 설치된 글꼴을 사용합니다. 설치되지 않은 글꼴의 경우, 다음 글꼴로 넘어갑니다.
2. font-size, 단위의 고찰
1
2
font-size: 16px;
font-size: 15rem;
font-size 속성은 글자의 크기를 지정합니다. 단위로는 px(픽셀), em(상위 요소의 글꼴 크기에 대한 배수), rem(루트 요소의 글꼴 크기에 대한 배수), % (백분율 단위) 등이 있습니다.
px(픽셀)
정의: 픽셀은 화면 상에서의 한 점을 의미합니다. px 단위는 고정된 크기 단위로, 대부분의 화면에서 일관성 있는 크기를 제공합니다.
특징: 픽셀은 가장 기본적이고 이해하기 쉬운 크기 단위입니다. 하지만, 다양한 디스플레이 크기와 해상도에서 사용자의 접근성을 고려할 때 유연성이 떨어질 수 있습니다.
em
정의: em 단위는 상위 요소의 font-size를 기준으로 합니다. 예를 들어, 상위 요소의 font-size가 16px일 경우, 1em은 16px과 같습니다.
특징: em 단위는 상속을 통해 디자인의 일관성을 유지하면서도, 상위 요소의 크기에 따라 동적으로 조정되기 때문에 유연한 디자인을 가능하게 합니다.
rem
정의: rem 단위는 문서의 루트 요소(<html>)의 font-size를 기준으로 합니다. 이는 모든 rem 단위가 일관된 참조점을 공유한다는 것을 의미합니다.
특징: rem 단위는 전체 문서의 기본 글꼴 크기를 기준으로 하기 때문에, 컴포넌트 간 크기의 일관성을 유지하면서도 전체적인 크기 조정이 용이합니다.
% (백분율)
정의: 백분율 단위는 상위 요소의 font-size에 대한 비율로 크기를 정의합니다.
특징: 백분율 단위 역시 em 단위와 유사하게 상위 요소를 기준으로 하여 유연성을 제공합니다. 이는 상위 요소의 크기에 따라 조정되므로, 상속을 통한 디자인의 일관성을 유지할 수 있습니다.
3. font-weight
1
2
font-weight: bold;
font-weight: 700;
font-weight 속성은 글자의 굵기를 지정합니다. 이 속성은 normal, bold, bolder, lighter 또는 100부터 900까지의 숫자 값을 사용할 수 있습니다.
키워드 값
normal: 기본 굵기를 의미하며, 보통 400과 동일합니다.
bold: 더 굵은 글꼴을 의미하며, 보통 700과 동일합니다.
bolder와 lighter: 각각 상위 요소에 비해 더 굵거나 더 가는 굵기를 설정합니다. 상위 요소의 font-weight 값에 상대적입니다.
숫자 값
ont-weight 속성은 100부터 900까지의 백단위 숫자 값을 사용할 수 있습니다. 이 값들은 더 가는(100) 것부터 더 굵은(900) 것까지를 나타냅니다.
숫자 값으로는 보통 400 (또는 normal), 700 (또는 bold)이 가장 일반적으로 사용됩니다.
일부 글꼴은 중간 단계의 굵기(예: 500, 600 등)도 지원할 수 있으며, 디자인에 따라 세밀한 조정이 가능합니다.
4. font-style
1
font-style: italic;
font-style 속성은 해당 텍스트를 기울임꼴로 설정합니다. italic 스타일은 텍스트에 디자인적 변화를 주거나, 특정 부분을 강조하는 용도로 많이 사용됩니다.
normal
이 값은 텍스트를 기본 스타일로 설정합니다. font-style의 기본값이며, 텍스트가 기울지 않은 상태를 의미합니다.
italic
italic 값은 텍스트를 기울임꼴로 표시합니다. 이 스타일은 주로 강조하고자 하는 단어나 문구, 인용구 등에 사용되어 독자의 주목을 끌거나, 디자인적 요소로 활용됩니다.
oblique
oblique 값 역시 텍스트를 기울게 합니다. 하지만 italic과는 달리, 보다 경사진 스타일을 나타냅니다. 실제로 많은 브라우저와 환경에서 italic과 oblique 사이에 뚜렷한 차이가 없을 수 있으며, 이는 사용되는 글꼴과 브라우저의 처리 방식에 따라 달라질 수 있습니다.
5. font-variant
1
font-variant: small-caps;
font-variant 속성은 텍스트의 소문자를 작은 대문자(small-caps)로 표시할지 여부를 지정합니다.
6. line-height
1
2
line-height: 1.5;
line-height: 2em;
line-height 속성은 줄 간격을 지정합니다. 단위 없이 숫자를 사용하면, 그 숫자는 현재 font-size에 대한 배수가 됩니다. px, em, % 등의 단위도 사용할 수 있습니다.
7. font
1
font: italic small-caps bold 12px/1.5 "적용해야하는 폰트", serif;
font 속성은 글꼴 관련 스타일을 단축해서 지정할 수 있는 shorthand 속성입니다. 이 속성을 사용하여 font-style, font-variant, font-weight , font-size/line-height , font-family 를 한 번에 지정할 수 있습니다.
8. 웹 폰트
1
2
3
@font-face {
font-family: "MyWebFont"; /* 사용할 글꼴의 이름을 설정 */
src: url("mywebfont.woff2") format("woff2"); /* 글꼴 파일의 위치와 포맷을 지정 */}
웹 폰트는 웹 페이지에 사용자의 시스템에 설치되어 있지 않은 글꼴을 포함시킬 수 있게 해줍니다. Google Fonts 같은 서비스를 통해 쉽게 사용할 수 있으며, @font-face 규칙을 사용하여 직접 호스팅할 수도 있습니다.
속성 설명
font-family: 이 속성은 웹 페이지에서 이 글꼴을 참조할 때 사용할 이름을 지정합니다. 이 이름을 사용하여 CSS에서 font-family 속성을 통해 해당 글꼴을 호출할 수 있습니다.
src: 이 속성은 글꼴 파일이 위치한 URL을 지정합니다. url() 함수를 사용하여 파일의 경로를 지정하고, format() 함수를 사용하여 글꼴 파일의 형식(예: woff2, woff, truetype 등)을 명시할 수 있습니다. 웹 성능과 호환성을 고려하여 여러 형식의 글꼴 파일을 순서대로 나열할 수도 있습니다.
웹 폰트 포맷
WOFF2 (Web Open Font Format 2): 최신 웹 폰트 포맷으로, 압축이 잘되어 있어 파일 크기가 작고, 로딩 속도가 빠르며, 대부분의 최신 브라우저에서 지원됩니다.
WOFF (Web Open Font Format): WOFF2보다 약간 오래되었지만, 여전히 널리 사용되고 있으며, 좋은 압축률과 호환성을 제공합니다.
TTF (TrueType Fonts) 및 OTF (OpenType Fonts): 구형 브라우저에서 주로 사용되지만, 파일 크기가 더 크고, WOFF나 WOFF2에 비해 압축률이 낮습니다.
9. color, 색상 코드 고찰
| 코드 | 색상 | 설명 |
|---|---|---|
| color | red | 색상 이름을 사용한 지정 |
| color | #ff0000 | 16진수 코드를 사용한 지정 |
| color | rgb(255, 0, 0) | RGB 값을 사용한 지정 |
| color | rgba(255, 0, 0, 0.5) | RGBA 값을 사용해 색상과 투명도를 지정 |
| color | hsl(0, 100%, 50%) | HSL 값을 사용한 지정 |
| color | hsla(0, 100%, 50%, 0.5); | HSLA 값을 사용해 색상과 투명도를 지정 |