구글폰트(Google Font)

웹 개발을 하다보면 브라우저가 제공하는 기본 폰트 외에 다양한 폰트를 적용하고 싶은 경우가 많다. 이럴 때 다양한 폰트를 제공하는 구글폰트를 적용하는 방법을 알아보자.

적용방법

위 링크의 구글폰트 사이트에 접속하면 다양한 폰트를 둘러볼 수 있다.
(https://fonts.google.com/)

그 중 찾거나 원하는 폰트를 클릭해보자.필자는 Poppins라는 폰트를 검색해보았다.

해당 폰트를 클릭하면 우측 하단에 "Get font"버튼이 나온다.
(브라우저가 전체화면이라면 우측 상단에 나온다.)

'Get font'버튼을 누르면 폰트를 코드에 url로 불러올것인지,다운로드 할 것인지 선택하는 버튼이 나온다.
(우리는 브라우저에서 사용해야 하기 때문에, url로 불러와야 한다. 'Get embed code'를 눌러보자)

'Get embed code'버튼을 누르면 폰트를 추가할 수 있는 코드가 나온다.
우리는 poppins폰트의 기본형만 사용할 것이기 때문에 (1) Change styles를 누르고 (2) 다른 두께의 폰트는 해제해준다. 그리고 CSS에 추가해 줄 것이기 때문에 (3) import버튼을 눌러준다.

이제 원하는 부분에 폰트를 적용해보자

부트스트랩(Bootstrap)

웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다.

적용 방법

위 사진처럼 두 가지 태그를 HTML파일에 추가해주어야 한다.

이제 좌측 상단의 문서를 눌러 어떤 것들이 있는지 살펴보자

레이아웃부터 컨텐츠 폼 등 굉장히 많은 종류의 아이템들이 있다.
이 중 원하는 아이템을 골라보자(필자는 폼컨트롤을 선택하였다.)

해당 아이템을 클릭하면 다양한 종류의 폼컨트롤이 나오는데 그 중 원하는 것을 선택하여 코드 기준 우측 상단의 아이콘을 선택해주면 해당 코드가 복사된다.

코드를 복사하고 저장 후 브라우저에서 실행해보면, 예쁜 모습의 폼컨트롤이 보인다.