꿈소년의 개발 이야기

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 10 반응형 웹과 미디어 쿼리 본문

Do it 스터디!

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 10 반응형 웹과 미디어 쿼리

꿈소년 2026. 1. 24. 13:03
반응형

DAY 14

🔖 오늘 읽은 범위 :

⭐️01/22(목) 진도표 알림
✅공부 내용: 10 반응형 웹과 미디어 쿼리
✅ 쪽수: 315~340쪽

반응형 웹 알아보기

반응형 웹 디자인

  • 화면 크기가 다양해짐. 모바일 기기.
  • 기존 웹 사이트 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시할 수 있음.
  • 웹 요소를 화면 크기에 맞게 재배치하고 표시 방법만 바꾼다.

모바일 기기를 위한 뷰포트

  • 뷰포트(Viewport) : 스마트폰 화면에서 실제 내용이 표시 되는 영역.

  • 뷰포트는 <meta> 태그를 이용해서 <head></head> 태그 사이에 작성한다.

      <meta name="viewport" content="속성1=값1, 속성2=값2, .....">

  • content 속성을 이용해 뷰포트 속성과 속성값을 지정함.

    종류 설명 가능한 값 기본값
    width 뷰포트 너비. device-width
    크기 브라우저 기본값
    height 뷰포트 높이. device-height
    크기 브라우저 기본값
    user-scalable 확대 축소 가능 여부. yes no (yes 는 1로, device-width 와 device-height 의 값은 10으로 간주)
    initial-scale 초기 확대 축소한 값. 1 ~ 10 1

  • 자주 많이 사용하는 뷰포트 속성 : VS Code 에서 자동으로 입력한 기본 코드에도 자동으로 들어감.

      /* 뷰포트 너비를 단말기 화면 너비에 맞추고 초기 화면 배율 1로 지정. */
  <meta name="viewport" content="width=device-width, initial-scale=1">

  • CSS 크기 지정할 때, 뷰포트를 기준으로 하는 단위를 사용.

    • 1vw(viewport width) : 뷰포트 너비의 1%
    • 1vh(viewport height) : 뷰포트 높이의 1%
    • vmin(viewport minimum) : 뷰포트의 너비와 높이 중에서 작은 값의 1%
    • vmax(viewport maximum) : 뷰포트의 너비와 높이 중에서 큰 값의 1%

  • 뷰포트에 가득 채우려면? ⇒ 너비를 100vw, 높이를 100vh

반응형 요소 만들기

  • 웹에서 자주 사용되는 요소들을 반응형으로 만드는 방법

상댓값으로 글자 크기 지정하기 - em 단위, rem 단위

  • 글자 크기를 픽셀 px 단위로 지정할 경우, 글자 크기가 고정됨.
  • 상대적 글자 크기 지정 단위 : em, rem
  • em 단위
    • 부모 요소 지정 글꼴의 대문자 M 너비를 1em 으로 보고, 상대적인 값을 계산함.
    • 부모 요소가 글자 크기 지정이 안 된 경우, body 요소 기본 크기를 사용함.
  • rem 단위
    • 부모 요소 글자 크기 때문에 예기치 못한 결과가 나타나는 걸 방지하기 위한 단위.
    • root em : 루트에서 지정한 크기를 기준값으로 사용함.
    • 중간에 값이 바뀔 염려가 없음.

반응형 이미지 만들기

  • 부모 요소 너비에 따라 너비와 높이가 바뀌는 이미지

  • 보통 웹 문서에 이미지를 삽입할 때, 크기가 정해져 있으므로 이미지 일부만 보일 때도 있음.

  • width: 100% 사용 : 이미지가 부모 요소 너비에 맞춰 항상 100% 됨.

  • max-width: 100% 사용 : width 속성과 함께 사용하면, 부모 요소 크기에 따라 원본 이미지 만큼 커진다.

      .top {
    max-width: 100%;
    height: auto;
  }

object-fit 속성 사용하기

  • 시각 요소(이미지, 비디오)의 가로 세로 비율 유지하면서 해상도에 맞게 크기 조절하기.
종류 설명
fill 요소 전체 영역 채우기.
콘텐츠 원래 비율 무시.
contain 요소 전체 영역에 맞출수 있을 만큼 확대.
비율을 유지함.
영역을 모두 채우지 못할 수 있음.
cover 요소 전체 영역 채울 수 있을 만큼 확대.
비율 유지.
영역 채울 때 콘텐츠 일부 잘림.
none 콘텐츠 원래 크기 유지.
scale-down none, contain 중 콘텐츠 크기가 더 작은 값을 선택. 

.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

반응형 레이아웃 만들기

  • 유연한 레이아웃 ⇒ 플렉스 박스 레이아웃, CSS 그리드 레이아웃

미디어 쿼리 알아보기

  • 미디어 쿼리(media queries)
    • CSS 모듈.
    • 사이트 접속하는 기기의 화면 너비에 따라 레이아웃을 다르게 표시.
    • 접속 장치에 따라 특정한 CSS 스타일 사용하는 방법.
