css 글자 크기 부모 요소에 따라가게 설정
2022. 3. 24. 11:27
css에서 글자 사이즈는 font-size 옵션으로 조정할 수 있다. 하지만 부모 크기에 따라서 글자 사이즈를 조절하려면 px 단위가 아닌 em 단위를 써야한다. em 단위는 부모 font-size로 설정된 px 크기를 1em으로 설정한다.
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
position: relative;
width:300px;
height:200px;
font-size: 30px;
}
.container2{
position: relative;
width:300px;
height:200px;
font-size: 50px;
}
.block{
font-size: 1em;
}
</style>
<script>
</script>
</head>
<body>
<div style="border: dashed red;">
<div class="container">
<div class="block">안녕하세요</div>
</div>
<div class="container2">
<div class="block">안녕하세요</div>
</div>
</div>
</body>
</html>
<결과>
'IT 족집게 > 개발' 카테고리의 다른 글
| css box-shadow 사용 방법 (0) | 2022.03.25 |
|---|---|
| Javascript insertBefore로 요소 전으로 순서 바꾸기 (0) | 2022.03.24 |
| css 부모 요소 우측 상단에 위치 고정하기 (0) | 2022.03.24 |
| Referential integrity constraint violation 스프링 오류 해결법 (0) | 2022.03.15 |
| jquery 화살표 함수 this 오류 (0) | 2022.03.13 |