[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 07 텍스트를 표현하는 다양한 스타일

07-1 글꼴 관련 스타일
07-2 웹 폰트와 아이콘 폰트 사용하기
07-3 텍스트 관련 스타일
07-4 목록 스타일
07-5 표 스타일

---

07-1 글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

글꼴 지정

• 글꼴 지정 방법: \, \

  , \ 같은 텍스트 요소에서 사용

• 여러 글꼴 지정 시: 쉼표(,)로 구분해 순서대로 대체 개능

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

• 두 단어 이상의 글꼴은 큰따옴표("")로 묶기

글자 크기를 지정하는 font-size 속성

글자 크기 지정용

• 절대 크기: 고정 크기(단위: px, 키워드 사용 가능)

h1 { font-size: 40px; }
p { font-size: 20px; }

• 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
• 상대 크기:
  • em: 부모 요소의 글자 크기 기준
  • rem: 문서 기본 글자 크기 기준
  • 예) 문서 기본 글자 16px일 때 2rem → 32px

이탤릭체로 글자를 표시하는 font-style 속성

기울임 글씨 설정

• italic: 이탤릭체(디자인된 기울임)
• oblique: 일반 글꼴을 억지로 기울임

.italic {
  font-style: italic;
}

글자 굵기를 지정하는 font-weight 속성

글자 굵기 설정

• 키워드: normal, bold, bolder, lighter
• 숫자값: 100 ~ 900 (100 = 가장 얇게, 900 = 가장 굵게)

.accent {
  font-weight: bold;
}

07-2 웹 폰트와 아이콘 폰트 사용하기

웹 폰트란

웹 폰트

• 사용자 컴퓨터에 설치되지 않은 글꼴도 표시 가능하게 해주는 기술
• 방식: 웹 문서 + 글꼴 파일을 서버에서 함께 내려받아 텍스트를 표시
• 예전엔 글자를 이미지로 만들었지만, CSS3부터 웹폰트 사용이 표준이 됨
• 보통은 글꼴 파일을 직접 올리기보단, 구글 폰트 같은 사이트에서 아용

아이콘 폰트란

아이콘 폰트

• 아이콘을 이미지가 아닌 글자처럼 사용하는 방식
• 장점
  • CSS로 크기·색상 조절 쉬움
  • 간단한 아이콘 작업에 매우 편리
• 직접 만든 이미지보다 빠르고 관리도 쉬움

07-3 텍스트 관련 스타일

글자색을 지정하는 color 속성

• 텍스트의 글자색 지정
• 텍스트 뿐만 아니라 배경, 테두리 등 색상이 필요한 다양한 곳에도 동일한 방식 적용
  color: <색상값>;

색상 지정 방법

• 16진수(hex)
  • 형식: #RRGGBB 또는 줄여서 #RGB

    검정색: #000000
    흰색: #ffffff
    파란색: #0000ff → 줄이면 #00f

• 색상 이름(name)
  • CSS에서 지원하는 색상 이름을 사용할 수 있음
  • 예) red, blue, black, white 등

    		```

    p { color: red; }

    		```

• rgb / rgba
  • rgb(R, G, B): 각 색상의 양을 0~255 범위의 숫자로 지정
  • rgba(R, G, B, A): 투명도(A)를 추가 (0: 완전 투명, 1: 불투명)

h1 { color: rgb(0, 0, 255); }       /* 파란색 */
h1 { color: rgba(0, 0, 255, 0.5); } /* 반투명 파란색 */

• hsl / hsla
  • hsl(색상, 채도%, 명도%)
  • hsla(색상, 채도%, 명도%, 투명도)
  • 색상(hue)은 각도(도)로 표시
    • 0° 또는 360°: 빨간색
    • 120°: 초록색
    • 240°: 파란색

h1 { color: hsl(0, 100%, 50%); }      /* 빨간색 */
h1 { color: hsla(0, 100%, 50%, 0.5); } /* 반투명 빨간색 */

• 복잡한 색상값은 컬러 피커(Color Picker)를 활용하면 쉽게 확인할 수 있음
• rgba나 hsla를 사용하면 투명도까지 조절할 수 있어 디자인의 유연성이 높아짐

텍스트를 정렬하는 text-align 속성

text-align: start | end | left | right | center | justify | match-parent

start와 left의 차이

