웹개발 프로젝트(CSS/HTML)-#3 웹폰트
오늘은 웹페이지를 좀더 다채롭게 꾸미기 위한 웹폰트에 대해서 알아보겠다.
웹폰트는 워드나 파워포인트와 같은 프로그램에서의 기능과 달리 폰트 설치없이 사용할수 있다는 장점이 있다.
물론 제공되는 폰트를 사용하기위해서는 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파일을 인식할수있는것이다.
이 코드를 추가 안해줘서 계속 웹페이지가 내 예상과는 다르게 오류가 났다.
완성된 웹페이지는
이렇게 된다