CSS 단위

단위1: %

• 기본적으로 parent element 의 백분율 
• font-size 의 백분율인 경우도 있음

예제1: parents element 를 기준으로 한 경우

<section>
    <div></div>
</section>

section {
    background-color: blue;
    width: 400px;
    height: 400px;
}

div {
    background-color: red;
    width: 50%;
    height: 50%;
}

 

예제2: font-size 를 기준으로 한 경우

<h1>CSS Units</h1>

h1 {
    font-size: 40px;
    border: 1px solid black;
    line-height: 300%;
}

 

 

------------------------------------------------------------------------

 

단위2: em

• em 으로 font-size 를 지정할 때: 부모 요소 폰트 크기의 배율(100% = 1em)
• em 으로 margin, padding 을 지정할 때: 현재 요소 폰트 크기의 배율(100% = 1em)

예제1

<article>
    <h2>I am h2</h2>
    <p>Lorem ipsum dolor</p>
</article>

article {
    font-size: 30px;
}

h2 {
    font-size: 2em;
}

p {
    font-size: 1em;
}

 

예제2

브라우저에서 화면 확대/축소 할 때, 버튼 모서리도 비율을 일정하게 유지하도록 할 때

button {
    font-size: 1em;
    border-radius: 0.5em;
}

 

 

------------------------------------------------------------------------

 

단위3: rem

em 이 부모 요소(parents element) 폰트 크기를 기준으로 했다면, rem 은 root element 폰트를 기준으로 함.