남남이루의 고군분투 🌳

  • 태그
  • 방명록
  • GIT Hub

이제야 좀 알겠다 1

[CSS] 화면 레이아웃 잡기 (feat. grid-template-x)

이 포스팅의 배경 :부끄럽지만, 화면 레이아웃을 flex로만 때우곤 했다. 그러나 동일한 레이아웃의 화면간 이동을 할 때 레이아웃이 크게 흔들린 경험이 있었고, 완성도가 좋지 못하다는 생각을 했다. 물론 flex로도 이를 해결할 수 있지만, 레이아웃 잡으라고 만든 grid 속성을 이제는 제때 잘 사용해봐야겠다는 생각이 들어 grid 기본에 대해 정리해본다.요약 *(column은 row로도 가능)ESSENTIAL : grid, grid-template-columns(또는 rows)BASIC : grid-column-start, grid-column-end 또는 grid-columnLEVELUP : grid-area 상위 요소에 필요한 속성.container { display: grid; grid-tem..

Programming/🌐 Web 2025.02.05
1
더보기
프로필사진

구구절절 개발블로그

  • Category (179)
    • Project (5)
    • Programming (36)
      • 💥 뽀개기 (1)
      • ☕ JavaScript (5)
      • 🧞‍♂️ React, TypeScript (6)
      • 🐍 Python (6)
      • 📚 Book Study (6)
      • 🌐 Web (3)
      • Tips (5)
    • ⚡️algorithm (98)
      • step-up ++ (6)
      • accepted (14)
      • master (1)
    • News (5)
      • Frontend (5)
      • Backend (0)
    • log ✎⁾⁾⁾ (30)
      • comming soon (0)
      • career (7)

Tag

부스트캠프, 클린코드, combinations, clean code, 더오래하면돼, Dictionary, DP, typescript, Set, DFS, Git, BFS, 파이썬, 책스터디, 이분탐색, 그리디, 그래프, 알고리즘, 프로그래머스, ADHD,

Archives

«   2025/05   »
일 월 화 수 목 금 토
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 31

최근댓글

방문자수Total

  • Today :
  • Yesterday :
글쓰기 관리자 GitHub

Copyright © Kakao Corp. All rights reserved.

  • Github

티스토리툴바