• 언어 방향(ltr/rtl)에 따라 달라짐
• 다국어 웹사이트라면 start와 end 사용 권장

줄 높이를 조절하는 line-height 속성

텍스트 줄 간의 간격 조절 속성

• 단위 없이 수치만 지정하면 글자 크기의 배수로 적용 (예: 2.0 → 글자 크기의 2배)

• px, % 등 단위로도 지정 가능

• 일반적으로 1.5~2.0배가 적당

• 텍스트 세로로 정렬할 때, line-height 사용 (요소의 height 값과 같게 설정)

텍스트에 밑줄, 윗줄, 최소선을 표시하는 text-decoration 속성

텍스트에 줄을 추가하거나 제거할 수 있는 속성

• none: 줄 없음
• underline: 밑줄
• overline: 윗줄
• line-through: 취소선

텍스트에 그림자 효과를 추가하는 text-shadow 속성

텍스트에 그림자 효과를 줄 수 있는 속성

• 기본형: text-shadow: [가로 거리] [세로 거리] [번짐 정도] [색상]
  • 필수: 가로 거리, 세로 거리
  • 선택: 번짐 정도, 색상
• 예) 2px 2px 5px #000000
  

텍스트의 대소 문자를 변환하는 text-transform 속성

영문자의 대소문자 및 전각 문자 변환 속성

• capitalize: 단어 첫 글자만 대문자
• uppercase: 모두 대문자
• lowercase: 모두 소문자
• full-width: 전각 문자로 변환 (영문/숫자만 해당, 한글에는 영향 없음)

글자 간격을 조절하는 letter-spacing, word-spacing 속성

• letter-spacing: 글자 사이 간격 조절 (자간)
• word-spacing: 단어 사이 간격 조절
• 단위: px, em, % 등 사용 가능
  • em 단위는 현재 글꼴의 대문자 M의 너비 기준

07-4 목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

목록의 불릿 모양 또는 번호 스타일을 지정

• 순서 없는 목록 <ul>
  • disc: 채워진 원 (기본값)
  • circle: 빈 원
  • square: 채워진 사각형
• 순서 있는 목록 <ol>
  • decimal: 숫자 (1, 2, 3, …)
  • decimal-leading-zero: 앞에 0이 붙은 숫자 (01, 02, …)
  • lower-roman, upper-roman: 로마 숫자 (i, ii, iii / I, II, III)
  • lower-alpha, upper-alpha: 알파벳 (a, b, c / A, B, C)
  • none: 불릿 또는 번호 없음

불릿 대신 이 미지를 사용하는 list-style-image 속성

불릿 대신 이미지를 사용

ul {
  list-style-image: url('이미지경로.png');
}

목록을 들여 쓰는 list-style-position 속성

불릿이나 번호의 위치를 지정

• `outside: 기본값, 목록 바깥쪽
• inside: 들여쓰기 되어 목록 안쪽에 위치

목록 속성을 한꺼번에 표시하는 list-style 속성

세 가지 속성을 한 번에 지정할 수 있는 단축 속성

ul {
  list-style: square inside url('이미지경로.png');
}

07-5 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

• <caption> 태그는 표 제목을 표시할 때 사용함
• 기본값은 top이며, 제목이 표 위에 표시됨
• caption-side: bottom; 속성을 사용하면 표 아래로 제목을 옮길 수 있음

표에 테두리를 그려 주는 border 속성

• 표 전체의 테두리는 <table>에 border 속성 지정
• 셀의 테두리는 <td>와 <th>에 각각 border 설정

table {
  border: 1px solid black; /* 표 바깥 테두리 */
}
td, th {
  border: 1px dotted black; /* 셀 테두리 */
  padding: 10px;            /* 셀 안쪽 여백 */
  text-align: center;       /* 셀 내용 가운데 정렬 */
}

셀 사이의 여백을 지정하는 border-spacing 속성

• 셀과 셀 사이의 간격(여백)을 지정할 수 있는 속성
• 예) border-spacing: 10px 5px; → 가로 10px, 세로 5px 간격

표와 셀 테두리를 합쳐 주는 border-collapse 속성

• 표와 셀의 테두리를 하나로 합칠지 여부를 결정하는 속성
• collapse : 테두리를 하나로 합쳐 깔끔하게 표시
• separate : 테두리를 따로 표시 (기본값)