HTML5 & CSS3 : Google Font 적용하는 방법

2022.10.14.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 21

---

Review

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 21

<Font Awesome Font 적용>

 

- font-family: 글꼴 정하는 속성

- font-style : 글자 모양 정하는 속성 / italic : 기울임체

- font-variant :소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성

- font-weight : 글자 굵기를 정하는 속성

 

 

Font Awesome

Font Awesome

 

위 사이트에 접속한다.

 

 

메인 화면에 보이는 Start for Free 를 클릭한다.

 

 

Download를 클릭한다.

 

 

Free For Web을 클릭해 다운로드한다.

 

다운로드를 하고 내가 VScode를 사용하고 저장하고 있는 폴더에 압축을 푼다.

그러면 'fontawesome-free-6.2.0-web' 이라는 폴더가 생성되는데 클릭하면,

'webfont' 라는 폴더와 'css' 라는 폴더가 있는데 2개의 폴더가 제일 중요하다.

 

다운받은 폰트를 웹 화면에 적용하는 데는 3가지 방법이 있는데, 

나는 그 중 2개의 방법만 정리해보려고 한다.

세번째 방법은 너무 어려웠다...ㅠ_ㅠ

 

1. 첫번째 방법

 

첫번째 방법

 

첫번째 방법은 meta 태그 밑에 link rel 태그를 작성해 불러오는 방법이다.

 

<link rel="stylesheet" href="../fontawesome-free-6.2.0-web/css/all.css">

이렇게 작성하여 아까 저장한 경로를 불러온다.

 

 

fontawesome 홈페이지에서 facebook icon을 검색하면 오른쪽 상단에 'f09a' 라고

문자 코드가 나타난다. 그걸 복사해서 VScode로 돌아온다.

 

그러고 나서 h1 태그에다가 붙여넣기한다.

그런데 여기서 중요한 점은 그냥 'f09a' 라고 하면 h1 태그에 넣고 싶은 문구로 나타나기

때문에, facebook 아이콘이 나타나게 하려면 '&#x' 라는 코드를 앞에 함께 넣어야 한다.

ex) $#xf09a

 

다음은 style 태그에서 @font-face 라고 작성한 뒤,

font-family를 brands 라고 임의로 정해주고,

src: url() 이라고 적고 괄호 안에 내가 적용하고 싶은 폰트의 경로를 작성한다.

뒤에 format 이라고 적고 따옴표를 적은 후 폰트 네임을 간략하게 작성한다.

 

h1 style 태그에서 font-family를 아까 임의로 정한 이름 'brands'를 적고 나서

확인해보면 아이콘이 나타난다.

 

첫번째 방법 완성

 

2. 두번째 방법

 

두번째 방법

 

두번째 방법은 첫번째 방법처럼 link 태그를 이용해 불러오기를 한다.

 

 

다음은 아까처럼 fontawesome 홈페이지에서 'house' 라는 아이콘을 검색한 뒤,

나타나는 코드를 복사한다.

 

VSCode로 돌아와 h1 태그를 이용해 옆에 그대로 붙여넣기한다.

 

두번째 방법 완성

그러면 완성이다. 

 

두번째 방법이 훨씬 간단하다.

 

---

 

<Animating Icons 적용>

 

: Animating Icons | Font Awesome Docs

Animating Icons

 

위의 사이트로 접속한다.

 

 

 

접속해 스크롤을 내리면서 보면 이런 화면이 나타난다.

 

움직이는 Animating Icon의 코드를 공유해놓았다.

 

 

드래그하여 복사해서 VSCode로 들어가 body 태그에 붙여넣기 한다.

그러고 나서 meta 태그 밑에 link rel 태그를 이용해 아까 전 fontawesome 홈페이지에서

web용으로 다운 받았던 폴더의 경로를 작성한다.

'fontawesome-free-6.2.0-web' 라는 폴더 안에 'css' 라는 폴더가 있고

그 안에 모든 css 코드가 적혀있는 'all.css' 파일이 있다.

최종적으로 'all.css' 파일을 불러오면 된다.

 

요약하자면, fontawesome-free-6.2.0-web > css > all.css 의 파일을 불러오기 하면 된다.

따로 style 태그는 작성할 필요가 없이 간단하다.

 

그러면 위와 같이 나타난다. 완성 !

움직이고 있는 아이콘이지만 스크린샷이라 움직이는 것처럼 보이지 않는다 ㅠ_ㅠ

 

 

 

 

같은 방식으로 다른 Animating icon들의 코드도 복사해 body 태그에 붙여넣기 했다.

 

그러면 완성이다 !

 

 

---

 

<Google icon 적용>

 

Browse Fonts - Google Fonts

Google Fonts

 

위 사이트에 접속해 icons를 클릭하고 '♡' 아이콘을 클릭한다.

 

 

그러면 오른쪽에 코드가 공유되어있다. 

제일 먼저 link 태그를 복사해 VSCode로 돌아와

 

 

 

meta 태그 밑에 붙여넣기한다.

 

