[포스코x코딩온] 반응형 웹(Responsive Web)

반응형 웹(Responsive Web)

과거에는 디스플레이 크기의 종류가 적었지만, 현재 디스플레이의 크기가 엄청나게 많아졌다. 

모든 디스플레이의 크기에 대해 만드는 것은 현실적으로 불가능하다.

그래서 크기에 따라 자동으로 화면이 변하는 반응형 웹을 사용하는 것이 좋다.

• Viewport 
  • 기기마다 디스플레이의 크기가 다르기 때문에 기기에 맞춰 디자인을 하기 위한 크기 요소
  • 디스플레이의 크기를 고려하여 사용자에게 최적화 된 웹페이지 제공이 가능하다.

• @media(미디어 쿼리)
  • 서로 다른 미디어 타입에 따라 별도의 CSS를 지정하는 기술
  • @media 미디어유형 and (크기 규칙) 
    • 미디어 유형 : All(전부) / Print(인쇄) / Screen(전부)
    • 크기 규칙 : min(최소 뷰포트 넓이 설정) / max(최대 뷰포트 넓이 설정)
  • @media screen and (max-width: 480px) {} : 화면 넓이가 480px이하일 경우 화면에 적용
  • @media print and (min-width: 481px) {} : 화면 넓이가 480px이상일 경우 인쇄에 적용

<style>
      body {
        background-color: aqua;
      }

      @media screen and (min-width: 480px) and (max-height: 300px) {
        /*width가 480px 이상일때 적용된다. 그리고 height가 300px 이하일 때 적용된다.*/
        body {
          background-color: pink;
        }
      }

      @media screen and (max-width: 300px) {
        /*300px이하일 때 적용된다.*/
        body {
          background-color: green;
        }
      }
    </style>

width가 480px 이상이고, height가 300px이하 일때 pink로 표시된다.

width가 300px이하이면 green이 표시된다.

---

Github코드(230715_ResponsiveWeb 폴더): https://github.com/DongHo-Kang/KDT-8-web.git

GitHub - DongHo-Kang/KDT-8-web