텍스트 표현 스타일

2025. 9. 14. 00:50ㆍ웹 기초/css

글골 스타일

font-family

  • 웹 문서에서 글꼴은 font-family 속성으로 지정.
  • 택스트를 사용하는 요소에 주로 적용함.
font-family: <글꼴 이름>| [<글꼴 이름>, <글꼴 이름>]
  • 글꼴이 없을 수도 있는 경우에 대비하여서 글꼴을 하나가 어니라 두 개 이상을 지정함.
  • 여러 글꼴을 지정 시 콤마로 구분함. 
태그명 {"맑은 고딕", 굴림, ..}
  • 글꼴이름에 띄어쓰기가 존재하면 큰따옴표로 묶어줘야 함!

font-size

  • 글자의 크기를 조정.
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
  • 절대 크기 : 브라우저에서 지정한 글자 크기
  • 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
  • 크기 : 브라 우저와 상관없이 글자크기 지정
  • 백분율 : 백분율(%)로 크기 지정
키워드로 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large​


단위로 글자 크기 지정
-px, pt를 예전에는 많이 사용하였지만 모바일 기기로 인해서 em, rem 등의 단위를 많이 사용하게 됨.

em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준으로 비율값을 지정.
rem 문서 시작 부분에서 지정한 크기를 기준으로 비율값을 지정.
ex 해당 글꼴의 소문자 x의 높이를 기준으로 비율값을 지정.
px 모니터 1픽셀을 기준으로 비율값 지정.
pt 포인트. 일반 문서에서 많이 사용. 
백분율로 글자 크기 지정
-부모 요소의 글자크기를 기준으로 계산하여 지정하는 방식.
-부모요소가 font-size : 14px 처럼 계산 되어 있어여함.

font-style

  • 이탈릭체를 표시하는 경우에 사용.
font-style : normal | italic | oblique
  • normal은 기본적인 형태, oblique는 일반 글꼴을 기울여서 이탈릭체와 비슷하게 기능하는 방식.

font-weight

  • 글자의 굵기를 지정.
font-style : normal | bold | bolder | lighter | 100 | ... |900
  • bold : 굵게
  • bolder : 원래 보다 굵게
  • lighter : 원래 보다 얇게
  • 이외에는 100에서부터 900까지 굵기 표현 가능
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
        <style>
            body {
                font-size : 20px;
            }
            h1 {
                font-family : 바탕;
                font-size : 3em;
            }
            .accent {
                font-size : 150%;
                font-weight: 800;
            }
            .italic {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h1>인공지능(AI)의 시대</h1>
        <p class="accent">AI는 현대 기술의 핵심이며, 다양한 산업에서 혁신을 이끌고 있습니다.</p>
        <p>AI는 <span class="italic">기계 학습</span>, <span class="italic">자연어 처리</span>, <span class="italic">컴퓨터 비전</span> 등 여러 분야에서 활용됩니다.</p>
        <p class="accent">특히, 생성형 AI는 창작, 번역, 상담 등 인간의 창의력을 보조하는 역할을 합니다.</p>
        <p>앞으로의 미래는 <span class="italic">AI와 인간의 협업</span>을 통해 더욱 풍요로워질 것입니다.</p>
    </body>
</html>

웹 폰트

웹 폰트?

  • 웹 문서를 작성할 때 글꼴의 정보를 저장해서 사용함. (웹 폰트 파일도 함께 업로드해줌.)
  • 사용자 시스템에 없는 글꼴이라도 택스트를 표시할 수 있음.

웹 폰트 업로드

  • 기본적으로 컴퓨터에서는 트루타입의 글골을 사용하고 파일 확장자가 *. ttf임.
  • 하지만 파일 크기가 너무 커서 EOT, WOFF 등의 글골을 활용함.
@font-face {
	font-family : <글꼴 이름>;
	src : <글꼴 파일> | [<글꼴 파일>, ...];
}
@font-face {
        font-family: 'Ostrich';  /* 폰트 이름 */
        src: local('Ostrich Sans'), 
              url('fonts/ostrich-sans-bold.woff') format('woff'), 
              url('fonts/ostrich-sans-bold.ttf') format('truetype'), 
              url('fonts/ostrich-sans-bold.svg') format('svg');
      }
  • font-family로 가장 먼저 폰트의 이름을 생성해 줌.
  • 다음으로 src를 활용하여서 파일 경로를 지정해 줌.
  • local문을 사용하여서 사용자 컴퓨터에 이미 설치된 폰트를 사용.
  • url 은 폰트 파일의 경로를 지정하고, format 은 파일 형식을 컴퓨터에 알려줌.
구글 폰트 사용하기
1. https://fonts.google.com/ (구글 폰트)에 접속. 
2. 한국어 영어 모두 가능하기 때문에 Nanum Pen Script를 찾아서 get embed code를 클릭해 줌
3. 이후에 @import 속성이 보이도록 해서 브라우저 창을 열어줌. 다음에 코드를 복사해 주어서 복사 붙여 넣기 해줌.
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>ssjjss</title>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
            .nanum-pen-script-regular { 
                font-family: "Nanum Pen Script", cursive;
                font-weight: 400;
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <h1>인공지능(AI)의 시대</h1>
        <h1 class="nanum-pen-script-regular">인공지능(AI)의 시대</h1>
    </body>
</html>​

'웹 기초 > css' 카테고리의 다른 글

텍스트 표현 스타일(4)  (1) 2025.09.15
텍스트 표현 스타일(3)  (0) 2025.09.14
텍스트 표현 스타일(2)  (0) 2025.09.14
CSS 선택자  (0) 2025.09.11
CSS 기초  (0) 2025.09.10

관련글

티스토리툴바