2021. 10. 24. 01:03ㆍ나만의 웹사이트 만들기/CSS 정복하기
CSS기본기 익히기: 중요한 폰트 태그 정리
폰트가 무엇이냐에 따라 글의 성격이 달라질 수 있습니다. 폰트뿐 아니라 색과 자간, 정렬 등 다양한 요소로 화면의 분위기를 바꿀 수 있습니다. 그만큼 중요한 스타일링인 폰트 태그를 본 포스팅에서 정리해봤습니다.
폰트 스타일링
01. 폰트 태그 정리표
| 속성명 | 속성값 | 설명 |
| font-weight | normal | 폰트를 보통 굵기로 표시합니다. |
| bold | 폰트를 굵게 표시합니다. | |
| font-size | px | 픽셀 단위로 폰트 크기를 설정합니다. |
| rem | 최상위 부모인 <html> 태그를 기준으로 폰트 크기를 설정합니다. | |
| em | 부모 요소를 기준으로 폰트 크기를 설정합니다. | |
| font-family | "폰트명" | 폰트의 모양을 설정합니다. |
| color | 영문명 | 폰트 색상을 영어 색상명으로 표기합니다. |
| #000000 | 폰트 색상을 16진수로 표기합니다. | |
| rgb(0,0,0) | 폰트 색상을 RGB로 표기합니다. | |
| line-height | 실숫값 | 줄 간격을 폰트 크기에 맞추어 실수 배율로 지정합니다. |
| 픽셀값 | 줄 간격을 고정된 px단위로 지정합니다. | |
| text-align | left | 텍스트를 왼쪽 방향으로 정렬합니다. |
| center | 텍스트를 중앙 정렬합니다. | |
| right | 텍스트를 오른쪽 방향으로 정렬합니다. | |
| justify | 텍스트를 양쪽 정렬합니다. | |
| letter-spacing | px | 텍스트 간격을 px단위로 지정합니다. |
대부분 CSS 선택자를 사용해 태그를 선택하고 속성을 위 표값을 참고해 부여하면 됩니다.
선택자를 사용해 태그를 선택하는 다양한 방법은 이전 포스팅에서 정리해 둔 적 있었습니다.
2021.10.20 - [나만의 웹사이트 만들기/CSS 정복하기] - [03-1] HTML에서 CSS연결하기, 선택자 종류
[03-1] HTML에서 CSS연결하기, 선택자 종류
CSS는 Cascading Style Sheet의 약어로 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소입니다. HTML은 앞서 본 것처럼 텍스트, 이미지, 표같이 정보위주를 다룬다면, CSS는 색상이나 이미지 크기나 위치,
aram5.tistory.com
위 표의 태그들 중 이해가 어렵거나 보충설명이 필요한 것을 알아보도록 하겠습니다.
02. font-size (rem 단위)
px단위가 있는데 굳이 왜 rem을 쓰는지 궁금할 수 있습니다. 몇 글자의 크기를 수정할 때는 상관없지만 실제 개발할 때는 다양한 크기의 글자들이 많이 적혀있는데 수정이 필요할 때 하나씩 일일이 고치다간 컴퓨터를 주먹으로 부셔버릴 수 있기 때문입니다. 컴퓨터를 지키긴 위해선 우리는 rem 단위를 사용하기로 했습니다.
rem단위를 쓰려면 먼저 html 요소에서 기준이 될 폰트 크기를 아래처럼 설정해야 합니다.
html {
font-size:16px;
}
그런 다음 각 태그들에 rem값으로 크기를 정해줍니다. 3rem은 html 요소 기준으로 3배 키우라는 뜻입니다. 즉, html은 16px이니 3rem은 48px이 되는 것이죠. rem 단위를 사용하면 html 폰트 사이즈만 수정해 전체 폰트 크기를 효율적으로 관리할 수 있습니다.
※참고로 em 단위는 html 기준이 아닌 부모요소를 기준으로 폰트 크기를 지정하는 것인데, 이 단위는 rem에 비해 실무에서 자주 사용하지 않습니다.
단위를 환산해주는 사이트도 있으니 활용해도 좋을거 같습니다.
PXtoEM.com: PX to EM conversion made simple.
What is an EM? Wikipedia puts it well: "An em is a unit of measurement in the field of typography, equal to the size of the current font." If your font-size is at 16 pixels, then 1em = 16px For more information visit Wikipedia and Mozilla MDN. What is the
pxtoem.com
03. font-family
서체를 바꾸는 속성으로 코드는 이러합니다.
p {
font-family: "돋움";
}
h1 {
font-family: arial;
}이런식으로 서체 이름을 기입해주면 간단하게 적용가능합니다. 다만, 한글서체는 큰따옴표로 감싸서 표기해줘야합니다. 그리고 자신의 컴퓨터에만 있는 폰트(예를들어 배달의 민족 폰트, 나눔 고딕 등)를 사용하는 것보다 시스템 폰트(돋움, 굴림, arial, serif 등)를 사용하는 것을 권장합니다. 시스템 폰트란 웹 브라우저를 실행하는 컴퓨터에 기본으로 내장된 폰트로 다른 컴퓨터에서 봤을 때도 똑같은 폰트로 볼 수 있습니다. 개인적으로 굴림을 좋아하지 않는 저로선 다른 폰트를 사용하고 싶은데요. 그래서 구글 웹 폰트를 사용합니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
구글 폰트 사이트로 들어가서 원하는 폰트를 고르고, @import를 클릭합니다. 그런 다음 2번 항목은 CSS파일에 붙여넣고 3번 항목은 선택한 태그에 속성으로 붙여줍니다.
좀 더 세련되고 내용과 적절한 서체로 바뀐 모습입니다. (편--안)
04. 텍스트 줄 간격 바꾸기 (행간)
font-size는 텍스트 자체의 높이를 얘기하는 것이고 line-height는 줄 간격의 높이(행간)를 말하는 것입니다.
이 때 사용하는 속성값은 두가지가 있습니다.
- 실숫값: 줄 간격을 폰트 크기에 맞추어 실수 배율로 지정합니다.
- 픽셀값: 줄 간격을 고정된 px단위로 지정합니다.
05. 웹 폰트 아이콘 적용하기(폰트 어썸)
폰트 어썸 웹 사이트에서는 웹 폰트로 적용할 수 있는 다양한 아이콘을 제공합니다. 회원가입을 해야 사용할 수 있고 무료회원으로 아이콘 코드를 사용할 수 있습니다.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
회원가입을 했다면 연결코드를 알기 위해 먼저 프로필로 들어가 Kits 메뉴를 선택합니다.
그 다음 설정 아이콘을 누르고
아래처럼 설정을 해주고 저장합니다.
다시 위로 올라가 'How to Use'를 클릭하면
이런 창이 뜨게 됩니다. 코드를 복사해서 HTML파일의 <title>태그 안에 붙여넣기 해주면 끝!
그럼 이제부터 어떻게 아이콘을 사용하는지 알아보겠습니다.
먼저 HTML파일에서 폰트 어썸의 전용 태그인 <i>로 작성하는데 <i>태그에 클래스 명을 fa-를 입력하면 아이콘 이미지가 알파벳 순으로 쫘르륵 뜹니다. 화살표 키로 내려가면서 확인하고 원하는 아이콘을 고르면 됩니다.
※참고로 아이콘 미리보기를 하려면 'Font Awesome Auto-complete & preview' 확장 기능을 사용해야합니다. 관련 글은 아래 포스팅을 보시면 됩니다.
2021.10.14 - [나만의 웹사이트 만들기/VScode] - [01] 웹 페이지 만들기의 첫 단추: 준비 및 세팅
[01] 웹 페이지 만들기의 첫 단추: 준비 및 세팅
비전공자로서 혹은 디자이너로서 코딩을 해내기란 쉽지 않을 것이라 예상할 것입니다. 처음 "Hello world"를 썼을 때만 기억이 나는 사람들이 많을거라 생각합니다. 코딩을 제대로 공부하지 않아
aram5.tistory.com
이렇게 저는 책 아이콘을 선택했고 CSS에서 <i>태그를 선택한 후 클래스 선택자를 사용해 속성을 부여해줍니다. 이때 제가 해보니 html의 fas fa-book 그대로 선택하지 않고 fa-book만 선택해야 적용이 되더군요. 왜 그런지 모르겠지만 아시는 분이 있다면 댓글로 말씀해주시면 감사하겠습니다!
또한, 아이콘을 폰트로 인식하기 때문에 색상과 크기도 지정할 수 있습니다.
폰트태그도 정리하다보니 글이 길어졌네요. CSS로 본격적으로 스타일링을 하는 느낌이 들기도 하고 다양한 폰트를 지정할 수 있어 재밌는 시간이었습니다. 다음 포스팅에서는 가장가장 중요하면서 헷갈릴 수 있는 영역별 크기를 정하는 법을 알아보도록 하겠습니다. margin, padding 부터 블록요소와 인라인 요소 등 화면 구성의 기본기를 다져보겠습니다!
'나만의 웹사이트 만들기 > CSS 정복하기' 카테고리의 다른 글
| [03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리! (0) | 2021.11.10 |
|---|---|
| [03-4] CSS 기본기 익히기: padding, margin (0) | 2021.11.04 |
| [03-3] CSS 기본기 익히기: 단위 속성 한 방에 정리! (px, %, vh, vw, vmin, vmax) (0) | 2021.10.28 |
| [03-1] HTML에서 CSS연결하기, 선택자 종류 (0) | 2021.10.20 |