반응형 웹과 미디어 쿼리를 이용해 사용자의 접속 환경에 맞춰보자

2025. 1. 28. 20:28ㆍHTML_CSS

728x90
반응형

 

 안녕하세요. 진득 코딩입니다.

 

 최근 웹페이지를 PC 브라우저 환경이 아닌 모바일 브라우저 환경에서 보는 유저들이 늘어났습니다.

 

 이는 홈페이지를 만드는 개발자 입장에서는 모바일 유저들의 편의성을 고려하게 되었습니다.

 

 이번 시간에는 사용자의 접속 환경에 맞추어 사이트의 레이아웃을 자연스럽게 바꾸어 보여주는 '반응형 웹 디자인'에 대해 알아보도록 하겠습니다.

 

반응형 웹 디자인

 

  •  반응형 웹 디자인은 화면 크기에 '반응'하는 화면 요소를 자동으로 바꾸어 사이트를 구현하는 것을 말합니다.

  • 즉, 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 줍니다.

뷰포트

 

  • 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.

  • 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있습니다.

뷰포트 지정하기

 

  • 뷰포트는 <meta> 태그를 이용해 <head>와 </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, initial-scale=1">

 

뷰포트 단위

 

  • 뷰포트 개념이 등장한 이후로 뷰포트를 기준으로 하는 단위를 사용할 수도 있습니다.


 - vw(viewport width): 1vw는 뷰포트 너비의 1%와 같습니다.

 - vh(viewport height): 1vh는 뷰포트 높이의 1%와 같습니다.

 - vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같습니다.

 - vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같습니다.

 

미디어 쿼리

 

  • 미디어 쿼리(media queries)는 반응형 웹 디자인에서 가장 기본적인 개념입니다.

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

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

미디어 쿼리 구문

 

  • 미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다.

  • 미디어 쿼리의 기본형을 살펴보겠습니다.


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

 


 1. only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.

 2. not : not 다음에 지정하는 미디어 유형을 제외합니다. 예를 들어 not tv라고 지정하면 TV를 제외한 미디어 유형에만 적용합니다.

 3. and : 조건을 여러 개 연결해서 추가할 수 있습니다.

 ** 조건이 같은 미디어 유형이 여러 개라면 쉼표(,)로 구분해서 추가합니다.

 

  • 미디어 쿼리 구문은 <style>과 </style> 사이에 사용하며 대소 문자를 구별하지 않습니다.

  • 기본적으로 미디어 유형을 지정해야 하고 필요할 경우에는 and 연산자로 조건을 적용합니다.


 @media screen and (min-width: 768px) and (max-width: 1439px) {
     (... 생략 ...)
 }

 

미디어 유형의 종류

 

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

  • @media 속성의 미디어 유형을 살펴보겠습니다.

종류 설명
 all  모든 미디어 유형에서 사용할 CSS를 정의합니다.
 print  인쇄 장치에서 사용할 CSS를 정의합니다.
 screen  컴퓨터 스크린에서 사용할 CSS를 정의합니다. 스마트폰의 스크린도 포함됩니다.
 tv  음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의합니다.
 aural  음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)에서 사용할 CSS를 정의합니다.
 braille  점자 표시 장치에서 사용할 CSS를 정의합니다.
 handheld  패드(pad)처럼 손에 들고 다니는 장치를 위한 CSS를 정의합니다.
 projection  프로젝터를 위한 CSS를 정의합니다.
 tty  디스플레이 기능이 제한된 장치에 맞는 CSS를 정의합니다. 이런 장치에서는 픽셀(px) 단위를 사용할 수 없습니다.
 embossed  점자 프린터에서 사용할 CSS를 정의합니다.

 

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

 

  • 실제 웹 문서 내용이 화면에 나타나는 영역을 뷰포트라고 합니다.

  • 뷰포트의 너비와 높이를 미디어의 쿼리의 조건으로 사용할 수 있습니다.

  • screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 하며, print에서는 한 페이지 높이를 기준으로 합니다.

  • 가로 너비와 세로 높이를 지정할 때 사용하는 속성을 살펴보겠습니다.

