step16. 01~03. unit (단위)
/*
[ 크기나 거리를 나타내는 단위 ]
px, %, em, rem
*/
.wrapper{
background-color: yellow;
width: 500px;
margin: 0 auto;
}
.wrapper2{
background-color: yellow;
width: 50%; /* 부모 width 의 50% */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">.wrapper</div>
<div class="wrapper2">.wrapper2</div>
</body>
- px : pixel (점, 화소의 개수)을 의미한다. 군대 px 아니다.
- % : 부모의 크기에 대한 상대적인 비율이다.
- em : 상속받은 글자 크기의 배수이다. 예를 들어 상속받은 글자 크기가 16px이면 1em=16px, 1.5em=24px, 2em=32px 이다.
- rem : 최상위 요소(<html>) 글자 크기의 배수이다. html의 font-size가 14px이면 1rem=14px, 2rem=28px이 된다.
em과 rem은 모두 width와 height의 단위로 사용할 수 있다.
<style> #one{ font-size: 16px; } #two{ font-size: 1em; /* inherit 된 글자 크기의 1배 */ } #three{ font-size: 2em; /* inherit 된 글자 크기의 2배 */ } #four{ font-size: 3em; /* inherit 된 글자 크기의 3배 */ } .box{ width: 10em; height: 10em; background-color: yellow; margin-left: 5em; border: 1px solid red; } .wrapper{ font-size: 20px; } </style> </head> <body> <h1>기본 글자의 크기는 16px 이다. </h1> <p>ABCD 글자크기:16px</p> <p id="one">ABCD 글자크기:16px</p> <p id="two">ABCD 글자크기:16px</p> <p id="three">ABCD 글자크기:32px</p> <p id="four">ABCD 글자크기:48px</p> <div class="box"></div> <div class="wrapper"> <div class="box"></div> </div> </body>
- 기본 글자의 크기는 16px이다.
- 같은 em으로 설정했어도 어떤 내용을 상속받았는가에 따라 크기가 달라진다. 상속받은 크기가 16px이면 1em이 16px, 20px이면 1em이 20px이다. 때문에 다음의 예시처럼 rem 단위를 쓰면 <html> 에서 상속받은 것을 기준으로 하기 때문에 크기를 통일할 수 있다. 최근에는 rem을 많이 쓰는 추세라고 했다.
<style> html{ /* 1 rem 의 기준 크기 */ font-size: 10px; } #one{ font-size: 16px; } #two{ /* [ css3 에서 추가된 단위 rem ] -최상위(root) 글자 크기의 배수 -html 요소의 글자 크기의 배수 이다. */ font-size: 1rem; } #three{ font-size: 2rem; } #four{ font-size: 3rem; } .box{ width: 10rem; height: 10rem; background-color: yellow; margin-left: 5rem; border: 1px solid red; } .wrapper{ font-size: 20px; } </style> </head> <body> <p>ABCD</p> <p id="one">ABCD</p> <p id="two">ABCD</p> <p id="three">ABCD</p> <p id="four">ABCD</p> <div class="box"></div> <div class="wrapper"> <div class="box"></div> </div> </body>
'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글
[css] step17. quiz (가운데 정렬) (0) | 2021.12.14 |
---|---|
[css] step15. box-sizing (0) | 2021.12.14 |
[css] step14. etc (0) | 2021.12.14 |
[css] step13. css weight (0) | 2021.12.14 |
[css] step12. text (0) | 2021.12.14 |
댓글