Fall in IT.

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

프로그래밍언어/Html & Css

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

D.Y 2017. 3. 4. 23:43

안녕하세요.


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



flex란?

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

일반적인 웹페이지 구성




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

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

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

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

flex를 사용하여 일반적인 웹페이지 layout을 구성하기
  • 아래 영상을 보고 따라해보세요 ^^



모두 즐거운 코딩하세요~


Comments