[css] 여백이나 패딩 값을 rem 단위로 설정하기
웹 디자인에서 여백과 패딩을 설정할 때, 픽셀(px) 대신 rem 단위를 사용하는 것이 권장됩니다. 이는 반응형 디자인과 웹 접근성을 개선하기 위함입니다.
px 대신 rem 단위 사용하기
일반적으로, 웹 사이트의 폰트 크기는 기본 픽셀 대신 rem 단위를 사용하여 설정합니다. rem은 “루트 em”을 의미하며, 이는 사이트의 루트 요소인 <html> 요소의 폰트 크기에 상대적으로 설정됩니다. 이를 통해 사용자가 웹 사이트를 방문할 때 브라우저의 설정에 따라 폰트 크기를 조정할 수 있습니다.
여백(margin)이나 패딩(padding) 또한 픽셀 대신 rem 단위를 사용하여 설정할 수 있습니다. 이를 통해 사용자의 환경에 맞게 여백과 패딩이 조정되어 더 나은 웹 경험을 제공할 수 있습니다.
.element {
margin: 1.5rem;
padding: 1rem;
}
위의 예시에서는 .element의 여백을 1.5rem으로, 패딩을 1rem으로 설정하였습니다.
요약
rem 단위는 웹 디자인에서 폰트 크기뿐만 아니라 여백과 패딩의 설정에도 유용하게 활용될 수 있습니다. 이는 더 나은 반응형 디자인과 웹 접근성을 제공함으로써 사용자 경험을 향상시킬 수 있습니다.
이외에도 미디어 쿼리와 조합하여 더욱 효과적인 반응형 디자인을 구현할 수 있습니다.
참고 자료: