<frontend> {10} </반응형 웹>

responsive  web  design

• 반응형 웹  &  미디어 쿼리
• 그리드 레이아웃  [플렉스 박스 레이아웃 &  CSS 그리드 레이아웃]

 

 

 

---

1. 반응형 웹  &  미디어 쿼리

🤔 반응형 웹 디자인이란?
기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시하기 위해 반응형 웹 디자인을 사용한다.
반응형 웹 디자인은 웹 요소를 화면크기에 맞게 재배치, 각 요소의 표시방법만 바꾸어 사이트를 구현한다.


📌 viewport ?
뷰포트(viewport)를 이용해 모바일 기기에 적합한 사이트를 제작할 수 있다.

◼︎ Viewport 지정하기

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

이와 같이 content 속성을 이용해 뷰포트 속성과 속성값을 지정하며 content 안에서 사용하는 뷰포트의 속성은 다음과 같다.
   ∙ width
   ∙ height
   ∙ user-scalable
   ∙ initial-scalable

단위: vw, vh, vmin, vmax

<style>
	h1 {
    	font-size: 5vw;
        text-align: center;
    }
</style>

<h1>안녕하세요</h1>

 

 

 

 

🤔 미디어 쿼리(media queries)란?
CSS의 모듈로 사이트에 접속하는 장치에 따라 특정 CSS스타일을 사용하는 방법.
즉, 접속 기기의 화면 크기에 따라 레이아웃이 달라진다.

◼︎ Media Queries 기본형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

ex)
@media screen and (min-width: 720px) and (max-width: 1440px) {
	...
}

위에 미디어 유형에 들어가는 미디어 유형의 종류는 다음과 같다.
   ∙ all : 모든 미디어 유형에서 사용할 CSS 
   ∙ print : 인쇄장치에서 사용할 CSS
   ∙ screen : 컴퓨터 및 스마트폰 스크린에서 사용할 CSS
   ∙ tv : 음성과 영상이 동시에 출력되는 TV에서 사용할 CSS
   ∙ aural : 음성 합성 장치에서 사용할 CSS
   ∙ handheld : 태블릿 같은 장치를 위한 CSS
   ∙ projection : 프로젝터를 위한 CSS
   ∙ tty : 디스플레이 기능이 제한된 장치를 위한 CSS

/*웹 문서의 가로 세로 길이 속성*/
@media screen and (min-width: 1440px) {...}

/*단말기의 가로 세로 길이 속성*/
@media screen and (min-device-width: 375px) and (min-device-height: 812px) {...}

/*화면 회전 속성*/
@media screen and (min-device-width: 812px) and (orientation: landscape) {...}


============<미디어 쿼리 적용하기>============
/*외부 CSS파일 연결하기*/
방법 1.
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일경로">

방법 2.
@import url(css파일 경로) 미디어 쿼리 조건

/*웹 문서에 직접 정의하기*/
방법 1.
<style media="<조건>"> {
	<스타일 규칙>
}
</style>

방법 2.
<style>
	@media <조건> {
    	<스타일 규칙>
    }
</style>

조건 예시: screen and (max-width: 320px)
스타일 규칙 예시: background-color: orange;

 

 

---

2. 그리드 레이아웃 

🤔 그리드 레이아웃이란?
화면 너비에 따라 웹 문서의 요소를 재배치 해야하는데, 기준이 되는 레이아웃으로 사용하는 방법
웹 사이트를 여러 column으로 나눈 후 화면에 맞게 배치하는 방법

[그리드 레이아웃의 3가지 특징]
 - 시각적 안정된 디자인 생성가능
 - 업데이트가 편한 웹디자인 구성가능
 - 요소를 자유롭게 배치가능


◼︎ 그리드 레이아웃 생성방법

 

---

 

2-1.  플렉스 박스 레이아웃

2-2. CSS 그리드 레이아웃 사용

 

https://www.usefulparadigm.com/2017/03/31/a-few-ways-to-make-a-grid-layout/

Grid layout을 만드는 몇 가지 기술들

https://learncoderepeat.tistory.com/40

CSS 쉽게 배우기 | Grid Layout (그리드 레이아웃)