[CSS] 반응형 웹, 미디어 쿼리

html, css, js 2023. 2. 19. 23:58

우리가 웹 사이트를 만들때 스마트폰이나 태블릿 등 브라우저 환경이 다양하게 바뀐다, 그떄마다 웹 사이트를 다르게 제작하는것은 쉽지않기떄문에 기존 웹사이트 내용은 그대로 유지하면서 다양한 화면 크기에 맞게 표시하는 법 -> 반응형 웹 디자인 가 필요하다.

반응형 웹 디자인이란

웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해준다.

모바일 기기를 위한 뷰포트

pc화면과 모바일 화면에서 표시되는 픽셀에서 차이가 있다, 그래서 pc에 맞게 제작한 사이트는 모바일기기에서 접속하면 모든 내용이 작게표시된다.
뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있기때문에 모바일 기기에 적합한 사이트를 제작하려면 뷰포트를 사용해야한다.

뷰포트 지정하기

뷰포트는 <meta>태그를 이용해 <head>태그 내부에 작성한다.

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

뷰포트의 속성값

종류	설명	사용가능한값	기본값
width	뷰포트너비	device-width 또는 크기	브라우저 기본값
height	뷰포트높이	device-height 또는 크기	브라우저 기본값
user-scalable	확대 축소 가능 여부	yes 또는 no (yes는 1로, device-width와 device-height값은 10으로 간주)	yes
initial-scale	초기 확대 축소 값	1~10	1

가장 많이 사용하는 뷰포트 속성

- 뷰포트의 너비를 스마트폰 화면 너비로 맞추고, 초기 화면 배율을 1로 지정

<meta name="viewport" content="width = device-width, intial-scale=1">

뷰포트 단위

뷰포트를 기준으로 하는 단위들이다. 뷰포트를 사용하는 웹사이트를 제작할때 이를 이용하면, 쉽게 뷰포트를 조절하여 pc나 모바일 웹사이트를 효율적으로 제작할수있다.

vw : 1vs는 뷰포트 너비의1%값
vh : 1vh는 뷰포트 높이의 1%값
vmin : 뷰포트 너비와 높이 중에서 작은 값의 1%값
vmax : 뷰포트 너비와 높이 중에서 큰 값의 1%값

반응형 웹사이트를 만들떄 여러기기에서 제대로 보이는지 테스트 하는 방법

1. f12 누르고

2. 이 아이콘 클릭

미디어 쿼리

CSS모듈인 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법이다.

미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다.

미디어 쿼리 구문

<style> </style>내부에 사용한다.

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


only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음
not : not다음에 지정하는 미디어 유형을 제외하고, 다른 유형에는 모두 적용함.

예를 들어, 미디어 유형이 screen이면서 최소 너비가 768px 최대 너비가 1439px인 경우 CSS를 적용하는 구문이다.

<style>
 @media screen and (min-width: 768px) and (max-width: 1439px){ }

미디어 유형의 종류

미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하므로 @media속성 다음에 미디어 유형을 알려 주어야한다.

@media속성의 미디어 유형
all : 모든 미디어 유형
print : 인쇄장치
screen : 스마트폰, 컴퓨터 스크린
tv : TV
aural : 음성 합성 장치
braille : 점자 표시 장치
hadnheld : pad
projection : 프로젝터
tty : 디스플레이 기능이 제한된 장치
embossed : 점자 프린터

웹 문서의 가로 너비와 세로 높이 속성

실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 하는데, 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할수있다.

width, height 웹 페이지의 가로 너비, 세로 높이를 지정
min-width, min-height 웹 페이지의 최소 너비, 최소 높이를 지정
max-width, max-height 웹 페이지의 최대 너비, 최대 높이를 지정

device 스마트폰 단말기의 너비와 세로 높이 속성

device-width, device-height 단말기의 가로너비, 세로 높이를 지정
min-device-width, min-device-height 단말기의 최소 가로너비, 최소 높이
max-divice-width, max-device-heigth 단말기의 최대 너비, 최대높이

화면 회전 속성

