CSS 크기 단위와 텍스트 스타일링
CSS에서는 다양한 크기 단위를 사용하여 요소의 크기와 텍스트의 스타일을 정의할 수 있습니다. 이번 글에서는 절대 단위와 상대 단위를 포함한 다양한 크기 단위와 텍스트 스타일링 방법에 대해 알아보겠습니다.
1. 다양한 크기 단위
CSS에서 크기를 지정할 때는 절대 단위와 상대 단위를 사용할 수 있습니다.
절대 단위
절대 단위는 화면의 해상도에 상관없이 일정한 크기를 유지합니다. 가장 많이 사용되는 절대 단위는 px(픽셀)입니다.
예제:
h1 {
font-size: 24px;
}상대 단위
상대 단위는 부모 요소나 다른 기준에 따라 크기가 변합니다. 상대 단위를 사용하면 더 유연한 디자인을 만들 수 있습니다.
1. 백분율(%)
백분율은 부모 요소의 크기에 상대적인 크기를 지정합니다.
예제:
.container {
width: 80%;
}2. em 단위
em은 부모 요소의 font-size를 기준으로 크기를 지정합니다. 부모 요소의 글꼴 크기가 변경되면 em 단위로 지정된 크기도 변경됩니다.
예제:
.container {
font-size: 16px;
}
.text {
font-size: 2em; /* 부모 요소의 글꼴 크기의 2배 */
}3. rem 단위
rem은 최상위 요소인 html 요소의 font-size를 기준으로 크기를 지정합니다. 이는 모든 요소에 일관된 크기를 적용할 때 유용합니다.
예제:
html {
font-size: 16px;
}
.container {
font-size: 1.5rem; /* 최상위 요소의 글꼴 크기의 1.5배 */
}2. 텍스트 스타일링
텍스트 스타일링은 웹 페이지의 가독성과 디자인을 향상시키는 중요한 요소입니다. 주요 텍스트 스타일링 속성에 대해 알아보겠습니다.
주석
CSS에서 주석은 /* */ 사이에 작성합니다. 주석은 코드에 대한 설명을 추가할 때 유용합니다.
예제:
/* 이 스타일은 본문 텍스트의 줄 높이를 설정합니다 */
p {
line-height: 1.5;
}line-height
line-height 속성은 줄 높이를 설정하여 텍스트의 가독성을 높입니다.
예제:
p {
line-height: 1.5;
}text-decoration
text-decoration 속성은 텍스트에 밑줄, 취소선 등을 추가합니다.
예제:
a {
text-decoration: underline;
}
.del-text {
text-decoration: line-through;
}font-weight
font-weight 속성은 텍스트의 두께를 설정합니다.
예제:
h1 {
font-weight: bold;
}
p {
font-weight: 300; /* 숫자 값으로 두께 설정 */
}font-style
font-style 속성은 텍스트의 스타일을 기울임(italic)으로 설정합니다.
예제:
em {
font-style: italic;
}결론
CSS에서 다양한 크기 단위를 사용하여 요소의 크기를 유연하게 조절하고, 텍스트 스타일링 속성을 활용하여 웹 페이지의 가독성과 디자인을 향상시킬 수 있습니다. 절대 단위와 상대 단위를 적절히 사용하고, 텍스트 스타일링 속성을 잘 이해하여 더 세련되고 가독성 높은 웹 페이지를 만들어 보세요.
