텍스트 꾸미기

텍스트 꾸미기

색상

글자 색상으로는 color 속성을 사용한다.
값으로는 HEX(16진수로 RGB; Red Green Blue가 표현된 값) 또는 주요 색상 이름을 사용할 수 있다.

.red {
  color: #ff0000;
}

배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있다.

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

글꼴

글꼴은 font-family 를 사용한다.

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴 이름은 따옴표를 붙여서 사용할 수 있고, 여러 글꼴을 쉼표로 구분하여 적을 수 있다.

크기

크기는 font-size 를 이용한다.

.title {
  font-size: 24px;
}

알아야 할 몇가지 크기 단위

• 절대 단위 : px, pt 등
• 상대 단위 : %, em, rem, ch, vw, vh 등

각 단위를 써야할 상황

1. 절대적이고 확실한 크기로 정하고 싶을 때
   px(픽셀)을 사용한다.
   CSS를 통해 글꼴 크기는 고정되기 때문에, 작은 글씨를 보기 힘든 사용자가 브라우저 기본 글꼴 크기를 더 크게 설정했다 하더라도 이런 설정이 무시된다.
   -> 개발자가 강조하려던 제목(heading) 등이 오히려 텍스트보다 작게 보이는 결과를 초래할 수 있다.

유리한 곳 : 화면 크기가 절대적인 경우에(ex. 출력용) 유리하다.
불리한 곳 : 모바일 기기와 같은 작은 화면이면서 고해상도인 경우에 불리하다.
(고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력될 수 있다.)

2. 보통의 경우
   rem 을 사용하길 추천한다.
   root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다.
   사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.
   (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
   그에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)

3. 반응형 웹(responsive web)에서 기준점을 만들 때
   반응형 웹 : 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
   ex) 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼때, 태블릿으로 볼 때가 각각 다를 수 있다.
   이때는 디바이스 크기 별로 CSS를 달리 적용해야 되는데, 디바이스 크기를 나누는 기준을 보통 px로 정한다.
   

4. 화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우
   이때는 vw, vh를 사용한다.
   Viewport : 웹사이트의 보여지는 영역

   vw(viewport width)
   vh(viewport height)

화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트의 경우 100vw, 100vh를 사용해 구현한 것이다.

기타 스타일링

• 굵기 : font-weight
• 밑줄, 가로줄 : text-decoration
• 자간 : letter-spacing
• 행간 : line-height

정렬

가로로 정렬할 경우 text-align을 사용한다.
유효한 값 : left , right , center , justify(양쪽 정렬)가 있다.

세로로 정렬할 경우에는 문제가 조금 복잡하다.
보통 vertical-align을 생각하기 쉽지만, 이는 부모 엘리먼트의 종류를 특정해야 한다.
(부모 엘리먼트가 display: table-cell 일 경우에만 사용 가능)
결국 세로 정렬이란 것은 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에 발생하는 것인데, 이는 박스에 대한 이해가 필요하다.