[HTML/CSS] 반응형 웹 디자인

728x90

반응형 웹 디자인(Responsive Web Design)이란?

하나의 웹 사이트에서 접속하는 디스플레이의 종류(PC, 스마트폰, 태블릿 PC 등)에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지 접근 기법

데스크탑에서 출발하는 디자인의 전략인데, 모바일에서 시작하는 디자인의 전략으로 모바일 퍼스트 반응형 웹 디자인이 있다. 그리고 반대말은 디바이스별로 별도의 웹사이트를 제작하는 적응형 웹(adaptive web)이다.

필요성

검색엔진 친화적
구글은 2015년 웹 사이트의 모바일 친화도를 검색 순위 산정에 적용하여 모바일 친화적이지 않은 URL 상당수를 뒤로 몰아냄
유지보수 및 추가 개발 이슈에 대해 시간과 비용면에서 효율적
단 하나의 웹사이트로 다양한 디바이스에 대응하기 때문

핵심 기술

가변 그리드(Fluid Grid)

화면 크기(브라우저 창)에 관계 없이 자유롭게 늘이고 줄일 수 있도록 퍼센트(%)로 제작하는 기술

요소의 너비를 퍼센트로 바꿔도 다른 기기나 환경에서 제대로 작동하지 않을 가능성이 크기 때문에 바로 반응형 웹이 되는 것은 아니다.

뷰포트(viewport)

화면에 보이는 영역을 제어하거나 화면을 통해 보이는 영역

웹 브라우저에서는 웹 페이지가 사용자에게 보이는 영역

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

→ 뷰포트 제어를 위한 meta 태그. 여기서는 width는 기기 너비, 초기 화면 비율 1, 최소 축소 비율 1, 최대 확대 비율 1, 확대/축소 불가능

뷰포트 설정
- width : 뷰포트 너비
- height : 뷰포트 높이
- initial-scale : 초기 배율
```
>> 1이 기본값, 1보다 낮으면 축소 , 1보다 크면 확대된 값으로 설정됨
```
- minimum-scale : 최소 축소 비율
```
>> 0.25 기본값
```
- maximum-scale : 최대 확대 비율
```
>> 5.0 기본값
```
- user-scalable : 확대/축소 여부
```
>> yes 기본값, yes | no
```

가변 공식

가변 그리드 공식
가변 박스를 정확히 만들기 위해 필요한 가변 그리드 공식
```
(div 너비 / wrap이나 div를 감싸는 박스의 너비) * 100 = 가변 너비 % 값
```
가변 그리드 공식으로 나온 퍼센트를 쓸 때는 어떻게 이 퍼센트가 나왔는지 주석으로 함께 적어주는 것이 도움이 된다.
최상위 요소인 wrap이나 wrapper 박스는 비교 대상이 없기 때문에 공식을 쓸 수 없고 임의로 퍼센트를 정해 써주면 된다.

가변 마진 공식
가변 그리드 공식과 거의 동일

(가변 마진 적용할 마진값 / 적용할 박스를 감싸는 박스 너비) * 100 = 가변 마진 % 값

가변 패딩 공식
패딩을 주면 너비값에 패딩값 * 2(좌, 우)만큼 포함되기 때문에 주의해야 한다.
```
(가변 패딩 적용할 패딩값 / 적용할 박스를 감싸는 박스 너비) * 100 = 가변 패딩 % 값
```
박스 크기는 가변적이되, 마진값과 패딩값을 고정하고 싶으면?
→ CSS의 calc 함수 사용
가변 폰트
- rem을 사용할 수 있지만, 진짜 가변 폰트는 viewport 크기 단위를 이용한 것
- viewport 크기 단위 (0 이상 100 이하)
  1. vh
    viewport-height : 높이ex) .vh-size { font-size: 5vh; }
  2. vw
    viewport-width : 너비ex) .vw-size { font-size: 5vw; }
  3. vmin
    vw, vh 중 작은 수ex) .vmin-size { font-size: 5vmin; }
  4. vmax
    vw, vh 중 큰 수ex) .vmax-size { font-size: 5vmax; }

미디어 쿼리 (Media Query)

단말기 종류와 화면 크기 등을 알아낼 수 있는 쿼리문의 일종

화면 크기를 인식하여 각각의 크기마다 서로 다른 CSS를 적용하는 것으로, CSS 파일에 작성

모바일, 태블릿, PC를 나누는 width 기준이 major와 minor로 나뉜다.

@media all and (min-width:320px) {
  #wrap div{
    width:100%;
  }
}
@media all and (min-width:768px) {
  #wrap div{
    width:50%;
  }
  #wrap div:nth-child(5){width:100%;}
}
@media all and (min-width:1024px) {
  #wrap div{
    width:20%;
  }
  #wrap div:nth-child(5){width:20%;}
}

구분 기준

보통 스마트폰, 태블릿, PC 화면 3개로 구분

