베짱이와 노는 개미

웹개발 프로젝트(CSS/HTML)-#3 웹폰트 본문

웹개발(CSS,HTML)프로젝트 (feat.모각코)

웹개발 프로젝트(CSS/HTML)-#3 웹폰트

jsistop16 2021. 8. 11. 20:00

오늘은 웹페이지를 좀더 다채롭게 꾸미기 위한 웹폰트에 대해서 알아보겠다.

 

웹폰트는 워드나 파워포인트와 같은 프로그램에서의 기능과 달리 폰트 설치없이 사용할수 있다는 장점이 있다.

 

물론 제공되는 폰트를 사용하기위해서는 https://fonts.google.com/ 에서 활용해야한다.

 

사용하고싶은 글씨체를 클릭한후 오른쪽 탭에 Use on the web을 보자

 

글자체 사이트

Use on the web을 보면 link인지 import인지 선택하는것이 나온다.

 

link를 선택하든 import를 선택하든 그 밑에 있는 코드를 추가해주면 되는것이다

 

1)link를 선택한경우

html 파일 내 head 태그 안에 표시된 부분을 복사하여 붙여넣는다

 

2)import를 선택한 경우

 

2-1)css파일이 html 내부에 있다면 <style>태그안에 넣어주면되고

 

2-2)css파일이 외부에 있다면 그 css파일에 넣어주면 된다.

 

하나씩 알아보겠다.

 

1)

link로 사용하는경우

->

링크 코드를 <head> 태그 안에 복붙하고 밑에있는 css코드는

 

css파일에 복붙해주면 된다.

 

이렇게 css파일에 따로 코드를 추가해주고(dokdo라는 클래스로 활용할 예정)

 

html파일에서는 

 

이렇게 <head>태그 안에 복붙만 해주면 

 

dokdo라는 클래스를 설정해준 태그에 대해서 글자체가 적용된다.

 

2-1)import <style>태그 안에 넣는 방식

->

위의 글자체 사이트 캡쳐 사진을 보면 import방식 코드를 보면 <style> 태그로 묶여 있다.

 

이 코드를 전체 복사해서 html 파일에 복붙하면 알아서 <style>태그가 생기는 것이다.

 

그리고 html에 실제로 적용하는 방식은 1)방식과 같다.

 

2-2) import / 외부 css파일에 붙여넣는경우

->

제일 많이 사용하는 방식이 아닐까 싶은데

 

css파일에 css코드에서 <style>태그를 제외한

이 부분만 추가해주면 된다.

 

그 후 과정은 동일하다(클래스를 만들어서 html파일로 가져와 사용하기)

 

지금까지 설명한 3가지 방식은 모두 다르지만 공통적인 부분이있다.

 

매우 중요한 부분이라고 생각한다.

 

<link rel="stylesheet" href="./static/style.css"/>

 

이 코드를 입력해줘야한다

 

html파일에 <head>태그안에 추가해줘야 외부에서 설정된 css파일을 인식할수있는것이다.

 

이 코드를 추가 안해줘서 계속 웹페이지가 내 예상과는 다르게 오류가 났다.

 

완성된 웹페이지는 

 

이렇게 된다

'웹개발(CSS,HTML)프로젝트 (feat.모각코)' 카테고리의 다른 글

웹개발 프로젝트(CSS/HTML)-#5 position속성  (0) 2021.08.13
웹개발 프로젝트(CSS/HTML)-#4 <div> <span>태그  (0) 2021.08.13
웹개발 프로젝트(CSS/HTML)-#2 CSS적용해보기  (0) 2021.08.11
웹개발 프로젝트(CSS/HTML)-#1.CSS  (0) 2021.08.10
웹개발 프로젝트(CSS/HTML)-#0.모각코 8월 과정  (0) 2021.08.10
'웹개발(CSS,HTML)프로젝트 (feat.모각코)' Related Articles more