텍스트 꾸미기
색상
글자 색상으로는 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 등
각 단위를 써야할 상황
- 절대적이고 확실한 크기로 정하고 싶을 때
px(픽셀)을 사용한다.
CSS를 통해 글꼴 크기는 고정되기 때문에, 작은 글씨를 보기 힘든 사용자가 브라우저 기본 글꼴 크기를 더 크게 설정했다 하더라도 이런 설정이 무시된다.
-> 개발자가 강조하려던 제목(heading) 등이 오히려 텍스트보다 작게 보이는 결과를 초래할 수 있다.
유리한 곳 : 화면 크기가 절대적인 경우에(ex. 출력용) 유리하다.
불리한 곳 : 모바일 기기와 같은 작은 화면이면서 고해상도인 경우에 불리하다.
(고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale)되기 때문에, 뚜렷하지 못한 형태로 출력될 수 있다.)
-
보통의 경우
rem을 사용하길 추천한다.
root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다.
사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.
(em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다.
그에 비해rem은 root의 글자 크기에 따라서만 상대적으로 변한다.) -
반응형 웹(responsive web)에서 기준점을 만들 때
반응형 웹 : 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
ex) 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼때, 태블릿으로 볼 때가 각각 다를 수 있다.
이때는 디바이스 크기 별로 CSS를 달리 적용해야 되는데, 디바이스 크기를 나누는 기준을 보통px로 정한다.
-
화면 너비 및 높이에 따른 상대적인 크기가 중요한 경우
이때는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 일 경우에만 사용 가능)
결국 세로 정렬이란 것은 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에 발생하는 것인데, 이는 박스에 대한 이해가 필요하다.
