웹페이지 Layout을 잡아 봅시다.
웹페이지를 만들며 가장 골치 아팠던 부분 중 하나는 Layout을 정돈하는 것이었습니다.
원하는 요소를 원하는 위치에 배치하는 것이 쉬운 일이 아니더군요.
‘아오~ 한글 파일이면 10분만에 다 만들텐데!’ 라고 생각한 것이 한, 두 번이 아닙니다.
BOX model
과 padding
, margin
을 공부한 뒤로 이를 적극 활용해서 어찌어찌 화면을 구성해 왔으나,
브라우저나 화면 크기에 따라 layout이 조금씩 다르게 보이는 문제가 있었으며, 무엇보다 유지보수하는 것이 굉장히 힘들었습니다.
한 가지 요소를 조금만 이동시켜도 연관된 다른 요소들을 픽셀 단위로 수정시켜야 했으니까요.
위와 같이 좌측, 중앙, 우측으로 정렬을 시킬 방법은 없을까요?
FLEX
이 모든 문제를 해결할 CSS 속성이 있었으니!
이름하여 갓 FLEX
!
flex
는 padding
이나 width
등과 같이 수치를 수정하는 것이 아니라 ‘처음, 중앙, 끝’ 등과 같이 논리적인 값으로 layout을 수정합니다.
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
의 기능들이 서로 뒤섞여 헷갈릴 여지가 있기에 이를 재미있게 게임으로 익힐 수 있는 사이트를 소개합니다.
개구리를 각자의 색깔에 맞는 연잎 위에 올려주면 다음 단계로 넘어갈 수 있는 게임입니다.
왼쪽에 비워진 칸에 flex
관련 명령어를 입력하여 정렬시키면 됩니다.
각 명령어가 필요한 상황을 이해하는데 도움이 되더군요 :)
마지막으로 flex
기능을 연습할겸 만든 카카오톡 메신저 clone 페이지 모습을 소개하고 이번 글은 마무리 하겠습니다.
그간 익힌 HTML과 CSS 내용들을 종합하여 마무리 할겸 만들고 있는 페이지인데요,
flex
를 사용하니 Layout 잡는 난이도가 확 내려가더군요! ~LAYOUT? 더이상 무섭지 않아요!
덕분에 왼쪽의 엉망진창 같던 페이지를 우측과 같이 예쁘게 화장시켜줄 수 있었지요.
이번 글은 여기까지 입니다.
그럼 좋은 하루 되세요 :)