38. CSS - 반응형 웹

1. 반응형 웹

1. 반응형 웹이란?

1. 요즘은 pc보다 모바일이나 태블릿으로 웹 사이트에 접속하는 경우가 많은데 모바일이나 태블릿에서 PC에서 보던 웹 사이트 화면은 글씨도 너무 작고 레이아웃도 맞지 않아서 보기 불편한 점이 있다. 따라서 모바일이나 태블릿 같은 기기들의 화면에 대응하기 위해 기기의 화면사이즈에 따라 레이아웃을 변경하거나 글자 크기를 키우는 등 기기에 알맞는 형태의 웹 사이트를 표출하는 것을 반응형 웹이라고 한다.

2. 모바일 기기를 위한 뷰포트

1. 반응형 웹 디자인에서 기본적으로 알아야 할 것이 뷰포트다. 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있다. 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 부분을 말한다.
2. 뷰포트 지정하기
   • head 태그 사이에 작성.

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

   • content의 속성으로 지정할 수 있는 것들
     • width: 뷰포트의 가로길이. device-width나 크기.
     • height: 뷰포트의 세로길이. device-height나 크기.
     • user-scalable: 확대/축소 가능여부. yes나 no. 기본 값은 yes.
     • initail-scale: 초기 확대/축소 값. 1~10 지정가능. 기본 값은 1.

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

       웹 페이지의 뷰포트의 가로길이를 스마트폰 화면 가로길이에 맞추고 초기화면 배율을 1로 지정

3. 뷰포트의 단위

1. 뷰포트 개념이 나오기 전에는 크기를 지정할 때 px, % 단위를 많이 사용했다. 현재는 뷰포트를 기준으로 하고 있는 단위들도 많이 사용되는 편이다.
2. 뷰포트 단위
   • vw(viewport width): 1vw -> 뷰포트 가로길이의 1프로와 동일 -> 100vw(화면의 가로 길이와 동일)
   • vh(viewport height): 1vh -> 뷰포트 세로길이의 1프로와 동일 -> 100vh(화면의 세로길이와 동일)
   • vmin(viewport minimum): 뷰포트 가로길이와 세로길이중 작은 값의 1프로의 값을 말한다.
   • vamx(viewport maximum): 뷰포트 가로길이와 세로길이중 큰 값의 1프로의 값을 말한다.

4. 미디어 쿼리

1. 미디어 쿼리는 반응형 웹에서 가장 기본적인 개념. 장치의 사이즈를 미리 정해두고 그 사이즈가 됐을 때 지정될 스타일이나 레이아웃을 지정해 놓는 방식.
2. @media라는 키워드로 미디어 쿼리 구문을 지정한다.
3. @media [only | not] 미디어유형 [and 조건] * [and 조건]
   • only: 미디어 쿼리를 지원하지 않는 브라우저는 무시하고 실행되지 않는 옵션
   • not: not 뒤에 오는 미디어유형은 미디어쿼리를 적용하지 않습니다.
   • and: 여러개의 조건을 이어붙일 수 있다.
   • 미디어 유형
     • all: 모든 미디어 유형에서 사용할 스타일 정의
     • screen: 컴퓨터, 스마트폰, 태블릿 스크린에서 사용할 스타일 정의
     • print: 인쇄장에서 사용할 스타일 정의
     • tv: tv에서 사용할 스타일 정의
   • 조건에서 사용되는 가로길이와 세로길이
     • width, height: 웹 문서의 가로길이와 세로길이를 지정
     • min-width, min-height: 웹 문서의 최소 가로길이와 세로길이를 지정
     • max-width, max-height: 웹 문서의 최대 가로길이와 세로길이를 지정
4. 미디어쿼리의 중단점
   • 미디어쿼리를 작성할 때 화면 크기에 따라 다른 스타일이 적용되는 지점이 있는 데 그 지점을 미디어쿼리의 중단점이라고 한다.
   • 스마트 폰의 중단점: 480px ~ 767px
   • 태블릿의 중단점: 768px ~ 1023px
   • 데스크톱의 중단점: 1024px ~

5. 그리드 레이아웃

1. 웹 사이트의 전체적인 구조나 일관성을 유지하기 위해 사용되는 레이아웃
2. 그리드 레이아웃 웹 사이트를 여러개의 컬럼으로 나눈 후 메뉴나 본문등 웹 사이트에 들어가는 요소들을 적절한 위치에 배치하는 것
3. 이전에는 css의 다단 나누기 방식으로 그리드 레이아웃을 적용했지만 근래에는 플렉서블 박스나 그리드 박스를 이용해서 그리드 레이아웃을 적용시킨다.
4. 그리드 레이아웃의 장점
   • 일관된 되자인으로 안정성을 부여
   • 영역이 확실히 구분되기 때문에 빠른 수정을 할 수 있다.
   • 원하는 영역에 요소를 배치하기 편하다.
