CSS Grid 완전 정리 끝판왕 😎
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- CSS Grid 어렵다면! 이번 영상에서 확실하게 정리해 보세요 🙌 (↙ 자세한 내용)
___________________________
💡 풀스택 개발 로드맵 ⇢ academy.dream-coding.com/page...
🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
academy.dream-coding.com/
.....................................................
🔥 유튜브 영상을 정리해서 블로그에 올리시는 경우 꼭 출처 및 영상 링크를 남겨 주세요.
✨ 관련된 영상들
CSS Flexbox ⇢ • CSS Flexbox 완전 정리. 포트폴...
🔗 언급된 사이트들
영상 코드 예제 코드 ⇢ github.com/dream-ellie/css-grid
참고할만한 좋은 사이트 ⇢ css-tricks.com/snippets/css/c...
.....................................................
00:00 소개
00:15 레이아웃 (Flex와 Grid 차이)
01:27 Grid 𝌹 개념 정리
03:35 Grid 𝌹 부모 관점 속성들
10:23 Grid 𝌹 자식 관점 속성들
14:34 Grid 𝌹 강력한 Areas! 이미지 활용편
18:53 Grid 𝌹 강력한 Areas! 사이트 활용편
20:36 좋아요🫶 눌러주기
.....................................................
☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
❝Don't forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️
.....................................................
🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
• 프론트엔드 강의 - 프론트엔드 개발자 되...
📒 자바스크립트 기초 강의 영상 목록:
• 자바스크립트 기초 강의 (ES5+): 같...
💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
• 개발자라면 누구나 알고 있으면 좋은 지식 💡
💰 개발자 경력 관리 영상 목록:
• 승승장구 커리어 관리 🚀
📈 IT 트렌드
• IT 트렌드 📈
📷 개발자 브이로그
• 개발자 브이로그 📷
🤗 생산력 향상 팁
• Tech & Tools ❤️
.....................................................
#코딩#프론트엔드#웹개발#CSS
많은 분들이 요청해 주셨던 CSS Grid 드디어! 영상으로 만들게 되었어요.
앞으로 다뤄줬으면 하는 토픽이 있다면 주저 하지 마시고 코멘트로 알려주세요 😍
힌남노 태풍 피해 많으 없으시길 그리고 다가오는 한가위 따뜻하게 잘 보내세요 :)
20분... 좋아요 :) 컴팩트한 강의네요ㅎㅎ
엘리님 강의에서 긴 내용은 3-6시간 단위로 잘라서 인프런에서 강의 판매 해보시는건 어떠신가요ㅎ
백엔드 관련 내용 강의가 추가로 더 나올수도 있나요 노드 잘들었었습니다!
드림코딩은 정말 전설이다…
입문자들에게 생활코딩이랑 투톱급 좋은강의이다..
깔끔한 정리 감사합니다!!
오늘도 좋은 강의 정말 감사합니다!
유용한 강의 항상 감사합니다!!!
진짜 역대급 강의라고 생각합니다❤
으아아앙 ❤❤❤ 엘리 넘 감사해요🎉🎉
정말 유용한 강의입니다. 깔끔하고 예쁘네요. 감사합니다!
정말 설명 하나는 원탑이네요!!! 감사합니다~~
덕분에 너무 쉽고 재밌게 잘 배웠습니다! 감사합니다~~
엘리님 감사합니다 ! ㅎㅎ 한번 연습해볼게요
훌륭한 강의 감사합니다~~ㅎㅎ
멋진 GRID 강의 잘 배우고갑니다 ㅎㅎ
CSS Grid 좋은 기능인데 잘 정리 해주셨네요 ^^
수업이 너무 재밌고... 이해가 완전 잘되요 ㅠ 이런 강의를 유튜브로 볼수 있어서 너무 감사합니다!!!
이 강의는 정말 사랑이네용
엘리님 너무너무 감사해요~ 그리드 정말 써보고 싶었는데 이 영상 보고 자신감이 생겼어요.
어렵고 막막한 개발 공부를 쉽게 이해 할 수 있게 해주셔서 감사합니다! 이번 영상도 잘 보고가요:)
신기해요. 감사해요
오와~ 항상 필요한 부분을 이렇게 요점 정리해서 잘 따라 할 수 있도록 영상 올려주셔서 감사합니다 😆 앨리님 쵝오 👍👍 지금 보다 더 번창하셔서 영상 계속 올려주세요~~ 😄
도움이 되셨다니 감사합니다 😍
와우 미친 꿀팁이네요 감사합니다
와 정말 좋은 영상 감사합니다 덕분에 20분 만에 grid 완벽 이해하고 갔어요 전에는 flex만 썻는데 앞으로 grid도 적재 적소에 사용 할 수 있을꺼 같아요 감사합니다!
정말... 제가 들은 프론트 강의와 온라인 강의영상을 통틀어 최고의 강의입니다... 어쩜 수강생(?)의 간지러운 마음을 잘 아시고 긁어주시는지... 개인적으로 코딩업계에서 아무리 코딩을 잘 하는 분께 배워도 잘 가르치는것과 코딩을 잘하는 건 다른 분야의 재능이라고 느꼈는데, 엘리님은 둘 다 너무 훌륭한 재능을 지니고 계신 것 같아요...ㅠㅠ 즐겁게 따라해보면서 잘 몰랐던 부분 이해하게 되었습니다! 감사합니다
CSS grid 엄청 좋으네요
특히나 grid-template-areas 를 사용하면 layout 잡는게 이렇게 편하군요 ~!!!
엘리님 강의 최고십니다 👍👍👍
깔끔하게 정리를 해주시네요. ^^
좋은 말씀 감사합니다!
와~~ 그리드 진짜 기다렸어요!! 플렉스도 영상 보고 도움 많이 받았는데! 그리드 영상 감사합니다 :)
오웃 다들 플렉스 보셨군요 😍
정말 멋진 정보 감사합니다...!! 사랑해요~ 엘리님~
저도 감사해요 😍
제가 평소 알고싶었던 내용이 깨알 같이 알려 주시네요~
평생 간직할 소장품이 될것 같아요~
감사합니다~
감사합니다 😍
오늘부로 CSS Grid 접수 했습니다.
감사합니다. ^^ 👍👍👍
정말 깔끔한 설명을 위해 많이 준비하셨다는 것이 느껴집니다 grid에 대해서 많이 알아갑니다 감사합니다
어쩜 이리 쉽게 이해시켜주시지 플렉스 원툴이였는데 ..딕션이 좋으셔서 그런지 쏙쏙 들어와요
오늘도 유용한 영상 감사해요 앨리쌤🫶🏻
아카데미 커리 쭈욱 타오다가 최근에 앨리쌤 유튭으로 html css도 다시 정리했는데요! 오늘도 포폴만드는 중에 이렇게 새로운 css강의가 딱 올라오니 너무 좋아요!ㅠㅠㅠ 혼자 공부하는 저에게 앨리쌤은 그저 빛...😌 항상 좋은 강의 감사드려요 선생님🙏🏻
멋져요 👍 항상 감사합니다 🫶
항상 감사드립니다 출석체크하고가요~~
감사합니다 🫶
이해하기 쉽게 설명해주셔서 감사합니다. 좋은 정보 감사합니다.
감사합니다 🫶
엘리님 고맙습니다. 학원에서 HTML CSS만 배우고 첫번째 포트폴리오 과제 나왔는데 플렉스로 반응형 만들었지만 그리드는 이해가 안되고 구글링해도 도통 잘 이해가 안되어 원하는대로 만들어지지 않았는데 이 영상 보니 이제야 이해되었어요! 고맙습니다.
엘리님이 해주시는 그리드 강의 듣고 싶었는데 이렇게 딱 올라와서 너무 좋아요! 맨 마지막 실습 해보면서 grid-template-columns랑 grid-template-area 속성을 같이 쓸 수 있단 것에 신세계 발견하고 갑니다 ㅎㅎ 늘 유익한 영상 감사해요! 그리드 쓰려다가 잘 모르겠을 때 또 다시 보러 올게요!
😊 감사합니다
와..영상 시작 3분30초만에 정리가 끝났어요 완전 이해하기 쉬워요!!!!!
세상에 그리드 영상까지!!! 감사합니다.🫢
옛날에 올려주신 플렉스 영상으로 현업에서 정렬시 얼마나 편했는지 몰라요 🥰
그리드 영상도 모든 영상을 이해 쉽게 설명해주셔서 감사해요!! 귀에 쏙쏙 들어와요!
플렉스 처음 배울 때 복잡하고 어려웠던 기억이 나는데 확실히 그 위기를 벗어나니 그리드를 이해하기 조금 더 수월해지는 거 같아요:)
해외는 날씨가 괜찮은가요? 😭 항상 건강 조심하시고 오늘도 좋은 영상 감사합니다!!
오웃 👍 Flex 유용하게 쓰고 계셨군요! 넘 좋아요 😍
Grid도 곳곳에 잘 적용하면 Flex로는 조금 부족한 부분을 채워줄 수 있어요 :)
역시 엘리님 강의는 최고입니다 ㅜㅜㅜ 👍😍😍
칭찬 감사합니다!
정말 멋진 강의 감사합니다.
감사합니다 😍
완벽해요 ! 시각적으로 예쁘고 보기좋아 재미있게 공부가 되네요! 나의 구세주
Grid Area 오늘 처음 알았는데 완전 신기하네요!
드림코딩님.. 당신은 천재에요
와우..... 기다렸었습니다. 갑사합니다.
감사합니다 😍
너무 깔끔하고 이해 잘가요 ㅜㅜ
좋게 봐주셔서 감사해요 👍
정말 유용한 꿀팁이네요!! grid-template-areas는 안써봤는데 앞으로 자주 쓸것같아요👍👍
좋은 댓글 감사합니다!
안녕하세요! 오늘도 드림코딩 선생님 영상 보고 도움이 많이 되었어요. 좋은 영상 감사합니다 앞으로도 함께 공부하고 싶어요 ㅎㅎ 😆
감사합니다
끝판왕 맞네. 자신이 알고 있는 개념을 상대방이 이해하기 쉽게 전달하는 재능이 뛰어나시다
엘리쌤..정말 최고에요ㅠㅠ css grid 이걸로 마스터합니다!! 드림코딩에서 웹페이지 클론 강의도 들었는데 쌤덕분에 제 포트폴리오 완성했습니다👍👍👍👍진짜 최고!! 대성하세요 앞으로 엘리쌤따라서 저도 성공할거에요!!
좋은 강의 감사합니다. 덕분에 CSS 를 충분히 이해하게 되었습니다.
감사합니다 😍
진짜... 사랑해요ㅜㅜㅜㅜㅜㅜㅜ 매번 '아.. 이거 아무리 구글링해도 이해가 안가!!' 했던 부분들을 쏙쏙 알려주셔서 과외쌤 같아요
오웃! 도움이 되셨다니 다행이예요 👍
오오 감사해요!! 당장 어제도 grid와 fr이 익숙하지 않아서 하다가 포기하고 그냥 flex에 박스컴포넌트로 했었거든요!! 감사합니다!!!
감사합니다 🫶
와~~~~ 정말 유용한 정보를
정말 깔끔히 정리해 주셔서 고맙습니다.
매 영상을 보며 느끼는 것이지만,
개념을 확실히 인지 시켜 주시네요.
감사합니다 😍
감사해요. 머리에 쏙쏙 박히네요.
실무에서는 거진 flex로 다 해결할 수 있어서 공부를 미뤘었는데 덕분에 30배 쉽게 이해했네요..
복잡한 레이아웃은 grid가 정말 간단하고 쉽게 해결할 수 있겠어요. 설명해주신 개념만 체화하면 어떤 복잡한 레이아웃도 가능할것 같습니다!
Grid도 알아두면 곳곳에서 유용하게 활용해 볼 수 있어요 😍
좋아요를 하나밖에 누를수 없는게 너무 슬퍼요😂 좋아요 100만개입니다!!
flex 위주로 사용하다가 뭔가 복잡한 레이아웃일때는 너무 flex를 남발하는것 같을때가 있었는데..! 그리드로 이렇게 쉽게 가능하다니요..😍 혼자 공부할때는 넘 어려워보이다가도 엘리샘 영상만 보면 뭐든 다 쉬워보이는 마법같은 효과가 있어요!! 감사합니다🧡
(+ 이런 유익한 영상도 넘넘 좋구, 최근 뜸했던(?) 엘리샘 브이로그도 궁금해요! )
정말 최고의 강의였습니다. !~
감사합니다 :)
좋아요! 설명너무잘해 부럽네요
좋게 봐주셔서 감사해요!
그리드 한번에 정리ㅎ 최고
감사합니다 😍
flex만으론 부족해서 찾아보다가 마침 딱 오늘 올라온걸 찾았네요! flex도 드림코딩님꺼로 공부했는데,, 정말 할상 감사합니다!
"드림코딩 프론트엔드 입문편"에 CSS 완성이 안된것 같은 찝찝함이 있었는데, 오늘 Grid로 완성했습니다! 하하 항상 감사합니다!
Grid 공부가 필요해서 안 그래도 찾아 보고 있었는데 딱! 하고 올려주셔서 너무 신나게 봤습니다. 항상 감사드립니다!
감사합니다 😍
진짜 최고에요
감사합니다 😍
많은 도움이 되었습니다.
감사합니다 😍
js 마스터리 강의 듣고 포트폴리오 듣기 전에 듣는중인데 이런 꿀강도 업데이트 되었었군요 ㅠ_ㅠ 잘 듣고 공부할게요!
프로젝트에서 flex보다 grid가 필요할 것 같아서 이전부터 배워야지만 해놓고 모르고 있던 grid 지금부터 배우기 시작합니다!
그리드로 웹사이트를 구현해보라는 숙제가 머리를 아프게 했는데
그걸 한방에 날려버리는 시원한 강의에 감사드립니다~!!
엘리님의 강의가 좋은 것은 요점만 찝어서 알려주시고
실무적인 부분들도 간편한 예제와 함께 알려주시기 때문에
중간중간 너무 세세하게 파고드는 것보다
큰 그림을 먼저 볼 수 있게 해주셔서 이해가 되지 않으면 다음 단계로 넘어가지 못하는 저는 너무 도움이 많이 되네요~!!!😃
감사합니다.
오.. 여태 flex만 썼는데 grid도 엄청 유용하네요
설명이 너무 좋아서 20분으로 뚝딱!
다음 사이드 프로젝트있으면 grid로 구현하도록 해봐야겠어요, 좋은 강의 감사합니다!
항상 감사합니다 🫶
와… 엘리님 왜 항상 이렇게 빨라요..? 존경합니다…
감사합니다 🫶
앨리쌤~ redux 영상도 부탁드려요!! 드림코딩에서 react 잘 배워서 쓰고 있는데 redux도 배우고싶어요 ㅎㅎ
정말 감사합니다!!! 리액트로 erp 만들면서 분할 어떻게 할지 꽤 힘들었는데(플랙스로 했는데 잘 못했어요. ㅠ.ㅠ) 그리드로 해봐야겠어요!
미루고 미루다가 드디어 공부했네요. 잘 배우고 갑니다.👍
감사합니다 😍
짱~~~♡
감사합니다 🫶
현재 웹 토이프로젝트 UI구성하기 힘들었는데 영상보면서 좋은 아이디어가 계속 생각나네요! Grid로 구성해봐야겠어요! 감사합니다!
감사합니다 😍
grid 막연하게만 알면서 사용하는걸 주저했는데, 강의 듣고나니 조금 정리가 되는것 같아요. 앞으로 적극 grid 사용해보려 합니다. 좋은 강의 감사합니다~
감사합니다 😍
눈물이 나요 ㅠㅠㅠ 고맙습니다
출석체크 하고 갑니다!
언제나 감사합니다!
그저 프론트엔드계의 빛이십니다..
영상 너무 감사합니다~ 덕분에 하나 더 배워가네요 =) grid를 좀 더 연습할 수 있는 사이트가 있나요?
잘 봤습니다 이거 오늘 만들고 있었는데 속성이 복잡해서 좀 고민하고 있었는데 잘 배웠습니다
다음에는 트랜지션 배우고 싶습니다
오웃 오늘 grid 이용해서 프로젝트 하고 계셨군요 👍
이누나 설명잘하네… 자주봐 누나
와... 저도 엘리쌤 처럼 찰떡같이 설명할 수 있는 능력을 기르고 싶어요 ㅠㅠ
회사 적응기간 지나서 주니어들 들어오면 멘토링부터 한번 해보세요 😍
@@dream-coding 오오 꿀팁이네요....! 도전해봐야겠어요>
개구리 잡던게 엇그제 같은데 벌써 시간이 많이 지났네요 :)
그리드도 엘리님이 알려주시면 다르네요
고과 확정!
하하 개구리와 고과 확정 멘트를 보니 정말 오랫동안 함께 해준 구독자란걸 알겠어요 👍 고과 확정!
개념 정리하는데 큰 도움이 됐습니다.
grid-template 작성 시 auto-fill, minmax, fit-content 같은 속성 소개해주시면 좋을 거 같아요.
넵, 참고해볼께요! :) minmax는 다뤘던것 같아요
와아~~ 쥑이네요 멋집니다.~~ 영원한 사부님
함께 해주셔서 감사합니다.
아하 네이버에서 제공하는 tui grid 라이브러리가 이런것들을 내용들을 기반으로 개발된거군용.. grid가 뭔지 정확히 몰랐는데 이렇게 알게됩니다 감사합니다!
웹서비스중에 grid 속성 응용한 곳 꽤 많아요 :)
감사합니다
목소리랑 설명 다 너무 알아듣기 좋아요
궁금한게 웹페이지에 빨간색으로 낙서하는건 어떤 유틸리티인가요!?
감사합니다 🫶 맥용 ScreenBrush앱입니다 :)
질문있어요 엘리님!
영상마다 설명자료로 사용하시는 도식이 너무 깔끔해서 배우고 싶은데
별도로 사용하시는 툴이나 팁이 있을까요?
ex) 11:46
TABLE 과 유사하네요
저는 좋아요 안누르기로 유명한데 엘리님 영상에는 따봉 무조건 누릅니다
내용도 내용이지만 엘리님 색이 많이 들어간 영상이라 너무 좋네요 기준으로 잡기 딱 좋습니다 고마워요~😍
하하 감사합니다 😍
Thank you
감사합니다 😍
와 진짜 진짜 감사드립니다ㅜㅜㅜㅜㅜ 저도 답글 한 번 만요.....ㅜ
목소리가 왜이리 좋으십니까
좋게 들어주셔서 감사합니다!
선생님 그리드 속성을 이용하면 반응형 처럼 이쁘게 크게 맞춰 반응하는건 알겠는데, 혹시 배치까지 변화를 주려면 어떻게 해야하나요? 반응형으로 코드를 짜야할까요?
반응형 코딩 말고 다른 쉬운 방법이 있는지 알고싶습니다!
❤❤
눈나 💚
안녕하세요! 항상 잘 보고 있습니다 :)
질문을 하나 드리고 싶은데요! Grid가 최신에 나온 문법인데, 현업에서 많이 사용하는지 여쭤보고 싶습니다!
Grid는 최근에 나온 문법 아닐껄요
P.s 찾아보니까 2007년에 나온 문법이네요 당연히 헌업에서도 많이 쓸 거 같습니다
grid, flex 주요 브라우저에서 모두 지원됩니다 :) 현업에서도 많이 써요!
아카데미에 nextjs 강의도 만들어주세요!
참고할께요! :)
하 CSS.. 감사합니다ㅠㅠ
그저 flex만 사용하는데
이젠 Grid, Flex 둘다 사용해 보세요 👍
와 웹사이트 처음 만들어 본 사람들은 안다. 아이템 하나 가운데 정렬이 겁나 어렵다는걸 ㅠㅠ 이렇게 플렉스랑 그리드만 알아도 나머지는 다 할 수 있다구 ㅠㅠ
하하 맞아요
text들의 수직 가운데 정렬은 어떻게 하면 되나요?? 수평 가운데 정렬은 body요소에 text-align: center; 속성으로 정렬했는데 line-height 속성을 써야하나요...