교육 | 외부활동/PUBLISHING

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

wn1331 2023. 1. 5. 17:37
반응형

글꼴 관련 스타일

font-family 속성

 - 웹 문서에서 사용할 글꼴 지정

 - <body> 태그를 비롯해 <p> 태그나 <hn> 태그처럼 텍스트를 사용하는 요소들에서 사용

 - 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정.

 - 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분

 - <body> 태그 스타일에서 한 번 정의하면 문서 전체에 적용되고 문서 안의 모든 자식 요소에 계속 같은 글꼴이 사용됨.

 

font-size 속성

단위를 사용해 글자 크기 지정하기

 

font-style 속성

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

 

font-weight 속성

글자 굵기를 조절하는 속성

 

글꼴 관련 스타일 사용해보기 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</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>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 <span class="accent">레드향</span>이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p class="italic">일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>    
</body>
</html>

 

웹 폰트 사용하기

웹 폰트란

 - 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴이다.

 - 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다.

 - @font-face 속성 사용

 

직접 웹 폰트 업로드해 사용하기

1. 웹 폰트 파일 준비

 - eot 파일, woff 파일

 - 기존 ttf 파일을 변환해서 사용할 수도 있음.

2. 다운로드하기 전에 사용자 시스템에 있는지 확인

 - local(글꼴이름)

3. woff 파일 선언

4. 용량이 큰 ttf 파일을 마지막에 선언

 

구글 폰트 사용하기

1. https://fonts.google.com/ 로 접속

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

2. 한글 폰트 검색

3. Link 항목에 있는 소스 복사 & 글꼴 이름 기억

4. 웹 문서의 <style> 태그 안에 붙여넣음

5. font-family 속성에서 웹 폰트 글꼴 이름 사용

 

텍스트 관련 스타일

color 속성

 - 글자 색 지정

 - 16진수 값이나 rgb 값, hsl 값, 색상 이름 중에서 사용

색상 이름(red), 16진수(#ffffff), hsl/hsla, rgb/rgba 등으로 표기할 수 있다.

 

text-align 속성

텍스트 정렬 방법 지정

 

line-height 속성

 - 문단의 줄 간격 지정

 - <숫자>와 <백분율>은 부모 요소를 기준으로 몇 배인지 지정

 - 보통 글자 크기의 1.5 ~ 2배 정도면 적당

 - 줄 간격은 텍스트를 세로 정렬할 때도 유용함

->line-height의 속성 값을 영역의 height의 값과 똑같이 지정

 

text-decoration 속성

 - 텍스트에 밑줄을 긋거나 가로지르는 줄 표시

 - 텍스트 링크의 밑줄을 없앨 때도 사용

 

text-shadow 속성

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

 

text-transform 속성

 - 영문 텍스트의 대문자나 소문자를 바꾸는 속성

속성 값 설명
none 변환하지 않습니다
capitalize 시작하는 첫 번째 글자를 대문자로 변환합니다.
uppercase 모든 글자를 대문자로 변환합니다.
lowercase 모든 글자를 소문자로 변환합니다.
full-width 가능한 모든 문자를 전각 문자로 변환합니다.

 

letter-spacing

 - 글자간 간격

 

word-spacing

- 단어간 간격

 

list-style-type 속성

 - 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성

 

 

list-style-image 속성

 - 순서 없는 목록의 불릿을 이미지로 바꾸는 속성

 

list-style-position 속성

 - 불릿이나 번호를 들여쓰거나 내어쓸 수 있음

 

list-style 속성

 - list-style-type, list-style-position, list-style-image 속성을 한꺼번에 표기

 

caption-side

 - 캡션(설명글)은 기본으로 표 위쪽에 표시됨

 - 이 속성을 이용해 아래쪽에 표시 가능

 

border

 - 표의 바깥 테두리와 셀 테두리 모두 지정해야 함

 

border-collapse

 - 표 테두리와 셀 테두리를 합칠 것인지 설정

 

속성 값 설명
collapse 테두리를 하나로 합쳐 표시합니다.
separate 테두리를 따로 표시합니다. 기본 값입니다.

 

반응형