그 다음은 홈페이지로 돌아와 코드 란에서 스크롤 하다보면 Inserting the icon이 있다.

여기 있는 span 태그를 드래그 해 복사하여 VSCode로 돌아온다.

그래서 body 태그에 붙여넣기하면 완성이다 - !

 

 

 

완성

 

 

---

 

<Google font 적용>

: 폰트를 다운 받지 않고 적용하는 방법과 폰트를 직접 다운 받아 사용하는 방법이 있다.

 

1. 폰트를 다운 받지 않고 적용하는 방법

 

Browse Fonts - Google Fonts

Google Fonts

 

위 사이트에 접속해 'Noto Sans Korean' 이라고 검색한다.

 

 

 

 

 'Noto Sans Korean' 를 클릭하면 다운받지 않고 공유된 코드만 긁어서 폰트를 적용할 수가 있다.

 

 

 

드래그 해서 내려보면 굵기별로 정리해놓은 것을 볼 수 있다.

각각의 굵기 옆에 더하기를 모두 클릭해 오른쪽 'Selected family'에 뜨도록 한다.

 

 

그러면 위와 같이 나타난다.

link가 총 3가지가 나오는데, 그 중 맨 밑에 link href 태그로 된 link만 긁어 복사한다.

 

 

VScode로 돌아와 meta 태그 밑에 복사한 것을 붙여넣기한다.

그러고 나서 p class로 굵기별로 문구를 적어 보기 쉽게 했다.

 

이제 style 태그에 각각 적용해주면 되는데, 

아까 홈페이지에서 link 태그 밑에 드래그해보면 CSS 코드가 있다. 복사해서 VSCode로 돌아와

p style에 붙여넣기한다.

 

그러고 나서 class 선택자 별로 font-weight를 굵기별로 설정해주기만 하면 완성이다.

 

완성

 

 

2. 폰트를 직접 다운 받아 사용하는 방법

 

이 방법은 조금 복잡할 수 있다.

 

 

아까 'Noto Sans Korean' 폰트 사이트로 들어가서 Download family를 클릭해 다운받아

내가 작업하는 폴더 경로에 압축을 푼다.

 

 

'NotoSans_KR' 이라는 폴더 안에 이런 font가 저장되어 있는 걸 확인할 수 있다.

 

여기서 otf 파일을 woff 파일로 변경을 해주어야 하는데, 나는 선생님께서 서체 변환 프로그램을

공유해주셨다.

 

서체 변환 프로그램

 

서체 변환 프로그램을 이용해야하는데, 원하는 굵기의 otf 파일을 드래그 해서,

서체 변환 프로그램.exe 파일에 갖다 놓으면 

 

새롭게 woff 파일로 변환이 된다.

나는 Black과 Regular 굵기를 선택해 변환했다. 

 

 

VSCode로 돌아와 우선 p class 선택자로 내가 선택한 굵기 2개를 보기 좋게 작성한다.

그러고 나서 style 태그에 @font-face를 작성하고 font-family 속성에 임의로 이름을 정해

적는다.

밑에 src: url() 을 입력해 내가 변환한 woff 파일 중 Regular.woff 파일부터 불러온다.

다음으로는 같은 방식으로 Black.woff 파일을 불러온다.

 

그 다음은 선택자 별로 font-family에 임의로 정한 이름을 적어주기만 하면 완성이다.

 

완성

 

---

 

<Font 예제>

 

원하는 문구를 긁어서 div 2개에 각각 붙여넣는다.

style 태그에서 div:first-child 라고 먼저 지정해주고 첫번째 div만 먼저 작성했다.

font-size를 정하고, font-family는 익숙한 Arial 폰트로 작성한다.

 

그러면 위와 같이 나타난다.

 

이번에는 Arial 에서 "맑은 고딕"으로 변경했다.

두 단어 이상은 따옴표를 함께 적어야 하는데, 큰 따옴표나 작은 따옴표 둘다 가능하다.

 

그러면 위와 같이 첫번째 div의 문구만 맑은 고딕으로 변한 것을 볼 수 있다.

 

 

font-style, font-variant, font-weight까지 넣어주니 위와 같이 변했다.

 

 

div:nth-child(2) style에서 font-family를 궁서체로 작성하니 궁서체로 나타난다.

 

 

div:first-child style에서 주석 단 것을 밑에 순서대로 한 줄로 요약할 수 있다.

 

 

line-height도 요약한 한 줄에 포함시키려면, font-size 옆에 /를 적고 나서 작성하면 된다.

font-size도 수치고 line-height도 수치이기 때문에 헷갈릴 수 있어 /를 꼭 적어주어야 한다.

'font-size/line-height px' 이런 순서로 작성해야한다.

 

 

---

 

 

<div 응용 예제>

 

예제 완성 : 내 정답

어제도 오늘도 계속 배우는 div 태그... 아직도 헷갈린다.
어째저째 예제는 완성했지만 오늘도 역시나 코드가 지저분한 느낌이다.