종류 설명
 width, height  웹 페이지의 가로 너비, 세로 높이를 지정합니다.
 min-width, min-height  웹 페이지의 최소 너비와 최소 높이를 지정합니다.
 max-width, max-height  웹 페이지의 최대 너비, 최대 높이를 지정합니다.

 

  • 너비가 1440px 이상일 때 미디어 쿼리는 다음과 같이 작성할 수 있습니다.


 @media screen and (min-width: 1440px) { /* 너비가 최소 1440px인 화면용 스타일 */
     (... 생략 ...)
 }

 

단말기의 가로 너비와 세로 높이 속성

 

  • 단말기(device)에서 기본으로 제공하는 물리적인 가로 너비와 세로 높이의 크기를 살펴보겠습니다.

  • 단말기의 너비와 높이는 단말기 브라우저 창의 너비와 높이를 의미합니다.

종류 설명
 device-width, device-height  단말기의 가로 너비, 세로 높이를 지정합니다.
 min-device-width, min-device-height  단말기의 최소 너비, 최소 높이를 지정합니다.
 max-device-width, max-device-height  단말기의 최대 너비, 최대 높이를 지정합니다.

 

  • 예를 들어 iPhoneX일 경우에 미디어 쿼리는 다음과 같이 작성할 수 있습니다.


 @media screen and (min-device-width: 375px) and (min-device-height: 812px) {
     (... 생략 ...)
 }

 

화면 회전 속성

 

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

  • orientation 속성값으로는 portrait와 landscape가 있습니다.
  • landscape는 가로 모드이고, portrait는 세로모드이며, 기본값은 landscape입니다.
종류 설명
 orientation : portrait  단말기의 세로 모드를 지정합니다.
 orientation : landscape  단말기의 가로 모드를 지정합니다.

 

  • 예를 들어 iPhoneX를 가로로 돌릴 경우에 미디어 쿼리는 다음과 같이 작성합니다.


 @media screen and (min-device-width: 812px) and (orientation: landscape) {
     (...생략...)
 }

 

미디어 쿼리의 중단점

 

  • 중단점(break point)은 미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 의미합니다.

  • 이 중단점을 대부분 기기의 화면 크기를 기준으로 합니다.

  • 다른 기기보다 모바일의 제약 조건이 더 많으므로 모바일의 레이아웃을 기본으로 하여 CSS를 만듭니다.

  • 그러고 나서 사용이 좀 더 좋고 화면이 큰 태블릿과 데스크톱에 맞춰 더 많은 기능과 스타일을 추가합니다.

  • 이렇게 모바일을 먼저 고려하여 미디어 쿼리를 작성하는 것을 모바일 퍼스트(mobile first) 기법이라고 합니다.

  • 여러 중단점은 보통 모바일, 태블릿, 그리고 데스크톱으로 구분합니다.

  • 하지만 이 중단점은 개발자나 작업 조건에 따라 달라질 수 있습니다.


 - 스마트폰 : 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성합니다. 만일 스마트폰의 방향까지 고려해서 제작한다면 min-width의 세로와 가로를 각각 portrait 320px, landscape 480px로 지정합니다.

 - 태블릿 : tpfh zmrlrk 768 이상이면 태블릿으로 지정합니다. 가로 크기는 데스크톱과 똑같이 1024px 이상으로 지정합니다.

 - 데스크톱 : 화면 크기가 1024px 이상이면 데스크톱으로 설정합니다.

 

미디어 쿼리 적용하기

 

  • 미디어 쿼리를 웹 문서에 적용하는 방법은 크게 두 가지 있습니다.

  • 첫 번째 방법은 '외부 CSS 파일로 연결하는 방법'과 '웹 문서에 직접 정의하는 방법'이 있습니다.

외부 CSS 파일 연결하기

 

  • 이 방법은 각 조건별로 CSS 파일을 따로 저장한 뒤 <link> 태그나 @import 문을 사용해서 연결합니다.

  • <link> 태그는 <head>와 </head> 태그 사이에 넣습니다.

  • 미디어 쿼리 조건이 맞는다면 지정한 CSS 파일을 가져와서 적용하라는 기본형을 살펴보겠습니다.


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

 

  • 예를 들어 인쇄용 CSS를 정의한 css/print.css 파일을 만들어 놓았다면 다음과 같이 코드를 작성하여 웹 문서와 연결합니다.


 <link rel="stylesheet" media="print" href="css/print.css">

 

  • <link> 태그 대신 @import 문을 사용할 수 있습니다.

  • @import 문은 CSS를 정의하는 <style>과 </style> 태그 사이에서 다음과 같이 사용합니다.


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

 

  • 예를 들어 태블릿용 CSS를 정의한 css/tablet.css 파일을 만들고, 너빗값이 321px 이상이면서 768px 이하일 때에 미디어 쿼리를 적용하려면 다음과 같이 지정할 수 있습니다.


 @import url("css/tablet.css") only screen and (min-width: 321px) and (max-width: 768px);

 


 ** <link> 태그와 @import문

 - 인터넷 익스플로러의 경우 @import문과 자바스크립트가 함께 있을 경우 자바스크립트를 먼저 내려받은 후에 @import 문에 있는 CSS를 다운로드합니다.

 - 자바스크립트에서 스타일과 관련된 정보를 처리해야 할 경우 오류가 날 수도 있습니다.

 - CSS 파일이 많고 규모가 큰 사이트 개발한다면 @import문보다 <link> 태그를 주로 사용합니다.

 

웹 문서에 직접 정의하기

 

  • 웹 문서에 미디어 쿼리를 직접 정의하는 방법은 다음 2가지입니다.

  • 첫 번째 방법은 <style> 태그 안에서 media 속성을 사용하여 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의하는 것입니다.


 <style media="<조건>"> {
     <스타일 규칙>
 }
 </style>

 

  • 두 번째 방법은 스타일을 선언할 때 @media 문을 사용해 각 조건별로 스타일을 지정해 놓고 스타일을 선택해서 적용하는 것입니다.

  • @media 문을 사용하는 기본형을 살펴보도록 하겠습니다.


 <style>
  @media <조건> {
     <스타일 규칙>
 }
 </style>

 

그리드 레이아웃

 

  • 웹 사이트의 레이아웃(grid layout)을 정할 때 사이트 전체 디자인이나 일관성을 유지하려면 그리드 레이아웃을 사용해야 합니다.

  • 그리드 레이아웃은 화면 너비에 따라 웹 문서의 요소를 재배치할 때 기준이 되는 레이아웃입니다.

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

  • 그리드 레이아웃의 3가지 특징에 대해 알아보도록 하겠습니다.

  1. 시각적으로 안정된 디자인을 만들 수 있습니다.

    - 그리드 레이아웃을 사용한 웹 사이트 디자인은 사용자에게 안정감을 줍니다.

  2. 업데이트가 편한 웹 디자인을 구성할 수 있습니다.

    - 그리드 레이아웃을 이용하면 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃을 미리 만들어 볼 수 있습니다.

    - 나중에 내용을 업데이트하기도 쉽습니다.

  3. 요소를 자유롭게 배치할 수 있습니다.

     - 그리드 레이아웃을 사용하면 한 줄에 여러 요소를 배치할 수도 있고, 중요한 내용은 좀 더 넓은 공간을 두어 사용자에게 잘 보이게 할 수도 있습니다.

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

 

  1. 플렉서블 박스 레이아웃

     - 플렉서블 박스 레이아웃(flexible box layout)은 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것입니다.

     - 여유 공간이 생길 경우 너비나 높이를 적절하게 늘이거나 줄일 수도 있습니다.

     - 플렉서블 박스 레이아웃은 흔히 플렉스 박스 레이아웃(flex box layout)이라고도 부르기 때문에 앞으로는 줄여서 플렉스 박스라고 지칭하겠습니다.

     - 플렉스 박스는 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치합니다.

  2. CSS 그리드 레이아웃

     - 플렉스 박스를 사용할 때는 '주축'이라는 개념이 있어서 수평이나 수직 중 하나를 기준으로 해서 요소를 배치합니다.

     - 하지만 CSS 그리드 레이아웃은 수평과 수직 어느 방향이든 배치할 수 있습니다.

     - 마치 레고 블록을 끼워 맞추듯 요소를 배치한다고 생각할 수 있습니다.

     - CSS 그리드 레이아웃은 대부분 모던 브라우저에서 사용할 수 있습니다.

플렉스 박스 레이아웃에서 사용하는 용어

 

  • 플렉스 박스 레이아웃(flex box layout)은 그리드 레이아웃을 기본으로 해서 새로 등장한 개념입니다.

플렉스 박스 레이아웃의 용어

 


 1. 플렉스 컨테이너(부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소입니다.

 2. 플렉스 항목(자식 박스) : 플렉스 박스 레이아웃을 적용할 대상으로 1~6까지 작은 박스들이 모두 해당합니다.

 3. 주축(main axis) : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향입니다. 기본적으로 왼쪽에서 오른쪽이며 수평 방향으로 배치합니다. 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 합니다.

 4. 교차축(cross axis) : 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치합니다. 플렉스 항목의 배치가 시작되는 위치를 '교차축 시작점', 끝나는 위치를 '교차점 끝점'이라고 합니다.

 

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

 

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

  • 플렉스 박스 항목을 배치하는 속성을 표로 살펴보도록 하겠습니다.

종류 설명
 justify-content  주축 방향의 정렬 방법입니다.
 align-items  교차축 방향의 정렬 방법입니다.
 align-self  교차축에 있는 개별 항목의 정렬 방법입니다.
 align-content  교차축에서 여러 줄로 표시된 항목의 정렬 방법입니다.

 

display 속성

 

  • display 속성은 플렉스 컨테이너를 지정하는 속성입니다.

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

  • 즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 플렉스 컨테이너로 만들어야 합니다.

  • 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 합니다.

  • display의 속성값을 표로 살펴보도록 하겠습니다.

종류  설명
 flex  컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치합니다.
 inline-flex  컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치합니다.

 

flex-direction 속성

 

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

  • flex-direction의 속성값을 표로 정리하여 살펴보도록 하겠습니다.

종류 설명
 row  주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치합니다. 기본값입니다.
 row-reverse  주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치합니다.
 column  주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치합니다.
 column-reverse  주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치합니다.

 

flex-wrap 속성

 

  • flex-wrap 속성은 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정합니다.

  • flex-wrap의 속성값을 표로 정리하여 살펴보겠습니다.

종류 설명
 nowrap  플렉스 항목을 한 줄에 표시합니다. 기본값입니다.
 wrap  플렉스 항목을 여러 줄에 표시합니다.
 wrap-reverse  플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀝니다.

 

flex-flow 속성

 

  • flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꿉니다.

  • 기본값은 row nowrap입니다.

justify-content 속성

 

  • justify-content 속성은 주축에서 플렉스 항목 간의 정렬 방법을 지정합니다.

  • justify-content 속성값을 표로 정리하여 살펴보겠습니다.

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

 

align-items 속성

 

  • align-items 속성은 교차축을 기준으로 플렉스 항목을 정렬합니다.

  • align-items의 속성값을 표로 살펴보도록 하겠습니다.

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

 

align-self 속성

 

  • align-self 속성은 특정 항목만 지정하고 싶을 때 사용하는 속성입니다.

  • align-self 속성은 플렉스 항목 선택자에서 사용합니다.

  • align-self 속성에서 사용하는 값은 align-items 속성에서 사용하는 값과 같습니다.

align-content 속성

 

  • 주축에서 줄 바꿈이 생겨서 플렉스 항목을 여러 줄로 표시할 때 align-content 속성을 사용하면 교차축에서 플렉스 항목 간의 간격을 지정할 수 있습니다.

  • 한 줄일 경우에는 align-items 속성을 사용합니다.

  • align-content의 속성값을 표로 나타내어 살펴보겠습니다.

종류 설명
 flex-start  교차축의 시작점에 맞춰 배치합니다.
 flex-end  교차축의 끝점에 맞춰 배치합니다.
 center  교차축의 중앙에 맞춰 배치합니다.
 space-between  첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞추고 나머지 항목은 그 사이에 같은 간격으로 배치합니다.
 space-around  모든 항목을 교차축에 같은 간격으로 배치합니다.
 stretch  플렉스 항목을 늘려서 교차축에 가득 차게 배치합니다.

 

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

 

  • 플렉스 레이아웃을 활용해 항상 중앙에 표시하려면 다음과 같이 코드를 작성하면 됩니다.


 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;

 

CSS 그리드 레이아웃

 

  • CSS 그리드 레이아웃은 소스를 최대한 간단하게 유지하면서 대부분의 기기에 대응할 수 있는 그리드 레이아웃 기법입니다.

CSS 그리드 레이아웃에서 사용하는 용어

 

  • 플렉스 박스 레이아웃에서는 플렉스 항목을 배치할 때 가로나 세로 중에서 하나를 주축으로 정해 놓고 배치했습니다.

  • 반면에 CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용합니다.

  • 그래서 플렉스 항목은 1차원, CSS 그리드 레이아웃은 2차원이라고 말합니다.

  • CSS 그리드 레이아웃에서 줄(row)은 가로 방향, 칼럼(column)은 세로 방향을 의미합니다.

  • 칼럼과 칼럼 사이, 줄과 줄 사이의 간격을 지정해서 원하는 형태의 레이아웃을 만듭니다.

display 속성

 

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

  • 그리드 컨테이너를 만들 때는 display 속성을 grid나 inlin-grid로 지정합니다.

  • diplay의 속성값을 표로 정리해 살펴보도록 하겠습니다.

종류 설명
 grid  컨테이너 안의 항목을 블록 레벨 요소로 배치합니다.
 inline-grid  컨테이너 안의 항목을 인라인 레벨 요소로 배치합니다.

 

grid-template-columns, grid-template-rows 속성

 

  • grid-template-columns 속성과 grid-template-rows 속성을 각각 사용하여 그리드 컨테이너 안에 항목을 배치할 때 칼럼과 줄의 크기와 개수를 지정할 수 있습니다.

  • grid-template-columns 속성은 그리드 컨테이너 안의 항목을 몇 개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정합니다.

fr단위

 

  • fr(fraction) 단위를 사용하여 그리드 레이아웃에서 상대적인 크기를 지정할 수 있습니다.

  • 예를 들어 너비가 같은 칼럼을 3개 배치한다면 fr 단위를 사용해 다음과 같이 지정할 수 있습니다.


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

 

  • 칼럼을 2 : 1 : 2로 배치하고 싶다면 다음과 같이 지정할 수 있습니다.


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

 

repeat 함수

 

  • CSS 그리드 레이아웃에는 내장된 repeat()이라는 함수를 사용하면 반복하지 않고 간단하게 표현할 수 있습니다.

  • 예를 들어 너비가 같은 칼럼을 3개 배치하려면 1fr을 3번 사용해야 합니다.

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

 

 

  • 위 코드를 repeat() 함수를 사용하면 다음과 같이 간단하게 작성할 수 있습니다.


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

 

minmax() 함수

 

  • minmax() 함수를 사용하면 줄 높이를 고정하지 않고 최솟값과 최댓값을 사용해서 유연하게 지정할 수 있습니다.


 ex)
 grid-template-rows: minmax(100px, auto); /* 줄 높이는 최소 100px */

 

