고정 헤더 영역
상세 컨텐츠
본문
CSS font-size의 크기 단위
1. 절대적 크기
2. 상대적 크기
1. 절대적 크기
텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
절대적 크기로 설정된 텍스트는 모든 브라우저에서 같은 크기로 표현됩니다.
px : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 나타냅니다. 고정된 크기 단위이며 크기를 조절할 수 없다는 단점이 있다.
만약 20px을 설정했다면 핸드폰이나 pc에서도 20px이다.
2. 상대적 크기
텍스트를 둘러싸고 있는HTML 요소들의 크기에 따라 테스트의 크기로 같이 변하는 방식입니다.
% : 백분율 단위이며 기본 크기(16px)를 100%로 놓고 그에 대한 상대적인 크기를 설정합니다.
em : 배수 단위이며 글꼴의 기본 크기(160px)를 1em으로 놓고 그에 대한 상대적인 크기를 설정합니다.
웹 문서에서 사용되는 단위이며, pc와 모바일 등 다른 장치에서도 크기를 조절할 수 있습니다. 1em은 pc에서 16px,
모바일에서는 12px로 표현됩니다. 부모 엘리먼트의 폰트 사이드를 기준으로 글자 크기를 설정할 수 있습니다.
rem : em과 비슷한 속성을 가지고 있으며, 루트 엘리먼트의 폰트 사이즈를 기준으로 글자 크기를 설정합니다.
<style>
.font-div {font-size: 2em;} /*16pxX2*/
.font-p1 {font-size: 1em;} /*상속 받았으니 그대로임*/
.font-p2 {font-size: 1rem;} /*상속을 받았지만 HTML에 적용한 크기를 상속받아 크기가 다르다*/
</style>
</head>
<body>
<h2>CSS 텍스트</h2>
<div>
<p>An RGBA color value is specified with: rgba(red, green, blue, alpha).
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).</p>
</div>
<div class="font-div">
<p class="font-p1">An RGBA color value is specified with: rgba(red, green, blue, alpha).
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).</p>
</div>
<div class="font-div">
<p class="font-p2">An RGBA color value is specified with: rgba(red, green, blue, alpha).
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).</p>
</div>
</body>
<style>
body { font-size: 100%; }
#large { font-size: 2.5em; }
#small { font-size: 0.7em; }
#fixed { font-size: 20px; }
</style>
</head>
<body>
<h1>font-size 속성을 이용한 글꼴의 크기 설정</h1>
<p id="large">글꼴의 크기를 2.5em 으로 변경합니다.</p>
<p>글꼴의 기본 크기인 1em 입니다.</p>
<p id="small">글꼴의 크기를 0.7em 으로 변경합니다.</p>
<p id="fixed">글꼴의 크기를 20px 로 변경합니다.</p>
</body>
반응형
'WEB-Front end > *CSS' 카테고리의 다른 글
| [CSS] Padding(패딩) 속성 (0) | 2023.04.22 |
|---|---|
| [CSS] 여백(margin)속성 (0) | 2023.04.21 |
| [CSS] CSS 텍스트 (0) | 2023.04.20 |
| [CSS] CSS 배경 (0) | 2023.04.20 |
| [CSS] CSS색상 (0) | 2023.04.20 |
댓글 영역