2월, 2024의 게시물 표시

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등)에 따라서 미리 설치 되어 있는데, 사용자가 다른 운영체제에서 작업 된 페이지를 보게 되면 다른 글꼴이 표기 된다는 ...