(CSS) Typography

Mirrer·2022년 4월 30일
0

CSS

목록 보기
8/15
post-thumbnail

Typography

text를 디자이너의 요구에 맞게 적용하는 것

font CSS 속성은 글자와 관련된 다양한 단축 속성이다.

이를 통해 요소의 글꼴 및 시스템 폰트로 설정할 수 있다.

이번 포스팅에서는 font와 관련된 다양한 속성에 대해서 알아보도록 하겠다.


font-size

font-size 속성을 사용해 text의 크기를 지정한다.

font-size의 사용되는 속성값 단위는 px, em, rem등이 있다.

  1. px : 절대 단위

  2. em : 상대 단위, 실제로 적용된 font-size

<div class="perent">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </p>
</div>
.parent {
  /* 부모 font-size: 20px로 지정해서
  자식 p태그도 font-size: 20px로 지정 */
  font-size: 20px;
}

p {
  /* 기존 font-size: 20px에서 1.5배인 30px로 변경 */
  font-size: 1.5em;
}
/* → 위의 예시처럼 불안정하기에 em단위를 자주 사용하지 않는다. */
  1. rem : 상대 단위, HTML에 적용된 font-size
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="perent">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </p>
  </div>
</body>
</html>
.html {
  /* html font-size: 20px로 지정해서
  모든 html요소들의 font-size: 20px로 지정 */
  font-size: 20px;
}

p {
  /* 기존 font-size: 20px에서 3배인 60px로 변경 */
  font-size: 3rem;
}

line-height

line-height 속성을 사용해 text 줄간격을 지정한다.

line-height이 아무리 크더라고 글씨는 줄간격에 가운데에 배치되며 font-size와 마찬가지로 px, em, rem등의 속성값 단위를 사용한다.

p {  
  font-size: 16px;
	/* 단위 em을 사용할 경우 관례적 생략(px, rem 관례적 생략불가능) */
  line-height: 1.5;
}


letter-spacing

letter-spacing 속성을 사용해 text사이 간격을 지정한다.

letter-spacing 또한 px, em, rem등의 속성값 단위를 사용한다.

p {  
  font-size: 20px;  
  line-height: 1.5;
	/* line-height와 반대로 단위 em을 사용해도 관례적 생략불가능 */
  letter-spacing: -.03em;
}

font-family

font-family 속성을 사용해 text 서체를 지정한다.

p {  
  /* font-family: "Poppins"적용 */
  font-family: "Poppins";
  /* font-family: "Poppins"적용하고 없다면 sans-serif적용 */
  font-family: "Poppins", sans-serif;
  /* font-family: "Poppins"적용하고 없다면 "Roboto"적용하고 없다면 sans-serif적용 */
  font-family: "Poppins", "Roboto", sans-serif;
}


font-weight

font-weight 속성을 사용해 text 굵기를 지정한다.

p {  
  font-size: 20px;  
  line-height: 1.5;  
  letter-spacing: 0.01em;
  font-family: "Poppins", sans-serif;
  /* font-weight의 단위 100, 200, 300, 400, 500, 600, 700, 800, 900 */
  font-weight: 400;
}


color

color 속성을 사용해 text 색상을 지정한다.

color의 사용되는 속성값 단위는 hex(#0066ff), rgb(rgb(0, 102, 255)), rgba(rgba(0, 102, 255. 1))등이 있다.

p {  
  font-size: 20px;  
  line-height: 1.5;  
  letter-spacing: 0.01em;
  font-family: "Poppins", sans-serif;  
  font-weight: 400;
  color: #0066ff;
}

text-align

text-align 속성을 사용해 text 정렬을 지정한다.

p {  
  /* left, center, right */
  text-align: center;
}

text-indent

text-indent 속성을 사용해 text 들여쓰기를 지정한다.

p {  
  text-indent: 100px;
  text-indent: -10px;
}

text-transform

text-transform 속성을 사용해 영어와 같은 text를 변형한다.

p {
  /* none, capitalize(첫글자만 대문자), 
		 uppercase(모든글자 대문자), lowercase(모든글자 소문자) */
  text-transform: none;
}

text-decoration

text-decoration 속성을 사용해 text에 줄을 적용한다.

p {
  /* none, underline(밑줄), line-through(가운데줄), overline(윗줄) */
  text-decoration: none;  
}
/* -> <a>태그에 밑줄을 없애는 용도로 자주 사용 */

font-style

font-style 속성을 사용해 text에 스타일을 적용한다.

p {
  /* normal, italic, oblique(거의 사용X) */
  font-style: normal;
}
/* -> <em>태그에 italic효과를 없애는 용도로 자주 사용 */


참고 자료

font - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지

profile
memories Of A front-end web developer

0개의 댓글