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
글자 끊어 보이게 하기
글자를 이런식으로...
끊어서 보이게 하고...
- width 값을 정해준다.
- overflow->hidden 으로
- white-space -> nowrap
- 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>
냄새 나는 코드 말고 향기 나는