flex란? flex 레이아웃 배치 1차원 방식(가로나 세로 중 한 방향)으로 효과적으로 레이아웃 배치할 수 있는 스타일 속성 flex 사용법 부모 요소 (flex-container) display: flex; 또는 display: inline-flex; 배치시키고 싶은 바로 위 부모한테 주기 (할아버지태그 ) 자식 요소(flex-item) flex-item들은 부모 요소 내 배치 flex 부모요소 속성 flex 설정 display: flex; inline-flex; * flex-item 이 원래 가지고 있는 박스 성격 (block, inline, inline-block) 은 무시됨 flex 주축 방향 설정 flex-direction: row; row-reverse; column; column-reverse; - row; 가로(기본값) - row-reverse; 가로 반대로 - column; 세로 - column-reverse; 세로 반대로 flex 줄바꿈 설정 flex-wra...
![[css 13.] flex 사용하여 레이아웃 배치하기 (부모-자식 속성 정리)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjZfMjc3/MDAxNzE0MDYyMDY5NjAx.CltmOANlUKlZqm9_-2LdKZLO6wj4bKewUWBWP7vjX68g.CxM6n7TEug-b1aNb0MRvPJpVheRUPnGW3UzrGoA825Ug.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-024.jpg?type=w2)
#
cssflex
#
cssflexcontainer
#
cssflexitem
#
cssflex가로세로
#
cssflex적용
#
flex레이아웃
#
flex배치
#
flex속성
#
flex적용
![[공유] 일러스트 정리](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MDhfMTQz/MDAxNzEyNTQ3MTkzMDgw.gWeZgYe3p3ofwKcgdavR6CV-2HPOtaKK_YFqxZQ9g0Yg.v2GkiqSB9164vyKaYgfngByrW-In6f-U0Imn7YnaHLAg.JPEG/%C0%CF%B7%AF%BD%BA%C6%AE.jpg?type=w2)
![[css 6.] 박스모델 - content, padding, border, margin](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjBfNTkg/MDAxNzEzNTQyMDg5MDQ1.aOENkvcn3qtoG_BNGyL9C-dHrxUgLQLeWc8usukwH1wg.AbAfdsKeMal48g4Fak6_HFWT7VXBGSlY1tWcj821NoMg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-016_%281%29.jpg?type=w2)
![[ITQ] 시험 원서접수 & 합격기준 & 기출문제 (OA MASTER란?)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MDVfMjgz/MDAxNzE0OTExNTEyODUx.WgfXm1QlW2imKULuHPpbwAaNaH2k_TwA7MuqymPIKIsg.snVmBKoGY2NjrmVL2-odzOkXfac7woDs55ZCRjr7ezog.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-002_%281%29.jpg?type=w2)
![[GTQ 포토샵] 1급 자격증 시험 핵심정리(+ 단축키)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MDhfMjgx/MDAxNzE1MDk0MjU3OTE4.8V_RuexsmUm-V0tu6U26j5UruZN6Aebtlt5pkgQMiPgg.WEWSLEu6Kp0dlLCsJ4WVjfKOcA8yLP_VOSW0mVkvpLAg.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-_1_-003.jpg?type=w2)
![[javascript 3.] 자바스크립트 입력/출력 방법](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MDdfOTIg/MDAxNzE3NzI4MDA0NjUw.XbbiDZQq4Bu10uSGFEcHUL1krX7HMLJXIZExLqIaN9Eg.vihRrs90oSwfePXvlF0RJTdzG3hBiudjM3K2skHd6_4g.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-003.jpg?type=w2)
![[javascript 5.] 자바스크립트 자료형 변환](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MTFfMjc1/MDAxNzE4MDM3MTQ1MDM4.MDwBX11gv_UWbQix0-Bkma_QvV_c4LX-gNN8_JpCBOog.9c4gghmhb2ciUITcG3mFDmbSZDNaJbYnAlBvqhqhUV4g.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-005.jpg?type=w2)