네이버 부스트캠프 및 칸 아카데미 강의 관련 정리해봅니다. HTML과 CSS에서 놓치기 쉬운 포인트들을 복습하고 나아가 SCSS, 관련 애니메이션 등 확장적인 기능에 대하여 학습하고자 합니다.

폰트, 텍스트

타이포그래피의 구조

• em 폰트의 전체 높이를 의미합니다.
• ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다.
• Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다.
• Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y )
• Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l )

Font-familly (서체)

font-family: family-name | generic-family ( | initial | inherit );
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif; 

Font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용합니다. 한글을 지원하지 않는 디바이스일 경우를 대비해 영문명으로도 선언해 주어야합니다.

마지막에는 반드시 generic-family를 선언 해주어야 합니다. 키워드이기 때문에 따옴표로 묶지 않는 것이 원칙입니다. 선언된 서체를 사용할 수 없음에 대비하기 위함입니다. 또한, 자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 합니다.

▶ 다양한 유니코드 활용 서체

Line-height (행간)

line-height: normal | number | length | initial | inherit ;
line-height:  2 | 15px | 200%;

윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 간격이라고 생각할 수도 있지만, line-height로 제어되는 line-box는 타이포그래피 구조에서 [em 박스] + [상하단의 여백]까지를 의미합니다. 정확하게 line-height는 줄의 높이를 의미합니다. 따라서 블록레벨 요소에도 적용이 가능합니다.

number를 선언할 때와 %로 선언할 때의 차이가 있습니다. 두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있습니다. 아래는 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식입니다. 자식 요소가 있을 경우 꼭 주의해야 합니다.

body { font-size: 20px; line-height: 2; }       /* line-height = 40px; */
p { font-size: 10px; }                          /* line-height = 20px; */

body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                          /* line-height = 40px; */

이처럼 계산된 값이 아닌 숫자 값을 상속히기에, 숫자 값을 사용하면 부모 요소에서 계산된 값 대신 비율을 그대로 상속받을 수 있습니다. 가능하면 단위가 없는 값을 사용하는 것이 좋습니다.

Font-size (크기)

font-size: keyword | length | percent (%) | viewport units | initial | inherit ;
font-size: x-large | smaller | 2em | 200% | 50vw, 20vh ;

폰트 크기의 사용에 있어서 다양한 조건이 있습니다.

• absolute size : 기본 값인 medium에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의
• relative size : 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배
• length : px, em, rem 등의 단위를 이용하여 고정된 크기를 지정
    * em : 부모 요소의 font-size에 em 값을 곱한 크기
    * rem : 루트의 font-size에 rem 값을 곱한 크기
• percent (%) : 부모 요소의 font-size를 기준으로 백분율 계산된 값
• viewport units : vw, vh 단위로 실행중인 스크린 크기를 기준으로 상대적 크기를 반환

Font-weight (굵기)

font-weight: normal | bold | bolder | lighter | number | initial | inherit ;

실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편입니다. 숫자로 표현할 때는 폰트 자체에서 지원을 해야 표현할 수 있습니다. 400은 normal과 같고, 700은 bold와 같습니다

Webfont

• 시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치가 되어 있어 사용할 수 있는 경우
• 이미지 폰트는 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우
• 웹 폰트 : 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.ttf) format('ttf'); /* 적용 될 웹 폰트의 경로 및 포멧 */
    font-weight: 700; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

웹폰트는 브라우저별로 지원되는 확장자가 다릅니다. 따라서 url 설정시 우선적으로 포멧되는 형식을 지정하여 불필요한 다운이 없도록 최적해야 합니다.

font-weight와 font-style은 폰트이름을 하나로 하고 여러개의 스타일을 표현하고자 할 때 사용합니다. 각 값과 폰트의 굵기를 대응하여 각각 선언하므로써 알맞은 폰트가 적용될 수 있도록 해야합니다.

하지만 웹폰트를 사용할 경우 몇 가지 문제가 발생합니다.

• FOUT(Flash of Unstyled Text)
  웹 폰트 파일이 로드되기 전 까지 기본서체가 노출되다가 웹 폰트 로드가 완료되면 웹폰트로 바뀌면서 깜빡이는 현상입니다. IE에서 발생합니다.

• FOIT(Flash of Invisible Text)
  웹 폰트 파일이 로드되기 전 까지 웹 페이지를 로드하지 않고 웹폰트 로드가 완료되면 웹 페이지를 로드하기 때문에 로드가 완료되기 전 까지 텍스트가 안보이는 현상입니다. Chrome, Safari 등에서 발생합니다.

