개인 자료란 (JE)

  서버 커뮤니티

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

Yuuma_ 8412166dabab4c20b2c1e415f8e7a9ab

Profile

Html과 css

HTML 강좌? 2편

2020.08.10 조회 수 118 추천 수 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/150/925/003/262x150.crop.jpg?20241123005717

건축

응답하라 1988 ?

팀뉴일리시

2024-11-23

4

/files/thumbnails/761/908/003/262x150.crop.jpg?20241025153749

건축

서울 숭례문(崇禮門) 5

KHC

2024-10-25

2

/files/thumbnails/578/899/003/262x150.crop.jpg?20241010142350

건축

경주 월정교 1

KHC

2024-10-10

2

/files/thumbnails/219/899/003/262x150.crop.jpg?20241009200950

건축

송전탑+도시 2

dbasd12

2024-10-09

2

/files/thumbnails/246/898/003/262x150.crop.jpg?20241008102328

레드스톤

단다단 - 오토노케(オトノケ) | 마인크래프트 노트블럭 커버

노트블럭전문가

2024-10-08

1