5. 플렉서블 박스: 그리드 레이아웃 기반의 요소 배치 방법. 주축이랑 교차축을 가지면서 정렬방식을 정해주는 레이아웃.
6. 그리드 박스: 주축이나 교차축이라는 개념은 따로 존재하지 않고 수평이나 수직으로 블록을 쌓듯이 배치할 수 있는 레이아웃.

6. 플렉서블 박스

1. 플렉서블 박스에서 사용되는 용어들
   • 플렉스 컨테이너: 플렉서블 박스에 배치될 요소들의 부모가 되는 태그. 부모가 되는 태그에는 display: flex;가 설정되어 플렉스 컨테이너로 지정되어야 된다.
   • 플렉스 항목: 플렉스 컨테이너에 배치될 요소들. 플렉스 항목들은 플렉스 컨테이너에 설정된 배치방법에 따라서 자동 배치되게 된다.
   • 주축: 플렉스 컨테이너에서 요소들을 배치할 기준이 되는 방향. 기본은 가로축이 기본 축이다. 시작점은 왼쪽 끝점은 오른쪽. flex-direction이라는 속성을 이용하면 주축을 바꿀 수 있다.
   • 교차축: 주축과 크로스되는 축을 말하며 기본적으로 위에서 아래로 배치되는 세로축이다. 위쪽이 시작점 아래쪽이 끝점.
   • 
2. 플렉서블 박스에서 배치 방식을 지정하는 속성들
   • 플렉서블 박스에는 다양한 배치 방식이 존재한다.
   • 주축을 기준으로 할 것인지 교차축을 기준으로 할 것인지도 구분할 수 있고 남은 공간은 어떻게 사용할 것인지 등과 같은 배치방식도 지정할 수 있다.
   • justify-content: 주축 기준의 정렬 방식을 지정하는 속성. space-around, space-between 등의 속성 값을 사용할 수 있다.
   • align-items: 교차축 기준의 정렬 방식을 지정하는 속성.
   • align-self: 교차축에 있는 개별 항목에 대한 정렬방식을 지정하는 속성.
   • align-content: 교차축에서 여러줄로 표시된 항목의 정렬방식을 지정하는 속성.
3. 플렉서블 컨테이너를 만들어주는 display
   • display: flex; : 플렉서블 컨테이너 안의 플렉스 항목들을 블록 레벨 요소로 배치한다. 항상 블록 레벨로 배치되는 것은 아니고 배치 방식에 따라서 달라진다.
   • display: flex-inline; : 플렉서블 컨테이너 안의 플렉스 항목들을 인라인 레벨 요소로 배치한다. 항상 인라인 레벨로 배치되는 것은 아니고 배치 방식에 따라서 달라진다.
4. 주축의 방향을 정해주는 flex-direction
   • 주축의 방향을 가로나 세로로 지정해주는 속성. 주축이 바뀌면 자동적으로 교차축도 따라서 변경이 된다.
   • 사용가능한 속성 값
     • row: 가로 축을 주축으로 설정.
     • column: 세로 축을 주축으로 설정.
     • row-reverse: 가로 축으로 주축으로 설정하면서 시작점을 오른쪽으로 끝점은 왼쪽으로 설정.
     • column-reverse: 세로축을 주축으로 설정하면서 시작점을 아래쪽 끝점을 위쪽으로 설정.
5. 플렉스 항목의 줄바꿈을 설정하는 flex-wrap
   • 플렉스 항목들을 한 줄에 표시할 것인지 여러줄로 표시할 것인지를 결정하는 속성.
   • 지정가능한 속성 값
     • nowrap: 플렉스 항목들 한줄로 표시
     • warp: 플렉스 항목들 여러줄로 표시
     • wrap-reverse: 플렉스 항목들 여러줄로 표시하되 시작점과 끝점 변경
6. flex-direction과 flex-wrap 한 번에 지정하는 flex-flow
   • flex-flow: flex-direction속성값 flex-wrap속성값;
   • ex) flex-flow: column-reverse wrap;
   • 기본값은 row nowrap 이다.
7. 주축 기준의 정렬 방식을 지정하는 justify-content
   • 플렉서블 박스에서 제일 많이 사용되는 속성.
   • 주축을 기준으로 플렉스 항목들을 어떻게 배치할지 정하는 속성
   • 지정가능한 속성 값
     • flex-start: 주축의 시작점에 맞춰서 배치
     • flex-end: 주축의 끝점에 맞춰서 배치
     • center: 주축의 중앙에 정렬
     • space-between: 첫 항목은 시작점에 마지막 항목은 끝점에 배치를 하고 나머지 항복들은 같은 간격으로 배치.
     • space-around: 모든 항목을 주축에 같은 간격을 가지고 배치
8. 교차축을 기준으로 플렉스 항목들의 배치 방식을 지정하는 align-items
   • justify-content가 주축 기준으로 배치방식을 지정하는 속성이면 align-items는 교차축을 기준으로 배치방식을 지정하는 속성
   • 지정가능한 속성 값
     • flex-start, flex-end, center: justify-content의 속성값과 동일
     • baseline: 교차축의 문자 기준선에 맞춰서 배치
     • stretch: 플렉스항목을 늘려서 교차축에 가득차도록 배치