스마트폰이나 테플릿에서는 화면을 세로로 보거나 가로로 돌려서 볼 수 가 있다.

미디어 쿼리에서 orientation속성을 사용하면 기기의 방향을 확인할수있고, 그에 따라 웹 사이트의 레이아웃을 바꿀 수 있다.

orientation: portrait 단말기의 세로 모드 지정
orientation: landscape 단말기의 가로 모드 지정, 기본값

미디어 쿼리의 중단점

미디어 쿼리를 작성할때 서로다른 CSS를 적용하는 지점을 중단점이라고 한다.
대부분 기기는 화면 크기를 중단점으로 한다.
시중에 나온 모든 기기를 반영할수없으므로 모바일과 태블릿 데스크톱정도만 구분하는 것이 좋다
다른 기기보다 모바일에 제약조건이 많기떄문에 모바일의 레이아웃을 기본으로하여 CSS를 만들면 테블릿과 테스그톱도 기본으로 적용된다.
모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것을 모바일 퍼스트 기법이라고 한다.

미디어 쿼리 적용하기

이제 미디어 쿼리의 구성을 알았으니 실제 적용을 해보겠다. 적용 방법에는 크게 두가지가있다.

1. 외부 CSS파일로 연결하는 방법

CSS파일을 조건별로 따로 저장한 뒤 <link>태그나 @import문을 사용해서 연결한다.
파일이 많고 규모가 큰 사이트를 개발한다면 <link>태그를 이용한다.

<link rel="stylesheet" media="미디어 퀴리 조건" href="css파일 경로">
<link rel="stylesheet" media="print" href="css/print.css">

@import url(css 파일 경로) 미디어 쿼리 조건
@import url("css/tablet.css") only screen and (min-width:321px) and (max-width:768px);

2. 웹 문서에 직접 정의하는 방법

<style>태그 안에서 media 속성을 사용하여 조건을 지정하고, 그조건에 맞는 스타일 규칙을 정의한다.

<style media="screen and (max-width: 320px)">
  body{
     backgroud : orange;
     }
</style>

혹은 스타일을 선언할떄 @media 문을 사용해 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용한다

<style>
 @media screen and (max-width:320px){
   body{
      background: orange;
      }
   }
   
</style>

화면 크기에 따라 배경 이미지 바꾸는 미디어 쿼리

기본 배경 이미지는 apple
가로가 1024px 이하면 book이미지로
가로가 768 이하면 물감이미지
가로가 320 이하면 카카오톡 이미지로 레이아웃을 바꾼다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>미디어 쿼리 사용하기</title>
  <style>
    body{
      background: url(./apple.png) no-repeat fixed;
      background-size:cover;
    }
    @media screen and (max-width: 1024px){
      body{
        background: url(./book-icon.png) no-repeat fixed;
        background-size:cover;
      }
    }
    @media screen and (max-width: 768px){
      body{
        background: url(./HTML.jpeg) no-repeat fixed;
      background-size:cover;
      }
    }
    @media screen and (max-width: 320px){
      body{
        background: url(./KakaoTalk_Photo_2023-02-03-12-29-12.jpeg) no-repeat fixed;
      background-size:cover;
      }
    }
  </style>
</head>
<body>
  
</body>
</html>

#그리드 레이아웃

반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서 요소를 재배치 해야한다.

재배치하려면 기준이 되는 레이아웃이 필요한데 이떄 그리드 레이아웃을 이용한다.

그리드 레이아웃이란 웹 사이트를 여러개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것이다.

그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할수있다.

그리드 레이아웃의 특징

1. 시각적으로 안정된 디자인을 만든다.

2. 업데이트가 편한 웹 디자인을 구성할수있다. - 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃을 미리 만들어볼수있다.

3. 요소를 자유롭게 배치한다.

그리드 레이아웃을 만드는 방법

반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법은 여러가지가 있다.가변 그리드를 CSS의 float속성으로 사용할수도있고, 플렉서블 박스 레이아웃이나 , CSS 그리드 레이아웃으로 적용할수도있다,

