개념 알기, HTML
CSS

반응형

하나의 웹사이트에서 pc, tablet,mobile 등 접속하는 기기의 화면 크기의 맞게 사이트가 자동으로 반응하는 기법

적응형? : 접속하는 기기에 따라 pc용 웹사이트, 테블릿/모바일용 웹사이트를 보여주는 기법

HTML

1. 반응형 페이지를 만들기 위한 메타 태그
2. 반응형 이미지 처리

반응형 페이지를 만들기 위한 메타 태그

<meta name="viewport" content="width=device-width, initial-scale=1.0">

name

• 메타태그 중 viewport를 사용하겠다고 선언한다.

content

• viewport 가 가진 content 값을 지정하여 사용한다.
• width: 브라우저에게 "페이지의 가로 너비"를 계산하는 방법을 알려주며 "device-width"를 지정하면 접속하는 기기의 브라우저 너비에 맞게 페이지를 맞춰준다.
• initial-scale: 최초 화면 확대 값으로, 1.0을 두는 것으로 페이지를 확대하지 않고 1배율로 보겠다고 정의한다.

반응형 이미지 처리

• picture 태그를 사용하여 의도한 viewport 너비에 원하는 이미지를 넣을 수 있다.

  <picture>
    <source media="(max-width: 768px)" srcset="https://via.placeholder.com/1000x1000? text=Mobile"/>
    <source media="(max-width: 1024px)" srcset="https://via.placeholder.com/1000x1000?text=Tablet"/>
    <img src="https://via.placeholder.com/1000x500?text=Desktop" alt="이미지 텍스트" />
  </picture>

css

1. 미디어 쿼리(Media QUERY)
   2. css 호출 방법
   3. 주의사항

미디어 쿼리(Media Query)

• 기기의 유형과, 어떤 특성이나 수치에 따라 스타일을 수정할 수 있다.

  • @media 로 시작한다.
  • 기기 유형
    • all: 모든 장치
    • print: 인쇄 결과물 및 출력 미리보기
    • screen: 화면

• 규칙

  • 뷰포트 너비(가장 많이 사용)
  • 뷰포트의 가로세로비
  • 등등,,

  <style>
    div {
      font-size: 20px;
    }
   @media 기기유형 연산자 (조건) {
      콘텐츠
   }
   @media screen and (max-width: 1024px) {
    div {
      font-size: 16px;
    }
  </style>  
    
    <div>안녕하세요!</div>
    

  • and 연산자를 통해 조건을 계속 추가 가능

   @media screen and (max-width: 1024px) and (조건) and (조건) {
   
   }

css 호출 방법

• link 태그를 사용하면 원하는 유형과 조건에 따라 스타일 파일을 불러올 수 있다.

  <link rel="stylesheet" href="print.css" media="print">
  <link rel="stylesheet href="mobile.css" media="screen and (max-width: 600px)">
  ``` ### 주의사항
  1.레이아웃의 "고정 크기"의 사용 지양

• width 값을 고정하면 반응형 매구간마다 고정값을 변경해야 하는 불편함이 발생할 수 있다.
  • max-width를 사용한 "최대 너비"를 적극 활용
• height 값을 고정하면 유동적으로 변하는 높이에 대응할 수 없다.
  - min-height를 사용한 "최소 높이"를 적극 활용2.인라인 스타일은 반응형을 처리할 수 없다.
• 태그에 style 속성으로 직접 들어간 인라인 css는 미디어 쿼리를 적용할 수 없다.