여러부운~ 잘 따라오고 계시나요? CSS로 갈수록 조회수가 떨어져서 걱정이예요 🤣 들으시구 계신다면 출석체크 부탁드려요 ❤️ 이제 CSS 이론은 여기서 마무리 하고 이제 실전편으로 넘어가서 HTML과 CSS로 간단한 UI Component, 모바일 웹사이트, 반응형 정적 웹사이트 몇가지를 만들어보고여태까지 배운 아이들을 연습해 볼꺼예요. 자세히 다루지 못한 CSS내용들은 실전을 하면서 조금씩 더 정리해 드릴께요 :) 혹시, 제가 다루지 못했거나 아직 헷갈리시거나 부족한 내용들이 있었다면 꼭 알려주세요 🙏🏼 참고해서 실전 영상 만들때 반영해서 만들어 보도록 할께요 🤗
레알 플잘알 이시네, 진짜 flex 설명 영상 중 젤 이해가 잘됨 하버드 flex 설명 학과 나오셨슴 flex-direction : main 축 지정 flex-wrap: 컨텐츠 두줄 표시 여부 justify-content: main 축 아이탬 배치 간격 지정 align-item: 반대축 배치 지정 align-item: 반대축 배치 아이탬 간격 지정
꺄아악 ㅠㅠㅠ엘리님... float와 display를 울면서 배웠던 입장에서 flex...쉬워봤자 편해봣짜 그게 얼마나 편하겠나... 최신에 나온 기술이랬으니 천천히 배우자... 나중에 배워도 안 늦겠지... 이랬는데 진작... 배울걸 그랬어요ㅠㅠ 너무 편하구 쉽고... 얼른 응용해서 이것저것 만들어보고 싶어요! 졸리지만 이거 하나만 더 보다가 중간에 졸리면 자야지...했는데 넘 흥미로워서 노션에 온라인 필기까지하며 들었네요ㅠ-ㅠ 감사합니다. 매번 강의를 볼 때마다 너무 좋은 팁들을 알려주셔서 저에게 정말 큰 도움이 돼요! 오늘은 일찍 자구 내일 일어나서 복습할게요 오늘도 출석!
flex-grow로 세 개 div를 2, 1, 1해줄경우 사실상 2대1대1비율 아니라는 부분 설명이 없어서 조금 아쉽네요.. flex-basis: 50%, 25%, 25%로 해주면 2대1대1비율이 되지만.. grow로 적용이 되려면 셋다 basis:0으로 맞춰줘야 하더라구요.
오 좋은 포인트예요 🙌 안그래도 이전 영상 positio에서도 relative와 absolute를 설명할때 원래 박스에서 나오는걸 조금 강요해서 설명할걸.. 이번영상은 카두룩치님께서 말씀하신 grow와 basis를 조금더 깊에 다뤄볼껄 아쉽더라구요 🤣 아쉽게도 유튜브에 이미 올라온 연상이 수정이 안되어서 대신 카두룩치님의 코멘트를 Pin해 놓을께요 🤗 앞으로도 이렇게 피드백 정말 부탁드려요 🙌
flex-grow로 세 개 div를 2, 1, 1해줄경우 사실상 2대1대1비율 아닌 이유는 div안의 컨텐츠를 제외한 여백을 2:1:1로 나누어 가지기 때문이라고 알고 있습니다. 그래서 님 말씀대로 basis를 0으로 맞춰야 div자체의 크키가 2:1:1로 맞춰지는 이유이죠!
오늘도 덕분에 많이 배웠습니다. 천공세대로 10년은 개발자로 이후 10여년은 개발부서 관리자를 살다보니 프로그래밍은 멀리하게 되었습니다. 곧 60인데 프로그램 개발에 대한 애정이 아직 남아있어 다시 시작해보려니 쉽지는 않군요. 그저 즐기면서 공부하고 있습니다. 감사합니다.
출첵합니다>< 드디어 CSS 끝!ㅎㅎㅎㅎ!!! 개구리 게임도 금방 끝냈어요!!!! position,float,table로 정렬하는건 익숙한데 Flexbox는 많이 낯설었지만 그래도 집중해서 영상보고 공부하니까 이해도 가고 Flexbox가 훨씬훨씬 간편하고 유용한게 많네요! 엘리님은 큰틀만 이해하면 된다고 하셨지만... 그래도 Container 속성값중에 한가지 헷갈리는게.....ㅠㅠ align-content:center; 가 flex-wrap: nowrap; 일때는 반대축에서 가운데 정렬이 안먹고 그냥 맨 위에 딱 붙어있더라구요. 비슷한 align-items:center; 은 flex-wrap: nowrap; 일때도 반대축에서 가운데 정렬 잘되구요. 그래서 저는 flex-wrap: nowrap; = container 크기가 바뀌어도 줄이 안바뀌는거고, align-items = container 안에서의 아이템 위치를 정하는거라 줄이 바뀌든 말든 적용 가능 align-content = 반대축에서 줄들 사이의 간격을 지정하는거라 줄이 안바뀌면 적용 불가능 으로 이해했는데, 혹시 제가 완전 틀리게 이해하고 있는건 아닌지 걱정됩니당 ;.; align-items랑 align-content는 정확히 뭐가 다른 걸까요?
우와 정말 열심히 하시는거 같아서 뿌듯하네요 🙌 제가 큰틀"만" 이라고 했나요?ㅋㅋ 이런 망언을 😭 너무 세세하게만 공부 하지 말고 먼저 큰 그림과 큰틀을 이해하고 직접 써보면서 배우고/찾아 나가라고 한 취지였는데. 그 말이 중요한 부분들을 배우지 않고 그냥 넘어가라는 말은 아니였어요. 많은 분들이 오해하셨을까봐 걱정이네요 😭 그리고 너무~ 좋은 질문을 해주셨어요. 제가 영상에서 aligne-content와 align-items 차이점을 명확하게 집지 않고 넘어갔네요. 개구리 게임 21번에 다시 보시면 짧게 설명이 되어있는데요. 같이 읽어 보면: This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect. "align-content "은 줄들간의 간격을 결정하는 것이고, "align-items"은 컨테이너 안에서 아이템 전체의 (1줄이든, 여러줄이든 상관없이) 위치를 결정하는것이라고 되어있어요. 그래서 한줄만 있으면 "align-content "은 무엇으로 지정하든 아무런 효력이 없어요. (줄간 간격만 맞춰주는거라서) 즉, jsbin에서 간단하게 두줄짜리로 아이템을 만들어 놓고 실습해보시면 .container { display: flex; flex-flow: row wrap; height: 100vh; } 여기서 align-content: center 는 줄들을 전부다 중간으로 배치해주고 줄들간의 간격이 없어지지만, align-items: center는 줄들의 간격은 그대로 유지되면서 줄들 전체가 중간으로 조금 옮겨가는걸 확인해 볼 수 있어. 제가 설명을 잘 해드렸는지 모르겠네요 :)
이번 강의는 처음 보는 개념들이 많았네요.. item 속성값이라는건 완전 처음 알았고 컨테이너에 대해도 잘 이해하지 못하고 있었어요. 제가 이렇게 개념이 비어있는데 바로 프로젝트를 했다니.. ㅠ 어쩐지 프로젝트 하는데 자꾸 제멋대로 배치가 안되더라고요… 그래서 적성이 안맞는건가 생각했는데 개념이 안잡혀 있던 것… 정말 좋은 강의 감사합니다.. 지금이라도 듣게돼서 너무 다행이예요!! Html css는 다들었구 이제 복습하면서 js강의 들어야겠어요 ㅎㅎ 정말정말 좋은강의 감사합니다ㅜㅜ👍
정말 정말 감사합니다. 정말 어렵고 이해가 안되는 부분이 바로 Flexbox 였습니다. 아직 많이 접해 보지 못하고 반응형 웹사이트를 만들때 레이아웃을 잡을때나 박스를 정렬 할때 이해 하기 어려운 부분들이 너무 많은데 항상 보면서 따라 해보는 중입니다. 항상 감사합니다.
21:43 너무 귀여우시고 ㅜㅜㅜㅜㅜㅜㅜㅜ HTML과 CCS 속성 강의 너무 편안하고 감사하게 잘 들었습니다!! 파이썬과 자바 하기 전에 예전에 배웠던 HTML 기억을 다시금 되새기고자 속성강의를 들었는데, 어째 예전에 무턱대고 배웠을 때보다 뭔가 컨셉이 더 명확하게 잘 잡힌거 같습니다!! 분명 예전엔 대학교 다니면서 무려 한학기동안 배웠는데 말이죠... 이번엔 일주일도 안걸렸구.... ^^... 강의에 일일히 다 출석체크하지는 못했지만 히히 좋은 강의 감사합니다!!
예전에 float랑 position으로만 아이템들 배치하는거 배웠는데 그 때 아주 사이드 아이템 패딩 때문에 골머리를 썪였던 기억이 있는데 flexbox 진짜 신세계에요 ㅋㅋㅋㅋ 계속 오오 하면서 강의 봤네요! 알려주신 팁들, 사이트들 너무너무 감사해요. 강의 한번 더 보고 게임까지 완료 하겠습니다 🙌
엘리 전에도, 다른 강의를 통해 flex박스에 대한 이론적인 것들은 학습했었는데 잘 이해가 가지 않았었어요. 그런데 오늘 2가지 container/item 꾸며주는 값, 그리고 메인축과 반대축, row/ column 으로 크게 이해하고 나니 이해가 쉽네요! 개구리들과 재미있게 flex 공부하고 있네요~ ㅎㅎ 고맙습니다. :0
여러부운~ 잘 따라오고 계시나요? CSS로 갈수록 조회수가 떨어져서 걱정이예요 🤣 들으시구 계신다면 출석체크 부탁드려요 ❤️
이제 CSS 이론은 여기서 마무리 하고 이제 실전편으로 넘어가서 HTML과 CSS로 간단한 UI Component, 모바일 웹사이트, 반응형 정적 웹사이트 몇가지를 만들어보고여태까지 배운 아이들을 연습해 볼꺼예요.
자세히 다루지 못한 CSS내용들은 실전을 하면서 조금씩 더 정리해 드릴께요 :)
혹시, 제가 다루지 못했거나 아직 헷갈리시거나 부족한 내용들이 있었다면 꼭 알려주세요 🙏🏼
참고해서 실전 영상 만들때 반영해서 만들어 보도록 할께요 🤗
출첵~_~ 💥 잘보고있습니다.
우앗! 저희 코멘트에서는 처음 뵙는것 같은데, 너무 감사합니다 🙌
출첵입니다~~~~
출석체크는 여기서 하는건가요? ㅋㅋ ;;
하하 이 영상에서는 다들 여기에 해주시네요 하하
레알 플잘알 이시네, 진짜 flex 설명 영상 중 젤 이해가 잘됨 하버드 flex 설명 학과 나오셨슴 flex-direction : main 축 지정 flex-wrap: 컨텐츠 두줄 표시 여부 justify-content: main 축 아이탬 배치 간격 지정 align-item: 반대축 배치 지정 align-item: 반대축 배치 아이탬 간격 지정
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)
강의 수준 실화냐.. 가슴이 웅장해진다🙌
꺄아악 ㅠㅠㅠ엘리님... float와 display를 울면서 배웠던 입장에서 flex...쉬워봤자 편해봣짜 그게 얼마나 편하겠나... 최신에 나온 기술이랬으니 천천히 배우자... 나중에 배워도 안 늦겠지... 이랬는데 진작... 배울걸 그랬어요ㅠㅠ 너무 편하구 쉽고... 얼른 응용해서 이것저것 만들어보고 싶어요! 졸리지만 이거 하나만 더 보다가 중간에 졸리면 자야지...했는데 넘 흥미로워서 노션에 온라인 필기까지하며 들었네요ㅠ-ㅠ 감사합니다. 매번 강의를 볼 때마다 너무 좋은 팁들을 알려주셔서 저에게 정말 큰 도움이 돼요! 오늘은 일찍 자구 내일 일어나서 복습할게요 오늘도 출석!
우와 노션에 정리까지 하시면서 들으셨다니 ❤️ 열심히 해주셔서 정말 감사해요. 영상을 만든 입장에서 이렇게 열심히 들어주시면 정말 뿌듯하답니다. 네 그리구 flex 너무 유용해요~ㅋㅋㅋ 이거 없이 예전에 어떻게 만들었나 싶어욬ㅋ
저도ㅎㅎ 국비학원 다녔는데 flex를 안알려줘서 알고가요
선생님.. 강의가 정말 기가 맥힙니다..!!!! 진짜 강의 그대로 외울 때까지 봐도 아깝지 않은 명강의 입니다!!!!! 엄지척과 기립박수를 보냅니다!!
flex-grow로 세 개 div를 2, 1, 1해줄경우 사실상 2대1대1비율 아니라는 부분 설명이 없어서 조금 아쉽네요..
flex-basis: 50%, 25%, 25%로 해주면 2대1대1비율이 되지만.. grow로 적용이 되려면 셋다 basis:0으로 맞춰줘야 하더라구요.
오 좋은 포인트예요 🙌 안그래도 이전 영상 positio에서도 relative와 absolute를 설명할때 원래 박스에서 나오는걸 조금 강요해서 설명할걸..
이번영상은 카두룩치님께서 말씀하신 grow와 basis를 조금더 깊에 다뤄볼껄 아쉽더라구요 🤣 아쉽게도 유튜브에 이미 올라온 연상이 수정이 안되어서 대신 카두룩치님의 코멘트를 Pin해 놓을께요 🤗 앞으로도 이렇게 피드백 정말 부탁드려요 🙌
flex-grow로 세 개 div를 2, 1, 1해줄경우 사실상 2대1대1비율 아닌 이유는 div안의 컨텐츠를 제외한 여백을 2:1:1로 나누어 가지기 때문이라고 알고 있습니다. 그래서 님 말씀대로 basis를 0으로 맞춰야 div자체의 크키가 2:1:1로 맞춰지는 이유이죠!
덕분에 하나 더 배워갑니다. 감사합니다 :)
HTML, CSS강의 드디어 다 들었어요 ㅠㅠㅠ 깨알같은 선물들 주셔서 노션에다 따로 정리하느라 시간이 좀 오래 걸렸어요 흡흡..😭 근데 강의 다 들으니까 엘리님 구독자 10만명 되셨네요!! 너무 너무 축하드려요!!! 100만까지 오래오래 함께 공부하고 싶어요!!❤️
축하해 주셔서 감사합니다 😍
HTML+CSS 5개 강의 다 들었어요💛
엘리님 영상들 보면서 노션으로 스터디허브도 만들었고,
차근차근 따라하는 중인데 막막한 독학의 길에 등대가 되어 주시고 있어요!
늘 좋은 강의와 영상 감사드립니다 :)
스터디허브는 어떻게 하는건지 알려주세요.. 저같은 초보에게도 필수인것 같사옵니다~
노션 어디다가써요?
24번 푸느라고 혼났내요 ㅋㅋㅋㅋㅋ wrap-reverse도 있다니.. ㅋㅋㅋㅋ오늘도 감사합니다!!!
1. flex-direction: row-reverse;
2. justify-content: center;
3. justify-content: space-around;
4. justify-content: space-between;
5. align-items: flex-end;
6. justify-content: center;
align-items: center;
7. justify-content: space-around;
align-items: flex-end;
8. flex-direction: row-reverse;
9. flex-direction: column;
10. flex-direction: row-reverse;
justify-content: flex-end;
11. flex-direction: column;
justify-content: flex-end;
12. flex-direction: column-reverse;
justify-content: space-between;
13. flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
14. order:2;
15. order:-4;
16. align-self: flex-end;
17. order:2;
align-self:flex-end;
18. flex-wrap: wrap;
19. flex-direction: column;
flex-wrap: wrap;
20. flex-flow: column wrap;
21. align-content: flex-start;
22. align-content: flex-end;
23. flex-direction: column-reverse;
align-content: center;
24. flex-flow: column-reverse wrap-reverse;
justify-content: center;
align-content: space-between;
와, 이렇게 다 푸신거예요? 👍🙌
@@dream-coding 이렇게 답글 주실주 몰랐어요 ㅠㅠㅠㅠ 1년전 영상이라 ㅠㅠㅠ 열심히 하겠습니다!!! 감사해요 정말
게임 소개 너무 좋아요!! 기본적인 설명 쉽고 자세하게 해주시고 게임으로 적용도 해볼 수 있게 해주셔서 감사합니다 😘
정말 감사합니다 엘리님만큼 잘 가르치시는 분은 없을 것 같아요 강의 퀄리티도 너무 좋아서 감동이에요ㅠㅠㅠㅠ
대박... basis라든가 grow라든가.... 처음 접했을때 이해안가던게 탁 이해가네요ㅠㅠ 감삽합니다!
와... 진짜 인턴하면서 급하게 프론트엔드를 하게되었는데 css를 거의 안해봐서 너무 오래걸리더라구요. Flex가 먼지 어떻게 사용하는지 전혀 몰랐는데 덕분에 큰 도움이 되었습니다! 강의만 봤는데 생산성 2배는 될거 같네요!! 감사드립니다!
221110 수강완료
비전공자라 그런지 20분짜리 강의를 2시간동안 반복하면서 들었네요 ㅠㅠㅠ
최고의 강의 감사합니다. 앞으로도 쉽고 재밌게 강의 제작 부탁드려요 정말 한줄기 빛!
강의 듣기 전에는 개구리 게임 3단계까밖에 못했는데, 강의 다 듣고 나서는 마지막 24단계까지 성공했어요! 감사합니다 :)
어멋 정말요? excellent 👍
강의를 너무잘하시는군요,귀에 쏙쏙 들어옵니다. 강의에 따라서 실제로 코드를 만들어 보니까 쉽게 이해되군요. 57년생인데도 충분히 이해가 됩니다. 감사합니다.
와, 도전을 멈추지 않는 그 열정 너무 멋있어요 🙆♀️
다른데서 돈내고 강의들은거 진짜 후회돼요. 기억하기 너무 쉽게 잘 가르쳐주셔서 머리에 쏙쏙 잘 들어와요 ㅜㅜ 이런 컨텐츠 빛과 소금이에요 너무 감사합니다 ㅜㅜ
프로젝트에서 버튼 위치를 변경 못해서 반나절을 보냈고 영상을 몇번 보니까 이제 해결 가능할 것 같네요
일정에 대한 푸쉬로 스트레스 받아서 잠을 설치다가 이제 공부 마치고 자야겠네요 정말 감사드립니다.
영상 끝날때마다 게임으로 감을 잡을수 있게 선물 주셔서 좋아요.
엘리님 너무 걱정하지 마세요.
꾸준히 올리시다보면 10만, 20만 금방입니다. ^ ^
응원 감사합니다 ❤️
Flexbox 설명중에 제일 자세하고 좋아요! 감사합니다
이번 CSS flexbox 영상도 감사히 잘 봤습니다 출첵!
여기서도 코멘트 남겨 주셔서 감사해요 🙌
9번까지 확인. 백엔드 위주로 해서 개인 프로젝트로 구현하는데 시간이 많이 걸렸는데 기초 개념으로 공부 많이되고 있습니다. 감사합니다.
2022.02.08
출석체크😃
HTML, CSS 개념 정리 다시 하고, 선물도 마스터했습니다!ㅎㅎ
출석 체크합니다. 코드만 볼 때는 이해가 안 되었는데 이렇게 개념부터 잡아주셔서 너무 좋아요!!
아~ 정말요? 개념부터 설명하길 잘했네요 🤗 좋은 피드백 정말 감사합니다 🙏🏼
명쾌한 강의 잘 들었습니다.
오늘은 Flexbox라는 강의를 처음 들었는데 반응형 홈페이지라는 것에 대한
이해를 높일 수 있었습니다.
감사합니다.
우와 정말 열심히 해주시고 이렇게 항상 코멘트 남겨 주셔서 감사합니다 ❤️
책을 봐도 진도가 잘 안나갔는데.. ..드림코딩님 덕분에 속성으로 그 동안 궁금했던 flexbox가 완벽히 정리 및 이해가 되었어요. 정말 감사드려요~
flex style 명료한 설명 크으~!! 무릎 탁!! 치고 갑니다!
무릎 탁!! 코멘트 남겨 주셔서 감사합니다 ❤️
출석이요. 개념을 머리속에 집어 넣어 주는 영상 감사합니다.
하하 센스 코멘트 감사합니다 ❤️
불필요한말 한마디도 없는 멋진 강의 감사합니다. 강의 목소리도 아주 듣기 좋네요.
좋은 피드백 감사합니다 ❤️
말 하나하나가 너무 깔끔하고 명확하게 설명해 주셔서
이해하기가 한결 수월해졌네요..한줄기의 빛 같달까..
영상 집중 잘 못하는데 엘리님 영상은 달라요 ㅠㅠㅠ
감사합니다. 이 채널의 존재에 정말 감사해요❤❤
쏙쏙 이해가 잘 되네요. 어려운 부분은 더 찾아봐야겠어요. 좋은 영상 감사합니다💙
오늘도 덕분에 많이 배웠습니다.
천공세대로 10년은 개발자로 이후 10여년은 개발부서 관리자를 살다보니 프로그래밍은 멀리하게 되었습니다.
곧 60인데 프로그램 개발에 대한 애정이 아직 남아있어 다시 시작해보려니 쉽지는 않군요.
그저 즐기면서 공부하고 있습니다.
감사합니다.
position을 오래 붙잡고 있다가 드디어 flexbox로 넘어오게 됐어요! 오늘 수업도 감사합니당
너무 대박이네요ㄷㄷ 맨날 flexbox 공부해야지 하다가 찾아봤는데 바로 이해됐어요! 감사합니다 엘리😄
CSS 강의도 완강했습니다. CSS도 정리가 잘 되었고 새로 알게된 것들도 많아서 도움이 많이 되었습니다. 선물로 주신 게임 2가지도 틈틈히 해서 익숙해질 수 있도록 해야겠어요. 좋은 강의 정말 감사드립니다.
항상 코멘트 감사드려요 ❤️ 선물 받으신거 꼭 열어 보시고 형준님껄로 만들어 보세요 🙌
최고의강의.flexbox 이해가 하나도 안되었는데 영상보고 바로 이해가 가버렸습니다. ㅎㅎㅎ 이제는 많이써보고 친숙해지는 수밖에 없네요. 추천을 100개이상 박을수있으면 좋겠네요
출첵합니다>< 드디어 CSS 끝!ㅎㅎㅎㅎ!!! 개구리 게임도 금방 끝냈어요!!!!
position,float,table로 정렬하는건 익숙한데 Flexbox는 많이 낯설었지만
그래도 집중해서 영상보고 공부하니까 이해도 가고 Flexbox가 훨씬훨씬 간편하고 유용한게 많네요!
엘리님은 큰틀만 이해하면 된다고 하셨지만...
그래도 Container 속성값중에 한가지 헷갈리는게.....ㅠㅠ
align-content:center; 가 flex-wrap: nowrap; 일때는 반대축에서 가운데 정렬이 안먹고 그냥 맨 위에 딱 붙어있더라구요.
비슷한 align-items:center; 은 flex-wrap: nowrap; 일때도 반대축에서 가운데 정렬 잘되구요.
그래서 저는 flex-wrap: nowrap; = container 크기가 바뀌어도 줄이 안바뀌는거고,
align-items = container 안에서의 아이템 위치를 정하는거라 줄이 바뀌든 말든 적용 가능
align-content = 반대축에서 줄들 사이의 간격을 지정하는거라 줄이 안바뀌면 적용 불가능
으로 이해했는데, 혹시 제가 완전 틀리게 이해하고 있는건 아닌지 걱정됩니당 ;.;
align-items랑 align-content는 정확히 뭐가 다른 걸까요?
우와 정말 열심히 하시는거 같아서 뿌듯하네요 🙌
제가 큰틀"만" 이라고 했나요?ㅋㅋ 이런 망언을 😭 너무 세세하게만 공부 하지 말고 먼저 큰 그림과 큰틀을 이해하고 직접 써보면서 배우고/찾아 나가라고 한 취지였는데.
그 말이 중요한 부분들을 배우지 않고 그냥 넘어가라는 말은 아니였어요. 많은 분들이 오해하셨을까봐 걱정이네요 😭
그리고 너무~ 좋은 질문을 해주셨어요.
제가 영상에서 aligne-content와 align-items 차이점을 명확하게 집지 않고 넘어갔네요. 개구리 게임 21번에 다시 보시면 짧게 설명이 되어있는데요.
같이 읽어 보면:
This can be confusing, but align-content determines the spacing between lines, while align-items determines how the items as a whole are aligned within the container. When there is only one line, align-content has no effect.
"align-content "은 줄들간의 간격을 결정하는 것이고, "align-items"은 컨테이너 안에서 아이템 전체의 (1줄이든, 여러줄이든 상관없이) 위치를 결정하는것이라고 되어있어요. 그래서 한줄만 있으면 "align-content "은 무엇으로 지정하든 아무런 효력이 없어요. (줄간 간격만 맞춰주는거라서)
즉, jsbin에서 간단하게 두줄짜리로 아이템을 만들어 놓고 실습해보시면
.container {
display: flex;
flex-flow: row wrap;
height: 100vh;
}
여기서 align-content: center 는 줄들을 전부다 중간으로 배치해주고 줄들간의 간격이 없어지지만, align-items: center는 줄들의 간격은 그대로 유지되면서 줄들 전체가 중간으로 조금 옮겨가는걸 확인해 볼 수 있어.
제가 설명을 잘 해드렸는지 모르겠네요 :)
드림코딩 by 엘리
헛....아니에요. 큰틀을 이해하라고 하셨는데 제가 멋대로 중간에 (만)을 넣었나봐요ㅋㅋㅋㅠㅠㅠㅠ
네네 개구리게임 21번 다시 읽어보고 댓글도 다시 보니까 이해가 갔어요!!!
감사합니다😍😍
영상에 게임 소개까지! ㅎㅎ 완전 풀패키지 선물! 항상 감사해요 😍
출석체크!! CSS Flexbox 강의 잘 봤습니다!!!!
1. 컨테이너와 아이템에 정의 되는 속성 값
2. Flexbox 중심축과 반대축
복습 하고 익히겠습니다!!
CSS Flexbox 강의를 정말 잘하시네요 알아듣기 정말 쉽네요 감사합니다
좋은 피드백 정말 감사합니다 🤗
출첵입니다~!
CSS까지 강의를 들으니까 이제 어떻게 활용하면 좋을지 생각을 하고 있더라구요ㅎㅎ
오늘 강의도 개념이 쏙쏙 들어오는 아주 유익한 시간이었고, 숙제하면서 익숙하게 익히고 다음 강의로 넘어갈게요! 감사합니다❤️
이런 정성스러운 출책 감사해요 ❤️
강의 잘 들었습니다, flex 다시 한번 정리하는데 많은 도움이 되었습니다. 손에 익혀야 겠네요, 좋은 강의 감사드립니다. 새해 복 많이 받으세요 ^^
좋은 내용 감사합니다.
개구리들을 모두 수련에 잘 보내줬어요!
하하 수련에 잘 갔나요 🐸
예시까지 화면으로 세세히 볼 수 있다니,, 정말 최고... 구독 눌렀습니다!
클론코딩 강의 들어가기 전에 유튜브 강의 듣고 있는데 너무너무 유익하고 재밌어요
보시는 영상마다 출석 체크 감사해요 ❤️
대박 제가 찾던 css 입니다! 네비바를 float를 사용해서 정렬했을때 뭔가 부족하고 답답했는데 이거였네요!ㅋㅋ 이제 여기에서 프론트 기본기 다집니다:) 감사합니다!
flex 좋은강의네요! 나머지는 다들 찾아서 공부하시면 될거같아요
좋은 피드백 정말 감사합니다 🤗
"나머지는 다들 찾아서 공부하시면 될거같아요"
와우 이런 능동적인 자세 너무 좋은것 같아요 ❤️
좋은 강의 감사합니다
많은 코딩강좌를 보기만 하면서
몇년 동안 막연하게 코딩을 알앗습니다
엘리 님 영상보면서 많은 도움이 됩니다
고맙습니다
와... 이렇게 은혜롭고 자비로운 강의 감사합니다ㅠㅠㅠㅠㅠ 절 구원해 주셨어요ㅠㅠㅠㅠ
혼자 독학하면서 CSS도 어설프게 공부한 느낌이었는데, 이렇게 엘리 님의 강의를 듣고 머리에 쏙~ 집어 넣고 갑니다.
마지막에 소개해준 게임 덕분에 개념 이해가 더 잘되는 것 같아요 너무 고마워요
저두 감사합니다 ❤️
설명이 군두덕이 없이 완벽하네요. 감사합니다
출석입니다. 정립안되었던게 잘 정립되네요!! 게임을 해본 적이 있지만 다시 한 번 해보러 갑니다!!
출첵🙌 디너에 이어서 개구리 과제 좋습니다 ㅋㅋ 밤이 늦어 내일 퇴근 후에 다시 찾아뵐게욥
좋은 강의 감사합니다. 주변 동료에게도 꼭 추천 하겠습니다.
추천해주신다니 ❤️
열심히 따라가는 중입니닷! 얼른 최신 동영상까지 갈 수 있게 열심히 공부하는 중!
실전에서 기다릴께요 :)
지금까지 본 Flex 영상 중 최고네요.
출석체크 합니다!!! 선물이 숙제가 아니라 정말 선물같이 느껴지네요~ 재밌게 연습할 수 있어서 너무 좋아요~
마지막 24단계에서 좀 시간걸렸지만 ㅎ 전부 완료했습니다!!
꺄하 🥰 이론 수업 다하셨네요 🙌
쉽게 설명 잘들었습니다...이제 float 에 손을 뗄때가 됐네요 감사합니다!!!!
출첵해 주셔서 감사해요 🙌
홀리몰리한 영상입니다.. 영원히 해주세여..
이제야 하고 있는데 정보가 머릿속에 마구 쏟아지니 정신을 못차리겠지만, 여러번 반복할게요!
출석체크 ! 집중력 짧아서 ㅠㅠ 강의들으며 의자 빙빙 돌리기 시작할때 거의 다왔어요 여러분 힘내세요 ! 이러서셔 ㅋㅋㅋ 엌 타이밍 너무 잘 맞추셨어용 힘내서 다시 집중해서 들었습니당 ㅎㅎ 다음영상도 챙겨보겠습니당
아니… 블로그만 보고 글로만 연습하니 계속 막혀서 영상으로 보자.. 싶어서 보게 됐는데 너무 속시원하게 알려주셨어요…🥹🥹🥹🥹
영상이 이해가 잘되게 만드신거 같아요.감사합니다. 완료
이해가 잘 된다니 정말 감사합니다 ❤️
학원 수업 못 따라가서 들었는데 너무너무 좋네요!!!! 최고최고
제가 인터넷으로 몇군데에서 수업을 들어봤지만, 정말 차분하고 꼼꼼하게 좋은 시각자료들 알찬 자료들과 함께 수업해주시니 정말 좋네요!! 댓글 왠만해서는 잘 안쓰는데 넘 좋아서 댓글 하나달아봅니다 ~~! 나머지도 쭈욱 달려서 좋은 결과물을 꼭 만들어보겟습니다
이렇게 코멘트 남겨 주셔서 감사해요 😊
출첵이요! 진짜 엘리님 덕분에 정말 재밌게 공부하는 것같아요!! 너무너무 감사하구, 진짜 제 롤모델이십니당. 저도 열심히 공부해서 엘리님같은 개발자가 되는게 목표에요ㅎㅎ
Seony님 항상 응원할께요 ❤️
이번 강의는 처음 보는 개념들이 많았네요.. item 속성값이라는건 완전 처음 알았고 컨테이너에 대해도 잘 이해하지 못하고 있었어요. 제가 이렇게 개념이 비어있는데 바로 프로젝트를 했다니.. ㅠ 어쩐지 프로젝트 하는데 자꾸 제멋대로 배치가 안되더라고요… 그래서 적성이 안맞는건가 생각했는데 개념이 안잡혀 있던 것… 정말 좋은 강의 감사합니다.. 지금이라도 듣게돼서 너무 다행이예요!! Html css는 다들었구 이제 복습하면서 js강의 들어야겠어요 ㅎㅎ 정말정말 좋은강의 감사합니다ㅜㅜ👍
flexbox를 배워도 잘 이해가 되지 않았는데 이 영상에서 단번에 이해됐어요
감사합니다
출첵합니다! 오늘은 froggy game 까지 마무리하고 내일부터 실전 함께 잘 따라가보려고요! :) 여기저기서 배웠던 개념들 정리하기 넘 좋은 시간이었습니다!
정말 정말 감사합니다. 정말 어렵고 이해가 안되는 부분이 바로 Flexbox 였습니다. 아직 많이 접해 보지 못하고 반응형 웹사이트를 만들때 레이아웃을 잡을때나 박스를 정렬 할때 이해 하기 어려운 부분들이 너무 많은데 항상 보면서 따라 해보는 중입니다. 항상 감사합니다.
우앙 영상마다 코멘트/출석체크 해주셔서 감사해요 🤗
열심히 하시는게 여기에서도 팍팍 느껴지네요 🙌
@@dream-coding감사합니다 아직 호주에 퍼스 지역은 가 보았지만 엘리님 계신 곳은 가 보지 못했네요. 다음에 꼭 갈 수 있는 기회를 만들고 싶습니다. 잘 하겠습니다
21:43 너무 귀여우시고 ㅜㅜㅜㅜㅜㅜㅜㅜ HTML과 CCS 속성 강의 너무 편안하고 감사하게 잘 들었습니다!! 파이썬과 자바 하기 전에 예전에 배웠던 HTML 기억을 다시금 되새기고자 속성강의를 들었는데, 어째 예전에 무턱대고 배웠을 때보다 뭔가 컨셉이 더 명확하게 잘 잡힌거 같습니다!! 분명 예전엔 대학교 다니면서 무려 한학기동안 배웠는데 말이죠... 이번엔 일주일도 안걸렸구.... ^^... 강의에 일일히 다 출석체크하지는 못했지만 히히 좋은 강의 감사합니다!!
좋은 피드백 남겨 주셔서 정말 감사해요 🤩
숙제라고 하셨지만 저에게는 아주 큰 선물이 된 것 같습니다! 선물을 잘 쓸 수 있도록 계속 공부해야겠어요!!!
항상 좋은강의 감사합니다!
제게 정말 많은 도움이 되었어요. 감사합니다. 특히 게임을 통한 연습은 너무 좋은데요. 반복해서 숙달될때까지 하고 있어요.^_^
엘리님 설명 듣고나서 플렉스박스 프로기 게임으로 연습하니까 너무너무 머리속에 쏙쏙 들어와요~ 늘 감사드려요~
엘리님 강의 너무 잘 들었습니당 ㅠ 가려운곳 계속 긁어주셔서 너무 시원해요 연습도 열심히 할게요!!
항상 강의 퀄리티에 놀라고 감사함을 느껴요!
오웃 저두 항상 코멘트 감사드려요 ❤️
감사합니다 , html /css 수업을 듣게 된지 1주일 정도 되었는데 , 과제 할 때 많이 도움이 되었습니다
드림코딩은..찐이다
좋은 강의 정말 감사합니다 이해가 쏙쏙 돼서 공부하는 게 즐거워요!!!!!
출첵!!
드디어 css를 살짜쿵이지만 한번 다 보았네요!
학교 다닐때 배웠던 내용에서 핵심만 찝어주셔서 잘 들을 수 있었습니다
이제는 클론코딩으로 틀을 잡고 자바스크립트 들으러 가야겠어요!! 감사합니다!!
출책 감사합니다 :) 화이팅!
정말 개념 하나도 모르는데 너무 쏙쏙 잘들어오게 설명해주셔서 감사해요 ㅠㅠ 강의들 넘나 좋아요..❤️
첨으로 알람설정도 하게되네요 ㅎㅎ
선배님 무릎을 탁 치고 많이 배우고 갑니다 ㅎㅎ 🤗👍👍👍
Css 너무 어렵네요 ㅠ
감사합니다 :) 정대리님도 코딩관련 유튜브하시나봐요~ 구독했어요~ 종종 놀러갈께요~ 🙌
퀄리티 높은 강의 감사합니다. 튜토리얼을 보면서 따라하는 연습을 여러번 했었는데 정확히 왜 그 태그들을 사용하는지는 몰랐었거든요. 이번 영상으로 개념을 잡을 수 있었어요. 많이 배웠습니다!
개념을 잡으실 수 있었다니 감사합니다 ❤️
반응형 헤더 만들어보고 flex 부분이 이해가 조금 부족한거같아 찾아와서 보고있는데 이해가 훨씬 잘되네요! 너무 좋은 영상 감사합니다 :)
flex 너무 좋죠~? :)
UI/UX 디자이너입니다. CSS의 개념에 대해 좀 더 알고 싶어서 보고 있는데 너무 이해하기 쉬워요
업무가 바빠서 생각 날때만 가끔 보고 있어요ㅠ 언젠가 마무리할 수 있도록 ...ㅠ
CSS #1,2 and 3 완료 후 개구리들과 즐거운 게임도 한판 했습니다~~
항상 즐거운 강의 감사합니다!
와우.. 너무 이해가 잘갔습니다. mdn 보며 더 공부해보겠습니다. 너무 감사합니다ㅠㅠ 💜
출책 감사해요 ❤️
매번 강의마다 적절한 예시와 설명 그리고 유용한 사이트들을 알려주셔서 감사해요!
flexbox 매번 헷갈렸는데 강의보고 정리가 되었어요!
개구리들 자리찾아주는 게임 또한 너무 재미있고 이해가 더 쉽게 잘 되었어용ㅎㅎ 감사합니다♥
개구리 너무 귀엽죠? 하하 코멘트 감사드려요 ❤️
정말 도움이 많이 됐어요!! flexbox를 쓰면서도 제대로 알고 쓰는것 같지 않았는데 이번에 눈이 트인 것 같아요. 좋은 강의 감사합니다!!
강의 넘넘 잘들었습니다!!! 바로 flexbox froggy 게임까지 클리어했어요😆 감사합니다!!💛💛
아무생각없이 들어왓다가 계속봣네..
우와우 나도이제 프론트엔드개발자!! 영상최고!!
CSS강의 모두 잘 봤어요! 내용도 유익하고 설명도 쏙쏙 이해가 가게 잘 해주셔서 강의가 지루할 틈이 없습니다. 감사해요 ㅎㅅㅎ
좋은 피드백 남겨 주셔서 정말 감사합니다 ❤️
예전에 float랑 position으로만 아이템들 배치하는거 배웠는데 그 때 아주 사이드 아이템 패딩 때문에 골머리를 썪였던 기억이 있는데 flexbox 진짜 신세계에요 ㅋㅋㅋㅋ 계속 오오 하면서 강의 봤네요! 알려주신 팁들, 사이트들 너무너무 감사해요. 강의 한번 더 보고 게임까지 완료 하겠습니다 🙌
그동안 float으로 배치했었는데 강의 덕분에 좀 더 수월하게 만들 수 있게 됐어요 감사합니다!
오웃 도움이 되었다니 엄청 기분이 좋네요 🤗
영상 잘 보고 있습니다! 👏
저는 엘리님 강의 영상은 전체적인 원리를 이해하려고 보고 있어요!
앞으로도 꾸준히 챙겨볼게요
오~ 이렇게 또 코멘트 남겨 주셔서 정말 감사합니다 🙌
부족하거나 필요한 영상 있으시면 언제든지 요청해 주세요 🙏🏼
flexbox 완전 깡패네요~~ 다 들었습니다!!
엘리 전에도, 다른 강의를 통해 flex박스에 대한 이론적인 것들은 학습했었는데 잘 이해가 가지 않았었어요.
그런데 오늘 2가지 container/item 꾸며주는 값, 그리고 메인축과 반대축, row/ column 으로 크게 이해하고 나니 이해가 쉽네요!
개구리들과 재미있게 flex 공부하고 있네요~ ㅎㅎ 고맙습니다. :0
오웃! 이제 이해가 되신다니 ❤️ 중요 포인트만 이해하시면 나머지는 개구리 게임이나 직접 실습하시면 더 감이 많이 오실거예요 🙌