auto-fill, auto-fit 값

 

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

  • 예를 들어 너비가 200px인 칼럼을 화면 너비에 가득 찰 때까지 배치합니다.


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

 

  • auto-fit이나 auto-fill 모두 칼럼 개수를 자동으로 조절해 주므로 화면이 넓어지면 칼럼 개수가 많아지고 반대로 화면이 좁아지면 칼럼 개수가 줄어듭니다.

  • 두 값의 차이점은 남는 공간을 채울지 말지 여부에 달렸습니다.

  • auto-fit은 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시합니다.

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

grid-column-gap, grid-row-gap, grid-gab 속성

 

  • grid-column-gap, grid-row-gap, grid-gab 속성은 그리드 항목의 간격을 지정하는 속성들입니다.
  • 항목과 항목 사이의 간격을 조절할 때 사용하는 속성들을 표로 정리하여 살펴보겠습니다.
종류 설명
 grid-column-gap  칼럼과 칼럼 사이의 간격을 지정합니다.
 grid-row-gap  줄과 줄 사이의 간격을 지정합니다.
 grid-gap  칼럼과 줄 사이의 간격을 한꺼번에 지정합니다.

 

  • 예를 들어 줄과 줄 사이의 간격을 20px로 하고, 칼럼과 칼럼 사이의 간격을 30px로 하려면 다음과 같이 지정할 수 있습니다.


 grid-row-gap: 20px;
 grid-column-gap: 30px;

 

  • grid-gap 속성을 이용해 칼럼과 줄의 간격을 한꺼번에 지정할 수도 있습니다.

  • 이때 첫 번째 값은 grid-row-gap에 해당하고 두 번째 값은 grid-column-gap에 해당합니다.


 ex)
 grid-gap: 20px 30px; /*줄 간격 20px, 칼럼 간격 30px */

 

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

 

  • 그리드 레이아웃은 눈에 보이지 않는 그리드 라인이 포함되어 있습니다.

  • 그리드 라인을 이용해 그리드 항목을 배치하는 속성을 표로 정리해 살펴보도록 하겠습니다.

종류 설명 예시
 grid-column-start  칼럼 시작의 라인 번호를 지정합니다.  grid-column-start: 1
 grid-column-end  칼럼 마지막의 라인 번호를 지정합니다.  grid-column-end: 4
 grid-column  칼럼 시작 번호와 칼럼 끝 번호 사이에 슬래시(/)를 넣어 사용합니다.  grid-column: 1/4
 grid-row-start  줄 시작의 라인 번호를 지정합니다.  grid-end-start: 2
 grid-row-end  줄 마지막의 라인 번호입니다.  grid-row-end: 4  
 grid-row  줄 시작 번호와 줄 끝 번호 사이에 슬래시(/)를 넣어 사용합니다.  grid-row: 2/4

 

  • 그리드 레이아웃을 만드는 예시를 생각해 보겠습니다.

  • 우선 box1부터 box4 영역까지 감싸고 있는 #wrapper 요소를 그리드 레이아웃 컨테이너로 지정하고, 칼럼은 1fr씩 3개로, 줄 높이는 repeat(3, 100px)으로 지정합니다.


 grid-template-columns: repeat(3, 1fr); /*칼럼은 1fr씩 3개 */
 grid-template-rows: repeat(3, 100px); /* 줄은 100px씩 3개 */

 

  • 이 상태에서 box1 영역의 칼럼 라인은 1번부터 4번까지 차지하고 box2 영역의 칼럼 라인은 1번부터 2번까지, 줄 라인은 2번에서 4번까지 차지한다고 한다고 가정합니다.

  • 항목을 배치할 때 칼럼이나 줄을 하나만 차지할 경우 grid-column-start나 grid-row-start 속성을 이용해 시작 번호만 지정하고 끝 번호는 지정하지 않아도 됩니다.


 .box1{
     grid-column: 1/4
 }
 .box2{
     grid-row: 2/4;
 }
 .box3{
     grid-column: 2/4;
     grid-row-start: 2;
 }
 .box4{
     grid-column: 3;
     grid-row-start: 3;
 }

 

템플릿 영역을 만들어 배치하기

 

  • 템플릿 영역으로 항목을 배치하면 그리드 레이아웃을 만드는 것보다 더 쉽습니다.

  • 그리드 컨테이너로 사용하는 #wrapper 요소에서 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 지정합니다.

  • 템플릿 영역을 비워두려면 그 자리에 마침표(.)를 넣습니다.

  • 한 줄에 들어갈 템플릿 영역을 큰따옴표(" ")로 묶어 주면 되는데, 한 줄마다 줄 바꿈을 하면 마치 눈으로 보듯 템플릿 영역을 나열할 수 있어서 좀 더 쉽게 작성할 수 있습니다.


 #wrapper {
     grid-template-areas:
       "box1 box1 box1"
       "box2 box3 box3"
       "box2 . box4";
 }

 

 

  최근에 만들어진 웹페이지를 봤을 때 반응형 웹 페이지가 적용되지 않은 웹페이지를 잘 못 봤습니다.

 

 가끔 발견하게 되면 고개를 갸우뚱하게 할 정도로 굉장히 중요한 기술이 미디어 쿼리라고 생각합니다.

 

 미디어 쿼리를 이용하여 반응형 웹 페이지를 만들어 더욱 완성도 높은 웹페이지를 만들기를 기원합니다.

 

 이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항이 있다면 댓글에 남겨주시면 열심히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊

 

 

728x90
반응형
LIST

'HTML_CSS' 카테고리의 다른 글

CSS에서의 트랜지션과 애니매이션에 대해 알아보자  (0) 2025.01.27
CSS 고급 선택자에 대해 알아보자  (0) 2025.01.24
CSS 이미지와 그라데이션 효과로 배경을 꾸며보자  (0) 2025.01.23
CSS 박스 모델을 이용해서 레이아웃을 구성해보자  (0) 2025.01.22
HTML/CSS 그룹 프로젝트 3, 4일차 - 다른 페이지와 연결하기  (0) 2025.01.21

관련글

티스토리툴바