개인 자료란 (JE)

  서버 커뮤니티

Profile 주원Love 디벨로퍼 인증 개발자

Yuuma_ 8412166dabab4c20b2c1e415f8e7a9ab

Profile

Html과 css

HTML 강좌? 2편

2020.08.10 조회 수 111 추천 수 0

안녕하세요 

이번엔 자신의 사이트에 폰트를 적용하는 방법을 알려드리도록 하겠습니다.

일단 기본적인 테스트 사이트를 제작해보겠습니다.

59db24b42b1d5ae661e7d84c1770bd38.PNG

이런식으로 임시 사이트를 제작했습니다.

이 상태에서 사이트를 들어가보면,

d42ba3e4b2512405e9f69a093952819e.PNG

이런식으로 잘 나옵니다.

여기서 폰트를 적용하려면, 구글 폰트를 활용하여 넣어주겠습니다.

3d9f8de9784d7cfe7ca5c05d12dca23e.PNG

구글폰트로 들어가주어, 원하는 폰트를 찾습니다.

c9be5d5789dbae7f6c5c8782dc21f8dc.PNG

저는 해당 폰트로 해보겠습니다.

91a5b85b0fea0063c1d660daa4e4de6b.PNG

Select this style 를 클릭해주시고, 옆에 뜬 화면에서 Embed 를 선택합니다.

그 후 <link> 의 탭에서 <link~> 를 복사해줍니다.

aa76114b71c8080c02a6c2d52cdc66d4.PNG

이렇게 링크를 넣어주고,

de5eedd01831f33fdfff98a52aedafb0.PNG

만들어 놨던 파일에 css 파일을 하나 만들어줍니다.

74e6e0f0d481bc1a59baab805016a2cd.PNG

css 파일에 아까 폰트에서 봤던 link 밑에 있던 문구를 넣어줍니다.

그리고 한번 더 html 파일로 이동하여, 

3165e05e461dded473d0da7acc8fccc9.PNG

이런식으로 연결해줍니다.

f84c80893752cb0beef1f134cb6a5562.PNG

자, 이런식으로 폰트가 적용되었습니당~

Warning
댓글이 없습니다.

새로운 댓글을 등록해 주세요!

뉴스 및 창작물
/files/thumbnails/288/791/003/262x150.crop.jpg?20240602150002

아티클

《까다로운 시련》 업데이트 날짜 공개 및 정보

학교가기싫다

2024-06-02

0

/files/thumbnails/841/773/003/262x150.crop.jpg?20240526120908

레드스톤

마인크래프트 노트블록버전 『 봄을 고하다 (春を告げる) 』 [더블옥타브 버전]

노트블럭전문가

2024-05-26

0

/files/thumbnails/712/796/003/262x150.crop.jpg?20240525085438

레드스톤

마인크래프트 노트블록으로 만든 『 봄을 고하다 (春を告げる) 』 1

Sonttukk

2024-05-25

0

/files/thumbnails/268/789/003/262x150.crop.jpg?20240515192032

레드스톤

벌레먹은 돌 빠르게 제거하는 법

GlassesFilm

2024-05-15

0

/files/thumbnails/797/788/003/262x150.crop.jpg?20240515090924

건축

마인크래프트로 구현한 카르카손 보드게임

Warak

2024-05-15

1