CSS : 글자 표현 속성(글꼴, 크기, 자간, 행간, 색상)
font-family 글꼴지정
font-family:dotum, gulim, '맑은 고딕', sans-serif;바탕체계열 : Serif (ex) Courier, Greorgia, Times New Roman
고딕체계열 : sans-serif (ex) Arial, Arial Black, Tahoma, Verdana
가로폭동일글꼴 : Monospace (ex) Courier, Courier New
필기체계열 : cursive (ex) Comic sans (Linux 지원안함)
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
font-size 글자 크기
font-size:16px;
font-size:100%;
font-size:1.0em;
color 글자 색상
color:rgb(255,255,255);
color:rgba(255,255,255,0.5);
color:#ffffff;
color:#fff;
color:white;
line-height 행간
line-height:1.5;
line-height:150%;
line-height:150px;
letter-spacing 자간
letter-spacing:0;
letter-spacing:-0.5px;
letter-spacing:-0.05em;
word-spacing 단어와 단어 사이 간격
word-spacing:1px;
word-spacing:-0.05em;
white-space 글자 공백 처리
white-space:normal;
white-space:nowrap;
white-space:pre;
white-space:pre-line;
white-space:pre-wrap;
text-overflow 텍스트 넘침 영역 처리
+ white-space와 함께 주로 사용합니다.
text-overflow:clip;
text-overflow:ellipsis;
white-space + text-overflow 활용
단락을 가지고 있는 block element에 width값을 지정하고 아래 추가 속성을 적용하여 말줄임(...) 표시를 확인해보세요.
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
디자인(자간, 글꼴, 행간) 완벽하게 CSS로 재현하기!
1. 포토샵 등을 활용하여 문자 디자인을 진행합니다.
(아래) 이미지 기준
글꼴 : 나눔고딕
굵기 : Regular(기본)
글자크기 : 24px
행간 : 50px
자간 : -20
2. 위 값을 CSS로 재현합니다.
글꼴 : 나눔고딕 == font-family:'나눔고딕'
굵기 : Regular(기본) == font-weight:normal;
글자크기 : 24px == font-size:1.5em;
행간 : 50px == line-height:50px; or line-height:1.3;
자간 : -20 == letter-spacing:-0.02em;
3. 최종 결과를 디자인과 웹 문서와 비교하여 체크합니다.
