이 시리즈는 필자가 웹프로그래밍을 겪으면서 생각처럼 잘안되고 짜증나는 css를 효율적이게 쓰기위해서 만든 시리즈이다.
여기에 들어온 여러분들도 이 쓰레기 같은 css의 고통을 같이 덜수 있기를 바란다.
참고:
css지옥에서 탈출하자(1) - 인라인 요소(inline element)와 블록 요소(block element)는 다르다.
css지옥에서 탈출하자(2) - display와 인라인(inline), 블록(block) 그리고 div를 display를 이용해서 옆으로 나열
css로 뭔가를 배치하는 작업은 언제나 짜증난다.
전혀 직관적이지 않고 모든 룰을 이해해야만한다. 그리고 부모에 종속적인게 너무 많고 문법적 설탕도 덜하다.
옛날 부터 써오던걸 수정하면서 사용하다보니 뭔가 레거시의 끝판왕이 된 느낌이다.
물론 새로추가되는 기능으로 쉽게 만들려는 시도는 css도 하고 있다.
그중에서 가뭄에 단비 같은 녀석이 바로 flexbox이다.
이는 css내에서 신의 은총같은 존재이며 한번 사용하기 시작하면 그 맛에 헤어나올수 없는 아주아주 강력한 기능이다.
이 flexbox에 대해서 다 소개하려면 아주 긴 내용이 되니 이번에는 세로로 영역을 분할하고 쪼개는데 중점을 두겠다.
어짜피 가로로 영역을 분할하는 작업은 뭐 쉬운작업이니까 그 부분은 따로 할 수 있을 것이라고 생각이 된다.
flexbox의 선언은 css로 display: flex;로 선언한다.
1. flexbox내부에 고정된 크기의 엘리먼트 배치
display:flex로 선언하게 되면 그 아래의 모든 엘리먼트의 크기는 block을 따르는것 처럼 보인다.
기존의 display는 모조리 무시된다. 따로 정해줘도 무시하고 진행한다.
크기를 따로 지정하지 않으면 부모의 크기가 되며 만약 크기를 지정한다면 그 크기가 된다.
하지만 이 flex는 잉여공간의 원리로 생각해야한다.
위의 예제의 경우 container의 공간을 써서 없애버렸다고 생각하면편하다.
무슨말인고 하면 container는 총 300의 공간을 쓸수 있다. 그 중에서 50*4를 사용했으므로 100의 공간이 남게된다.
이게 당연하다고 생각할 수 있겠지만 나중에 나올 개념을 설명하기 위해서 미리 말해둔다.
2. flexbox내부에 상대 크기의 엘리먼트(비율로 정해서) 배치
See the Pen flex dynamic by justkukaro (@kukaro) on CodePen.
flex를 이용하면 세로로 비율을 정해서 배치하는것 조차 아주 편리하게 할 수 있다.
기존에는 전체 길이를 구하고 퍼센트에서 전체길이를 빼고 어쩌고 저쩌고 하면서 진절머리 나게 했어야했는데 지금은 그렇지 않다.
여기서 잘 보면 각각의 자식들은 flex라는 일종의 비율을 가지고 있다.
모두 1이 되어있으므로 동등하게 보이는 것이다.
이번엔 빨간색에게 3을 줘보자. 그랬더니 비율이 3만큼 늘어났다.
3. flexbox내부에서 상대크기와 절대크기의 엘리먼트를 혼용할 경우
상대크기와 절대크기를 혼용한다면(flex를 특정 녀석은 주고 특정 녀석은 주지 않는다면) 일단 공간을 사용한 절대크기 녀석들의 공간을 빼고
남은 잉여공간에서 비율을 계산하여 주게된다. 즉 a태그와 mydiv3이 남은 잉여공간에서 서로의 크기를 비교해서 각각 1의 비율씩 가져가게된다는 것이다.
이렇게 flex는 뭔가를 배치하기 위해서 태어난거 마냥 유용하게 배치할 수 있지만 아직은 모든걸 알려주진 않고 배치에 비율배치에 관련된것만 알려드렸다.
다음 포스팅에서는 flex를 사용한 유용하게 적용가능 테크닉들을 보도록 하겠다.