개인 자료란 (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/115/774/003/262x150.crop.jpg?20240424195207

업데이트

마인크래프트 1.20.5 정식 업데이트

학교가기싫다

2024-04-24

0

/files/thumbnails/762/770/003/262x150.crop.jpg?20240418073724

레드스톤

T.B.H (고민중독) | 노트블럭 버전 | NoteBlock Cover [한국어 영어 중국어 가사 추가]

노트블럭전문가

2024-04-18

0

/files/thumbnails/218/767/003/262x150.crop.jpg?20240412130213

레드스톤

우리의 꿈 - 원피스 오프닝

노트블럭전문가

2024-04-12

0

/files/thumbnails/505/766/003/262x150.crop.jpg?20240411122306

레드스톤

기동전사 건담 수성의 마녀 | 노트블럭 커버 1

노트블럭전문가

2024-04-11

1

/files/thumbnails/932/765/003/262x150.crop.jpg?20240410124459

레드스톤

마인크래프트 노트블록으로 만든 『 밤양갱 (Bam Yang Gang) 』

노트블럭전문가

2024-04-10

0