CSS에서 width와 height로 요소 크기 조절하는 법

 

웹 페이지를 구성하다 보면 요소의 너비와 높이를 조절해야 할 일이 정말 많죠. 오늘은 CSS의 width와 height 속성을 활용해서 다양한 요소들의 크기를 어떻게 조절하는지, 그리고 이미지를 반응형으로 만드는 방법까지 알아보겠습니다.

---

✅ 사이드바 만들기 – width로 너비 설정하기

먼저 사이드바를 만들어볼게요. <aside> 태그는 보통 사이드 콘텐츠에 많이 사용되는데요, 기본적으로 페이지 전체 너비만큼 차지하고 있어서 너무 넓게 느껴질 수 있어요.

aside

{ width: 500px; }

 

이렇게 지정하면, <aside> 요소의 너비는 딱 500px로 제한됩니다. 실제로 적용해 보면 사이드바 느낌이 확실히 나죠.

---

✅ 헤더 높이 조절 – height 사용하기

이번엔 상단 헤더의 높이를 조정해봅시다.

header

{ height: 80px; }

 

적용 후 브라우저 개발자 도구에서 보면, 실제 요소 높이는 120px로 나올 수도 있어요. 왜 그럴까요?

💡 박스 모델(Box Model)의 영향!

기본 박스 모델에서는 padding 값이 포함됩니다. 예를 들어, 위아래 padding이 20px이라면:

80px (height) + 20px (top padding) + 20px (bottom padding) = 총 120px

그래서 우리가 명시한 height 값만으로는 실제 높이를 정확히 알기 어려워요. 이 부분은 이후에 box-sizing을 배워서 해결할 수 있습니다!

---

🌀 텍스트는 자동으로 가운데 오지 않아요!

처음에는 텍스트가 중앙 정렬된 것처럼 보일 수 있지만, 사실은 위아래 padding이 같아서 그렇게 보였던 거예요. height를 조정하면 텍스트가 위쪽으로 붙게 되죠.

→ 수직 가운데 정렬은 flexbox나 line-height, grid 등을 활용해야 정확히 맞출 수 있어요.

---

🖼️ 이미지 사이징 – CSS로 깔끔하게!

HTML에서 이미지의 크기를 조정하기보단, CSS로 관리하는 게 더 유연하고 좋습니다.

 

.post-image

{ width: 800px; height: auto; }

 

여기서 height: auto는 이미지의 비율을 유지해주기 때문에 꼭 기억해두세요!

📌 만약 HTML에 이미 height 값이 설정되어 있다면, 꼭 height: auto로 덮어줘야 왜곡되지 않아요.

---

📱 반응형 웹을 위한 % 단위

이제 픽셀 단위 대신 백분율(%) 단위를 써봅시다. 예를 들어:

.post-image

{ width: 100%; }

 

이렇게 하면 이미지는 부모 요소의 너비에 따라 유동적으로 크기를 조절합니다. 즉, 창 크기를 줄이면 이미지도 함께 줄어들죠!

width: 50%;

같은 방식으로 부모 요소의 절반 크기만큼만 보이게 할 수도 있어요.

이 방식은 반응형 웹 디자인의 핵심이기도 합니다.

---

✨ 마무리 정리

오늘은 다음 내용을 다뤘어요:

• width와 height로 요소 크기 조절하는 방법
• 박스 모델 때문에 실제 크기가 달라질 수 있음
• 이미지 크기를 CSS에서 지정하는 방법
• 반응형 이미지를 만들기 위한 % 단위 활용

앞으로는 이 개념을 바탕으로 더 멋진 반응형 웹사이트를 만들 수 있겠죠? 🙌