폰트 이모저모

thiagoo·2020년 6월 30일
0

font-size에 대하여


웹에서 폰트의 기본 크기는 16px이다.
폰트를 정의하는 다양한 단위에 대해서 알아보자.

  • % : 부모요소의 글자크기를 100% 기준삼는다.
  • em : 16px이 1em과 같다. 1.5em은 24px과 같은 셈이다. 16px의 1.5배는 24px이기 때문이다. em의 기준도 부모요소이다. 부모요소가 10px인 경우에는 1.5em은 15px과 같은 것이다.
  • rem : html 요소에서 지정한 글자크기다. html의 글자 크기가 곧 1rem이 되는 것이다.
  • vw/vh : 뷰포트 너비값의 100분의 1단위이다.

16px - 100% - 1em - 12pt


글자 끊어 보이게 하기


글자를 이런식으로...
끊어서 보이게 하고...

  1. width 값을 정해준다.
  2. overflow->hidden 으로
  3. white-space -> nowrap
  4. text-overflow->ellipsis

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p-01 {width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
        .p-02 {width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    </style>
</head>
<body>
   
    <p class="p-01">글자를 이런식으로 하고싶을 때는 이렇게 해보자</p>
    <p class="p-02">끊어서 보이게 하고싶을 때는 이렇게 해보자</p>
    
</body>
</html>

profile
냄새 나는 코드 말고 향기 나는

0개의 댓글