CSS - Flexbox : 레이아웃을 마음대로!
Vložit
- čas přidán 28. 08. 2024
- CSS에서 레이아웃을 구현하는 것이 꽤 까다롭습니다.
flexbox를 이용하면 적은 코드로 많은 일을 할 수 있습니다.
목차 :
00:34 사례
04:15 원리
05:08 flex-direction
07:31 justify-content
08:25 주축, 교차축
13:38 flex-basis
14:42 flex-grow
16:55 flex-shrink
19:16 flex-wrap
이 수업으로 알게 될 것들.
display:flex은 flex 기능을 활성화 한다.
flex-direction:row는 수평, column은 수직으로 자식을 배치한다.
justify-content : 주축 방향으로 배치를 결정한다.
align-items : 교차축 방향으로 배치를 결정한다.
flex-basis : 자식의 기본 크기를 지정한다.
flex-grow : 여백을 분배하는 정책을 지정한다.
flex-shrink : 여백을 각출하는 정책을 지정한다.
flex-wrap : 여백이 없을 때 줄바꿈 정책을 지정한다.
수업이 끝나면 레이아웃에 대한 자신감이 생겨날 것입니다.
솔직히 css에서 제일 중요한 거인듯
제가 생활코딩님 web2 - CSS 강의 듣고 제가 구축하고 싶은 사이트를 만들다가 힘들어 했던 부분이 있었는데 flex 강의 듣고 바로 뚝딱!! 만들었습니다
질 좋은 무료 강의 정말 감사드리고 목소리도 정말 좋으시고 앞으로 더 신세 많이 지겠습니다 ㅎㅎ 😚
항상 존경 드립니다. 더하기 보단 나누기가 다음이 듯 머신러닝 2탄 기대 합니다.
모든 강의 정독 중입니다
감사해요 정말
아무것도 모르지만 새로운 강의 나올 때마다 흥분되는 이 느낌. 😅
basis는 기본 크기를 결정한다.
grow는 남는 여백을 어떻게 분배할까를 결정한다.
shrink는 부족한 여백을 어떻게 각출할까를 결정한다.
오~완벽한 설명!
국비과정으로 개빌자 코딩배우는데 구독하고 갑니다 좋은정보감사합니다
현업에서 매일 씁니다^^
오 기대하던 수업이예요
선생님 항상 지리십니다❤
그 예전에 frog뭐시기 테스트 하면서 수업내용 이해하는데 도움 많이 받았었는데요 좋은 내용 감사합니다.
감사합니다!
css 공부하고 있는데 ㅜㅜ 빨리 너무 보고싶어요
지금 보세요! 재미있어요!(라고 저는 생각합니다)
캬 오늘 너무 좋은거 많이 배운당
flow 매번 헷갈렸는데 깔끔한 정리 감사합니다 ~
엄청 도움됩니다
basis는 기본 크기를 결정한다 grow는 남는여백을 어떻게 분배? shrink는 부족한 여백을 어떻게 각출 할 것인가? wrap은 주축방향에 여백이 없으면 교차측방향으로 축이 하나 추가 된다
책, 문서 백날보는것보다 20분 강의하나가 더 이해잘되네 ㅠ 썩을
벌써 완강 하셨나요?!
@@coohde sure
좋다
강의 감사합니다. 그런데 그냥 html 파일에선 잘 동작하는데 이상하게 vue.js 의 style 태그 안에서 동일하게 코딩을 해도 align-items:strech 가 되지 않고 작게 보입니다. 뭐가 다른걸까요..?
이고잉님과 같은 프레젠테이션 만드는 방법도 강의로 나오면 좋겠습니다..너무깔끔하네요..
안녕하세요 잘듣고있습니다. 회사홈페이지 만드는 중인데 flex-shrink개념이 잡히는듯 안잡히는듯 혹시,,제가 캡쳐해놓은거 봐주실수 있으신가용?..item안에 있는 이미지가 삐져나오고 중앙으로 안가서...이틀동안 암것도 못하고 있지만, 여전히..T.T
jsbin.com/?html,output 이런 서비스를 이용해서 공유해주시면 더 좋을 것 같아요.
선생님 이번에 html css 자바스크립트 에 입문한학생입니다 혹시 데이터베이스랑 백엔드 영상이 10년전꺼인데 지금봐도 괜찮을까요??
그리고 이번에 국비지원으로 웹프로그래밍을 배우는 학원에 등록했습니다 미리 공부하는데 너무 많은 도움이되고있어요 정말 감사합니다.
구체적인 수업을 말씀해주시면 판단에 도움을 드릴게요.
@@coohde 배우고 있는 과정이(스마트웹&콘텐츠개발) 프론트엔드 프레임워크 기반 자바 웹 콘텐츠개발 이라는건데 나중에 취업을 한다고하면 백엔드와 DB쪽으로 가고싶습니다 아직 어떤것들이있는지 정확히 몰라서 방향을 못잡고있습니다. 선생님 영상 HTML CSS 자바스크립트를 다보고 백엔드와 데이터베이스를 시청할려고 합니다.
네 그렇게 하시면 됩니다. 다만 이 수업 보다는 opentutorials.org/course/3084 를 보시는게 좋을 것 같아요
@@coohde 네 감사합니다 열심히하겠습니다 선생님.
레이아웃을 구현할때 flexbox랑 position:relative 속성이랑 어떤걸 쓰는게 더 좋을까요? (반응형 까지 생각해서)
나두 궁금하당!
7년전에 올리신 css입문 강좌 다 봤는데 그다음은 뭘 수강하는게 좋을까요??
어떤 목적이신지 알려주시면 좀 더 정확한 답변 드릴 수 있답니다~
1등^^
감사합니다!