9. 특정 플렉스 항목에만 교차축 기준 배치 방식 지정하는 align-self
   • 플렉서블 컨테이너의 속성이 아닌 플렉스 항목의 속성
   • 지정한 가능한 속성 값은 align-items에서 사용 가능한 속성 값과 동일하다.
10. 플렉스 항목이 여러줄로 표시될 때 교차축의 정렬방식을 지정하는 align-content
    • 여러줄로 표시되는 플렉스 항목들의 교차축 간격을 지정할 수 있다.
    • 지정가능한 속성 값은 justify-content에서 사용한 속성 값들과 동일. stretch만 하나 추가.

7. 그리드 박스

1. 플렉서블 박스가 주축과 교차축을 기준으로 배치하는 레이아웃이었다면 그리드 박스는 행과 열가지고 배치하는 레이아웃
2. 그리드 박스의 용어
   • 줄(행, row): 가로 배치 줄
   • 컬럼(열, column): 세로 배치 줄
   • 줄간격, 컬럼간결
   • 
3. 그리드 컨테이너를 지정하는 display
   • 플렉서블 박스와 마찬가지로 속성값으로는 grid, inline-grid가 존재한다. display 속성보다는 배치속성에 따라 블록인지 인라인인지 갈리게 된다.
4. 컬럼의 개수와 줄의 개수를 지정하는 grid-template-columns, grid-template-rows
   • 그리드 박스안에 항목을 배치할 때 컬럼과 줄의 크기, 개수를 지정할 때 사용하는 속성
   • grid-template-columns: 그리드 컨테이너 안의 그리드 항목을 몇 개의 컬럼으로 배치할지 각 컬럼의 크기 얼마나 될지 지정
   • grid-template-rows: 그리드 컨테이너 안의 그리드 항목을 몇 개의 줄로 배치할지 각 줄의 크기 얼마나 될지 지정
   • fr(fraction): 상대적인 값을 지정할 때 사용하는 단위
     ex) 같은 가로길이 컬럼 4개를 만들 때 grid-template-columns: 1fr 1fr 1fr 1fr;
   • repeat(반복횟수, 크기): 몇 개의 컬럼이나 줄을 표시할 때 여러번 반복해서 작성하지 않고 반복횟수를 지정할 수 있다.
     ex) grid-template-columns: 1fr 1fr 1fr 1fr; -> grid-template-columns: repeat(4, 1fr);
     repeat() 함수는 가로길이가 동일하게 분배될 때만 사용
   • minmax(최소값, 최대값): 크기의 최소값과 최대값 지정
5. 자동으로 컬럼의 개수를 조절하는 auto-fill, auto-fit 속성 값
   • auto-fill이나 auto-fit을 사용하시면 지정한 컬럼의 가로 길이에 따라서 자동으로 배치될 수 있는 만큼의 컬럼의 개수가 지정된다.
     ex) repeat(auto-fit, 200px)
   • 화면이 넓어지면 컬럼의 개수가 증가하고 화면이 작아지면 컬럼의 개수가 줄어든다.
   • auto-fit은 남은 공간 없이 꽉 채워서 컬럼을 배치하는 반면 auto-fill은 남은 공간을 그대로 두면서 배치한다.
6. 그리드 항목 간의 간격을 조절하는 gap
   • grid-column-gap: 컬럼들간의 간격을 조절
   • grid-row-gap: 줄들간의 간격을 조절
   • grid-gap: 컬럼, 줄 간의 간격을 한 번에 조절
7. 그리드 라인을 이용한 배치
   • 그리드 박스에는 보이지 않는 라인들이 존재한다. 첫 번째 그리드 항목 앞부터 마지막 그리드 항목의 뒤까지 총 배치된 항목 + 1개의 라인이 존재
   • 그리드 박스에서는 이 라인들을 이용해서 배치할 수 있는 속성들을 제공한다.
   • grid-column-start : 컬럼 시작 라인의 번호를 지정
   • grid-column-end : 컬럼 마지막 라인의 번호를 지정
   • grid-column : 컬럼 시작 라인의 번호와 끝번호를 지정하는데 슬래시(/)를 이용해서 표시. 열 병합이 일어난 것처럼 원하는 개수만큼 컬럼을 차지
   • grid-row-start : 줄 시작 라인 번호 지정
   • grid-row-end : 줄 마지막 라인 번호 지정
   • grid-row : 줄 시작 라인 번호와 마지막 라인 번호 지정. 행 병합처럼 동작함.
8. 그리드 영역을 지정해서 배치
   • grid-area: 그리드 항목에 지정. 그리드 항목의 영역 이름 지정
   • grid-template-area : 그리드 컨테이너에 지정. 그리드 항목들을 어떻게 배치할지 그리드 영역의 이름을 이용해서 지정