flex-direction 썸네일형 리스트형 [CSS Layout] Flex box 1. 기본 방향_flex-direction 응용 지난번 살펴본 Flex Box의 기본방향 'flex-direction' 을 응용해보면, 어떨까 갑자기 생각이 나서.. 기본적인 홈페이지의 구성을 하나하나 잡아가보면서 진행하면 어떨까 싶어서요. 대강 막 쳤어요. 상단에 네비게이션 바, 가운데 프로모션 이미지, 아래에 메인 내용, 오른쪽에 별도의 섹션을 넣고, 아래에 footer를 달겁니다. 우리가 살펴봤던것처럼, flex의 방향만 가지고도 이렇게 배치를 잡아나갈 수 있습니다. row로 해서 잡아나가도 상관없고, column으로 해서 잡아나가도 상관은 없어요. 우리는 일단 해볼겁니다. navbar promo main aside footer 더 세부적인 내용으로는, 네비게이션 바에 내용들을 채워나간다던가, 메인 영역에 카드(이미지와 텍스트가 삽입되어 있는)를.. 더보기 [CSS Layout] Flex box 1. 기본 방향_flex-direction w3schools.com 에서 소개하는 바와 같이, Flex box의 가장 큰 강점은 디자인을 float 나 position을 설정하지 않고도 유연성있는 반응형 레이아웃 구성을 할 수 있도록 해준다는게 있어요. 모던 웹브라우져에서는 거의 다 지원되는데, I.E 10에서는 지원이 잘 안되는 경우가 있다는 Naver D2 2019년 기록이 있네요. 모바일웹에서는 문제없다고 하고, 다른것들에 비해 배우기도 쉬워서, 회사에서 퍼블리싱작업할 때 이걸 사용하기도 했습니다. 여러 사이트에서도 찾아서 예시를 볼 수 있으니 참조해보시면 좋겠습니다. 1. 편한 에디터를 열어서 index.html 을 만들어줍니다. 1 2 3 A Flexible Layout must have a parent element with the d.. 더보기 이전 1 다음
