Under the Sign of Saturn

  • 🔎 Home
  • ✨ Portfolio
  • 👀 Github

responsive web 1

[responsive-web] CSS grid-layout repeat() (auto-fill, auto-fit)

반응형 레이아웃을 제작할 때, grid-template-columns의 repeat() 함수의 두 속성값 auto-fill과 auto-fit의 차이점. repeat() 함수 만일, 칼럼 12개를 반복한다고 하면, 우리는 명시적으로 repeat() 함수안에 그 값을 적어줄 수 있다. .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); column-gap: 12px; row-gap: 8px; } 이 가로 단 안에서 칼럼 12개가 미리 지정해준 row-gap, column-gap 값을 유지하며 정렬되어 있다. 브라우저에게 각 row에 컬럼 12개를 정렬하라고 했으므로, 화면 크기..

👩‍💻/CSS3 2021.01.07
1
더보기
프로필사진

프론트엔드 개발자의 Today I Learnt

  • 분류 전체보기 (110)
    • 👩‍💻 (93)
      • JavaScript (22)
      • React Native (0)
      • React (11)
      • Vue (11)
      • TypeScript (3)
      • Java (4)
      • ruby & python (7)
      • CSS3 (9)
      • HTML5 (3)
      • Data Base (1)
      • Firebase (3)
      • Git (5)
      • Network (9)
      • Web (2)
      • Markdown (1)
      • KNOU (2)
    • 🛠 (15)
      • Blog (2)
      • Dev Tool (13)
    • 💎 (2)
      • books (0)
      • Log (2)
      • Private (0)

Tag

programmers, github, git, 파이썬, 프로그래머스, 리액트, coding test, 루비, React, ESLint, vue, CSS, 프론트엔드, javascript, CRA, vue.js, Typescript, todolist, Frontend, techBlog,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바