페이지 레이아웃

웹 사이트의 성격과 사용 목적에 맞게 필요한 요소들을 배치하는 작업을 말한다.

 

'목적에 맞게' 가 중요한데, 알맞은 배치는 사용자 경험 측면에서 매우 중요하다.

 

CSS로 화면을 구분할 땐, 수직 분할과 수평 분할을 차례대로 적용하여 작업을 진행한다.

• 수직분할은 화면을 수직으로 구분하고, 콘텐츠가 가로로 배치된다.
• 수평분할은 화면을 수평으로 구분하고, 콘텐츠가 세로로 배치된다.

 

레이아웃 작업을 진행하다 보면, HTML 문서가 가진 기본 스타일이 방해가 될 수 있다.

박스의 여백이라던지, 시작 위치라던지 기본 스타일이 있기 때문에,

내가 만드려는 레이아웃에 맞게 레이아웃을 리셋시켜주는 작업을 필요로 한다.

 

다음은 기본 스타일을 제거하는 CSS 코드의 예시이다.

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   padding: 0;
}

 

레이아웃을 할 때, 박스 요소를 정렬하는 작업이 복잡하고 여간 쉬운일이 아니다.

 

이를 해결하기 위해, Flexbox가 등장했다.

Flexbox는 말 그대로 'Flex(유연한)' 박스를 유연하게 늘리거나 줄일 수 있다.

display: flex;

부모 박스 요소에 적용해서, 자식 박스의 크기와 방향을 결정하는 레이아웃 구성 방법이다.

 

이를 적용해주게 되면,

요소들이 왼쪽부터 가로로 정렬이 되고,

콘테츠만큼의 공간을 차지하게 된다.

display: flex; 적용 x

 

display: flex; 적용 o

(출처 : https://www.biew.co.kr/entry/CSS-FlexFlexible-Box-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC )

 

Flexbox 속성들에는 부모 요소에 적용해야 하는 것들과 자식 요소에 적용해야 하는 것들로 나뉜다.

 

부모 요소에 적용해야 하는 Flexbox 속성들은 주로 요소의 정렬 설정에 사용된다.

• flex-direction 속성은 정렬 축을 설정하기 위해 사용한다. 기본값으로는 가로 정렬되어 있다.

속성 값에는

row(기본값)
column(세로정렬)
row-reverse(역 가로정렬)
row-column(역 세로정렬)

 

• flex-wrap 속성은 줄 바꿈 설정하기 위해 사용한다. 기본값으로는 줄 바꿈 하지 않는다.

속성값에는

nowrap(기본값)
wrap(줄바꿈)
wrap-reverse(아래서부터 채워지면 줄바꿔서 위로)

 

• justify-content 속성은 축의 수평 방향으로 정렬하기 위해 사용한다.

속성값에는

flex-start
flex-end
center
space-between
space-around

이 속성은 flex-direction의 속성값에 따라 달라진다.

 

• align-items 속성은 축의 수직 방향으로 정렬하기 위해 사용한다.

속성값에는

stretch
flex-start
flex-end
center
baseline

 

 

자식 요소에 적용해야 하는 Flexbox 속성들을 알아보자.

이 속성들은 요소가 차지하는 공간을 설정하는 역할을 한다.

• flex 속성은 요소의 크기를 설정한다

속성값에는

grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

들이 있다.

이 속성의 기본 속성값은

flex: 0 1 auto;

이고,

팽창 지수는 절대적인 크기가 아니라 전체 팽창 지수 총합에서의 비율로 공간을 차지한다.

 

shrink와 basis에 관한 내용은 다음 사이트를 이용하면 자세히 알 수 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox