[CSS] 폰트( 제곱표현, 말줄임 )

1. 글꼴 크기

모든 브라우저의 기본 글꼴의 크기는 16px을 기준으로 합니다.

그런데 CSS에서 폰트는 px단위가 아닌, 창의 크기에 따라 글꼴 크기를 변화시키는 em, rem이라는 단위를 사용합니다.

이렇게 브라우저 창에 따라 글꼴 크기를 달리하는 단위를 사용하는 이유는 다음과 같습니다.

• 최근에는 데스크탑 뿐만 아니라 모바일, 태블릿 등 화면의 크기가 다양한 곳에서 웹 페이지를 접근할 수 있기 때문
• 브라우저에서 기본 글꼴 크기를 크게, 예를 들어 32px로 고쳤을 때, CSS에서 폰트를 16px로 고정했다면 글자가 커지지 않기 때문에 접근성이 떨어집니다.

1em = 16px을 의미합니다.

한글 페이지는 12px을 적용하는 곳이 기본이므로, 따라서 한글 페이지에서 글자 크기는 0.75em으로 적용하는 것이 좋습니다.

2. 제곱 표현

cm², m², km²  을 표현하는 방법은 다음과 같습니다.

.vertical {
        vertical-align:super;
        font-size:9px; 
}


<p>
면적을 나타내는 단위는 cm<span class="vertical">2</span>,
m<span class="vertical">2</span>, km<span class="vertical">2</span> 등이 있습니다.
</p>

3. 말줄임

글자 수가 너무 많을 경우, 생략의 의미로 말줄임표를 사용할 때가 있습니다.

JS로 처리하는 것은 조금 복잡할 수 있는데, CSS로 처리하면 매우 간단해집니다.

1) 1단계

p.ellipsis{
         width:300px;
         border:1px solid gray;
         white-space: nowrap; /* width를 넘어도 글자를 밑으로 내리지 말라. */
}


<p class="ellipsis">
        ellipsis는 말줌임입니다.
        css3에 새로 추가된 text-overflow를 사용합니다.
</p>

• white-space: nowrap
• <p>요소의 content가 width를 넘어갈 경우, 줄바꿈 하는 것을 막습니다.

2) 2단계

p.ellipsis{
         width:300px;
         border:1px solid gray;
         white-space: nowrap; 

         overflow-x: hidden;        /* overflow가 발생하면 숨김 */
}

• overflow-x
• x축 방향으로 width를 넘어가는 content가 있을 경우 처리를 할 수 있다는 것을 뜻하며,
• hidden은 말 그대로 숨기는 스타일을 의미합니다.

3) 3단계

p.ellipsis{
        width:300px;
        border:1px solid gray;
        white-space: nowrap; 
        overflow-x: hidden;

        text-overflow: ellipsis;              /* overflow가 발생하면 말줄임표 생성 */
}

• text-overflow : ellipsis
• 말 줌임표를 생성하는 스타일입니다.