HTML, CSS

텍스트를 표현하는 다양한 스타일

9tun 2025. 6. 11. 22:09

글꼴

텍스트 스타일에는 글꼴 스타일과 문단 스타일이 있습니다. 

 

글꼴 지정: font-family

웹 문서에서는 글꼴 지정 시 한 가지만 선택해도 되지만, 글꼴이 없을 경우를 대비해 다음, 다다음 글꼴까지 생각해야 합니다.

 

body { font-family: "맑은 고딕", 돋움, 굴림 }

 

🙋‍♂️ 근데 왜 맑은 고딕에만 "" 를 붙였나요?

👨‍🏫 폰트 이름에 공백이 있는 경우에만 "" 를 붙입니다.

 

글자 크기: font-size

절대 크기

<style>
	h1{
    	font-size: 40px;
    }
    p{
    	font-size: 20px;
    }
</style>

 

상대 크기

상대 단위는 기준값 대비 몇 배인지를 나타내는 단위입니다.
아래는 기준과 예시입니다:

 

✅ %
기준값: 부모 요소의 값
예시: width: 50% → 부모 요소 너비의 50%

✅ em

  • font-size 지정 시 → 부모 요소의 글꼴 크기
  • 여백(padding, margin, 등) 지정 시 → 해당 요소의 글꼴 크기
font-size: 2em;      /* 부모 글꼴 크기의 2배 */
padding: 2em;        /* 현재 요소 글꼴 크기의 2배 */



✅ rem
기준값: 루트 요소(html)의 글자 크기
예시: font-size: 1.5rem → <html> 글꼴 크기의 1.5배

 

 

👨‍🏫 참고로 em은 중첩 시 혼란을 줄 수 있으니, 일관성 있게 rem을 사용하는 게 유지보수에 유리합니다. 😊

 

이탤릭체: font-style

font-style: normal | italic | oblique

 

글자 굵기: font-weight

font-weight: normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  
  <style>
    h1{
      font-size: 42px;
    }
    .accent{
      font-size: 24px;
      font-weight: 900;
    }
    .italic{
      font-weight: bold;
      font-style: italic;
    }
  </style>
  
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>    
</body>
</html>

 

웹/아이콘 폰트

font-family 속성의 단점을 극복한 웹 폰트에 대해 알아봅시다.

 

웹 폰트

사용자 시스템에 없는 글꼴은 font-family로 사용할 수 없습니다. 

그래서 이미지를 저장해서 올리기도 했었죠.

 

웹 폰트란 웹 문서에서 사용한 글꼴 정보를 서버에 올려놓고, 사용자가 사이트에 접속하면 웹 문서와 폰트를 같이 내려받는 방식입니다.

글꼴은 직접 업로드할 수도 있지만, 일반적으로 이미 서버에 올라와 있는 글꼴을 링크해서 사용합니다.