/*
1. only : 미디어 쿼리 미지원 브라우저에서는 무시하고 실행하지 않음.
2. not : not 다음에 지정하는 미디어 유형은 제외함.
3. and : 조건 추가 중첩. 조건의 순서는 상관없음.
4. 미디어 유형 : 적용할 미디어. 쉼표로 구분해서 여러 개 추가.
*/
@media [only | not ] 미디어 유형 [and 조건] * [and 조건]

@media screen and (min-width:768px) and (max-width:1439px) {
/* styles */
}

  • 미디어 유형의 종류
    Media Queries 3에서 정의 된 미디어 유형이 Media Queries 4 에서 대부분 제외되었음. all , screen , print 만 남겨졌음.
    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media#media_types

    종류 설명 비고
    all 모든 미디어 유형. 기본값. -
    print 인쇄 장치 -
    screen 컴퓨터 스크린. 스마트폰 스크린도 포함. -
    tv 티비. 음성과 영상이 동시에 출력되는 티비. deprecated
    aural 스크린 리더기. deprecated
    braille 점자 표시 장치. deprecated
    handheld 패드. 손에 들고 다니느 장치. deprecated
    projection 프로젝터. deprecated
    tty 디스플레이 기능이 제한된 장치. px 단위(픽셀) 사용 불가 기기. deprecated
    embossed 점자 프린터. deprecated

  • 웹 문서 가로 너비와 세로 높이 속성

    • 실제 웹 문서에 내용이 나타나는 영역 ⇒ 뷰포트

    • 뷰포트의 가로 너비와 세로 높이 → 미디어 쿼리 조건으로 사용.

    • 세로 높이는 미디어에 따라 달라져서 주의 필요.

      속성 설명
      width, height 웹 페이지 가로 너비, 세로 높이
      min-width, min-height 웹 페이지 최소 가로 너비, 최소 세로 높이
      max-width, max-height 웹 페이지 최대 가로 너비, 최대 세로 높이

  • 화면 속성

    속성 설명
    orientation: portrait 단말기 세로 모드
    orientation: landscape 단말기 가로 모드. 기본값.

  • 미디어 쿼리 중단점(break point)

    • 화면 크기에 따라 서로 다른 CSS를 적용할 분기점.
    • 모바일 퍼스트 : 모바일의 레이아웃을 기본 형태로 작업 → 태블릿과 데스크탑에 맞춰서 더 기능과 스타일을 추가.
    • 일반적으로 모바일 / 태블릿 / 데스크탑 으로 구분.
      • 스마트폰 : min-width ⇒ portrait 320px, landscape 480px
      • 태블릿 : 세로 높이 768px 이상. 가로 너비 1024px 이상.
      • 테스트탑 : 화면 크기 1024px 이상.

미디어 쿼리 적용하기

  • 외부 CSS 파일로 연결하는 방법

      <-- link 태그를 이용한 형태 -->
  <link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
  <link rel="stylesheet" media="print" href="css/print.css">

  <-- @import 를 이용한 형태 -->
  @import url(css 파일 경로) <미디어 쿼리 조건>
  @import url("css/tablet.css") only screen and (min-width: 321px) and (max-width: 768px);

  • 웹 문서에 직접 정의하는 방법

      <-- media 속성을 이용해서 스타이 규칙을 정의하는 방법
      <style media="<조건>" {
          <스타일 규칙>
      }
      </style>
  -->
  <style media="screen and (max-width: 320px)">
      body {
          background-color: orange;
      }
  </style>

  <-- 스타일 선언 시 @media 사용하여 조건별로 스타일 
      <style>
          @media <조건> {
              <스타일 규칙>
          }
      </style>
  -->
  <style>
      @media screen and (max-width: 320px) {
          body {
              background-color: orange;
          } 
      }
  </style>

웹 개발자 도구 창에서 미디어 쿼리 표시하기

  • 웹 개발자 도구 창 열기 → 기기 툴바 전환 → : 버튼 눌러서 ‘미디어 쿼리 표시’ 선택
  • 파란색 : 최대 너비 max-width 기준으로 중단점을 나눈 미디어 쿼리.
  • 연두색 : 최소 너비와 최대 너비를 기준으로 중단점을 나눈 미디어 쿼리.
  • 노란색 : 최소 너비를 기준으로 중단점을 나눈 미디어 쿼
  • 반응형 웹 만들기에서 중요한 것은 미디어 쿼리.
  • 브라우저에서 개발하는 데 확인하고 필요한 기능들을 확인함.
  • 잘 만든 사이트를 둘러볼 수 있겠다.

🤟소감 3줄 요약

  • 프론트엔드 개발에서 브라우저는 코딩 결과물이자 개발 내용을 들여다 볼 도구라는 것.
  • 반응형?!
  • 눈이 내린다.. 춥다..
저작자표시 비영리 변경금지 (새창열림)

'Do it 스터디!' 카테고리의 다른 글

[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 11장 되새김 문제  (0) 2026.01.26
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 11 플렉스 박스 레이아웃으로 배치하기  (1) 2026.01.24
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 09 이미지와 그러데이션 효과로 배경 꾸미기  (0) 2026.01.21
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 08 CSS 박스 모델(2)  (0) 2026.01.21
[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 08 CSS 박스 모델 (1)  (0) 2026.01.19
'Do it 스터디!' Related Articles more