여러부운~ 잘 따라오고 계시나요? 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인데 프로그램 개발에 대한 애정이 아직 남아있어 다시 시작해보려니 쉽지는 않군요. 그저 즐기면서 공부하고 있습니다. 감사합니다.
강의 몇개 들어보니, 얼굴 80점 목소리 100점 강의내용 100점 이였습니다. . 지금은? . . . . . . . . . 얼굴 100점 목소리 100점 강의내용 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는 줄들의 간격은 그대로 유지되면서 줄들 전체가 중간으로 조금 옮겨가는걸 확인해 볼 수 있어. 제가 설명을 잘 해드렸는지 모르겠네요 :)
늘 보기만 하고 넘어갔었는데 오늘은 엘리님이 꿈에 나오셨어요,, 스승의 날을 감사하라는 의미일까요? 엘리님 영상으로 많이 배우고... 길을 못 잡고 있던 사람인데 목표가 생기고 꿈이 생기고 있어요! 좋은 컨텐츠 제작해주셔서 감사합니다 언젠가 직접 감사 인사를 전하구 싶네요... 직접 뵐수 있을 그날까지 열심히 하겠씁니다! ❤️
여러부운~ 잘 따라오고 계시나요? 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)
강의 수준 실화냐.. 가슴이 웅장해진다🙌
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년전 영상이라 ㅠㅠㅠ 열심히 하겠습니다!!! 감사해요 정말
선생님.. 강의가 정말 기가 맥힙니다..!!!! 진짜 강의 그대로 외울 때까지 봐도 아깝지 않은 명강의 입니다!!!!! 엄지척과 기립박수를 보냅니다!!
HTML+CSS 5개 강의 다 들었어요💛
엘리님 영상들 보면서 노션으로 스터디허브도 만들었고,
차근차근 따라하는 중인데 막막한 독학의 길에 등대가 되어 주시고 있어요!
늘 좋은 강의와 영상 감사드립니다 :)
스터디허브는 어떻게 하는건지 알려주세요.. 저같은 초보에게도 필수인것 같사옵니다~
노션 어디다가써요?
221110 수강완료
비전공자라 그런지 20분짜리 강의를 2시간동안 반복하면서 들었네요 ㅠㅠㅠ
최고의 강의 감사합니다. 앞으로도 쉽고 재밌게 강의 제작 부탁드려요 정말 한줄기 빛!
HTML, CSS강의 드디어 다 들었어요 ㅠㅠㅠ 깨알같은 선물들 주셔서 노션에다 따로 정리하느라 시간이 좀 오래 걸렸어요 흡흡..😭 근데 강의 다 들으니까 엘리님 구독자 10만명 되셨네요!! 너무 너무 축하드려요!!! 100만까지 오래오래 함께 공부하고 싶어요!!❤️
축하해 주셔서 감사합니다 😍
와... 진짜 인턴하면서 급하게 프론트엔드를 하게되었는데 css를 거의 안해봐서 너무 오래걸리더라구요. Flex가 먼지 어떻게 사용하는지 전혀 몰랐는데 덕분에 큰 도움이 되었습니다! 강의만 봤는데 생산성 2배는 될거 같네요!! 감사드립니다!
엘리님 너무 걱정하지 마세요.
꾸준히 올리시다보면 10만, 20만 금방입니다. ^ ^
응원 감사합니다 ❤️
꺄아악 ㅠㅠㅠ엘리님... 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로 맞춰지는 이유이죠!
덕분에 하나 더 배워갑니다. 감사합니다 :)
강의를 너무잘하시는군요,귀에 쏙쏙 들어옵니다. 강의에 따라서 실제로 코드를 만들어 보니까 쉽게 이해되군요. 57년생인데도 충분히 이해가 됩니다. 감사합니다.
와, 도전을 멈추지 않는 그 열정 너무 멋있어요 🙆♀️
게임 소개 너무 좋아요!! 기본적인 설명 쉽고 자세하게 해주시고 게임으로 적용도 해볼 수 있게 해주셔서 감사합니다 😘
정말 감사합니다 엘리님만큼 잘 가르치시는 분은 없을 것 같아요 강의 퀄리티도 너무 좋아서 감동이에요ㅠㅠㅠㅠ
오늘도 덕분에 많이 배웠습니다.
천공세대로 10년은 개발자로 이후 10여년은 개발부서 관리자를 살다보니 프로그래밍은 멀리하게 되었습니다.
곧 60인데 프로그램 개발에 대한 애정이 아직 남아있어 다시 시작해보려니 쉽지는 않군요.
그저 즐기면서 공부하고 있습니다.
감사합니다.
Flexbox 설명중에 제일 자세하고 좋아요! 감사합니다
다른데서 돈내고 강의들은거 진짜 후회돼요. 기억하기 너무 쉽게 잘 가르쳐주셔서 머리에 쏙쏙 잘 들어와요 ㅜㅜ 이런 컨텐츠 빛과 소금이에요 너무 감사합니다 ㅜㅜ
출석체크!! CSS Flexbox 강의 잘 봤습니다!!!!
1. 컨테이너와 아이템에 정의 되는 속성 값
2. Flexbox 중심축과 반대축
복습 하고 익히겠습니다!!
대박... basis라든가 grow라든가.... 처음 접했을때 이해안가던게 탁 이해가네요ㅠㅠ 감삽합니다!
강의 몇개 들어보니, 얼굴 80점 목소리 100점 강의내용 100점 이였습니다.
.
지금은?
.
.
.
.
.
.
.
.
.
얼굴 100점 목소리 100점 강의내용 100점 입니다.
너무 감사드려요.
돈이 넉넉하면 엘리님 유료강의로 시작해보고 싶지만... 올려주신 정보만으로도 너무나 큰 도움이 되었네요.
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 코멘트 100점 입니다
강의 듣기 전에는 개구리 게임 3단계까밖에 못했는데, 강의 다 듣고 나서는 마지막 24단계까지 성공했어요! 감사합니다 :)
어멋 정말요? excellent 👍
9번까지 확인. 백엔드 위주로 해서 개인 프로젝트로 구현하는데 시간이 많이 걸렸는데 기초 개념으로 공부 많이되고 있습니다. 감사합니다.
예시까지 화면으로 세세히 볼 수 있다니,, 정말 최고... 구독 눌렀습니다!
영상 끝날때마다 게임으로 감을 잡을수 있게 선물 주셔서 좋아요.
너무너무 좋은 강의 잘 들었습니다. 정말 감사합니다~
@19:16에서 flex-shrink의 기본값은 0이 아니라 1로 알고있어서요~!
0일까요..?
불필요한말 한마디도 없는 멋진 강의 감사합니다. 강의 목소리도 아주 듣기 좋네요.
좋은 피드백 감사합니다 ❤️
프로젝트에서 버튼 위치를 변경 못해서 반나절을 보냈고 영상을 몇번 보니까 이제 해결 가능할 것 같네요
일정에 대한 푸쉬로 스트레스 받아서 잠을 설치다가 이제 공부 마치고 자야겠네요 정말 감사드립니다.
최고의강의.flexbox 이해가 하나도 안되었는데 영상보고 바로 이해가 가버렸습니다. ㅎㅎㅎ 이제는 많이써보고 친숙해지는 수밖에 없네요. 추천을 100개이상 박을수있으면 좋겠네요
책을 봐도 진도가 잘 안나갔는데.. ..드림코딩님 덕분에 속성으로 그 동안 궁금했던 flexbox가 완벽히 정리 및 이해가 되었어요. 정말 감사드려요~
강의 잘 들었습니다, flex 다시 한번 정리하는데 많은 도움이 되었습니다. 손에 익혀야 겠네요, 좋은 강의 감사드립니다. 새해 복 많이 받으세요 ^^
클론코딩 강의 들어가기 전에 유튜브 강의 듣고 있는데 너무너무 유익하고 재밌어요
보시는 영상마다 출석 체크 감사해요 ❤️
CSS Flexbox 강의를 정말 잘하시네요 알아듣기 정말 쉽네요 감사합니다
좋은 피드백 정말 감사합니다 🤗
출첵🙌 디너에 이어서 개구리 과제 좋습니다 ㅋㅋ 밤이 늦어 내일 퇴근 후에 다시 찾아뵐게욥
2022.02.08
출석체크😃
HTML, CSS 개념 정리 다시 하고, 선물도 마스터했습니다!ㅎㅎ
CSS도 다들었습니다. 수업을듣고 이해한바로 막힘없이 문제를 풀수있었습니다 ㅎㅎ 24번 문제에 좀 애를먹긴했지만요.
이런 게임이 확실히 공부할때 도움이 되는것 같아요.
좋은강의 감사합니다!
너무 대박이네요ㄷㄷ 맨날 flexbox 공부해야지 하다가 찾아봤는데 바로 이해됐어요! 감사합니다 엘리😄
ui/ux디자이너 공부하는 학생입니다 학원에서 수업듣고 집에서 드림코딩님 강의 듣으니 이해가 쉬워서 잘 듣고 있습니다
position을 오래 붙잡고 있다가 드디어 flexbox로 넘어오게 됐어요! 오늘 수업도 감사합니당
좋은 강의 감사합니다
많은 코딩강좌를 보기만 하면서
몇년 동안 막연하게 코딩을 알앗습니다
엘리 님 영상보면서 많은 도움이 됩니다
고맙습니다
UI/UX 디자이너입니다. CSS의 개념에 대해 좀 더 알고 싶어서 보고 있는데 너무 이해하기 쉬워요
업무가 바빠서 생각 날때만 가끔 보고 있어요ㅠ 언젠가 마무리할 수 있도록 ...ㅠ
출석 체크합니다. 코드만 볼 때는 이해가 안 되었는데 이렇게 개념부터 잡아주셔서 너무 좋아요!!
아~ 정말요? 개념부터 설명하길 잘했네요 🤗 좋은 피드백 정말 감사합니다 🙏🏼
명쾌한 강의 잘 들었습니다.
오늘은 Flexbox라는 강의를 처음 들었는데 반응형 홈페이지라는 것에 대한
이해를 높일 수 있었습니다.
감사합니다.
우와 정말 열심히 해주시고 이렇게 항상 코멘트 남겨 주셔서 감사합니다 ❤️
쏙쏙 이해가 잘 되네요. 어려운 부분은 더 찾아봐야겠어요. 좋은 영상 감사합니다💙
출석이요. 개념을 머리속에 집어 넣어 주는 영상 감사합니다.
하하 센스 코멘트 감사합니다 ❤️
드림코딩은..찐이다
좋은 강의 정말 감사합니다 이해가 쏙쏙 돼서 공부하는 게 즐거워요!!!!!
말 하나하나가 너무 깔끔하고 명확하게 설명해 주셔서
이해하기가 한결 수월해졌네요..한줄기의 빛 같달까..
영상 집중 잘 못하는데 엘리님 영상은 달라요 ㅠㅠㅠ
감사합니다. 이 채널의 존재에 정말 감사해요❤❤
영상에 게임 소개까지! ㅎㅎ 완전 풀패키지 선물! 항상 감사해요 😍
출석체크 ! 집중력 짧아서 ㅠㅠ 강의들으며 의자 빙빙 돌리기 시작할때 거의 다왔어요 여러분 힘내세요 ! 이러서셔 ㅋㅋㅋ 엌 타이밍 너무 잘 맞추셨어용 힘내서 다시 집중해서 들었습니당 ㅎㅎ 다음영상도 챙겨보겠습니당
정말 개념 하나도 모르는데 너무 쏙쏙 잘들어오게 설명해주셔서 감사해요 ㅠㅠ 강의들 넘나 좋아요..❤️
첨으로 알람설정도 하게되네요 ㅎㅎ
이제야 하고 있는데 정보가 머릿속에 마구 쏟아지니 정신을 못차리겠지만, 여러번 반복할게요!
좋은 내용 감사합니다.
개구리들을 모두 수련에 잘 보내줬어요!
하하 수련에 잘 갔나요 🐸
엘리님 설명 듣고나서 플렉스박스 프로기 게임으로 연습하니까 너무너무 머리속에 쏙쏙 들어와요~ 늘 감사드려요~
혼자 독학하면서 CSS도 어설프게 공부한 느낌이었는데, 이렇게 엘리 님의 강의를 듣고 머리에 쏙~ 집어 넣고 갑니다.
flex 좋은강의네요! 나머지는 다들 찾아서 공부하시면 될거같아요
좋은 피드백 정말 감사합니다 🤗
"나머지는 다들 찾아서 공부하시면 될거같아요"
와우 이런 능동적인 자세 너무 좋은것 같아요 ❤️
엘리님 강의 너무 잘 들었습니당 ㅠ 가려운곳 계속 긁어주셔서 너무 시원해요 연습도 열심히 할게요!!
대박 제가 찾던 css 입니다! 네비바를 float를 사용해서 정렬했을때 뭔가 부족하고 답답했는데 이거였네요!ㅋㅋ 이제 여기에서 프론트 기본기 다집니다:) 감사합니다!
flexbox 맨날 아리송했는데 이거 보고 완전 이해했어요! 항상 감사합니다 엘리님!! 👍😀
실제 개발시 난관에 부딪혀서 여러 번 보다 보니 이제 이해가 좀 가네요. 설명은 짱인데 이해하는 건 개인의 몫이군요. 이해가 된 다음에 보니 정말 설명은 잘하시네요^^
쉽게 설명 잘들었습니다...이제 float 에 손을 뗄때가 됐네요 감사합니다!!!!
출첵해 주셔서 감사해요 🙌
열심히 따라가는 중입니닷! 얼른 최신 동영상까지 갈 수 있게 열심히 공부하는 중!
실전에서 기다릴께요 :)
아니… 블로그만 보고 글로만 연습하니 계속 막혀서 영상으로 보자.. 싶어서 보게 됐는데 너무 속시원하게 알려주셨어요…🥹🥹🥹🥹
지금까지 본 Flex 영상 중 최고네요.
숙제라고 하셨지만 저에게는 아주 큰 선물이 된 것 같습니다! 선물을 잘 쓸 수 있도록 계속 공부해야겠어요!!!
항상 좋은강의 감사합니다!
CSS 강의도 완강했습니다. CSS도 정리가 잘 되었고 새로 알게된 것들도 많아서 도움이 많이 되었습니다. 선물로 주신 게임 2가지도 틈틈히 해서 익숙해질 수 있도록 해야겠어요. 좋은 강의 정말 감사드립니다.
항상 코멘트 감사드려요 ❤️ 선물 받으신거 꼭 열어 보시고 형준님껄로 만들어 보세요 🙌
flexbox froggy의 마지막문제 24번문제 답입니다.
justify-content:center;
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
align-content:space-between
강의 넘넘 잘들었습니다!!! 바로 flexbox froggy 게임까지 클리어했어요😆 감사합니다!!💛💛
좋은 강의 감사합니다. 주변 동료에게도 꼭 추천 하겠습니다.
추천해주신다니 ❤️
와... 이렇게 은혜롭고 자비로운 강의 감사합니다ㅠㅠㅠㅠㅠ 절 구원해 주셨어요ㅠㅠㅠㅠ
출첵이요! 진짜 엘리님 덕분에 정말 재밌게 공부하는 것같아요!! 너무너무 감사하구, 진짜 제 롤모델이십니당. 저도 열심히 공부해서 엘리님같은 개발자가 되는게 목표에요ㅎㅎ
Seony님 항상 응원할께요 ❤️
flex style 명료한 설명 크으~!! 무릎 탁!! 치고 갑니다!
무릎 탁!! 코멘트 남겨 주셔서 감사합니다 ❤️
항상 강의 퀄리티에 놀라고 감사함을 느껴요!
오웃 저두 항상 코멘트 감사드려요 ❤️
학원 수업 못 따라가서 들었는데 너무너무 좋네요!!!! 최고최고
매번 강의마다 적절한 예시와 설명 그리고 유용한 사이트들을 알려주셔서 감사해요!
제가 인터넷으로 몇군데에서 수업을 들어봤지만, 정말 차분하고 꼼꼼하게 좋은 시각자료들 알찬 자료들과 함께 수업해주시니 정말 좋네요!! 댓글 왠만해서는 잘 안쓰는데 넘 좋아서 댓글 하나달아봅니다 ~~! 나머지도 쭈욱 달려서 좋은 결과물을 꼭 만들어보겟습니다
이렇게 코멘트 남겨 주셔서 감사해요 😊
이번 CSS flexbox 영상도 감사히 잘 봤습니다 출첵!
여기서도 코멘트 남겨 주셔서 감사해요 🙌
제게 정말 많은 도움이 되었어요. 감사합니다. 특히 게임을 통한 연습은 너무 좋은데요. 반복해서 숙달될때까지 하고 있어요.^_^
출첵입니다~!
CSS까지 강의를 들으니까 이제 어떻게 활용하면 좋을지 생각을 하고 있더라구요ㅎㅎ
오늘 강의도 개념이 쏙쏙 들어오는 아주 유익한 시간이었고, 숙제하면서 익숙하게 익히고 다음 강의로 넘어갈게요! 감사합니다❤️
이런 정성스러운 출책 감사해요 ❤️
출첵합니다! 오늘은 froggy game 까지 마무리하고 내일부터 실전 함께 잘 따라가보려고요! :) 여기저기서 배웠던 개념들 정리하기 넘 좋은 시간이었습니다!
출첵합니다>< 드디어 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 #1,2 and 3 완료 후 개구리들과 즐거운 게임도 한판 했습니다~~
항상 즐거운 강의 감사합니다!
출첵! 정말 훌륭한 강의 감사합니다. css 막막했는데, 어쩜 목소리도 귀에 그렇게 잘 들어오고 설명을 맛깔나게 하시는지요!! 코드 뿐만아니라 엘리님은 가르치는데 재능이 있으세요, 응원합니다.
정말 도움이 많이 됐어요!! flexbox를 쓰면서도 제대로 알고 쓰는것 같지 않았는데 이번에 눈이 트인 것 같아요. 좋은 강의 감사합니다!!
출첵이용! 내주신 숙제까지 하니 복습 겸 이해가 더 쏙쏙 잘되는 것 같아요! 항상 감사드려요!!
감사합니다 , html /css 수업을 듣게 된지 1주일 정도 되었는데 , 과제 할 때 많이 도움이 되었습니다
flex는 사랑입니다 💙출퇴근길에 하나씩 챙겨보고 있어요!! 일할때 개념이 확실히 잡혀있지 않은 느낌이 들어서 불편했던 점들이 채워져서 좋은 것 같아요 !! 고정해주신 댓글도 도움이 되어요!!😍 좋은 영상 감사해요
수민님~ 어쩜 그냥 보시지 않고 매 영상마다 정성 가득한 코멘트 남겨 주셔서 감사해요 ❤️
플렉스는 사랑입니다 ❤️ 정말 동감입니다 ❤️ 플렉스 없던 시절 스타일링 하던 그 지옥같은 기억을 떠올리고 싶지 않네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
홀리몰리한 영상입니다.. 영원히 해주세여..
마지막에 소개해준 게임 덕분에 개념 이해가 더 잘되는 것 같아요 너무 고마워요
저두 감사합니다 ❤️
출석체크 합니다!!! 선물이 숙제가 아니라 정말 선물같이 느껴지네요~ 재밌게 연습할 수 있어서 너무 좋아요~
마지막 24단계에서 좀 시간걸렸지만 ㅎ 전부 완료했습니다!!
꺄하 🥰 이론 수업 다하셨네요 🙌
출석 체크해요! 프론트엔드 개발을 할 수록 HTML, CSS 기본의 중요성을 느껴서 또 정주행하고 있어요. 너무 좋은 콘텐츠 감사합니다~
아무생각없이 들어왓다가 계속봣네..
우와우 나도이제 프론트엔드개발자!! 영상최고!!
역시, 설명을 참 이해되기 쉽게 이쁜 목소리로 잘 하시네요..
아잇 :) 좋은 피드백 감사합니다 ❤️
영상 잘 보고 있습니다! 👏
저는 엘리님 강의 영상은 전체적인 원리를 이해하려고 보고 있어요!
앞으로도 꾸준히 챙겨볼게요
오~ 이렇게 또 코멘트 남겨 주셔서 정말 감사합니다 🙌
부족하거나 필요한 영상 있으시면 언제든지 요청해 주세요 🙏🏼
출석입니다. 정립안되었던게 잘 정립되네요!! 게임을 해본 적이 있지만 다시 한 번 해보러 갑니다!!
늘 보기만 하고 넘어갔었는데 오늘은 엘리님이 꿈에 나오셨어요,, 스승의 날을 감사하라는 의미일까요? 엘리님 영상으로 많이 배우고... 길을 못 잡고 있던 사람인데 목표가 생기고 꿈이 생기고 있어요! 좋은 컨텐츠 제작해주셔서 감사합니다 언젠가 직접 감사 인사를 전하구 싶네요... 직접 뵐수 있을 그날까지 열심히 하겠씁니다! ❤️
어멋! 제가 꿈에 나왔나요? 혹시 꿈에서 Don't forget to code your dream이라고 말하던가요? 하하하
그래도 잊지 않고 이렇게 코멘트 남겨 주셔서 정말 감사해요. 마음이 따뜻해지네요. 저 현업에서 기다리고 있을께요 🤗
마지막에 개구리 사이트 너무 유용하네요 이해는 했지만 조금씩 긴가민가 했던 것들이
확실히 숙지가 잘 됩니다! 좋은 사이트 알려주셔서 감사합니당~~
프론트엔드 입문 너무 재밌게 부담없이 잘 보고 있어요!! 다이나믹한 영상들 너모 조아요.
flexbox를 배워도 잘 이해가 되지 않았는데 이 영상에서 단번에 이해됐어요
감사합니다
앨리쌤 덕분에 flex box 너무 잘 알아갑니다! 감사합니다~~~