CSS에는 폰트 크기, padding, margin, width 등 다양한 속성들에 사용할 수 있는 여러 단위가 있습니다.
px, rem, em, % 등이 있습니다.
px
px는 절대적인 값입니다. 다른 요소의 값에 영향을 받지 않습니다.
px 사용 예시 코드>
.container {
padding-top: 40px;
background-color: lime;
}
rem
rem 은 상대적인 값입니다. 어떤 값에 의해 결정 되느냐? <html> 태그의 font-size에 의해 결정됩니다.
3rem은 <html> 태그의 font-size의 3배 크기입니다.
rem 사용 예시 코드>
html {
font-size: 20px;
}
.container {
padding-top: 3rem; /* html의 font-size * 3 = 60px */
background-color: blue;
}
em
em도 rem과 마찬가지로 상대적인 값입니다. em은 자기 자신의 font-size를 기준으로 합니다.
3em은 자기 자신의 font-size의 3배 크기입니다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 정해집니다.
em 사용 예시 코드 (자신의 font-size 없는경우) >
html {
font-size: 15px;
}
.container {
/* 자동으로 html의 font-size 15px을 상속받음 */
padding-top: 2em; /* 자신의 font-size * 2 = 30px */
background-color: red;
}
만약 자기 자신에게 정해진 font-size가 있다면 그 값을 기준으로 em이 결정됩니다.
em 사용 예시 코드 (자신의 font-size 있는경우) >
html {
font-size: 10px;
}
.container {
font-size: 20px;
padding-top: 2em; /* 자신의 font-size * 2 = 40px */
background-color: red;
}
퍼센트 (%)
% 역시 상대적인 값입니다. %는 어느 항목에서 쓰이냐에 따라 기준이 다르게 적용됩니다.
예를 들어 font-size에서 %가 쓰일 경우에는, 상위 요소의 font-size에 곱해주는 방식으로 계산됩니다.
% 사용 예시 코드 (font-size의 경우) >
.container {
font-size: 20px;
background-color: gray;
}
.text {
font-size: 150%; /* 상위 요소인 container의 font-size * 1.5 = 30px */
background-color: skyblue;
margin: 0;
}
%가 margin이나 padding의 단위로 사용될 경우엔, 상위 요소의 width를 기준으로 계산합니다.
% 사용 예시 코드 (padding의 경우) >
.container {
width: 100px;
background-color: lime;
}
.text {
padding-left: 30%; /* 상위 요소의 width * 0.3 = 30px */
}
여기서 주의할 점이 있습니다.
margin-top이나 padding-bottom 등 세로(상하) 속성을 조절할 때는 상위 요소의 어떤 값을 기준으로 계산할까요? 상위 요소의 height 값을 기준으로 %가 계산될까요? 아닙니다.
이 경우에도 width를 기준으로 계산된다는 점 꼭 기억해두시기 바랍니다.
'IT > CSS' 카테고리의 다른 글
| 언어별 주석 처리 방법 (C, JAVA, CSS, HTML, SQL, Python 등) (0) | 2022.04.28 |
|---|---|
| CSS - '클래스(class)'와 '아이디(id)' 정리 (0) | 2022.04.28 |
| CSS - 기본 속성 정리 style, 폰트크기, 텍스트 정렬, 색상, 여백 (0) | 2022.04.28 |
| CSS - 속성 상속 개념과 예시 코드 (0) | 2022.04.28 |
| CSS 선택자 선택하는 방법 - 태그, 아이디, 클래스, 속성 (0) | 2022.01.21 |
댓글