• FOFT(Flash of Faux Text)
  웹 폰트 파일에 font-weight, font-style과 관련된 서체가 있을 시 로드 전 브라우저에서 임의로 서체의 굵기와 스타일을 생성하여 노출하고 웹폰트 로드가 완료되면 웹 폰트로 바뀌는 현상입니다.

Vertical-align(수직 정렬)

vertical-align: keyword | length | percent | initial | inherit ;

소문자 x를 기준으로 하단 라인(baseline)을 기준으로 설정합니다.inline 또는 inline-block에서만 사용할 수 있기에 display이 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않습니다. 수치 적용시에는 음수값도 가능합니다.

• sub, super, top, text-top, middle, bottom, text-bottom
• px
• %

Text-align(수평 정렬)

text-align: left | right | center | justify | initial | inherit ;

인라인 요소의 수평 정렬에 사용됩니다. 이 속성 또한 div와 같은 블록 레벨 요소에는 적용되지 않습니다.

Text-indent(들여쓰기)

text-indent: length | initial | inherit;

문단의 첫 줄에 대한 들여쓰기를 수행합니다. px, em 등 고정 수치로 지정하며, 음수 값을 사용할 수 있으며, 음수 값 사용 시 왼쪽으로 이동합니다.

percent ( % ) 텍스트를 포함하는 컨테이너 블록의 width(부모의 width)를 기준으로 변환된 백분율 값으로 들여쓰기합니다.

Text-decoration(꾸미기)

text-decoration: text-decoration-line    text-decoration-color    text-decoration-style | initial | inherit;

텍스트를 꾸며주는 다양한 줄의 스타일과 모양, 색상 등을 제어합니다.

• underline, overline, line-through
• currentColor(default) : 기존에 선언한 색상 지정값에 맞추어 이를 승계
• solid, double, dotted, dashed, wavy

단어 관련 속성

단어의 공백을 어떻게 처리할지, 단어 사이의 간격을 얼마만큼 가질지, 줄 바꿈이 되는 지점은 어디로 둘지 등을 제어할 수 있습니다.

white-space 속성
요소 안에 공백과 개행을 어떻게 처리할지 지정하는 속성.

1. normal
공백과 개행을 무시하고, 필요한 경우에 자동 줄바꿈 발생. 기본 값
2. nowrap
공백과 개행을 무시하고, 자동 줄바꿈이 일어나지 않음. 줄 바꿈은 <br> 요소에서만 발생.

letter-spacing 속성
자간을 지정하는 속성. 길이만큼 자간을 지정. 음수 허용

word-spacing 속성
단어 사이의 간격을 지정하는 속성. 길이만큼 단어 사이의 간격을 지정. 음수 허용

word-break 속성
단어가 라인 끝에 나올 경우 어떻게 처리할지(중단점) 지정하는 속성.

1. normal
기본 값. 중단점은 공백이나 하이픈(-)(CJK는 음절)
2. break-all
중단점은 음절. 모든 글자가 요소를 벗어나지 않고 개행
3. keep-all
중단점은 공백이나 하이픈(-)(CJK는 그 외 기호도 포함)

overflow-wrap 속성
요소를 벗어난 단어의 줄바꿈을 지정하는 속성.
기본값은 중단점에서 개행. break-word 속성 사용시 모든 글자가 요소를 벗어나지 않고 강제로 개행

Q&A

Q. 웹폰트의 문제점을 해결하기 위한 방식?

• A. 구글에서 제공하는 Google Webfont Loader를 사용하면 위 3가지 현상을 자유롭게 바꿀 수 있습니다.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({ 
    // For google fonts
    google: {
      families: ['Droid Sans', 'Droid Serif']
    },
    // For early access or custom font
    custom: {
        families: ['Nanum Gothic'],
        urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
    }  
  });
</script>

위의 스크립트를 적용하면 해당 웹 폰트를 추적하면서 자동으로 html에 아래의 클래스가 적용됩니다. 정식 구글 웹폰트의 경우는 이름만 넣어도 동작하며 커스텀 폰트의 경우 url까지 적어줘야 제대로 작동합니다.

Q. 블록 레벨의 수평 수직 정렬은 어떻게?

• A. 수평 정렬의 경우 margin의 auto 값을 일반적으로 활용합니다. 수직 정렬의 경우 정렬하고자 하는 대상을 담을 블록요소를 만듭니다. 대상의 높이보다 높은 값의 line-height속성 사용하여 이를 설정해준 후에 정렬하고자 하는 대상에 vertical-align:middle을 적용합니다.