CSS Flex Layout

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다.Flex Layout을 위해 가장 처음으로 해야할일이 바로 display 정의입니다.display: flex : Block 특성의 Flex Container를 정의합니다

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다. (최고의 강의입니다. 꼭 보세요. 시간은 많이 걸리지만...😂)최종 목표화면프로젝트 깃허브 : https://github.com/jonasschmedtman

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다.SVG는 벡터 이미지를 표현하기 위한 포맷으로 W3C에서 만든 벡터 이미지 표준입니다. (일반적인 PNG, JPEG, GIF는 래스터 이미지 혹은 비트맵 이미지라고 부릅

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다.가장 먼저 header의 display를 flex 시켜줍니다. 이러면 되면 flex-direaction이 기본적으로 row이기 때문에 아래 그림처럼 한줄로 표시될 겁니다

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다.저번시간에 이어서 이번시간에는 header의 마지막 오른쪽 부분을 디자인해보겠습니다.일단, user-nav도 역시 flex layout을 적용해줍니다.그러면 user-n

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다.크게 구조를 표현해보면 다음과 같다.sidebar(nav)side-nav(ul)side-nav\_\_item(li)side-nav\_\_link(a)side-nav\_\

본 포스팅은 유데미 Advanced CSS and Sass강좌 사이트를 공부하면서 정리한 내용입니다.일단 gallery 또한 flex layout을 적용해서 figure 3개가 한줄로 정렬되도록 해줍니다. 이미지 크기는 너무 크니까 영역에 맞도록 width: 100%로