Font 와 웹 폰트

글자의 모양을 조정 하기 위한 css 속성 및 웹 폰트에 대해서 파악한다. 이전에 사용하였던 html 과 css 를 그대로 이용하여 진행하도록 한다.

Recap

  • css selector를 활용하여 자신이 작업하고자 하는 요소를 찾는다.
  • 박스 모델을 활용한 배열 - flex 를 활용한다.
  • 박스 모델에서 사용되는 기본속성 width, height, padding, margin 를 사용한다.
  • html 문서의 내용과 css 를 활용하여 주어진 레이아웃을 상세화 한다.

Font

우선 폰트 관련 설정 사항을 보기 위하여, 메인 이미지 영역에 텍스트를 삽입 한다.

        <div id="main">
            <p>Time is gold</p>
            <p>시간은 금이다.</p>
        </div>

생각한 대로의 결과 이기는 하지만 정리되어 보이지 않을 것이다. 여기에서 글자의 주목도를 높이기 위해 h1 요소를 사용하도록 바꾸어 보도록 한다.

        <div id="main">
            <h1>Time is gold</h1>
            <h1>시간은 금이다.</h1>
        </div>

이제야 조금 마음에 들지만, 이번 결과 역시 딱 마음에 들지 않는 케이스가 많을 것이다. 바로 글꼴의 문제인데, 이 글꼴이 각 PC의 시스템 글꼴을 이용하여 웹 브라우저에서 내용을 표시 하기 때문이다.

웹 폰트

웹 폰트의 개요

바로 위에서 글꼴이 시스템에 설치되어 있다고 언급하였다. 따라서 각 폰트(글꼴)들은 각각의 사용자 pc에 설치 되어 있다는 의미이다. 일반적으로 폰트는 운영체제(OS - Windows등)에 따라서 미리 설치 되어 있는데, 사용자가 다른 운영체제에서 작업 된 페이지를 보게 되면 다른 글꼴이 표기 된다는 뜻이며, 어떤 글꼴이 어떻게 설치 되어 있는지 알지 못하게 되는 문제가 있다.
이것을 위하여 웹 사이트에서 공통된 글꼴을 사용하기 위해, 웹사이트 접속 시 필요한 폰트를 다운로드 하여 사용하며, 이것을 웹 폰트 라고 말한다.
다만 웹 폰트는 사용 시 다운로드 받는 형태라서, 전체 글꼴의 사이즈(파일사이즈) 및 라이센스 문제등 여러가지 고려 사항이 있으므로, 주의 하여 사용해야 한다.

웹 폰트 설치

웹 폰트 설치의 방법은 각 폰트별로 조금씩 다를수 있으나 이 문서에서 대표적인 웹 폰트인 "구글 Noto" 를 설치해 본다.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@900&display=swap');

    body {
        background-color: #ccc;
        margin-top: 30px;
    }

    ...

우선 스타일 위쪽에 @import 구문을 이용해 font를 설치 한다. 이런 방법은 웹 폰트 사이트 배포 사이트에 접속하여 설치 방법을 알아내게 되며, 본 문서에서는 차이를 보이기 위하여 가장 두꺼운 900 사이즈의 폰트를 사용하였다.

h1 {
    font-family: 'Noto Sans KR', sans-serif;
}

메인 이미지 부분의 텍스트에 적용하기 위하여, h1 요소에 스타일을 적용한다.

 

근래에 많이 사용되고 있는 pretendard 폰트를 적용 시키기 위해서는 아래와 같이 적용하도록 한다.

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
h1 {
    font-family: 'Pretendard Variable';
    font-weight: 900;
    font-size: 35px;
    color: darkgoldenrod;
}

글꼴 두께를 결정하기 위하여 font-weight 속성을 사용한 것에 주의 하며, 결과를 확인하도록 한다. 사용하지 않는 웹 폰트를 다운로드 하는 것은 웹 페이지가 로딩 되는 속도를 느리게 하므로 반드시 삭제 하도록 한다.

또한 폰트의 다른 속성이 font-size와 color 속성으로 크기와 색상을 조정하도록 한다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기