플렉서블 박스 레이아웃

블렉서블 박스 레이아웃은 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치한다.
플렉스 박스 레이아웃이라고도 하고 플렉스 박스라고도 한다.
수직방향이나 수평방향중에서 한쪽을 주축으로 정하고 박스를 배치한다. (주축 개념)

CSS 그리드 레이아웃

수평과 수직 어느 방향이든 배치할수있다. 대부분 모던 브라우저에서 사용

플렉스 박스 레이아웃

그리드 레이아웃을 기본으로 새로 등장한 개념이다.

플렉스 박스 항목을 배치하는 속성

플렉스 박스에는 플렉스 항목이 여러개 있는데 일괄적으로 한꺼번에 배치할수도 있고, 주축이나 교차축 기준으로 다양하게 배치할수도있다.

justify-content 주축 방향의 정렬 방법
align-items 교차축 방향의 정렬 방법
align-self 교차축에 있는 개별 항목의 정렬 방법
align-content 교차축에서 여러 줄로 표시된 항목의 정렬 방법

플렉스 컨테이너를 지정하는 display 속성

플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야한다.

display의 속성값
flex : 컨테이너 안의 플렉스 항목을 블록레벨요소로 배치
inline-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨요소로 배치

플렉스 방향을 지정하는 flex-direction 속성

플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성이다.

row 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치 , 기본값
row-reverse 주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치
column 주축을 세로로 지정하고 위쪽에서 아래로 배치
column 주축을 세로로 지정하고 아래쪽에서 위로 배치

다음은 1,2,3이라고 숫자가 써있는 박스 3개를 플렉스 컨테이너로 묶고, 컨테이너 안에 있는 플렉스 항목을 여러 방향으로 배치한것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 뷰포트 이용해서 모바일 웹사이트 화면까지 고려한 모습-->
  <style>
    .container {
      width:700px;
      display:flex; /* 플렉스 컨테이너 지정 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
      background-color:#222;   
    }
    #opt1{
      flex-direction: row;          /* 왼쪽에서 오른쪽으로 */ 
    }
    #opt2{
      flex-direction: row-reverse;   /* 오른쪽에서 왼쪽으로 */
    }
    #opt3{
      flex-direction: column;         /* 위에서 아래로 */
    }
    #opt4{
      flex-direction: column-reverse;  /* 아래에서 위로 */
    }                 
    p {
      color:#fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>
  <div class="container" id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
   </div>
  <div class="container" id="opt4">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
  </div>            
</body>
</html>

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정한다.

nowrap 플렉스 항목을 한줄에 표시한다, 기본값
wrap 플렉스 항목을 여러줄에 표시한다.
wrap-reverse 플렉스 항목을 여러줄에 표시하되 시작점과 끝점이 바뀐다

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>플렉스 박스 레이아웃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      display:flex;  /* 플렉스 컨테이너 지정 */
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:30px;
    }
    .box {
      padding:5px 45px;
      margin:5px;   
	  	width:80px;
      background-color:#222;   
    }
    #opt1{
      flex-wrap: nowrap;           /* 한 줄에 표시 */
    }
    #opt2{
      flex-wrap: wrap;             /* 여러 줄에 표시 */
    }
    #opt3{
      flex-wrap: wrap-reverse;     /* 시작점과 끝점 바꿔 여러 줄에 표시 */   
    }                 
    p {
      color:#fff;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container" id="opt1">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt2">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
  </div>
  <div class="container" id="opt3">
    <div class="box"><p>1</p></div>
    <div class="box"><p>2</p></div>
    <div class="box"><p>3</p></div>
    <div class="box"><p>4</p></div>
    <div class="box"><p>5</p></div>
    <div class="box"><p>6</p></div>    
   </div>          
</body>
</html>

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

flex-flow속성은 flex-direction 속성과 flex-wrap속성을 한꺼번에 지정할수있다. 기본값은 row nowrap

#opt1 { flex-flow: row wrap; }
#opt2 { flex-flow: row nowrap; }

주축 정렬 방법을 지정하는 justify-content 속성

flex-start 주축의 시작점에 맞춰 배치
flex-end 주축의 끝점에 맞춰 배치
center 주축의 중앙에 맞춰 배치
space-between 첫번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치
space-around 모든 항목을 주축에 같은 간격으로 배치

#opt1 { justify-content: flex-start; }

교차축 정렬 방법을 지정하는 align-items 속성

flex-start 교차축의 시작점에 맞춰 배치
flex-end 교차축의 끝점에 맞춰 배치
center 교차축의 중앙에 배치
baseline 교차축의 문자 기준선에 맞춰 배치
stretch 플렉스 항목을 늘려 교차축에 가득 차게 배치

특정 항목만 정렬 방법을 지정하는 align-self 속성

align-items 속성은 교차축을 기준으로 플렉스 항목의 정렬 방법을 결정한다, 그중에서 특정 항목만 지정하고 싶다면 align-self 속성을 사용한다.
사용방법? align-items 속성을 플렉스 컨테이너를 지정하는 선택자에서 사용하고, align-self속성은 플렉스 항목 선택자에서 사용한다. 속성값은 align-items속성값과 동일해요.

.container {
      width:450px;
      height:150px;
      background-color:#eee;
      border:1px solid #222;
      margin-bottom:20px;
      display:flex;         /* 플렉스 컨테이너 지정 */
      align-items: center;  /* 교차축의 중앙에 배치 */
    }                                        
    .box {
      padding:5px 45px;
      margin:5px;   
      background-color:#222;   
    }
    #box1 {
      align-self: flex-start;  /* 교차축의 시작점에 배치 */
    }
    #box3 {
      align-self:stretch;       /* 교차축에 가득 차게 늘림 */
    }

여러 줄일 떄 교차축 정렬 방법을 지정하는 aling-content 속성

주축에서 줄바꿈이 생겨 플렉스 항목을 여러줄로 표시할떄,, 교차축에서 플렉스 항목간의 간격을 지정할수있다.

.container {
      float:left;
      width:200px;
      height:150px;
      display:flex;          /* 플렉스 컨테이너 지정 */
      flex-flow: row wrap;   /* 왼쪽에서 오른쪽, 여러 줄 표시 */
      border:1px solid #222;
      background-color:#eee;
      margin:30px;
    }
    #opt1{
      align-content: flex-start;    /* 교차축 시작점 기준 */
    }
    #opt2{
      align-content: flex-end;       /* 교차축 끝점 기준 */
    }
    #opt3{
      align-content: center;         /* 교차축 중앙 기준 */
    }
    #opt4{
      align-content: space-between;     /* 시작점과 끝점 배치 후 중간 항목은 같은 간격으로 배치 */    
    }    
    #opt5{
      align-content: space-around;       /* 전체 항목을 같은 간격으로 배치 */  
    }
    #opt6{
      align-content: stretch;             /* 항목을 늘려 교차축에 가득 차게 배치 */
    }

플렉스 레이아웃을 활용해 항상 중앙에 표시하기

플렉스 박스 레이아웃을 사용하면 텍스트를 세로방향으로 화면 중앙에 배치하는것이 아주아주 편해진다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>세로로 중앙에 배치하기</title>
  <style>
    * {
      margin:0;
      box-sizing: border-box;
    }
    body { /*스타일을 적용하게 되면 body태그 내부에있는 button태그의 "클릭!" 텍스트가 중앙에정렬된다*/
      background:url('./apple.png') no-repeat left top fixed;
      background-size:cover;
      display: flex;/*블록레벨요소로 변환*/
      justify-content: center; /*주축 중앙배치*/
      align-items: center;/*교차축 중앙배치*/
      min-height: 100vh;/*뷰포트 높이의 100% -> 중앙에 배치됨 
        이해안되면 숫자 바꿔보면서 확인하면됨 결론적으론 vw vh는 뷰포트단위이므로
        웹사이트의 너비나 높이가 변함에 따라 같이 크기가 바뀐다 반면 px로 지정하면
        고정값이므로 웹사이트의 크기가 변함에따라 같이 변하지않아 pc로 만든 사이트가
        모바일에서 깨지는 상황이 발생할수있음*/
    }
    button {
      background-color:#ccc;
      font-size: 1.2em; 
      padding:1em 2em;
      border:none;
      border-radius:5px;    
      box-shadow:1px 1px 2px #fff;  
    }
  </style>  
