software

반응형 웹 디자인

발행: (2026년 5월 22일 PM 06:10 GMT+9)
5 분 소요
원문: Dev.to

Source: Dev.to

시작:

Responsive web design은 어떤 화면 크기에서도 웹사이트가 보기 좋게 보이도록 하는 웹 디자인 또는 CSS 스타일을 말합니다.
※ 가장 많이 사용되는 반응형 디자인 기법은 “Mobile First Design”(모바일 우선 설계) 입니다.

모바일 기기에 최적화된 페이지를 만들려면, 먼저 head에 다음 메타 태그를 삽입합니다.

CSS 단위: 퍼센트 “%”(예: 100%), 그리드용 “1fr”, “vw” 등.
“media query”.
CSS 속성: “max-width”, “min-width”.
그 외에도 여러 방법이 있습니다.

예를 들어 화면 너비가 500픽셀 이하일 때와 그보다 클 때 각각 다른 스타일을 적용하고 싶다면 다음과 같이 작성합니다.

@media (max-width: 500px) {
    /* 500px 이하일 때 적용 */
}
@media (min-width: 500px) {
    /* 500px 초과일 때 적용 */
}

아래 CSS 코드는 이미지가 넘치지 않도록 막고, 이미지가 자동으로 크기를 조절하도록 합니다.

img {
    /* 이미지 스타일 */
}

내 반응형 콘텐츠 혹은 페이지 “wrapper” 클래스. 예시에서는 이 래퍼가 콘텐츠의 최대 너비를 560px로 제한하고, width: 100% 로 모든 화면에 맞게 적응하도록 합니다.

.wrapper {
    /* 래퍼 스타일 */
}

화면 크기에 따라 1을 숨기고 2를 보이게 하거나, 동적으로 스타일을 바꾸고 싶을 때 사용합니다. 예를 들어 데스크톱 버전을 숨기고 모바일 버전을 보여주는 경우(드롭다운 메뉴 등) 다음과 같이 작성합니다.

@media (width >= 500px) {
    /* 500px 이상일 때 */
}
@media (width = 500px) {
    /* 정확히 500px일 때 */
}
@media (width <= 500px) {
    /* 500px 이하일 때 */
}

개인적인 경험과 팁

저는 “위에서 아래로 덮어쓰기(overriding)” 방식을 사용합니다. 즉, 큰 화면용 기본 스타일을 먼저 정의하고, 그 아래에 미디어 쿼리를 이용해 작은 화면용 스타일을 추가하는 방식입니다.

/* 큰 화면용 기본 스타일 */
.testClass { color: red; }

/* 작은 화면용 스타일을 덮어쓰기 */
@media (max-width: 500px) {
    .testClass { color: red; }
}
@media (max-width: 300px) {
    .testClass { color: red; }
}
@media (max-width: 100px) {
    .testClass { color: red; }
}

위와 같이 500px 이하, 300px 이하, 100px 이하 순으로 스타일을 덮어써서 각각의 화면에 맞는 디자인을 구현합니다.

테스트 및 디버깅 팁

  • 브라우저 창 크기를 직접 조절하면서 스타일 변화를 확인합니다.
  • 브라우저 메뉴 → “Inspect”(검사) → 개발자 도구를 열고, 창 크기를 조절해 봅니다.
  • 개발자 도구에서 모바일 시뮬레이션을 선택할 수 있습니다. (“Responsive Design Mode”, 전화 아이콘).
  • 실제 디바이스에서도 테스트해 보는 것이 가장 좋습니다.

참고 자료

문서

0 조회
#software #programming #community
원문 보기
Share:
Back to Blog

관련 글

더 보기 »

내 스킬

프로젝트를 위한 AI 지시문을 만들고, 설치하고, 관리하세요 — 코딩이 필요 없습니다. CREATE 이름을 정하고, 카테고리를 선택하고, 원하는 것을 설명하세요 — 마법사가 자동으로 구성합니다.