Skip to main content

텍스트 꾸미기

색상 - color​

  • 폰트의 색상을 나타낸다.
  • 다른 CSS와 달리 앞에 font- 가 포함되지 않는다.
  • 키워드(red, blue) , HEX(#FFFFFF, #000000), rgb(), rgba() 등 다양한 방법으로 표기 가능하다.
p {
  color: blue;
  color: #000000;
  color: rgba(255, 255, 255, 0.5) // rgba의 마지막은 투명도를 나타낸다.
;
}

글꼴 - font-family​

<!-- link -->
<head>
  <link href="https://fonts.googleapis.com/css2family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet" />
  <style>
    body {
      font-family: 'Noto Sans KR', sans-serif;
    }
  </style>
</head>
/* import */
@import url('https://fonts.googleapis.com/css2family=Noto+Sans+KR:wght@300&display=swap');

body {
  font-family: 'Noto Sans KR', sans-serif;
}
/* url */
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: Pretendard-Regular, 'Times New Roman', Dotum, '돋움', sans-serif;
}

크기 font-size​

  • 폰트의 크기를 설정한다.
p {
  font-size: 30px;
}

굵기 font-weight​

  • 폰트의 굵기 정도를 설정한다.
    • normal : 기본 굵기
    • bold : 굵게
    • lighter : 현재 태그의 굵기를 상위 태그의 굵기보다 가볍게
    • bolder : 현재 태그의 굵기를 상위 태그의 굵기보다 두껍게
    • 100 ~ 600 : 굵기의 정도
p {
  font-weight: 600;
}

대소문자 변형 text-transform​

  • 영어로된 텍스트의 대소문자를 변형시킨다.
    • none : 변형방지
    • uppercase : 모든 텍스트를 대문자로 변형
    • lowercase : 모든 텍스트를 소문자로 변형
    • capitalize : 모든 단어의 첫글자를 대문자로 변형
p {
  text-transform: uppercase;
}

선 꾸미기 text-decoration-line​

  • 폰트에 특정 선을 추가하여 강조할 수 있다.
    • underline : 밑줄 긋기
    • overline : 윗줄 긋기
    • line-through : 취소선
p {
  text-decoration-line: underline;
}

그림자 추가 text-shadow​

  • 폰트에 그림자를 추가한다.
    • 속성은 offset-x | offset-y | blur-radius | color 이다.
p {
  text-shadow: 1px 1px 2px red;
}

가로 정렬 text-align​

  • 텍스트의 정렬 여부를 설정한다.
    • left : 왼쪽 정렬
    • right : 오른쪽 정렬
    • center : 중앙 정렬
    • justify : 양쪽 정렬
    • justify-all : 양쪽 정렬 (마지막 줄 적용)
p {
  text-align: center;
}

세로 정렬 vertical-align​

  • 텍스트의 세로 정렬 여부를 설정한다.
  • 인라인 블록 및 테이블 요소에만 적용된다.
    • top : 위쪽 정렬
    • middle : 중앙 정렬
    • baseline : 텍스트 기준선 정렬
    • bottom : 아래쪽 정렬
p {
  vertical-align: top;
}

행간 설정 lign-height​

  • 폰트의 상하 행간을 설정한다.
  • 단위, 배수, % 등의 값으로 설정할 수 있다.
p {
  line-height: 16px;
}

자간 설정 letter-spacing​

  • 폰트의 좌우 자간을 설정한다.
  • 단위, 배수, % 등의 값으로 설정할 수 있다.
p {
  letter-spacing: 16px;
}

들여쓰기 text-indent​

  • 문단 첫째줄의 들여쓰기의 길이를 설정한다.
  • padding-left와 비슷한 속성이다.
p {
  text-indent: 8px;
}

줄바꿈 word-break​

  • 텍스트가 박스 밖으로 넘칠 경우 줄바꿈 여부를 결정한다.
    • normal : 기본 줄바꿈 규칙을 사용한다.
    • break-all : 폰트의 넘침을 방지하기 위해서 문자 단위로 줄바꿈이 발생한다. (한중일 텍스트는 제외)
    • keep-all : 한중일 텍스트에서 줄바꿈을 할 때 단어를 끊지 않는다. (비한중일 경우 normal과 동일)
p {
  word-break: keep-all;
}

표시 여부 text-overflow​

  • 텍스트가 박스 밖으로 넘칠 경우 표시 여부를 결정한다.
  • 주로 말줄임 (...) 적용을 하기 위해 사용된다.
p {
  text-overflow: ellipsis; // 말줄임 (...)
}

기울임꼴 font-style​

  • 글꼴을 스타일을 지정한다.
  • 주로 기울임꼴을 적용하기 위해 사용된다.
p {
  font-style: italic;
}