</head>
<body>
  <button>클릭!</button>             
</body>
</html>

#그리드 레이아웃 사용하기

플렉스 박스 레이아웃에서는 배치할떄 가로나 세로 중 하나를 주축으로 놓고 배치했다. (1차원)

반면 그리드 레이아웃은 그리드 항목을 배치할때 주축개념이 없고 가로와 세로를 모두 사용한다. (2차원)

그리드 레이아웃은 가로방향을 row 세로방향을 col로 웹 화면을 구성한다.

그리드 컨테이너를 지정하는 display 속성

그리드 레이아웃을 지정할때도 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어야한다.

grid 컨테이너 안의 항목을 블록레벨요소로 배치
inline-grid 컨테이너 안의 항목을 인라인 레벨 요소로 배치

col , row를 지정하는 grid-template-columns , grid-template-rows 속성

col, row의 줄의 크기와 개수를 지정한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout</title>
  <style>
    #wrapper{
      display:grid; /* 그리드 컨테이너 지정 */
      grid-template-columns: 200px 200px 200px; /* 너비가 200px인 col 3개 */
      grid-template-rows:100px; /* 줄 높이 100px */
    }
  .items{
    padding:10px;
    background-color:#eee;
  }   
  .items:nth-child(odd){
    background-color:#bbb;
  }
  </style>

</head>
<body>
  <div id="wrapper">
    <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, reprehenderit.Lorem ipsum dolor, sit amet consectetur adipisicing elit. </div>
    <div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
    <div class="items">Lorem ipsum dolor sit amet.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
    <div class="items">Lorem ipsum dolor sit.Lorem ipsum dolor, sit amet consectetur adipisicing elit</div>
    <div class="items">Lorem, ipsum dolor.</div>
  </div>
</body>
</html>

상대적인 크기를 지정하는 fr 단위

레이아웃에서 col, row 크기를 지정할때 px를 사용하면 항상 크기가 고정되므로 반응형 웹 디자인엔 적합하지 않음

주로 상대적 크기를 지정하는 fr 단위를 사용함

grid-template-columns : 1fr 1fr 1fr; 너비가 같은 칼럼을 3개 지정한다면
grid-template-columns: 2fr 1fr 2fr; 2:1:2로 배치한다면

값이 반복될때 줄여서 표현할수 있는 repeat()함수

px이나 fr 단위를 사용하면 값을 여러번 반복해야되는 귀찮음이있다. repeat()함수로 간단하게 표현해보자

grid-template-columns: 1fr 1fr 1fr;

->

grid-template-columns: repeat(3, 1fr);

최솟값과 최댓값을 지정하는 minmax()함수

grid-template-rows로 줄높이를 지정했을떄 그 줄높이보다 내용이 많으면 보이지 않는다, minmax()함수를 이용하면 좀더 유연하게 줄높이를 고정하지 않고 구현할수있다.

 #wrapper{
      width:600px;
      display:grid;  /* 그리드 컨테이너 지정 */
      grid-template-columns:repeat(3, 1fr);  /* 너비가 같은 칼럼 3개 */
      grid-template-rows: minmax(100px, auto);  /* 줄 높이 최소 100px ~ 그리드 컨테이너 너비에따라 
       높이는 달라진다. 내용이 많아도 다 표시할수있음 !! */
    }

자동으로 col 개수로 조절하는 auto-fill, auto-fit

repeat 함수에서 칼럼의 너빗값과 함께 auto-fit이나 auto-fill을 지정하면 화면 너비에 따라 칼럼개수를 조절할 수 있다.

auto-fit을 사용하면 화면이 넓을떄는 남는 공간 없이 꽉 채워 칼럼을 표시

auto-fill을 사용하면 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둔다.

예를들어 다음과 같이 너비가 200px인 칼럼을 화면 너비에 가득찰떄까지 배치가능

grid-template-columns : repeat(auto-fit, 200px);

그리드 항목의 간격을 지정하는 grid-column-gap, grid-row-gap, grid-gap

항목과 항목 사이 간격을 조절한다.

grid-column-gap ->칼럼과 칼럼 사이 간격
grid-row-gap ->줄과 줄 사이 간격
grid-gap: 줄간격 칼럼간격 -> 칼럼과 줄 사이 간격 한꺼번에 지정

그리드 라인을 이용해 배치하기

grid-column-start 칼럼 시작의 라인 번호
grid-column-end 칼럼 마지막의 라인 번호.
grid-column 칼럼 시작 번호와 칼럼 끝 번호 사이
grid-row-start 줄 시작의 라인 번호
grid-row-end 줄 마지막의 라인 번호
grid-row 줄시작번호와 끝 번호 사이

box1영역의 칼럼라인은 1~4까지 차지 , box2 칼럼라인은 1~2까지 줄라인은2~4까지 차지 ... 이런식임

항목을 배치할떄 칼럼이나 줄을 하나만 차지하는 경우에는 grid-column-start나 grid-row-start속성을 사용해 시작 번호만 지정하고 끝 번호는 지정하지않아도됨

  <!DOCTYPE html>
  <html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS Grid Layout</title>
    <style>
      #wrapper{
        width:700px;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows:repeat(3, 100px);
      }
      .box{
        padding:15px;
        color:#fff;
        font-weight:bold;
        text-align:center;
      }   
      .box1 {
        background-color:#3689ff;
        grid-column:1/4;
      }
      .box2 {
        background-color:#00cf12;
        grid-row:2/4;
        
        grid-column-start:1;
      }
      .box3 {
        background-color:#ff9019;
        grid-column:2/4;
        
        grid-row-start:2;
        }
      .box4 {
        background-color:#ffd000;
        grid-column-start:3;
        grid-row-start:3;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
      <div class="box box4">box4</div>
    </div>
  </body>
  </html>

템플릿 영역을 만들어 배치하기 grid-templete-areas / grid-area

그리드라인은 시작번호와 끝 번호를 일일이 지정해서 레이아웃을 만들어야 하는 불편함이있다.

템플릿 영역으로 항목을 배치하면 훨씬 쉬움,,

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Grid Layout</title>
  <style>
    #wrapper{
      width:700px;
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      grid-template-rows:repeat(3, 100px);
      grid-template-areas: 
        "box1 box1 box1"
        "box2 box3 box3"
        "box2 . box4";
    }    /* 한줄에 들어갈 템플릿 영역을 큰따옴표로 묶는다, 빈영역은 마침표로 */
    .box{
      padding:15px;
      color:#fff;
      font-weight:bold;
      text-align:center;
    }   
    .box1 {
      background-color:#3689ff;
      grid-area:box1;
    }
    .box2 {
      background-color:#00cf12;
      grid-area:box2;
    }
    .box3 {
      background-color:#ff9019;
      grid-area:box3;
      }
    .box4 {
      background-color:#ffd000;
      grid-area:box4;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box box1">box1</div>
    <div class="box box2">box2</div> 
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
  </div>
</body>
</html>

CSS그리드 레이아웃으로 갤러리 만들기

웹 브라우저의 너비를 바꿀때바다 칼럼개수가 조절되는 사이트 완성!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>상품 갤러리 만들기</title>
  <link rel="stylesheet" href="./poster.css">
</head>
<body>
  <div id="wrapper">
    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-1.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>

    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-2.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>

    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-3.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div> 
    
    <div class="card">
      <header>
        <h3>사진 제목</h3>
      </header>
      <figure>
        <img src="images\cup-4.jpg">
      </figure>
      <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
    </div>     

    <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-5.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>
  
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-6.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>
  
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-7.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div> 
      
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-8.jpg">
        </figure>
        <p>사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, numquam. Neque mollitia esse blanditiis facere.</p>
      </div>        
  </div>
</body>
</html>

* {
  box-sizing: border-box;
}
body {
  background-color:#eee;
  font-size:16px;
}
#wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  grid-gap:1rem;
}
.card {
  background-color:#fff;
  box-shadow:0px 1px 5px #222;
}
.card > header {
  font-size:1.5rem;
  padding:0.5rem;
}
.card > p {
  padding:0.5rem;
  line-height:1.6em;
}
.card > img {
  max-width:100%;
}

