그리드로 웹사이트를 구현해보라는 숙제가 머리를 아프게 했는데 그걸 한방에 날려버리는 시원한 강의에 감사드립니다~!! 엘리님의 강의가 좋은 것은 요점만 찝어서 알려주시고 실무적인 부분들도 간편한 예제와 함께 알려주시기 때문에 중간중간 너무 세세하게 파고드는 것보다 큰 그림을 먼저 볼 수 있게 해주셔서 이해가 되지 않으면 다음 단계로 넘어가지 못하는 저는 너무 도움이 많이 되네요~!!!😃
좋아요를 하나밖에 누를수 없는게 너무 슬퍼요😂 좋아요 100만개입니다!! flex 위주로 사용하다가 뭔가 복잡한 레이아웃일때는 너무 flex를 남발하는것 같을때가 있었는데..! 그리드로 이렇게 쉽게 가능하다니요..😍 혼자 공부할때는 넘 어려워보이다가도 엘리샘 영상만 보면 뭐든 다 쉬워보이는 마법같은 효과가 있어요!! 감사합니다🧡 (+ 이런 유익한 영상도 넘넘 좋구, 최근 뜸했던(?) 엘리샘 브이로그도 궁금해요! )
엘리님이 해주시는 그리드 강의 듣고 싶었는데 이렇게 딱 올라와서 너무 좋아요! 맨 마지막 실습 해보면서 grid-template-columns랑 grid-template-area 속성을 같이 쓸 수 있단 것에 신세계 발견하고 갑니다 ㅎㅎ 늘 유익한 영상 감사해요! 그리드 쓰려다가 잘 모르겠을 때 또 다시 보러 올게요!
정말... 제가 들은 프론트 강의와 온라인 강의영상을 통틀어 최고의 강의입니다... 어쩜 수강생(?)의 간지러운 마음을 잘 아시고 긁어주시는지... 개인적으로 코딩업계에서 아무리 코딩을 잘 하는 분께 배워도 잘 가르치는것과 코딩을 잘하는 건 다른 분야의 재능이라고 느꼈는데, 엘리님은 둘 다 너무 훌륭한 재능을 지니고 계신 것 같아요...ㅠㅠ 즐겁게 따라해보면서 잘 몰랐던 부분 이해하게 되었습니다! 감사합니다
오늘도 유용한 영상 감사해요 앨리쌤🫶🏻 아카데미 커리 쭈욱 타오다가 최근에 앨리쌤 유튭으로 html css도 다시 정리했는데요! 오늘도 포폴만드는 중에 이렇게 새로운 css강의가 딱 올라오니 너무 좋아요!ㅠㅠㅠ 혼자 공부하는 저에게 앨리쌤은 그저 빛...😌 항상 좋은 강의 감사드려요 선생님🙏🏻
세상에 그리드 영상까지!!! 감사합니다.🫢 옛날에 올려주신 플렉스 영상으로 현업에서 정렬시 얼마나 편했는지 몰라요 🥰 그리드 영상도 모든 영상을 이해 쉽게 설명해주셔서 감사해요!! 귀에 쏙쏙 들어와요! 플렉스 처음 배울 때 복잡하고 어려웠던 기억이 나는데 확실히 그 위기를 벗어나니 그리드를 이해하기 조금 더 수월해지는 거 같아요:) 해외는 날씨가 괜찮은가요? 😭 항상 건강 조심하시고 오늘도 좋은 영상 감사합니다!!
감사해요. 머리에 쏙쏙 박히네요. 실무에서는 거진 flex로 다 해결할 수 있어서 공부를 미뤘었는데 덕분에 30배 쉽게 이해했네요.. 복잡한 레이아웃은 grid가 정말 간단하고 쉽게 해결할 수 있겠어요. 설명해주신 개념만 체화하면 어떤 복잡한 레이아웃도 가능할것 같습니다!
🤗안녕하세요 엘리! 저는 개발공부중인 학생입니다! 우선 영상 항상 잘 챙겨보고있다는 말을 먼저 드리고싶습니다! 다름이 아니라 , 이번 gird 영상도 재밌게 보고 따라서 공부하고있었는데 gird-gap, grid-column-gap, grid-row-gap 을 쓸때 vsc에서 property is obsolete. Avoid using it 이런 메세지가 나왔습니다. 이게 너무 궁금해서 구글링을 하니 호환성을위해 위 3가지속성이 약어로 처리되어야한다고 알게되었습니다. 혹시 여기에대해서 제가 틀리게 해석했는지도 궁금하여 질문드려요!😢 개발에 대해서 완전무지한 저에게 항상 좋은 가르침과 정보를 주는 엘리님에게 감사의 말을 전하면서 오늘도 좋은하루되시길 바랄께요!😍
많은 분들이 요청해 주셨던 CSS Grid 드디어! 영상으로 만들게 되었어요.
앞으로 다뤄줬으면 하는 토픽이 있다면 주저 하지 마시고 코멘트로 알려주세요 😍
힌남노 태풍 피해 많으 없으시길 그리고 다가오는 한가위 따뜻하게 잘 보내세요 :)
20분... 좋아요 :) 컴팩트한 강의네요ㅎㅎ
엘리님 강의에서 긴 내용은 3-6시간 단위로 잘라서 인프런에서 강의 판매 해보시는건 어떠신가요ㅎ
백엔드 관련 내용 강의가 추가로 더 나올수도 있나요 노드 잘들었었습니다!
드림코딩은 정말 전설이다…
입문자들에게 생활코딩이랑 투톱급 좋은강의이다..
진짜... 사랑해요ㅜㅜㅜㅜㅜㅜㅜ 매번 '아.. 이거 아무리 구글링해도 이해가 안가!!' 했던 부분들을 쏙쏙 알려주셔서 과외쌤 같아요
오웃! 도움이 되셨다니 다행이예요 👍
끝판왕 맞네. 자신이 알고 있는 개념을 상대방이 이해하기 쉽게 전달하는 재능이 뛰어나시다
그리드로 웹사이트를 구현해보라는 숙제가 머리를 아프게 했는데
그걸 한방에 날려버리는 시원한 강의에 감사드립니다~!!
엘리님의 강의가 좋은 것은 요점만 찝어서 알려주시고
실무적인 부분들도 간편한 예제와 함께 알려주시기 때문에
중간중간 너무 세세하게 파고드는 것보다
큰 그림을 먼저 볼 수 있게 해주셔서 이해가 되지 않으면 다음 단계로 넘어가지 못하는 저는 너무 도움이 많이 되네요~!!!😃
좋아요를 하나밖에 누를수 없는게 너무 슬퍼요😂 좋아요 100만개입니다!!
flex 위주로 사용하다가 뭔가 복잡한 레이아웃일때는 너무 flex를 남발하는것 같을때가 있었는데..! 그리드로 이렇게 쉽게 가능하다니요..😍 혼자 공부할때는 넘 어려워보이다가도 엘리샘 영상만 보면 뭐든 다 쉬워보이는 마법같은 효과가 있어요!! 감사합니다🧡
(+ 이런 유익한 영상도 넘넘 좋구, 최근 뜸했던(?) 엘리샘 브이로그도 궁금해요! )
엘리쌤..정말 최고에요ㅠㅠ css grid 이걸로 마스터합니다!! 드림코딩에서 웹페이지 클론 강의도 들었는데 쌤덕분에 제 포트폴리오 완성했습니다👍👍👍👍진짜 최고!! 대성하세요 앞으로 엘리쌤따라서 저도 성공할거에요!!
엘리님이 해주시는 그리드 강의 듣고 싶었는데 이렇게 딱 올라와서 너무 좋아요! 맨 마지막 실습 해보면서 grid-template-columns랑 grid-template-area 속성을 같이 쓸 수 있단 것에 신세계 발견하고 갑니다 ㅎㅎ 늘 유익한 영상 감사해요! 그리드 쓰려다가 잘 모르겠을 때 또 다시 보러 올게요!
😊 감사합니다
어렵고 막막한 개발 공부를 쉽게 이해 할 수 있게 해주셔서 감사합니다! 이번 영상도 잘 보고가요:)
어쩜 이리 쉽게 이해시켜주시지 플렉스 원툴이였는데 ..딕션이 좋으셔서 그런지 쏙쏙 들어와요
정말... 제가 들은 프론트 강의와 온라인 강의영상을 통틀어 최고의 강의입니다... 어쩜 수강생(?)의 간지러운 마음을 잘 아시고 긁어주시는지... 개인적으로 코딩업계에서 아무리 코딩을 잘 하는 분께 배워도 잘 가르치는것과 코딩을 잘하는 건 다른 분야의 재능이라고 느꼈는데, 엘리님은 둘 다 너무 훌륭한 재능을 지니고 계신 것 같아요...ㅠㅠ 즐겁게 따라해보면서 잘 몰랐던 부분 이해하게 되었습니다! 감사합니다
오.. 여태 flex만 썼는데 grid도 엄청 유용하네요
설명이 너무 좋아서 20분으로 뚝딱!
다음 사이드 프로젝트있으면 grid로 구현하도록 해봐야겠어요, 좋은 강의 감사합니다!
항상 감사합니다 🫶
개구리 잡던게 엇그제 같은데 벌써 시간이 많이 지났네요 :)
그리드도 엘리님이 알려주시면 다르네요
고과 확정!
하하 개구리와 고과 확정 멘트를 보니 정말 오랫동안 함께 해준 구독자란걸 알겠어요 👍 고과 확정!
와..영상 시작 3분30초만에 정리가 끝났어요 완전 이해하기 쉬워요!!!!!
개념 정리하는데 큰 도움이 됐습니다.
grid-template 작성 시 auto-fill, minmax, fit-content 같은 속성 소개해주시면 좋을 거 같아요.
넵, 참고해볼께요! :) minmax는 다뤘던것 같아요
grid 막연하게만 알면서 사용하는걸 주저했는데, 강의 듣고나니 조금 정리가 되는것 같아요. 앞으로 적극 grid 사용해보려 합니다. 좋은 강의 감사합니다~
감사합니다 😍
수업이 너무 재밌고... 이해가 완전 잘되요 ㅠ 이런 강의를 유튜브로 볼수 있어서 너무 감사합니다!!!
정말 깔끔한 설명을 위해 많이 준비하셨다는 것이 느껴집니다 grid에 대해서 많이 알아갑니다 감사합니다
프로젝트에서 flex보다 grid가 필요할 것 같아서 이전부터 배워야지만 해놓고 모르고 있던 grid 지금부터 배우기 시작합니다!
안녕하세요! 오늘도 드림코딩 선생님 영상 보고 도움이 많이 되었어요. 좋은 영상 감사합니다 앞으로도 함께 공부하고 싶어요 ㅎㅎ 😆
CSS grid 엄청 좋으네요
특히나 grid-template-areas 를 사용하면 layout 잡는게 이렇게 편하군요 ~!!!
엘리님 강의 최고십니다 👍👍👍
이 강의는 정말 사랑이네용
엘리님 너무너무 감사해요~ 그리드 정말 써보고 싶었는데 이 영상 보고 자신감이 생겼어요.
오늘도 유용한 영상 감사해요 앨리쌤🫶🏻
아카데미 커리 쭈욱 타오다가 최근에 앨리쌤 유튭으로 html css도 다시 정리했는데요! 오늘도 포폴만드는 중에 이렇게 새로운 css강의가 딱 올라오니 너무 좋아요!ㅠㅠㅠ 혼자 공부하는 저에게 앨리쌤은 그저 빛...😌 항상 좋은 강의 감사드려요 선생님🙏🏻
멋져요 👍 항상 감사합니다 🫶
완벽해요 ! 시각적으로 예쁘고 보기좋아 재미있게 공부가 되네요! 나의 구세주
js 마스터리 강의 듣고 포트폴리오 듣기 전에 듣는중인데 이런 꿀강도 업데이트 되었었군요 ㅠ_ㅠ 잘 듣고 공부할게요!
Grid 공부가 필요해서 안 그래도 찾아 보고 있었는데 딱! 하고 올려주셔서 너무 신나게 봤습니다. 항상 감사드립니다!
감사합니다 😍
그저 프론트엔드계의 빛이십니다..
와 정말 좋은 영상 감사합니다 덕분에 20분 만에 grid 완벽 이해하고 갔어요 전에는 flex만 썻는데 앞으로 grid도 적재 적소에 사용 할 수 있을꺼 같아요 감사합니다!
이해하기 쉽게 설명해주셔서 감사합니다. 좋은 정보 감사합니다.
감사합니다 🫶
엘리님 고맙습니다. 학원에서 HTML CSS만 배우고 첫번째 포트폴리오 과제 나왔는데 플렉스로 반응형 만들었지만 그리드는 이해가 안되고 구글링해도 도통 잘 이해가 안되어 원하는대로 만들어지지 않았는데 이 영상 보니 이제야 이해되었어요! 고맙습니다.
세상에 그리드 영상까지!!! 감사합니다.🫢
옛날에 올려주신 플렉스 영상으로 현업에서 정렬시 얼마나 편했는지 몰라요 🥰
그리드 영상도 모든 영상을 이해 쉽게 설명해주셔서 감사해요!! 귀에 쏙쏙 들어와요!
플렉스 처음 배울 때 복잡하고 어려웠던 기억이 나는데 확실히 그 위기를 벗어나니 그리드를 이해하기 조금 더 수월해지는 거 같아요:)
해외는 날씨가 괜찮은가요? 😭 항상 건강 조심하시고 오늘도 좋은 영상 감사합니다!!
오웃 👍 Flex 유용하게 쓰고 계셨군요! 넘 좋아요 😍
Grid도 곳곳에 잘 적용하면 Flex로는 조금 부족한 부분을 채워줄 수 있어요 :)
와… 엘리님 왜 항상 이렇게 빨라요..? 존경합니다…
감사합니다 🫶
정말 유용한 강의입니다. 깔끔하고 예쁘네요. 감사합니다!
와~
대박~
CSS 그리드가 당췌 먼지 이해가 안되었느데..머리에 쏙쏙 들어 옵니다.
오와~ 항상 필요한 부분을 이렇게 요점 정리해서 잘 따라 할 수 있도록 영상 올려주셔서 감사합니다 😆 앨리님 쵝오 👍👍 지금 보다 더 번창하셔서 영상 계속 올려주세요~~ 😄
도움이 되셨다니 감사합니다 😍
정말 설명 하나는 원탑이네요!!! 감사합니다~~
진짜 역대급 강의라고 생각합니다❤
딱 요즘 그리드를 마스터하자 생각하고 있었는데 엘리쌤이 올려주셔서 너무 좋아요!
감사합니다 😍
제가 평소 알고싶었던 내용이 깨알 같이 알려 주시네요~
평생 간직할 소장품이 될것 같아요~
감사합니다~
감사합니다 😍
오늘부로 CSS Grid 접수 했습니다.
감사합니다. ^^ 👍👍👍
flex만으론 부족해서 찾아보다가 마침 딱 오늘 올라온걸 찾았네요! flex도 드림코딩님꺼로 공부했는데,, 정말 할상 감사합니다!
"드림코딩 프론트엔드 입문편"에 CSS 완성이 안된것 같은 찝찝함이 있었는데, 오늘 Grid로 완성했습니다! 하하 항상 감사합니다!
와~~ 그리드 진짜 기다렸어요!! 플렉스도 영상 보고 도움 많이 받았는데! 그리드 영상 감사합니다 :)
오웃 다들 플렉스 보셨군요 😍
감사해요. 머리에 쏙쏙 박히네요.
실무에서는 거진 flex로 다 해결할 수 있어서 공부를 미뤘었는데 덕분에 30배 쉽게 이해했네요..
복잡한 레이아웃은 grid가 정말 간단하고 쉽게 해결할 수 있겠어요. 설명해주신 개념만 체화하면 어떤 복잡한 레이아웃도 가능할것 같습니다!
Grid도 알아두면 곳곳에서 유용하게 활용해 볼 수 있어요 😍
오늘도 좋은 강의 정말 감사합니다!
CSS Grid 좋은 기능인데 잘 정리 해주셨네요 ^^
와~~~~ 정말 유용한 정보를
정말 깔끔히 정리해 주셔서 고맙습니다.
매 영상을 보며 느끼는 것이지만,
개념을 확실히 인지 시켜 주시네요.
감사합니다 😍
🤗안녕하세요 엘리! 저는 개발공부중인 학생입니다! 우선 영상 항상 잘 챙겨보고있다는 말을 먼저 드리고싶습니다! 다름이 아니라 ,
이번 gird 영상도 재밌게 보고 따라서 공부하고있었는데 gird-gap, grid-column-gap, grid-row-gap 을 쓸때 vsc에서 property is obsolete. Avoid using it 이런 메세지가 나왔습니다.
이게 너무 궁금해서 구글링을 하니 호환성을위해 위 3가지속성이 약어로 처리되어야한다고 알게되었습니다.
혹시 여기에대해서 제가 틀리게 해석했는지도 궁금하여 질문드려요!😢
개발에 대해서 완전무지한 저에게 항상 좋은 가르침과 정보를 주는 엘리님에게 감사의 말을 전하면서 오늘도 좋은하루되시길 바랄께요!😍
drafts.csswg.org/css-align/#gap-shorthand
여기의 8.4번째를 참고했습니다! 🥰
오! 이제 gap, row-gap, colum-gap 이렇게 써야 하네요
역시 엘리님 강의는 최고입니다 ㅜㅜㅜ 👍😍😍
칭찬 감사합니다!
미루고 미루다가 드디어 공부했네요. 잘 배우고 갑니다.👍
감사합니다 😍
오오 감사해요!! 당장 어제도 grid와 fr이 익숙하지 않아서 하다가 포기하고 그냥 flex에 박스컴포넌트로 했었거든요!! 감사합니다!!!
감사합니다 🫶
❤❤❤🎉🎉🎉넘 감사합니다
Grid Area 오늘 처음 알았는데 완전 신기하네요!
덕분에 너무 쉽고 재밌게 잘 배웠습니다! 감사합니다~~
좋은 강의 감사합니다. 덕분에 CSS 를 충분히 이해하게 되었습니다.
감사합니다 😍
멋진 GRID 강의 잘 배우고갑니다 ㅎㅎ
으아아앙 ❤❤❤ 엘리 넘 감사해요🎉🎉
훌륭한 강의 감사합니다~~ㅎㅎ
현재 웹 토이프로젝트 UI구성하기 힘들었는데 영상보면서 좋은 아이디어가 계속 생각나네요! Grid로 구성해봐야겠어요! 감사합니다!
감사합니다 😍
드림코딩님.. 당신은 천재에요
정말 유용한 꿀팁이네요!! grid-template-areas는 안써봤는데 앞으로 자주 쓸것같아요👍👍
좋은 댓글 감사합니다!
와... 저도 엘리쌤 처럼 찰떡같이 설명할 수 있는 능력을 기르고 싶어요 ㅠㅠ
회사 적응기간 지나서 주니어들 들어오면 멘토링부터 한번 해보세요 😍
@@dream-coding 오오 꿀팁이네요....! 도전해봐야겠어요>
깔끔한 정리 감사합니다!!
이누나 설명잘하네… 자주봐 누나
앨리쌤~ redux 영상도 부탁드려요!! 드림코딩에서 react 잘 배워서 쓰고 있는데 redux도 배우고싶어요 ㅎㅎ
정말 멋진 정보 감사합니다...!! 사랑해요~ 엘리님~
저도 감사해요 😍
저는 좋아요 안누르기로 유명한데 엘리님 영상에는 따봉 무조건 누릅니다
내용도 내용이지만 엘리님 색이 많이 들어간 영상이라 너무 좋네요 기준으로 잡기 딱 좋습니다 고마워요~😍
하하 감사합니다 😍
질문있어요 엘리님!
영상마다 설명자료로 사용하시는 도식이 너무 깔끔해서 배우고 싶은데
별도로 사용하시는 툴이나 팁이 있을까요?
ex) 11:46
눈물이 나요 ㅠㅠㅠ 고맙습니다
목소리가 왜이리 좋으십니까
좋게 들어주셔서 감사합니다!
정말 최고의 강의였습니다. !~
감사합니다 :)
영상 너무 감사합니다~ 덕분에 하나 더 배워가네요 =) grid를 좀 더 연습할 수 있는 사이트가 있나요?
항상 감사드립니다 출석체크하고가요~~
감사합니다 🫶
와우..... 기다렸었습니다. 갑사합니다.
감사합니다 😍
깔끔하게 정리를 해주시네요. ^^
좋은 말씀 감사합니다!
그리드 한번에 정리ㅎ 최고
감사합니다 😍
정말 멋진 강의 감사합니다.
감사합니다 😍
아하 네이버에서 제공하는 tui grid 라이브러리가 이런것들을 내용들을 기반으로 개발된거군용.. grid가 뭔지 정확히 몰랐는데 이렇게 알게됩니다 감사합니다!
웹서비스중에 grid 속성 응용한 곳 꽤 많아요 :)
잘 봤습니다 이거 오늘 만들고 있었는데 속성이 복잡해서 좀 고민하고 있었는데 잘 배웠습니다
다음에는 트랜지션 배우고 싶습니다
오웃 오늘 grid 이용해서 프로젝트 하고 계셨군요 👍
좋아요! 설명너무잘해 부럽네요
좋게 봐주셔서 감사해요!
정말 감사합니다!!! 리액트로 erp 만들면서 분할 어떻게 할지 꽤 힘들었는데(플랙스로 했는데 잘 못했어요. ㅠ.ㅠ) 그리드로 해봐야겠어요!
와우 미친 꿀팁이네요 감사합니다
너무 깔끔하고 이해 잘가요 ㅜㅜ
좋게 봐주셔서 감사해요 👍
10:27 책갈피
와 웹사이트 처음 만들어 본 사람들은 안다. 아이템 하나 가운데 정렬이 겁나 어렵다는걸 ㅠㅠ 이렇게 플렉스랑 그리드만 알아도 나머지는 다 할 수 있다구 ㅠㅠ
하하 맞아요
강사님 수업 잘듣고 있습니다 궁금한게 있는데요~ 강사님은 왜 부트스트랩을 사용하지 않아요? 초보자 입장에서 보면 부트스트랩이 많은부분을 제공해주는것 같아서 조금 더 손이 덜가던데,, 강사님은 직접 손으로 다 만드시는 이유가 있으실까요?
신기해요. 감사해요
엘리님 궁금한게 있어요
Basic style css에서
왜 아이템에다가 디스플레이 : flex라고 적어주신거에요 ? 아이템들을 움직여주고싶으면 그 위에 부모인 컨테이너에 디스플레이 :flex라고 명시하는거 아니였나욤
와 진짜 진짜 감사드립니다ㅜㅜㅜㅜㅜ 저도 답글 한 번 만요.....ㅜ
진짜 최고에요
감사합니다 😍
와아~~ 쥑이네요 멋집니다.~~ 영원한 사부님
함께 해주셔서 감사합니다.
선생님 그리드 속성을 이용하면 반응형 처럼 이쁘게 크게 맞춰 반응하는건 알겠는데, 혹시 배치까지 변화를 주려면 어떻게 해야하나요? 반응형으로 코드를 짜야할까요?
반응형 코딩 말고 다른 쉬운 방법이 있는지 알고싶습니다!
질문 있습니다. grid-template-rows: 100px auto 50px을 줘도 가운데가 넗게 잡히질 않는데 혹시 이유가 있을까요?
Grid Study
body {
width: 100vw;
height: 100vh;
margin: 0px;
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 100px auto 50px;
grid-template-areas:
"header header"
"main side"
"footer footer";
}
header {
grid-area: header;
background-color: red;
}
main {
grid-area: main;
background-color: green;
}
aside {
grid-area: side;
background-color: blue;
}
footer {
grid-area: footer;
background-color: yellow;
}
감사합니다
목소리랑 설명 다 너무 알아듣기 좋아요
궁금한게 웹페이지에 빨간색으로 낙서하는건 어떤 유틸리티인가요!?
감사합니다 🫶 맥용 ScreenBrush앱입니다 :)
많은 도움이 되었습니다.
감사합니다 😍
감사합니다
TABLE 과 유사하네요
감사합니다.
안녕하세요! 항상 잘 보고 있습니다 :)
질문을 하나 드리고 싶은데요! Grid가 최신에 나온 문법인데, 현업에서 많이 사용하는지 여쭤보고 싶습니다!
Grid는 최근에 나온 문법 아닐껄요
P.s 찾아보니까 2007년에 나온 문법이네요 당연히 헌업에서도 많이 쓸 거 같습니다
grid, flex 주요 브라우저에서 모두 지원됩니다 :) 현업에서도 많이 써요!
감사합니다.css grid 열심히 배우고 있습니다.
그런대 marquee tag를 css 움직이는 영상을 만들고 싶어요
marquee tag 에 scollamount및behavior=alternate가 날아가거든요.
눈나 💚