몇까지 유용한 CSS 팁

Updated: 2025-01-04

유용한 CSS 팁들

반응형 웹 디자인이란 (responsive web design) 다양한 기기에서 웹사이트를 이용하는 현대 사회에서 필수적인 기술이 되었습니다. 반응형 웹 디자인을 통해 개발자는 더욱 효율적으로 웹사이트를 개발하고, 사용자는 더욱 편리하게 웹사이트를 이용할 수 있습니다.

저도 공부를 하면서 이러한 웹 디자인의 중요성을 항상 깨닭고 있으며 공부하고 있습니다. 따라서 이번 글은 이러한 웹 디자인을 공부하다가 알게된 몇까지 CSS 팁들을 소개하고자 합니다.

1. Relative Padding

가끔 padding을 설정할때 우리는 작은 디바이즈의 사이즈도 고려하면서 두가지의 패딩 스타일을 정의 할때가 있습니다.

1.container {
2	padding: 5em;
3}
4@media(max-width: 700px) {
5	.container {
6		padding: 2em;
7	}
8}

이렇게 따로 정리하는 것도 좋은 방법이지만 한줄로 이 문제를 해결할 수 있는 방법이 바로 relative padding 입니다.

1.container{
2	padding: min(5em, 8%)
3}

min() 함수**:** 두 개 이상의 값 중 더 작은 값을 선택합니다.
5em : 요소의 글꼴 크기의 5배에 해당하는 길이입니다.
8% : 요소의 부모 요소 너비의 8%에 해당하는 길이입니다.

위 코드와 같이 padding 에 min(5em, 8%) 을 같이 쓰면 브라우저는 5em 과 8% 의 값을 비교하고 두 값 중 더 작은 값을 여백으로 설정합니다. 이렇게 코드 한줄로 훨씬 더 간편하게 반응형 디자인을 할 수 있습니다.

예시

작은 화면: 만약 화면이 작아서 8% 가 5em 보다 작다면, 여백은 8% 로 설정됩니다. 이 경우, 여백의 크기는 화면 크기에 따라 비례적으로 조정됩니다.
큰 화면: 만약 화면이 커서 5em 이 8% 보다 작다면, 여백은 5em 으로 고정됩니다. 이 경우, 여백의 크기는 글꼴 크기에 따라 비례적으로 조정됩니다.

2. 반응형 폰트 사이즈

항상 헤딩 폰트를 작성했을때 컴퓨터 모니터 크기로 봤을때는 비율이 괜찮지만 모바일이나 작은 화면 사이즈에서는 다른 본문에 비해 너무 클때가 있습니다. 이럴 경우 또 각 스크린 사이즈 마다 폰트 사이즈를 변경하는 추가 코드를 작성해야 합니다.

이럴 경우에 쓸 수 있는 폰트 사이즈는 바로 vw 입니다.

1h1 {
2	font-size: 10vw;
3}

vw 는 사용자의 viewport 사이즈에 맞춰 변경하기 때문에 heading 같은 폰트들을 스케일할 때 쓰면 매우 유용합니다.

하지만 vw 를 사용할때는 주의 할게 있습니다. 바로 너무 넓거나 좁은 사이즈 화면일 경우 입니다.

vw 는 오로지 사용자의 viewport로 반응하기 떄문에 너무 가로로 넓은 화면인 경우 폰트 사이즈가 너무 큰 단점이 있습니다. 반대로 너무 작은 사이즈의 모니터나 작은 핸드폰일 경우 너무 작아지는 문제점도 있습니다.

이러한 문제를 해결하기 위해서는 clamp() 를 사용하는 것입니다.

1h1 {
2	font-size: clamp(1.8rem, 10vw, 5rem);
3}

clamp(1.8rem, 10vw, 5rem); 를 사용하면 폰트 사이즈의 최소와 최대값을 설정할 수 있기 때문에 폰트는 1.8rem 보다 작아질 수 없고, 5rem 보다 커질 수 없습니다.

여기서 추가로 또 하나의 문제를 제시하자면 이 vw 는 사용자가 화면을 확대하거나 축소할때 변경되지 않는 점입니다. 하지만 이런 문제는 10vw + 1rem 사용하는 방법입니다.

1h1 {
2	font-size: clamp(1.8rem, 10vw + 1rem, 5rem);
3}

하지만 뒤에 1rem 은 폰트의 사이즈에 맞춰서 다른 rem 사이즈도 확인해 보시는 것을 추천합니다.

3. 반응형 이미지

기본으로 html 이미지들의 사이즈는 변경되지 않습니다.

따라서 max-width: 100% 랑 height: auto 를 사용하여 이미지 크기가 변경되게 설정할 수 있습니다. 하지만 여러 이미지를 사용할 경우 각자 크기가 다를 수 있기 때문에 추가할 코드가 있습니다.

1img {
2	max-width: 100%;
3	height: auto;
4	aspect-ratio: 1 / 1; 
5	// 16 / 9, 9 / 16 비율도 사용할 수 있습니다
6}

aspect-ratio 를 사용하면 이미지의 비율을 설정하여 이미지들의 사이즈를 동일화 시킬 수 있습니다. 하지만 다른 비율을 사용할때는 object-fit: cover 를 사용하여 억지로 사진의 비율을 망가트리지 않을 수 있습니다.

4. dvh의 활용

보통 어떤 요소가 화면 높이를 꽉 채우기 위해 vh 를 쓰는 경우가 많습니다. 하지만 모바일 같은 디바이즈의 경우 사이트로 이동할때 화면 위에 사이트의 주소를 보여주는 UI가 생기므로 vh 를 썼는데도 불구하고 화면에 안맞춰지는 경우가 있습니다.

이럴 경우 vh 대신 dvh 를 사용하면 해결 됩니다.

YLOG