'html, css, js' 카테고리의 다른 글

[js] 기본입출력, 스타일 가이드 (0)	2023.02.20
[js] js 사용방법 (0)	2023.02.20
[CSS] transform속성, 트랜지션, 애니메이션 (0)	2023.02.17
[CSS] 고급 선택자(연결선택자,속성선택자,가상클래스 선택자) (0)	2023.02.16
[CSS] 배경색 꾸미기(background, 그러데이션) (0)	2023.02.15

ABOUT ME

lee-ding lee-ding

반응형 웹 디자인이란

모바일 기기를 위한 뷰포트

뷰포트 지정하기

가장 많이 사용하는 뷰포트 속성

뷰포트 단위

반응형 웹사이트를 만들떄 여러기기에서 제대로 보이는지 테스트 하는 방법

미디어 쿼리

미디어 쿼리 구문

미디어 유형의 종류

웹 문서의 가로 너비와 세로 높이 속성

device 스마트폰 단말기의 너비와 세로 높이 속성

화면 회전 속성

미디어 쿼리의 중단점

미디어 쿼리 적용하기

화면 크기에 따라 배경 이미지 바꾸는 미디어 쿼리

#그리드 레이아웃

그리드 레이아웃의 특징

그리드 레이아웃을 만드는 방법

플렉서블 박스 레이아웃

CSS 그리드 레이아웃

플렉스 박스 레이아웃

플렉스 박스 항목을 배치하는 속성

플렉스 컨테이너를 지정하는 display 속성

플렉스 방향을 지정하는 flex-direction 속성

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

주축 정렬 방법을 지정하는 justify-content 속성

교차축 정렬 방법을 지정하는 align-items 속성

특정 항목만 정렬 방법을 지정하는 align-self 속성

여러 줄일 떄 교차축 정렬 방법을 지정하는 aling-content 속성

플렉스 레이아웃을 활용해 항상 중앙에 표시하기

'html, css, js' 카테고리의 다른 글

티스토리툴바

ABOUT ME

반응형 웹 디자인이란

모바일 기기를 위한 뷰포트

뷰포트 지정하기

가장 많이 사용하는 뷰포트 속성

뷰포트 단위

반응형 웹사이트를 만들떄 여러기기에서 제대로 보이는지 테스트 하는 방법

미디어 쿼리

미디어 쿼리 구문

미디어 유형의 종류

웹 문서의 가로 너비와 세로 높이 속성

device 스마트폰 단말기의 너비와 세로 높이 속성

화면 회전 속성

미디어 쿼리의 중단점

미디어 쿼리 적용하기

화면 크기에 따라 배경 이미지 바꾸는 미디어 쿼리

#그리드 레이아웃

그리드 레이아웃의 특징

그리드 레이아웃을 만드는 방법

플렉서블 박스 레이아웃

CSS 그리드 레이아웃

플렉스 박스 레이아웃

플렉스 박스 항목을 배치하는 속성

플렉스 컨테이너를 지정하는 display 속성

플렉스 방향을 지정하는 flex-direction 속성

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

주축 정렬 방법을 지정하는 justify-content 속성

교차축 정렬 방법을 지정하는 align-items 속성

특정 항목만 정렬 방법을 지정하는 align-self 속성

여러 줄일 떄 교차축 정렬 방법을 지정하는 aling-content 속성

플렉스 레이아웃을 활용해 항상 중앙에 표시하기

'html, css, js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바