HTML, CSS

[CSS] 반응형 웹과 미디어쿼리

gamzaggang7 2025. 4. 17. 18:36
728x90

반응형 웹

다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 재배치하며 반응하는 웹문서

뷰포트

현재 화면에 보여지고 있는 영역. <head> 태그 사이에 <meta> 태그를 이용해 뷰포트를 지정할 수 있다.

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

단위)

  • vw: 뷰포트 너비 100분의 1
  • vh: 뷰포트 높이 100분의 1
  • vmin: 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
  • vmax : 뷰포트 너비와 높이 중 큰 쪽의 100분의 1
  <style>
    p {
      margin: 0;
      font-size: 10vw;
    }
  </style>
</head>

<body>
  <p>죽여 마땅한 사람들 - 피터 스완슨</p>
</body>

728x90

미디어 쿼리

미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)

미디어 타입과 조건에 대한 쿼리로 구성된다.

  <style>
    .box {
      width: 150px;
      height: 150px;
      background-color: teal;
    }

    @media screen and (max-width: 500px) {
      .box {
        background-color: orange;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

플렉스박스

행 또는 열을 주축으로 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식이다. 플렉스 컨테이너 생성은 display 속성을 이용한다.

display

플렉스 컨테이너 지정

  • flex: 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치한다.
  • inlne-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치한다.
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    ul {
      display: flex;
      padding: 0;
      list-style-type: none;
      height: 200px;
    }
  </style>
</head>

<body>
  <h1>콜드플레이 내한 셋리</h1>
  <ul>
    <li>Higher Power</li>
    <li>Adventure of a Lifetime</li>
    <li>Paradise</li>
    <li>The Scientist</li>
    <li>Viva La Vida</li>
  </ul>
</body>

flex-direction

플렉스 방향 지정

  • row: 기본값. 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치
  • column: 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치
  • row-reverse / column-reverse

row
column

flex-wrap

플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정

  • no-wrap: 기본값. 한 줄에 표시
  • wrap: 여러 줄에 표시
  • wrap-reverse

no-wrap
wrap / wrap-reverse

flex-flow

배치 방향과 줄바꿈을 한꺼번에 지정

    ul {
      ...
      /* flex-direction: column;
      flex-wrap: wrap; */
      flex-flow: column wrap;
    }

justify-content

주축 정렬 방법 지정. 플렉스 항목 간의 정렬 방법 지정

  • flex-start: 주축의 시작점
  • flex-end: 주축의 끝점
  • center: 중앙
  • space-between: 첫번째 항목과 끝 항목을 양쪽끝에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치
  • space-around: 모든 항목을 주축에 같은 간격으로 배치

space-between / space-around

align-items

교차축 정렬 방법 지정

  • flex-start: 교차축의 시작점
  • flex-end: 교차축의 끝점
  • center: 중앙
  • baselne: 교차축의 문자 기준선에 맞춰 배치
  • strech: 항목을 늘려 교차축에 가득 차게 배치

center / flex-end

align-self

특정 항목만 정렬 방법 지정

    ul {
      display: flex;
      padding: 0;
      list-style-type: none;
      height: 200px;

      justify-content: space-around;
      align-items: flex-start;
    }
    li:nth-child(3) {
      align-self: flex-end;
    }

flex-grow

컨테이너 안에서 아이템이 남은 공간을 얼마나 확장해서 차지할지를 결정. 0이 기본값이다.

    li {
      background-color: yellow;
    }
    li:nth-child(2n) {
      background-color: aqua;
    }
    li:nth-child(2) {
      flex-grow: 1;
    }

    li:nth-child(2) {
      flex-grow: 1;
    }
    li:nth-child(4) {
      flex-grow: 4;
    }

flex-shrink

아이템이 컨테이너보다 커질 때, 아이템이 얼마나 줄어들 수 있는지를 비율로 지정

    li:nth-child(2) {
      flex-shrink: 1;
    }

기본 상태 / shrink 적용

flex-basis

기준(초기) 크기 지정

    li:nth-child(2n-1) {
      background-color: aqua;
      flex-basis: 300px;
    }

flex

flex-grow, flex-shrink, flex-basis를 한 줄로 줄여서 쓰는 단축 속성

728x90