[CSS] %, 백분율 단위 (CSS percentage)

[CSS] %, 백분율 단위

 

 

CSS에는 길이나 크기를 나타내는 단위들이 있는데 그 중 하나가 '%(percentage)'이다.

'%'는 그 값이 다른 값과 항상 상대적으로 나타난다.

어떤 값의 백분율이 되는지는 경우에 따라 다르게 나타난다.

 

 

부모 요소의 값에 대한 백분율

<div class="parent">
  <div class="child"></div>
</div>

 

 

.parent {
    background-color: gold;
    width: 120px;
    height: 80px;
}

.child {
    background-color: orange;
    width: 50%;
    height: 50%;
}

 

퍼센티지 값은 부모 요소에 대해 상대적이다.

자식 요소의 너비는 부모 요소 너비의 50%, 높이는 부모 요소 높이의 50%이다.

여기서 자식 요소의 너비와 높이는 각각 60px, 40px와 같다.

만약 부모 요소의 너비와 높이가 변한다면 자식 요소도 그에 맞춰 변하여 설정한 50%를 유지한다.

이러한 특성 때문에 퍼센티지는 너비나 높이를 설정할 때 많이 사용된다.

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.

 

 

 

요소 자체의 값에 대한 백분율

<div>font size 20px</div>​

 

 

div {
    font-size: 20px;
    border: 1px solid black;
    padding-left: 5%;
    line-height: 200%;
}

 

퍼센티지 값은 부모 요소를 기준으로 나타나지 않고 요소 자체의 어떤 값을 기준으로 나타난다.

'padding-left'는 컨테이닝 블록(containing block)의 너비의 5%, 줄 간격은 폰트 크기의 200%이다.

여기서 'padding-left'의 값은 컨테이닝 블록의 너비가 명확하지 않기 때문에 특정할 수 없고 줄 간격은 40px와 같다.

 

See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.