이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css지옥에서 탈출하자(3) - display와 flex, 세로로 뭔가 배치하고 싶다면 flexbox를 쓰자, (추가로 div를 flex로 나열, 비율에 맞게 div 세로로 배치)
flex는 여러모로 좋다. 실존에서 css는 그 특유의 지랄맞은 난이도 때문에 여러가지일을 돌아서 한다.
그 와중에 그나마 직관적이게 해줄수 있는게 flex이다.
display를 flex로 딱 설정하는 순간 css배치는 아주편해진다.
이번에는 여러분이 모두 한번쯤은 생각해봤을만 문제 3가지를 해결해주려고한다.
1. header나 nav에서 한 엘리먼트만 좌측에 붙히기(좌측에 엘리먼트 정렬하기)
여러분은 위와같은 구성을 본적이 있을 것이다.
이 구성이 매우 쉬운 구성같지만 사실 css를 하다보면 이런 구조가 은근히 짜증나는 구조이다.
구역은 크게 3군데로 나뉜다.
먼저 logo아이콘이 있는 구역, 그다음 list가 담길 구역, 마지막으로 최우측에 사용자 정보구역.
일단 가운데 정렬과 list 가로 배치를 사용하기 위해서 만든 트릭은 제쳐놓고 생각하더라도 저 퍼런 구역이 항상 끝에 오게 배치하려면 어떻게 해야할까?
보통 float left,right를 써서 위 같은 구조를 만드는데 사실 float이라는 css는 쉬운 css가 아니다.
이놈도 짜증나기는 매한가지다. float에 대한 설명만 한 포스팅을 잡아먹고 또한 필자가 추후에 포스팅을 할 것이니 거기에 대한 설명은 추후에 하도록 하겠다.
일단 위 구성의 css를 보는순간 트릭의 쓰나미를 보고 한숨이 나올 것이다.
하지만 여러분은 더 직관적이게 위와같은 모형을 구성할 수 있다.
margin-left: auto - 왼쪽에 가능한한 가장 큰 마진을 준다 => 제일 오른쪽에 붙게된다.
css가 원래 복잡해서 잘 못느낄수도 있을 것이다.
여러분이 해준작업은 딱 하나다.
제일 외곽의 outer를 flex를 걸어주고 파란색에 margin-left: auto를 걸면 끝난다.
짜증나게 float으로 하거나 아니면 position: absolute로해서 수학자 마냥 계산해가면서할 필요가 없다.
2. 바닥에 붙는 footer
flex-direction: column - 원래는 row로 설정되있다. 정렬방향을 왼쪽에서 오른쪽이 아니라 위에서 아래로 바꾼다.
바닥에 붙어서 크기에 유동적으로 변하는 footer(혹은 유동적으로 변하지 않더라도 어떤 크기의 화면이든 동등한 크기를 보장하는 footer)
위 같은 상황은 사실 뭐 어렵다기 보단 수학계산을 잘해서 배치하는 경향이 있었다.
이제는 그럴 필요 없다. margin-top: auto 한방이면 밑에 찰싹 달라붙게 된다.
margin-top: auto - 위쪽에 가능한한 가장 큰 마진을 준다 => 제일 아래쪽에 붙게된다.
이제 다시 여러분들은 손쉽게 footer를 제작할 수 있다.
3. 수직 중앙정렬
css기법중에서 수평 중앙정렬은 매우 쉽지만 수직 중앙정렬은 꽤 어렵다.
이상하게 이걸 어렵게 만들어 놔서 여러가지 방법으로 테크닉적으로 구성하게 된다.
필자가 자주쓰는 테크닉은 table로 display를 만들고 table-cell로 vertical-align을 center로 주는 방법을 주로 쓴다.
그 외에도 여러가지 트릭이 있지만 소개하진 않겠다. 사람마다 쓰는 방식에 차이가 있다.
하지만 이제 가장 쉬운건 flex를 이용한 것이다.
여러분이 이때까지 글을 유심히 읽었다면 어떤 테크닉을 쓸지 추론이 될 것이다.
첫번째로 div안에 div가 중앙정렬되었고 안쪽 div안에 span이 중앙정렬되었다.
코드의 원리는 매우매우매우 간단하다.
바깥쪽에 flex를 걸고 안쪽에 margin:auto를 거는 것이다.
서로 되는데로 밀게 되기 때문에 균형을 유지하여 한가운데 위치하게 된다.