Flex를 사용하여 웹페이지 레이아웃 잡는 방법

안녕하세요.

오늘은 Flex를 사용하여 웹페이지의 레이아웃 잡는 방법에 대해서 알아보겠습니다.

flex란?

• flex는 웹페이지를 만들때 layout을 쉽게 만들 수 있도록 도와주는 CSS 속성 입니다.

일반적인 웹페이지 구성

모두 div로 나누지 않고, 위에 그림과 같이 시멘틱태그를 사용하는 이유는?

• 시멘틱태그를 사용하면 웹페이지의 태그 구조를 쉽게 파악할 수 있습니다.
• 검색 엔진에 걸릴 확률이 높아 집니다. 

시멘틱태그(semantic tag)란?

• 특정한 태그에 의미를 부여한 것.
• header는 제목, section은 본문 등.. (생활코딩 참조)

flex 기본 속성

• flex를 사용하기 위해서는 display : flex 속성을 부여해야 합니다.
• flex-direction 을 사용해서 정렬방향을 설정 합니다.
• flex-basis 를 사용하여 고정 영역을 설정 합니다.
• flex-grow 를 사용하여 커지는 비율을 설정 합니다. (윈도우의 크기에 따라 사이즈는 달라지므로)
• flex-shrink 를 사용하여 작아지는 비율을 설정합니다. (윈도우의 크기에 따라 사이즈는 달라지므로)

flex를 사용하여 일반적인 웹페이지 layout을 구성하기

• 아래 영상을 보고 따라해보세요 ^^

모두 즐거운 코딩하세요~