스마트폰
해상도 320px 이상 or 768px 미만
태블릿
해상도 768px 이상 or 1024px 미만
PC
해상도 1024px 초과

작성법

공통적으로 적용할 CSS 작성 후 미디어쿼리 따로 작성
min 방식 사용 : 크기 작은 순서대로 작성
max 방식 사용 : 크기 큰 순서대로 작성
링크 방식으로 사용 가능
<link rel="stylesheet" media="all and (min-width:320px)"
but css 파일이 많으면 속도가 느려짐

@media only | not 미디어유형 and | , (조건문) {적용할 CSS}

only : media query를 지원하는 브라우저에서만 해석하도록 함
not : not 뒤에 오는 조건을 부정
(ex. not tv는 tv 제외한 모든 미디어)
and : 앞뒤 조건이 모두 사실인 경우, 콤마는 앞뒤 조건이 하나라도 사실인 경우를 의미
조건문 : 조건문이 사실일 때를 의미
and나 콤마를 이용해 두 가지 이상 작성 가능
모든 조건문은 min-, max- 옵션 가능
(ex. min-width, max-width)

(다중 조건 예시 : @media (min-width:320px) and (max-width:768px) {적용할 css})

미디어 유형 (생략 시 default 값은 all)
- all 모든장치
- screen 컴퓨터 화면 또는 스마트 기기 화면
- tv 영상과 음성이 함께 출력되는 장치
- projection 프로젝터 장치
- handler 손에 들고다니는 소형장치
- speech 음성 출력 장치
- aural 음성 합성 장치 (화면을 소리로 출력해주는 장치)
- embossed 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치)
- tty 디스플레이 기능이 제한된 장치
- braille 점자 표시 장치
- width 웹페이지 가로 너비
- height 웹페이지 세로 높이
- device-width 기기의 가로 너비
- device-height 기기의 세로 높이
- orientation 기기의 화면방향 (portrait:세로,landscape:가로)
- aspect-ratio 화면 비율
- device-aspect-ratio 단말기기의 화면 비율
- color 기기의 비트 수
- color-index 기기의 색상 수
- monochrome 기기가 흑백일 때 픽셀당 비트 수
- resoulution 기기의 해상력
- scan TV의 스캔 방식grid 기기의 그리드/비트맵

유연한 박스 (Flexible Box)

반응형 웹에서 레이아웃을 유지하게 해주는 CSS 속성으로, CSS3에서 처음으로 소개된 레이아웃 모델

서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동 재정렬되어 웹페이지의 레이아웃을 언제나 똑같이 유지할 수 있도록 해줌

특징

부모 div가 플렉서블 박스로 작동하면 자식 div들을 플렉스 아이템이라고 부름
가로가 주축일 때, 플렉스 아이템은 왼쪽에서 오른쪽으로 배치
세로가 주축일 때, 플렉스 아이템은 위에서 아래로 배치
플렉서블 박스는 아직 W3C의 기술확정이 아니기 때문에 브라우저 접두어를 사용해 브라우저 마다 설정을 따로 해줘야 함

사용법

display : flex | inline-flex

flex : 박스를 block 수준의 플렉서블 박스로 작동되게 함.
inline-flex : 박스를 inline 수준의 플렉서블 박스로 작동되게 함.

플렉스아이템 배치 방향 설정 flex-direction : row | row-reverse | column | column-reverse

row : default 값. 박스를 왼쪽에서 오른쪽으로 배치 (주축:가로, 교차축:세로 됨)
row-reverse : 박스를 오른쪽에서 왼쪽으로 배치
column : 박스를 위에서 아래로 배치 (주축:세로, 교차축:가로 됨)
column-reverse : 박스를 아래에서 위로 배

플렉스아이템에 여러 줄 배치 flex-wrap : nowrap | wrap | wrap-reverse

nowrap : default 값. 박스를 한 줄로 배치
wrap : 박스를 여러 줄로 배치
wrap-reverse : 박스를 여러 줄로 역방향 배치 (주축이 세로면 아래에서 위로, 주축이 가로면 오른쪽에서 왼쪽으로)

플렉스아이템 배치방향과 여러줄 배치를 한번에 설정법
flex-flow : flex-directiion flex-wrap

주축방향으로 다양하게 배치
justify-content : flex-start | flex-end | center | space-between | space-around

flex-start : default 값. 자식박스를 부모박스 주축의 시작점으로 배치
flex-end : 자식박스를 부모박스 주축의 끝점으로 배치
center : 자식박스를 부모박스의 중앙으로 배치
space-betwwen : 플렉서블 박스에 빈공간이 있을 때 사용. 첫번째 박스와 마지막박스는 양쪽 끝으로 붙히고, 나머지 박스는 동일한 간격으로 가운데에 정렬
space-around : 플렉서블 박스에 빈공간이 있을 때 사용. 단, 양쪽 끝에 있는 박스의 양 옆에도 공간을 둔채 자동정렬