본문 바로가기
Front end/CSS

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

by re-hwi 2022. 8. 23.

이번 단원에서는 텍스트의 시각적 효과에 대해 다룬다. 따라서 글씨의 크기, 색, 글씨체 그리고 왼쪽, 오른쪽 정렬과 같은 내용이 주를 이룬다. 

 

지금 내가 쓰고있는 이 글에서도 글씨의 색을 바꾸거나 필기체를 바꾼다거나 하는 옵션이 있는데 그런 버튼을 클릭하게 되면 css 상에서 변하도록 설정해 놓은 것 같아서 신기했다.

텍스트의 효과를 바꾸는 속성

 

  • font-family (글꼴 지정) : 주로 <p>태그와 같은 텍스트를 사용하는 요소에서 사용된다. 기본형은 font-family : <글꼴 이름> | [<글꼴이름>,<글꼴 이름>] 으로 사용 

→ 글꼴을 2개 이상 지정할 때에는 사이에 쉼표를 넣어 사용

→ 지정한 글꼴이 사용자 시스템에 설치되어 있지 않다면 글자가 깨질 수 있음

 

  • font-size (글씨 크기 지정) : 글자 크기의 단위는 px이나 pt로 지정할 수 있으며 백분율로 사용할 수 있다. 기본형은 font-size : <절대크기> | <상대크기> | <크기> | <백분율> 

→ 예전에는 절대크기인 px, pt를 많이 사용했지만 모바일 기기까지 고려해야하는 요즘은 em이나 rem을 많이 사용

 

  • font-style (이탤릭체로 글자를 표기): 글자의 필기체를 변경하는 속성. 기본형은 font-style : normal | italic | oblique 이다,

→ 속성값은 italic과 oblique가 있는데 litalic은 기울여진 글꼴을 처음부터 다듬어서 표현하지만 oblique는 단지 글자를 기울이기만 하기 때문에 italic을 많이 사용

 

  • font-weight (글자 굵기를 지정) : 미리 만들어진 예약어 (normal, bold)나 숫자값을 사용해 굵기를 지정할 수 있음

→ 100부터 900 사이의 굵기를 지정할 수 있으며 원래보다 더 굵게 / 가늘게 하는 속성도 있다.

웹 폰트를 바꾸는 태그

 

: 웹에서 제공하는 폰트를 사용하는 방식 사용자가 해당 폰트를 가지고 있지 않을 때 사이트에 접속한다면 자동으로 폰트가 다운받아진다

 

다음은 구글 웹 폰트를 사용하는 코드이다. 

<!DOCTYPE html>

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>웹 폰트 사용하기</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
      h1{
        font-family: 'Jua', sans-serif;

      }
    </style>
</head>
<body>
  <h1>웹 폰트 테스트</h1>
  <p class="wfont">Using Web Fonts</p>
</body>
</html>

텍스트 관련 스타일 속성

 

  • color : <색상> 
    • 16진수로 표현하는 방법 : # 기호 다음에 6자리의 16진수로 표현. 앞에서 두 자리씩 #RRGGBB 로 표현하며 각 RGB는 빨강 초록 파랑의 양을 넣는다.
    • 영문명으로 표현하는 방법 : 널리 알려진 red, blue와 같은 영문명을 이용해 색을 나타낸다.
    • hsla을 이용하여 표기하는 방법 : hsl은 hue(색상), saturation(채도), lightness(명도), alpha(불투명도)의 줄임말이며  아래와 같은 원에서 각을 색으로 표현하고 채도와 명도, 불투명도는 퍼센트% 로 나타낸다.

  • text-align : <정렬 방향>
정렬 방향의 종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬
end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬
left 왼쪽에 맞추어 문단을 정렬
right 오른쪽에 맞추어 문단을 정렬
center  가운데에 맞추어 문단을 정렬
justify 양쪽에 맞추어 문단을 정렬
match-parent 부모요소에 맞추어 문단을 정렬
  • line-height : <줄간격>

→  세로 줄 간격의 정렬 방향을 설정하는 방법은 위의 가로 줄 정렬 방향과 같으며 속성이름 또한 같다. 

 

  • text-decoration : <줄표시>
줄표시 종류 설명
none 텍스트에 줄을 표시하지 않음
underline 밑줄 표시
overline 윗줄 표시
line-through 취소선표시

 

  • text-shadow : <none> | <가로거리> <세로거리> <번짐정도> <색상>  
종류 설명
<가로거리>  텍스트부터 그림자까지의 가로거리로 필수속성이다. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 표시한다.
<세로거리> 텍스트부터 그림자까지의 세로거리로 필수속성이다. 양숫값은 글자의 아래쪽, 음숫값은 글자 위쪽에 그림자를 표시한다.
<번짐정도>  그림자가 번지는 정도이다. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져나가고 음숫값을 사용하면 모든 방향에로 축소되어 보인다.
<색상>  그림자 색상 지정. 한 가지만 지정할 수도 있고 여러가지를 지정할 수도 있음

 

  • text-transform : 텍스트의 대소문자 표시
종류 설명
none 줄을 표시하지 않음
capitalize 첫 번쨰 글자를 대문자로 변환
uppercase 모든 글자를 대문자로 변환
lowercase 모든 글자를 소문자로 변환
full-width 가능한 모든 글자를 전각문자로 변환

 

  • letter-spacing : 글자 간격 조정
  • word-spacing : 단어 간격조정

→ px, em과 같은 단위나 퍼센트로 크기값을 조절

반응형

'Front end > CSS' 카테고리의 다른 글

이미지와 그라데이션 효과로 배경 꾸미기  (2) 2022.10.02
레이아웃을 구성하는 css 박스모델 (2)  (1) 2022.09.11
레이아웃을 구성하는 css 박스모델 (1)  (2) 2022.09.09
텍스트를 표현하는 다양한 스타일 (2)  (0) 2022.09.01
웹 문서에 디자인 입히기  (0) 2022.08.20

관련글

댓글

티스토리툴바