웹페이지 Layout을 잡아 봅시다.

Oct 23, 2017 by zzolain

웹페이지를 만들며 가장 골치 아팠던 부분 중 하나는 Layout을 정돈하는 것이었습니다.

원하는 요소를 원하는 위치에 배치하는 것이 쉬운 일이 아니더군요.

‘아오~ 한글 파일이면 10분만에 다 만들텐데!’ 라고 생각한 것이 한, 두 번이 아닙니다.

BOX model과 padding, margin을 공부한 뒤로 이를 적극 활용해서 어찌어찌 화면을 구성해 왔으나,

브라우저나 화면 크기에 따라 layout이 조금씩 다르게 보이는 문제가 있었으며, 무엇보다 유지보수하는 것이 굉장히 힘들었습니다.

한 가지 요소를 조금만 이동시켜도 연관된 다른 요소들을 픽셀 단위로 수정시켜야 했으니까요.

300

위와 같이 좌측, 중앙, 우측으로 정렬을 시킬 방법은 없을까요?

FLEX

이 모든 문제를 해결할 CSS 속성이 있었으니!

이름하여 갓 FLEX!

flex는 padding이나 width 등과 같이 수치를 수정하는 것이 아니라 ‘처음, 중앙, 끝’ 등과 같이 논리적인 값으로 layout을 수정합니다.

300

space-between, 요소들 간 간격을 균등하게 하라는 설정을 적용한 결과입니다.

이와 같이 flex는 요소 간의 관계, 혹은 배치를 논리적으로 결정하는데 유용합니다.

FLEX 사용법

flex를 사용하기 위해서는

반드시 두 종류의 요소가 필요합니다.

한 가지 요소는 정렬이 될 요소이며, 나머지 하나는 정렬의 기준, 혹은 틀이 될 요소입니다.

보통 container 혹은 부모 요소라고 표현하는 그것입니다.

예컨대, item1과 item2를 가운데로 정렬을 시키고 싶을 때 무엇을 기준으로 정렬을 시킬지 정렬 기준이 있어야 합니다.

이때 그 기준이 되는 것이 container, 부모 요소 입니다.
```
<div class="container"> // 부모 요소
  <div class="item1"></div> // 자식 요소1
  <div class="item2"></div> // 자식 요소2
  <div class="item3"></div> // 자식 요소3
</div>
```
부모 요소에 display : flex 속성을 줍니다. 필수!
```
.container {
    display : flex;
}
```
나머지 원하는 속성을 입력합니다.

FLEX 속성의 종류

justify-content : 요소들의 가로 정렬을 정의 합니다.

.container {
  display : flex;
  justify-content : flex-start; 
                           // 모든 자식 요소들을 왼쪽(시작)으로 정렬시킵니다
  
                           : flex-end;
                           // 우측(끝) 정렬
  
                           : center;
                           // 중앙 정렬
  
                           : space-between;
                           // 요소들 사이 간격을 균등하게 만들어 정렬합니다
  
                           : space-around;
                           // container와의 간격을 포함한 모든 간격을 균등하게 정렬합니다
}

align-items : 요소들의 세로 정렬의 정의 합니다. justify-content와 반대되는 속성입니다.

.container {
  display : flex;
  align-items : flex-start;
			// 모든 자식 요소들을 상단(시작)으로 정렬시킵니다
  
                      : flex-end; 
                        // 하단(끝) 정렬
  
                      : center; 
                        // 중앙 정렬
  
                      : space-between; 
                        // 요소들 사이 간격을 균등하게 만들어 정렬합니다
  
                      : space-around; 
                        // container와의 간격을 포함한 모든 간격을 균등하게 정렬합니다
}

flex-direction : 요소들의 정렬 방향을 정의합니다.

.container {
    display : flex;
    flex-direction : row; 
 			    // 요소들을 가로로 정렬합니다
  
                          : column; 
                          // 요소들을 세로로 정렬합니다
  
                          : row-reverse; 
                          // 요소들을 가로로 정렬하되 역순으로 정렬합니다(1,2,3 -> 3,2,1)
  
                          : column-reverse; 
                          // 요소들을 세로로 정렬하되 역순으로 정렬합니다
}

위 3가지 정도가 가장 많이 쓰이는 속성들입니다.

소개 드린 내용 외에도 flex 속성에는 개별 요소만을 단독으로 정렬하는 방법(align-self),

jusify-content와 align-items가 flex-direction의 값에 따라 각자 역할이 뒤바뀌는 것 등

본문에 설명되어 있지 않은 기능이나 옵션들이 많이 있습니다.

이들에 대한 자세한 설명은 제가 공부한 생활코딩에 영상 강의로 잘 나와있어 소개합니다.

생활코딩 : CSS- flex 강의 https://opentutorials.org/course/2418/13526

또한 flex의 기능들이 서로 뒤섞여 헷갈릴 여지가 있기에 이를 재미있게 게임으로 익힐 수 있는 사이트를 소개합니다.

http://flexboxfroggy.com/

개구리를 각자의 색깔에 맞는 연잎 위에 올려주면 다음 단계로 넘어갈 수 있는 게임입니다.

왼쪽에 비워진 칸에 flex 관련 명령어를 입력하여 정렬시키면 됩니다.

각 명령어가 필요한 상황을 이해하는데 도움이 되더군요 :)

마지막으로 flex 기능을 연습할겸 만든 카카오톡 메신저 clone 페이지 모습을 소개하고 이번 글은 마무리 하겠습니다.

그간 익힌 HTML과 CSS 내용들을 종합하여 마무리 할겸 만들고 있는 페이지인데요,

flex를 사용하니 Layout 잡는 난이도가 확 내려가더군요! ~~~LAYOUT? 더이상 무섭지 않아요!~~

덕분에 왼쪽의 엉망진창 같던 페이지를 우측과 같이 예쁘게 화장시켜줄 수 있었지요.

이번 글은 여기까지 입니다.

그럼 좋은 하루 되세요 :)

#dev

<< 목록