CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript
ฝัง
- เผยแพร่เมื่อ 14 ก.พ. 2020
- Flexbox만 잘 이해하셔도 이제 본격적으로 웹사이트의 구조를 만들 수 있어요 ❤️
(↙ 자세한 내용)
___________________________
💡 풀스택 개발 로드맵 ⇢ academy.dream-coding.com/page...
🚀 엘리와 더 체계적으로 배우고 싶다면 ⇢ 드림코딩 아카데미:
academy.dream-coding.com/
.....................................................
영상 끝까지 다 보시구 나오는 숙제도 다 한번씩 해보세요 :) ⬇️ 아래 더보기에 링크 확인해보세요
Flexbox Froggy 게임: flexboxfroggy.com/
🔗 Resources:
Material Design Color Tool:
material.io/resources/color/#...
CSS Tricks for Flexbox:
css-tricks.com/snippets/css/a...
MDN Float:
developer.mozilla.org/en-US/d...
MDN Flexbox:
developer.mozilla.org/en-US/d...
.....................................................
☀️ 드림코딩 엘리
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다 :)
❝Don't forget to code your dream
여러분들의 멋진 꿈을 코딩하세요 ⭐️
.....................................................
🌐 프론트엔드 개발자 되기 입문자편 영상 목록:
• 프론트엔드 강의 - 프론트엔드 개발자 되...
📒 자바스크립트 기초 강의 영상 목록:
• 자바스크립트 기초 강의 (ES5+): 같...
💻 개발자라면 누구나 알고 있으면 좋은 지식 💡
• 개발자라면 누구나 알고 있으면 좋은 지식 💡
💰 개발자 경력 관리 영상 목록:
• 승승장구 커리어 관리 🚀
📄 이력서 작성 방법
• 취업 보장 이력서 작성 🙌
📈 IT 트렌드
• IT 트렌드 📈
📷 개발자 브이로그
• 개발자 브이로그 📷
🤗 생산력 향상 팁
• Tech & Tools ❤️
🎵Music
Title: Serenity by JayJen
Genre and Mood: Dance & Electronic · Calm
License: Royalty free music for TH-cam, Facebook and Instagram videos giving the appropriate credit.
#CSS#Flexbox#프론트엔드 - วิทยาศาสตร์และเทคโนโลยี
여러부운~ 잘 따라오고 계시나요? CSS로 갈수록 조회수가 떨어져서 걱정이예요 🤣 들으시구 계신다면 출석체크 부탁드려요 ❤️
이제 CSS 이론은 여기서 마무리 하고 이제 실전편으로 넘어가서 HTML과 CSS로 간단한 UI Component, 모바일 웹사이트, 반응형 정적 웹사이트 몇가지를 만들어보고여태까지 배운 아이들을 연습해 볼꺼예요.
자세히 다루지 못한 CSS내용들은 실전을 하면서 조금씩 더 정리해 드릴께요 :)
혹시, 제가 다루지 못했거나 아직 헷갈리시거나 부족한 내용들이 있었다면 꼭 알려주세요 🙏🏼
참고해서 실전 영상 만들때 반영해서 만들어 보도록 할께요 🤗
출첵~_~ 💥 잘보고있습니다.
우앗! 저희 코멘트에서는 처음 뵙는것 같은데, 너무 감사합니다 🙌
출첵입니다~~~~
출석체크는 여기서 하는건가요? ㅋㅋ ;;
하하 이 영상에서는 다들 여기에 해주시네요 하하
6:25 한꺼번에 작성하기
7:08 vh 와 %(부모 지정 필요) 차이
8:10 color tool - 색조합및 색코드참고
8:50 아이템 크기 조정
9:10 container (display/flex-direction/flex-wrap/flex-flow)
11:54 item(justify-content) 중심축
13:45 item(align-items) 반대축
14:30 item(align-content) 반대축의 아이템 지정
16:00 참고사이트소개
16:48 item 속성값들(order,flex-grow,flex-shrink,flex-basis,align-self)
와 많이 헷갈리던 CSS 의 flexbox 를 한번에 제대로 이해시켜주셨어요!! 정말 최고세요.
출첵입니다!!
정확하고 재미있게 설명해주시니 항상 감사합니다^^
선생님도 화이팅이십니다^^
항상 좋은 정보 알려주셔서 감사합니다!! :)
영상에 게임 소개까지! ㅎㅎ 완전 풀패키지 선물! 항상 감사해요 😍
정말 쉽게 설명해주시고 너무나 유익한거 같아요! 항상 다른 영상을 봐도 사용해보지 않으면 일일히 다시 찾아보고 해야되서 힘들었는데 게임으로 빠르게 배울수도있고 좋은 영상 감사드립니다 화이팅!
진짜 쏙쏙 이해되게 설명해주시네요... 감사합니다... 진짜 최고!!! 구독하고가요 ㅠㅠㅠ 롤모델 찾은 것 같아서 기뻐요...
강의에 따라서 코드를 작성해가니 너무 이해가 잘 되군요. 핵심강의를 너무 잘하십니다. 감사합니다.
너무 대박이네요ㄷㄷ 맨날 flexbox 공부해야지 하다가 찾아봤는데 바로 이해됐어요! 감사합니다 엘리😄
와... 이렇게 은혜롭고 자비로운 강의 감사합니다ㅠㅠㅠㅠㅠ 절 구원해 주셨어요ㅠㅠㅠㅠ
게임 소개 너무 좋아요!! 기본적인 설명 쉽고 자세하게 해주시고 게임으로 적용도 해볼 수 있게 해주셔서 감사합니다 😘
좋은 영상 올려주셔서 열심히 공부하고 있습니다 ㅎㅎ 드림코딩 최고!
오늘도 출석체크 합니다~💕💕 좋은 강의 감사드려요!
쏙쏙 이해가 잘 되네요. 어려운 부분은 더 찾아봐야겠어요. 좋은 영상 감사합니다💙
정말 개념 하나도 모르는데 너무 쏙쏙 잘들어오게 설명해주셔서 감사해요 ㅠㅠ 강의들 넘나 좋아요..❤️
첨으로 알람설정도 하게되네요 ㅎㅎ
어렵게만 생각했는데 이해가 쏙쏙 되네요! 좋은 강의 정말 감사합니다!
정말 감사합니다 엘리님만큼 잘 가르치시는 분은 없을 것 같아요 강의 퀄리티도 너무 좋아서 감동이에요ㅠㅠㅠㅠ
flex에 대한 지식이 없었는데 덕분에 쉽게 이해했어요!!최고의 명강사❤ 감사합니다
다양한 설명 글들과 강의를 봤는데 이 시리즈가 가장 이해도 잘되고 좋네요 ㅠㅠ 진작에 이걸 봤어야했는데!
출석체크해요!! 항상 잘 보고 있습니다 감사합니다!!
강의가 친절하고 너무 좋네요 감사합니다!
학원 수업 못 따라가서 들었는데 너무너무 좋네요!!!! 최고최고
Flexbox 설명중에 제일 자세하고 좋아요! 감사합니다
홀리몰리한 영상입니다.. 영원히 해주세여..
매번 강의마다 적절한 예시와 설명 그리고 유용한 사이트들을 알려주셔서 감사해요!
영상 만드시느라 너무 고생 많으셨습니다. 영상 덕분에 너무 잘 배웠습니다 최고에요 !!! 따봉
출석 체크해요! 프론트엔드 개발을 할 수록 HTML, CSS 기본의 중요성을 느껴서 또 정주행하고 있어요. 너무 좋은 콘텐츠 감사합니다~
와 정말 헷갈리는걸 일목요연하게 정리해주셔서 한번에 머리에 들어와요 정말 감사합니다!
강의 너무 잘 듣고 있습니다 언제나 좋은 강의 감사드립니다
강의 수준 실화냐.. 가슴이 웅장해진다🙌
영상 끝날때마다 게임으로 감을 잡을수 있게 선물 주셔서 좋아요.
프론트엔드 입문 너무 재밌게 부담없이 잘 보고 있어요!! 다이나믹한 영상들 너모 조아요.
영상 너무 좋아요~감사합니다ㅠ!
게임 한번으로는 조금 헷갈려서 한번 더하니 딱 좋아요 재미도 있고요!! 엘리 사랑해요
출첵! 정말 훌륭한 강의 감사합니다. css 막막했는데, 어쩜 목소리도 귀에 그렇게 잘 들어오고 설명을 맛깔나게 하시는지요!! 코드 뿐만아니라 엘리님은 가르치는데 재능이 있으세요, 응원합니다.
여러 번 봐야겠어요ㅠㅠ 유용한 팁들 알려주셔서 감사합니다.
정말 좋은 강의에요 넘넘 잘 듣고있습니다
출첵이용! 내주신 숙제까지 하니 복습 겸 이해가 더 쏙쏙 잘되는 것 같아요! 항상 감사드려요!!
레알 플잘알 이시네, 진짜 flex 설명 영상 중 젤 이해가 잘됨 하버드 flex 설명 학과 나오셨슴 flex-direction : main 축 지정 flex-wrap: 컨텐츠 두줄 표시 여부 justify-content: main 축 아이탬 배치 간격 지정 align-item: 반대축 배치 지정 align-item: 반대축 배치 아이탬 간격 지정
선생님.. 강의가 정말 기가 맥힙니다..!!!! 진짜 강의 그대로 외울 때까지 봐도 아깝지 않은 명강의 입니다!!!!! 엄지척과 기립박수를 보냅니다!!
대박... basis라든가 grow라든가.... 처음 접했을때 이해안가던게 탁 이해가네요ㅠㅠ 감삽합니다!
엘리님 새해부터 열심히 css강의를 듣고있어요! 웹디자인기능사를 최근에 취득했는데 그땐 보통 float 를 사용했거든요, 너무너무 불편하다고 생각했는데 오늘 flex box를 배우고 나니 아주 속이 시원합니다!!
앨리님 영상 감사해요 ㅠㅠ 저 다시 맘먹고 시작하고 있어요 ㅠㅠ 다시 공부하고 있어요 CSS헷갈렸던게 정리됐어요!!! 앨리님 영상 지금 정독하고있어요 잘볼게요!
너무 잘 가르쳐주셔서 항상 감사합니다!
제게 정말 많은 도움이 되었어요. 감사합니다. 특히 게임을 통한 연습은 너무 좋은데요. 반복해서 숙달될때까지 하고 있어요.^_^
협업에서 쓰는 최신 속성을 알려주니 정말 좋아요!! 유익한 frogy 게임 선물까지 감사합니다.
연습해볼 수 있는 사이트까지 알려주시고 정말 감사합니다ㅠㅠㅠ 너무너무 재밌게 집중해서 잘 배우고 갑니다!!
오늘도 들었어요~! 너무너무 좋아요
정성들여 만들어 주신것 알고 있어요! 유익한 강의 감사합니다.
좋은 강좌, 숙제까지 감사합니다. ~~
와... 진짜 인턴하면서 급하게 프론트엔드를 하게되었는데 css를 거의 안해봐서 너무 오래걸리더라구요. Flex가 먼지 어떻게 사용하는지 전혀 몰랐는데 덕분에 큰 도움이 되었습니다! 강의만 봤는데 생산성 2배는 될거 같네요!! 감사드립니다!
와우!영상 너무 잘봤어요!!설명을 너무 잘해주시니깐...귀에쏙쏙! 정말 헷갈렸는데 엘리님덕분에 이제 연습하면 잘할것같아요! 고맙습니당!
출첵출첵이요! 항상 감사합니다 잘보고 있습니다
출석 체크합니다. 코드만 볼 때는 이해가 안 되었는데 이렇게 개념부터 잡아주셔서 너무 좋아요!!
아~ 정말요? 개념부터 설명하길 잘했네요 🤗 좋은 피드백 정말 감사합니다 🙏🏼
언제나 큰 도움이 되는 드림코딩!!! 덕분에 포기하지 않고 열심히 공부할 수 있습니다 ^___^
HTML, CSS강의 드디어 다 들었어요 ㅠㅠㅠ 깨알같은 선물들 주셔서 노션에다 따로 정리하느라 시간이 좀 오래 걸렸어요 흡흡..😭 근데 강의 다 들으니까 엘리님 구독자 10만명 되셨네요!! 너무 너무 축하드려요!!! 100만까지 오래오래 함께 공부하고 싶어요!!❤️
축하해 주셔서 감사합니다 😍
게임 재밌게 잘 했어요~ ㅎㅎ 마지막 부분에서 조금 조~~금 헷갈렸지만 클리어~ ㅎㅎ 영상 항상 잘 보고있어요. 감사합니다.
출석이요!!! 현업위주로 배워서 너무 재밌고 유용해요 ㅠㅠ
출첵합니다~~ 얼른 복습해서 프로젝트 하나 제대로 완성해봐야겠어요! 감사합니다 ! X)
영상 잘 보고 있습니다! 👏
저는 엘리님 강의 영상은 전체적인 원리를 이해하려고 보고 있어요!
앞으로도 꾸준히 챙겨볼게요
오~ 이렇게 또 코멘트 남겨 주셔서 정말 감사합니다 🙌
부족하거나 필요한 영상 있으시면 언제든지 요청해 주세요 🙏🏼
정말 종은 영상 찍으주셔서 감사드립니다~!
좋은영상 감사합니다!
영상감사합니다 ~ 알아야 할게 많네요
열심히 해볼게요~
강의 잘 들었습니다, flex 다시 한번 정리하는데 많은 도움이 되었습니다. 손에 익혀야 겠네요, 좋은 강의 감사드립니다. 새해 복 많이 받으세요 ^^
진짜 헷갈렸는데 게임하니까 정리가 쏙쏙되네요.ㅋㅋ
게임이 너무 재밌네요 ㅎㅎ
덕분에 이해가 잘되었습니다!
flex style 명료한 설명 크으~!! 무릎 탁!! 치고 갑니다!
무릎 탁!! 코멘트 남겨 주셔서 감사합니다 ❤️
잘듣고있어요 항상감사해요 ㅎㅎ
오늘도 잘들었습니다!!
항상 감사드립니다. :)
코멘트 남겨 주셔서 정말 감사합니다 ❤️
오늘도 도움많이됐어요. 항상감사합니다. :)
강의 잘 봤습니다!!ㅠㅠ 끝에 내주신 게임들 다 유익하네요☺️ 재밌어요
좋은 강의 감사해요💚 사용하면서도 두루뭉술했는데 정리가 되고있어요👍👍
정리가 되신다니 🙌
말 하나하나가 너무 깔끔하고 명확하게 설명해 주셔서
이해하기가 한결 수월해졌네요..한줄기의 빛 같달까..
영상 집중 잘 못하는데 엘리님 영상은 달라요 ㅠㅠㅠ
감사합니다. 이 채널의 존재에 정말 감사해요❤❤
앨리쌤 덕분에 flex box 너무 잘 알아갑니다! 감사합니다~~~
설명이 군두덕이 없이 완벽하네요. 감사합니다
출석체크!! CSS Flexbox 강의 잘 봤습니다!!!!
1. 컨테이너와 아이템에 정의 되는 속성 값
2. Flexbox 중심축과 반대축
복습 하고 익히겠습니다!!
좋은 강의 감사합니다
많은 코딩강좌를 보기만 하면서
몇년 동안 막연하게 코딩을 알앗습니다
엘리 님 영상보면서 많은 도움이 됩니다
고맙습니다
flex 공부하다 헷갈려서 영상 보게 됐는데 너무너무 좋아요!! 설명도 차분하고 쉽게 풀어주셔서 앞으로 자주 찾아볼 것 같아요ㅎㅎ
좋은 피드백 주셔서 감사해요 😊
notion 로드맵 따라서 정주행 중!! 최고급 퀄리티 강의 감사합니다 ♥
엘리님 강의 너무 잘 들었습니당 ㅠ 가려운곳 계속 긁어주셔서 너무 시원해요 연습도 열심히 할게요!!
처음댓글다는데 다른영상들도 정주행중이에요 !! 이해쏙쏙되게 설명잘해주셔서 영상 재밌게 잘 보고있습니다 🥳
따로 시간내어서 이렇게 코멘트 남겨주셔서 감사해요 🙌
우앗 그림 너무 잘그릿세요~ 프론트엔드 배우시고 멋진 그림 감각을 살려서 왠지 너무 멋진 웹사이트/웹앱을 개발 하실 것 같아요 🤗
출석입니다. 정립안되었던게 잘 정립되네요!! 게임을 해본 적이 있지만 다시 한 번 해보러 갑니다!!
좋은 강의 정말감사드려요~!!
엘리님께서 알려주신 게임이 정말 많은 도움이 되었어요~ 수업도 듣고 따로 공부도 할 수 있어서 정말 행복합니다! 감사해요~~~
강의가 정말 너무 좋네요 감사합니다.
마지막 대박이네요! 감사합니다
정주행중입니다, 이해하기 너무 쉬워요!
encodeco님 코멘트 남겨 주셔서 감사합니다 🙌 이해가 잘 되신다니 정말 다행이예요 👍
예시까지 화면으로 세세히 볼 수 있다니,, 정말 최고... 구독 눌렀습니다!
한번에 여기까지 봤네요 좋은 영상 너무 감사합니다👏👏👏
와우 많이 오셨네요 ❤️ 꼭 개구리 게임 한번 해보세요~ 재밌어요 ㅋㅋㅋ
복습 출첵! 처음에 봤을 땐 몰아서 봐서 그런가 flex부턴 머리에 제대로 안들어오더라고요ㅠㅠ float만으로 좀 고생해보고 나니까 flex의 소중함이 더 와닿네요!! 이해도 더 잘되고요!! 질 좋은 강의 항상 감사히 듣고 있습니다~
설명을 잘해주셔서 정주행중인데 잘보고갑니다!
코멘트 남겨 주셔서 감사합니다 ❤️
너무 잘 봤습니다 강의 감사합니다!
유용한 사이트와 중간중간 꿀팁 그리고 쉬운 설명까지,,, 여윽시 최고십니다....ㅠㅠㅠㅠㅠㅠ flex box 공부 해야지 해야지 미뤄오다가 드디어 했는데 이런 명강의가 있어서 정말 다행이었어요 항상 좋은 강의 감사드립니다 my role model!!!!!!!!!!!
flexbox 매번 헷갈렸는데 강의보고 정리가 되었어요!
개구리들 자리찾아주는 게임 또한 너무 재미있고 이해가 더 쉽게 잘 되었어용ㅎㅎ 감사합니다♥
개구리 너무 귀엽죠? 하하 코멘트 감사드려요 ❤️
출석입니다 어디서도 들어보지 못했던 최고의 강의에요 엘리님 힘내시구 막막한 개발자입문길에 이런 좋은강의 만들어주셔서 너무 감사해요 ㅠㅠ 정성가득한 강의 하나하나 너무 감동스럽습니다
와.. 너무 쉽고 이해가 잘되게 설명해주시네요!
이번 CSS flexbox 영상도 감사히 잘 봤습니다 출첵!
여기서도 코멘트 남겨 주셔서 감사해요 🙌
너무 멋진 강의 감사해요~
오늘도 많이 배우고 갑니다.
영상 많이 퍼뜨리도록 하겠습니다. ^^
동영상 듣고 개구리 게임까지 하고 왔어요!! ㅋㅋㅋㅋ코딩 너무 재밌어요!