반응형
[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.
반응형
'Web > CSS' 카테고리의 다른 글
[CSS] 다양한 폰트(글꼴) 사용하기 (feat. Google Fonts) (1) | 2023.11.17 |
---|---|
[CSS] transition 애니메이션 부여하기 (1) | 2023.11.13 |
[CSS] 상대 단위 em과 rem (1) | 2023.11.09 |
[CSS] 투명도 설정 (feat. opacity, rgba) (1) | 2023.11.07 |
[CSS] 적용 우선순위 (16) | 2023.11.02 |