CSS 9일차 auto-fill / auto-fit / 미디어 쿼리

CSS 9일차 auto-fill / auto-fit / 미디어 쿼리

2025. 12. 17. 17:17ㆍ대우개발원 수업 내용/css로 웹 페이지 꾸미기

CSS Grid의 auto-fill, auto-fit, repeat 정리

1. repeat() 함수

1-1. repeat()란

Grid 레이아웃에서 행(row) 또는 열(column)의 반복을 간단하게 작성하기 위한 함수
같은 크기의 트랙을 여러 개 만들 때 사용

1-2. repeat() 기본 문법

grid-template-columns: repeat(반복횟수, 트랙크기);

1-3. repeat() 사용 예

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

200px 너비의 열을 3개 생성

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

동일한 비율의 열을 4개 생성

1-4. repeat()의 특징

코드 가독성 향상
반복되는 트랙 정의를 간결하게 작성 가능
auto-fill, auto-fit과 함께 사용 가능

2. auto-fill

2-1. auto-fill이란

컨테이너 너비를 기준으로 가능한 한 많은 열을 생성
아이템 개수와 상관없이 빈 트랙도 유지

2-2. auto-fill 기본 문법

grid-template-columns: repeat(auto-fill, minmax(최소값, 최대값));

2-3. auto-fill 사용 예

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

2-4. auto-fill의 동작 방식

컨테이너 너비 안에 들어갈 수 있는 만큼 열 생성
실제 아이템 수보다 열이 많으면 빈 공간(빈 컬럼)이 남음
레이아웃의 틀을 유지하는 데 유리

2-5. auto-fill 특징 요약

빈 열을 유지
일정한 그리드 구조 유지
아이템 수가 유동적일 때도 열 개수 고정 효과

3. auto-fit

3-1. auto-fit이란

컨테이너 너비를 기준으로 가능한 한 많은 열을 생성
아이템이 없는 열은 자동으로 제거

3-2. auto-fit 기본 문법

grid-template-columns: repeat(auto-fit, minmax(최소값, 최대값));

3-3. auto-fit 사용 예

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

3-4. auto-fit의 동작 방식

컨테이너에 맞게 열 생성
아이템 개수보다 열이 많을 경우
빈 열을 제거하고 남은 아이템이 공간을 확장

3-5. auto-fit 특징 요약

빈 열 제거
아이템이 화면을 꽉 채움
반응형 카드 레이아웃에 적합

4. auto-fill과 auto-fit 비교 정리

구분auto-fillauto-fit

빈 열 처리	유지됨	제거됨
아이템 확장	안 됨	됨
레이아웃 성격	틀 고정	유동적
사용 목적	구조 유지	화면 채우기

5. auto-fill / auto-fit / repeat 함께 사용하기

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

화면 크기에 따라 열 개수 자동 조정
반응형 웹에서 가장 많이 사용되는 패턴

6. 정리 요약

repeat()
→ 반복되는 그리드 트랙을 간결하게 작성
auto-fill
→ 빈 공간을 포함해 가능한 많은 열 생성
auto-fit
→ 아이템 수에 맞춰 열을 줄이고 공간을 채움

7.3 반응형 웹을 위한 미디어 쿼리 사용하기

1. 미디어 쿼리란

사이트에 접속하는 미디어 타입과 특징, 해상도에 따라
서로 다른 스타일 속성을 적용할 수 있게 하는 기술

2. 뷰포트(Viewport) 알아보기

뷰포트(Viewport)
웹 페이지가 접속한 기기에서 실제로 보이는 영역의 크기

3. 미디어 쿼리 알아보기

3-1. 미디어 쿼리 정의

미디어 쿼리(Media Queries)
접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하는 방법

3-2. 미디어 쿼리 구문

@media 속성을 사용하여
특정 미디어에서 어떤 CSS를 적용할지 지정
<style> 태그와 </style> 태그 사이에 사용

예)
미디어 유형이 screen이면서
최소 너비가 768px이고 최대 너비가 1439px일 경우 적용할 CSS

3-3. 미디어 쿼리의 다양한 조건

웹 문서의 가로 너비와 세로 높이(뷰포트)
단말기의 가로 너비와 세로 높이
화면 회전 여부

주의 사항

대부분의 단말기 해상도와 실제 브라우저 너비는 다름
실제 웹 문서 내용이 나타나는 영역의 너비와 높이를 조건으로 사용
스마트폰이나 태블릿에서 기기를 가로 또는 세로로 돌려보는 경우 고려

예시

화면 너비가 1440px 이상일 때
iPhone X를 가로로 돌릴 경우

4. 미디어 쿼리 중단점(Breakpoint)

중단점(Breakpoint)
서로 다른 CSS를 적용할 화면 크기
대부분 기기의 화면 크기를 기준으로 설정
모든 기기를 반영할 수 없기 때문에
스마트폰 / 태블릿 / 데스크톱 정도로 구분

모바일 퍼스트(Mobile First)

모바일 기기 레이아웃을 기본으로 작성
이후 태블릿과 PC 레이아웃을 작성

일반적인 사용 예

(중단점은 개발자나 작업 조건에 따라 달라질 수 있음)

스마트폰
- 모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성
- 방향까지 고려할 경우
  - 세로(portrait) : 320px
  - 가로(landscape) : 480px
태블릿
- 세로 크기 768px 이상이면 태블릿
- 가로 크기는 데스크톱과 동일하게 1024px 이상
데스크톱
- 화면 크기 1024px 이상

5. 미디어 쿼리 적용하기

5-1. 외부 CSS 파일 연결

<head>와 </head> 사이에 삽입

방법 1) <link> 태그 사용
방법 2) @import 구문 사용

5-2. 웹 문서에서 직접 정의하기

방법 1) <style> 태그 안에서 media 속성 사용
방법 2) @media 문 사용

6. 미디어 쿼리 기본 문법

@media <not|only> <media type> and (<media feature>)
<and|or|not> (<media feature>) {
  /* CSS 코드 */
}

6-1. not / only

not : 뒤에 오는 모든 조건을 부정
only : 미디어 쿼리를 지원하는 기기만 적용

6-2. media type (미디어 타입)

all : 모든 기기
print : 인쇄 장치(프린터 등)
screen : 컴퓨터 화면 장치 또는 스마트 기기
speech : 스크린 리더기 등 음성 출력 장치

6-3. media feature (미디어 조건)

min-width : 적용될 최소 화면 너비
max-width : 적용될 최대 화면 너비
orientation: portrait
- 세로 모드
- 뷰포트의 세로 높이가 가로 너비보다 큰 경우
orientation: landscape
- 가로 모드
- 뷰포트의 가로 너비가 세로 높이보다 큰 경우

ㅗ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid {
            width: 800px;
            display: grid;
            grid-gap : 10px;
            grid-auto-rows:100px;
            /* grid-template-columns:100px 1fr; */
            margin-bottom : 30px;
        }
        
        .grid:first-child{
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        }
        .grid:last-child{
            grid-template-columns: repeat(auto-fit, minmax(100px, fr)) ;
        }
        body > div > div:nth-child(odd){
            background-color: forestgreen;
        }
        body > div > div:nth-child(even){
            background-color: pink;
        }
    </style>
</head>
<body>
    auto-fill
    <div class="grid">
        <div class="boxes">1</div>
        <div class="boxes">2</div>
        <div class="boxes">3</div>
        <div class="boxes">4</div>
        <div class="boxes">5</div>
    </div>
    auto-fit
    <div class="grid autofit">
        <div class="boxes">1</div>
        <div class="boxes">2</div>
        <div class="boxes">3</div>
        <div class="boxes">4</div>
        <div class="boxes">5</div>
    </div>
    
</body>
</html>

응용

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      background-color: #eee;
      font-size: 16px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      grid-gap: 1rem;
    }

    .grid-item {
      background-color: #fff;
      box-shadow: 0px 1px 5px black;
    }

    .grid-item > header {
        font-size: 1.5rem;
        padding: 0.5rem;
    }
    .grid-item > img {
      width: 80%;
      height: auto;
      margin: auto;
      display: block;
    }
    .grid-item > p{
      padding: 0.5rem;
      line-height: 1.6em;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-1.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-2.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-3.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-4.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-5.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-6.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-7.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
    <div class="grid-item">
      <header><h1>사진제목</h1></header>
      <img src="/images/cup-8.jpg">
      <p>사진 설명 : Lorem ipsum, dolor sit amet consectetur adipisicing elit. Adipisci, iste qui. Suscipit cum repudiandae
        recusandae maiores possimus quod in quidem, a sit non rem fugit enim porro nemo velit libero?</p>
    </div>
  </div>
</body>

</html>

반응형 웹 응용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>INSPIRATIONAL QUOTES</title>
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: rgb(9, 100, 160);
}
#container {
    width: 320px;        
    margin: 50px auto;
}
.card {
    position: relative;    
    width: 300px;
    height: 500px;
    margin: 20px 10px;
    border: 1px solid #0f0f0f33;
    background-color: #ffffff;      
}
.words {
    position: absolute;    
    left: 10px;
    top: 300px;
    padding: 10px;
    text-align: center;   
}
@media screen and (min-width:768px) and (max-width:1439px) {
  #container {
      width: 570px;        
      margin: 50px auto;
  }
  .card {
      position: relative;    
      width: 550px;
      height: 250px;
      margin: 20px 10px;
      border: 1px solid #0f0f0f33;
      background-color: #ffffff;      
  }
  .words {
      position: absolute;    
      left: 310px;
      top: 50px;
      text-align: center;
      width: 200px;          
  }
}
@media screen and (min-width:1440px) {
  #container {
      width: 1140px;
      margin: 50px auto;
  } 
  .card {
      position: relative;
      float: left;
      width: 550px;
      height: 250px;
      margin: 10px;
      border: 1px solid #0f0f0f33;
      background-color: #ffffff;      
  }
  .words {
        position: absolute;    
        left: 310px;
        top: 50px;
        text-align: center;
        width: 200px;          
    }
}
    </style>
</head>
<body>
    <div id="container">
        <div class="card">
            <img src="/images/som1.jpg" style="width:200px;">    
            <div class="words">
                <h2>일 분 전만큼 먼 시간은 없다.</h2>
                <h3>- Jim Bishop</h3>
            </div>            
        </div>
        <div class="card">
            <img src="/images/som2.jpg" style="width:200px;">    
            <div class="words">
                <h2>낡은 옷은 그냥 입고 새 책을 사라.</h2>
                <h3>- Austin Phelps</h3>
            </div>            
        </div>            
    </div>
</body>
</html>

'대우개발원 수업 내용 > css로 웹 페이지 꾸미기' 카테고리의 다른 글

CSS 8일차 overflow/플렉스 박스 레이아웃(Flexbox)/그리드 레이아웃 (0)	2025.12.16
CSS 7일차 전환(transition)/애니메이션(animation)/변형(transform) /overflow (0)	2025.12.15
CSS 6일차 - float / clear (1)	2025.12.11
CSS 5일차 background / position / z-index (0)	2025.12.10
CSS 4일차 - 박스 모델을 구성하는 속성 / 지금까지 배운 html+css 정리 (0)	2025.12.09

mycommit

태그

최근글

댓글

공지사항

아카이브