대표 사이트: 구글 폰트(https://fonts.google.com/)

 

구글 폰트에 접속해서 Filter 버튼을 누르고, Text를 입력해서 원하는 글꼴을 골라보세요.

필터를 사용해 검색 범위를 좁힐 수도 있습니다.

 

 

 

아래와 같이 폰트를 적용해보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>웹 폰트 사용하기</title>
  <style>
    /* 구글 폰트 사용하기 */
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Brush+Script&display=swap');

    body {
      background:url('images/bg.jpg') no-repeat fixed;
      background-size:cover;
      text-align:center;
    }
    h1 {
      font-size:120px; 
      color: #fff;  
    }
    .html{      
      font-family: "Nanum Brush Script", cursive;
    }
  </style>

</head>
<body>
  <h1 class="html">구턴</h1>
  <h1 class="html">코딩</h1>
</body>
</html>

 

 

 

아이콘 폰트

아이콘을 글꼴처럼 사용하는 방식입니다.
글자 대신 아이콘이 표시되는 폰트 파일입니다.

 

✅ 특징

  • 폰트처럼 사용: <i>, <span> 태그에 클래스만 붙이면 아이콘 출력
  • 확장성: 벡터 방식이라 확대해도 깨지지 않음
  • 스타일 적용 쉬움: CSS로 색, 크기, 회전 등 조정 가능
  • 호환성: 거의 모든 브라우저에서 잘 작동
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Font Awesome 예제</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
  <i class="fa fa-user"></i> 사용자
</body>
</html>

 

사용자가 가장 많은 fontawesome으로 가봅시다. 

https://cdnjs.com/libraries/font-awesome

 

https://fontawesome.com/

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

검색창에 "Home"을 입력해 봅시다.

 

아래와 같이 적용합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>폰트 어썸</title>		
    <style>
    ul {
        list-style: none;
        display: flex;
    }
    li {    
    border: 1px solid #222;
        padding:10px 20px;
    margin-right: 10px;
    }
    a {
        text-decoration: none;
    }
    a:link, a:visited, a:hover {
        color:#222;
    }			
    </style>
    <!-- 아이콘 폰트 CDN 링크하기 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</head>
<body>
    <nav>
        <ul>
            <!-- 메뉴에 아이콘 폰트 추가하기 -->
            <li>
                <i class="fa-solid fa-house"></i>				
                <a href="#">메뉴1</a>
            </li>
            <li>
                <i class="fa-regular fa-calendar"></i>
                <a href="#">메뉴2</a>					
            </li>
            <li>
                <i class="fa-solid fa-battery-full"></i>
                <a href="#">메뉴3</a>
            </li>
        </ul>
    </nav>
</body>
</html>

버튼 앞에 아이콘이 적용됐습니다 ^^

 

텍스트 스타일

 

글자색: color

 

16진수 표시법

  • 형식: #RRGGBB 또는 #RGB
  • 예시:
    • color: #ff0000; → 빨간색
    • color: #0f0; → 초록색

hsl과 hsla 표시법

  • 형식:
    • hsl(색상, 채도%, 밝기%)
    • hsla(색상, 채도%, 밝기%, 투명도)
  • 예시:
    • color: hsl(0, 100%, 50%); → 빨간색
    • color: hsla(240, 100%, 50%, 0.5); → 반투명 파란색

색상 영문 표시법

  • 형식: CSS에서 정의된 이름
  • 예시:
    • color: red;
    • color: blue;
    • color: darkslategray;

rgb, rgba 표시법

  • 형식:
    • rgb(적, 녹, 청)
    • rgba(적, 녹, 청, 투명도)
  • 예시:
    • color: rgb(255, 0, 0); → 빨간색
    • color: rgba(0, 0, 0, 0.5); → 반투명 검정색

정렬: text-align

값 설명

종류 설명
left 왼쪽 정렬 (기본값)
right 오른쪽 정렬
center 가운데 정렬
justify 양쪽 정렬 (폭 맞춤)
start 글쓰기 방향의 시작 지점 기준 정렬
end 글쓰기 방향의 끝 지점 기준 정렬
match-parent 부모 요소를 따라 단락 정렬 
p {
  text-align: center;
}

 

줄 높이: line-height

 

  • 줄간 간격을 조절합니다.
  • 단위: 숫자, %, em, px 등 사용 가능
p { line-height: 1.6; }  // 글자 크기의 1.6배 높이

 

 

 

밑줄, 윗줄, 취소선: text-decoration

 

  • 텍스트에 선을 추가하거나 제거합니다.
  • 값:
    • none: 없음
    • underline: 밑줄
    • overline: 윗줄
    • line-through: 취소선
span { text-decoration: underline; }

 

 

 

그림자 효과: text-shadow

 

  • 글자에 그림자를 줍니다.
  • 형식: 가로거리 세로거리 번짐 색상
h1 { text-shadow: 2px 2px 5px gray; }

 

 

 

대소문자 변환: text-transform

 

  • 텍스트의 대소문자 자동 변경
  • 값:
    • none: 변경 없음
    • uppercase: 모두 대문자
    • lowercase: 모두 소문자
    • capitalize: 단어 첫 글자만 대문자

 

p { text-transform: uppercase; }

 

 

글자 간격: letter-spacing, word-spacing

 

✅ 1. 글자 간격: letter-spacing

  • 문자와 문자 사이의 간격을 조절합니다.
  • 단위: px, em, 등

 

p {
  letter-spacing: 2px;  /* 글자 사이를 2픽셀 띄움 */
}

 

✅ 2. 단어 간격: word-spacing

  • 단어와 단어 사이의 간격을 조절합니다.
  • 단위: px, em, 등
p {
  word-spacing: 1em;  /* 단어 사이를 글자 크기만큼 띄움 */
}

 

 

목록 스타일

 

불릿 모양, 번호 스타일: list-style-type

 

  • 불릿 또는 번호의 모양 지정
  • 값 예시:
    • disc, circle, square (불릿 목록용)
    • decimal, lower-alpha, upper-roman (숫자/알파벳 목록용)

종류 설명 예시 (보이는 형태)

종류 설명 예시
disc ● 기본 원형 불릿 ● 항목 1
circle ○ 빈 원 불릿 ○ 항목 2
square ■ 네모 불릿 ■ 항목 3
decimal 1, 2, 3 숫자 1. 항목 1
decimal-leading-zero 01, 02, 03 숫자 01. 항목 1
lower-alpha a, b, c 영문 소문자 a. 항목 1
upper-alpha A, B, C 영문 대문자 A. 항목 1
lower-roman i, ii, iii 로마자 소문자 i. 항목 1
upper-roman I, II, III 로마자 대문자 I. 항목 1
none 불릿/번호 없음 항목 1 
<ul class="book1">
    <li>스쿼트</li>
    <li>벤치 프레스</li>
    <li>데드리프트</li>
</ul>

<ol class="book2">
    <li>런지</li>
    <li>덤벨 프레스</li>
    <li>랫풀다운</li>
</ol>

 

 

불릿 대신 이미지 사용: list-style-image

ul {
  list-style-image: url('bullet.png');
}

 

 

목록 들여쓰기: list-style-position

 

  • 불릿/번호 위치 조정
  • 값:
    • outside (기본): 들여쓰기 바깥쪽
    • inside: 들여쓰기 안쪽
ul {
  list-style-position: inside;
}

 

 

 

목록 속성 한꺼번에 표시: list-style

 

  • 한 줄로 3가지 속성 설정 가능
  • 형식:
    list-style: [type] [position] [image];
ul {
  list-style: square inside url('bullet.png');
}

 

 

표 스타일

 

표 제목 위치: caption-side

 

  • 표 제목(<caption>)의 위치 지정
  • 값:
    • top (기본값): 표 위
    • bottom: 표 아래

 

table {
  caption-side: bottom;
}

 

표 테두리: border

  • 표, 셀에 테두리를 설정
table{
    caption-side: bottom;
    border: 1px solid black;	/* 표 테두리를 검은색 실선으로 */
}
td,th{
    border: 1px dotted black;	/* 표 테두리를 검은색 점선으로 */
    padding: 10px;				
    text-align: center;
}

 

셀 사이 여백: border-spacing

  • 셀 간의 거리 지정 (테두리가 겹치지 않는 경우에만 적용)
  • 형식:
    border-spacing: 가로 거리, 세로 거리
table {
  border-spacing: 10px 5px;  /* 가로 10px, 세로 5px */
}

 

표와 테두리 합치기: border-collapse

 

  • 테두리를 하나로 합쳐서 깔끔하게 보이게 함
  • 값:
    • collapse: 겹치는 테두리 합침
    • separate: 기본값, 테두리 따로
table {
  border-collapse: collapse;
}

 

 

끝

'HTML, CSS' 카테고리의 다른 글

css 기본  (0) 2025.06.08
입력 양식  (0) 2025.06.03
웹 문서에 다양한 내용 입력하기  (0) 2025.01.12
시맨틱 태그란?  (0) 2025.01.12
HTML 구조  (0) 2025.01.12

'HTML, CSS'의 다른글

  • 현재글텍스트를 표현하는 다양한 스타일

관련글

티스토리툴바