1. 우선 전체를 감싸는 wrapper 부모 div 1개, 2번째 단락에 Nav와 Section을 감싸는 div 1개,
하위에 Nav, Section div 각 1개씩, 마지막으로 Footer div 1개, 총 6개의 div를 만든다.

2. wrapper div의 width를 900px 정도로 지정하고, marign: 0 auto로 하여 가운데 정렬시킨다.
text-align도 center로 맞춰 가운데 정렬한다.

3. header div는 border 값을 1px로 지정했으니 양쪽에 총 2px이 포함되어 900px 안에 들어간다.
그래서 width 값을 898px로 정확하게 지정해야 완벽하게 정렬되는 느낌이었다...

height 값도 지정하고 margin-bottom 값도 조금 줘서 밑과 떨어지게 만든다.

4. nav div는 원하는 width, height 값을 지정하고 border 값도 주고, float: left로 왼쪽에 붙인다.

5. section div도 마찬가지인데, float: right로 지정해서 오른쪽으로 붙인다.
width 값을 680px을 준 이유는 Nav 박스와 Section 박스 사이에 틈을 주기 위해서이다.

6. footer div도 양쪽의 border 값 때문에 width 값을 898px로 지정하고,
clear: both로 두어 위쪽으로 끌려 올라가지 않도록 만들었다.

7. 마지막으로 line-height를 각 div마다 지정해서 글자가 박스의 가운데로 가도록 만들면
완성이다 !

 

 

예제 완성

시간이 남아서 background-color도 넣어봤당 색감 마음에 든다 >_<

---

 

<속성 이론 정리>

 

1. position

- static : 일반적인 배치 적용법이다. 모든 요소의 디폴트 position 값이다.

top, right, bottom, left 속성은 적용할 수 없다.

 

- relative : 요소 자기 자신인 정위치 [static]일 때를 기준으로 배치된다.

현위치를 기준으로 top, bottom, left, right로 얼마나 간격을 두고 배치할 것인지 결정한다.

위치 이동을 하면서 다른 요소에 영향을 끼치지 않으며, 문서상으로 원위치 그대로 유지가 가능하다.

 

float처럼 붕 뜨는 것처럼 되지만, float과 다르게 자신의 원래 위치를 기억하고 있다.

 

ex) 대표적으로 네비 메뉴를 작업할 때 고정메뉴는 relative로 하고, hover로 나타내는 마우스로

오버하면 나타내는 하위 메뉴들은 absolute로 표현한다.

 

- absolute : 요소를 일반적인 문서 흐름에서 배제하며, 가장 가까운 위치에 있는 부모 요소를 기준으로

배치된다. 부모 요소를 기준으로 top, bottom, left, right로 얼마나 간격을 두고 배치할 것인지 결정한다.

뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

부모 position 없이 단독으로 사용될 경우 <body>를 기준으로 삼는다. (static 값 제외)

 

position: absolute; 를 적용하면, display가 block으로 바뀐다.

block은 쉽게 말해서 길막을 못하는데, float처럼 붕떠서 아래나 옆에 있는 요소가 float처럼 기준이 되는

요소의 자리로 온다.

자식이 position을 absolute로 돌리는 순간, 자식이 집나갔다고 생각해서 높이를 줄인다.

 

- fixed : 고정적인 위치에 배치한다. 브라우저의 스크롤에 의한 영역이동에 대해 고정시키는 역할을 한다.

absolute와 비슷하지만 fixed의 기준점은 뷰포트이다.

위치는 top, right, bottom, left 속성에 의해 지정되며, 뒤에 계속되는 요소의 배치에 영향을 주지 않는다.

 

- sticky : 스크롤 위치에 따라 relative와 fixed 사이를 전환한다. 

지정한 임계값을 넘으면 fixed로 동작하고, 지원하는 브라우저가 많지 않다.

 

-initial : 요소의 속성값을 초기화하는 것이다.

 

-inherit : 부모 요소에서 속성을 상속받는 것이다.

 

 

 

2. z-index 

- position 속성을 이용하면 요소를 겹치게 놓을 수 있다.

position을 이용하여 요소가 붕 뜨게 되었을 때, 자신이 z축으로 어느 위치에 있는지 설정하는 속성이다. 

- 한 요소가 다른 요소의 일부분을 덮으려고 할 때 사용한다.

- 정수 값이 클수록 위에 표시된다.

 ex) z-index: 2 / z-index: 1 

       2가지가 있을 경우 index: 2가 1보다 위에 있으므로 2가 1을 덮어버린다.

 

 

 

 

<position 태그 예제>

 

position: relative;

 

top 속성은 양의 값, 음의 값 모두 설정할 수 있다.


더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.

position: relative;
position: absolute;

---

<position: fixed; 와 position: sticky; 의 차이>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*내용 출처
: overflow - CSS: Cascading Style Sheets | MDN (mozilla.org),

“font” 검색결과 – CODING FACTORY

 

*이미지 출처
: Heather Ihn Martin, Sun Lace, Watercolor on paper