미래지향적 개발: flexbox 모델

[ 이글은 2018년 06월 13일에 최종 수정되었습니다. ]
§

Q: 그 웹디자이너가 왜 익사했는 줄 알아?

A: 그녀는 어느쪽으로 float 해야 할지를 몰랐어. (float:left, float:right)

web_designer_joke

출처: 미디엄

작년 여름에 아무생각없이 녹차마시면서 이 글을 읽다가 사레 걸린. ㅋㅋㅋㅋ

위의 유머글이 안 웃겼으면, 지금 이글을 읽으실 필요가 없으십니다. (정말로)

이글은 기초적인 css 를 익히신 웹디자이너 분들을 대상으로 작성하는 글 입니다. 시작합니다.


다들 box 모델, 혹은 float 모델/theory 를 어떻게 배우셨는지 모르겠지만, 개인적으로 저는 CSS2 (Level2) 에서 가장 익히기 어려웠던 개념이었습니다.

다행이 이글이 아직도 살아있네요. 간략한 float 개념에 대한 소개글.

https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/

저는 block 왼쪽에 사진 배열하는걸 이해 못해서 정말 힘들었었습니다. (vertical alignment 을 자동으로 조절되게 하는 법을 몰라서 개고생 했던 기억이 아직도 납니다. ㅠㅠㅠㅠ)

혹시라도 아직까지 float 모델에 대해 배우시지 않으신 분이 계시다면, 절대 배우지 마세요!!! 물론 기본적인 개념정도는 익혀두셔야 겠지만, 세부적인 기법들까지 익히려고 고생하지 말라는 얘기 입니다.

왜냐하면 레이아웃을 짜는데 있어서 정말 좋은 css3 기법을 제가 오늘 알려드릴거니까요. FTW!!

flexbox 에 대한 영문 튜토리얼들을 구글링 하면 찾아보실 수 있는데 (아직 흔하지는 않습니다), 저는 한국분들의 성향에 맞춰 실제사용 가능한/결과중심의 튜토리얼을 쓰려고 합니다.

일단 한국식 웹사이트에서 가장 흔하게 보게되는 레이아웃을 flexbox 로 짜서 보여드리겠습니다.

Korbuddy 님 사이트 에서 보고 ‘오, 이 테마 괜찮은데?’ 라는 생각이 들어 + Korbuddy 님 사이트에서 왜 Disqus 가 오작동 하는지 테스트 하기위해 저도 설치해보았습니다. Hueman 이란 테마 입니다. 테마 소스코드도 살펴봤는데, 딱 제수준이라서 (제가 배포용 테마를 짠다면 딱 이정도 수준으로 작성할 만한 “허접한” php 수준? ㅋㅋㅋ) 그런 부분도 맘에 드는 테마 입니다.

http://hackya.com/buddy/

레이아웃이 대략 이런 모습이죠.

header.php
index.php
footer.php

css 가 얼마나 간략하게 작성될 수 있는지, 아래 css 보시면 깜짝 놀라실 겁니다. 저 레이아웃을 짜는데 이게 전부 입니다.

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    font-weight: bold;
    text-align: center;
}
.wrapper > * {
    padding: 2em;
    flex: 1 100%;
}
.header,
.footer {
    color: white;
    background: #33363b;
}
.main {
    text-align: left;
}
.aside-1 {
    background: #3b8dbd;
}
.aside-2 {
    background: #82b965;
}

@media all and (min-width: 37.5em) {
    .aside {
        flex: 1 auto;
    }
}
@media all and (min-width: 50em) {
    .main {
        flex: 3 0;
    }
    .aside-1 {
        order: 1;
    }
    .main {
        order: 2;
    }
    .aside-2 {
        order: 3;
    }
    .footer {
        order: 4;
    }
}

실제 post 글을 넣어서 보시면 좀더 어떤 모습이 되는지 이해하기 쉬우실 것 같습니다.

Flexbox 로 구현해본 Hueman 테마 레이아웃

flexbox 모델의 default 는 아무런 media query 없이, 자동으로 각 block 의 width 가 각각 비율에 맞춰 반응합니다. 물론 width 값을 부여할 수 있지만, flex:2, 이런식으로 “다른 div 의 두배 넓이” 같은 식으로 비율적 넓이를 지정할 수 있습니다. 그래서 이름이 flexbox 입니다.

이렇게 글로 설명드려서는 이해하기 힘드실 수 있는데요, 눈으로 보면서 어떻게 각 div 들의 넓이가 잡히는지 아래 페이지에서 각 value 를 입력해 가며 flexbox 를 익혀보실 수 있습니다.

http://the-echoplex.net/flexyboxes/

위 페이지에서 2:1 비율로 3개의 div 을 잡은 모습 입니다.

2:1 flexbox 모습

일단 머리속에서 float 모델을 싹 지워버리시는게 flexbox 모델과 친숙해 지는데 가장 좋습니다.

또, 자꾸 무의식 중에 media query 로 레이아웃을 잡으려는 습관을 버리셔야 합니다. flexbox 의 css 를 최대한 활용해서 반응형 레이아웃을 잡으려는 노력을 계속 하셔야지, 예전 방식데로, media query break point 늘려가며 레이아웃 잡으시면 이 flexbox 사용이 아무런 의미가 없어지게 됩니다.

그래서 이글에서 밝혔듯이, 어떤때는 머리속이 백지 상태인게 새로운 방식을 습득하는데 더 도움이 되기도 합니다. http://hackya.com/kr/사부를-뛰어-넘는-고수가-되는-비법을-알려드립니다/

다들 flexbox 모델에 대해 떠오르는 형용사가 giant leap, leapfrog, 즉 기존 방식을 훌쩍 뛰어 넘는다는 느낌을 받으시나 봅니다. 저도 물론 그런 느낌을 크게 받았고. leapfrog 보다, 이건 거의 혁명이다 라는 생각까지 작년에 들었었습니다.

flexbox-one-giant-leap-for-web-layout-generateconf-2013-1-638

전체적인 레이아웃은 보여드렸고, 이걸 토대로 공부좀 하시면 큰 어려움 없으실거고, (소스 살펴보기 좋으시라고, css 를 header 위에 internally 작성했습니다. 그냥 우클릭 하셔서 다운받으시면 됩니다.) 이제 세부적으로 footer 나 메뉴 같은 건 또 어떻게 flexbox 모델로 짜야하는 가를 보여드려야 하는데, 훔… footer 는 실제 사이트에서 구현해 놓은게 있으니 다음에 또 시간될때 footer 와 메뉴가 어떻게 flexbox 모델로 구현되는지 보여드리겠습니다.

메뉴하고 footer 에 관해 글을 따로 써야할지, 한글에 합쳐서 써도 될지, 지금은 모르겠습니다. 생각좀 해보겠습니다. ㅎㅎㅎ

* 저한테, 그런데 flexbox IE8에서는 작동 안하잖아요. 이런 소리 하는/이메일 보내시려는 웹디자이너 분들, 잠깐!! polyfill 은 폼인가요? 검색부터 좀 하시고!!!!

검색의 생활화!!! 좀 하세요. ㅎㅎㅎ

제가 요즘 이래서 코프레스 방문도 안합니다. 제 정신건강에 좋지 않아서

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , , , ,

카테고리:

Ω

4 Comments

  • WordCracker says:

    이 내용을 일찍 알았다면 얼마나 좋았을까요?
    저는 Hueman(https://wordpress.org/themes/hueman/) 테마를 분석하여 CSS로 레이아웃을 바꾸면서 CSS 를 공부한 적이 있습니다. 그런데 중요한 부분은 빼먹고 공부했군요… 3 columns로 표시되는 데 옵션에 2 columns으로 설정하는 기능이 있는지 모르겠네요. (조금 오래되어서 기억이 나지 않는데 무식하게 display:none을 사용하여 오른쪽 sidebar를 제거했던 것 같기도 하고…)
    이 글을 보니 시간이 될 때 flexbox 사용법을 빨리 익혀야 겠네요.

    • Matthew says:

      네. flexbox 좋은 물건 입니다. ㅎㅎ

      display:none; 은 사이트가 이중고를 겪는다고 표현 해야 하나요….

      일단 php 로 html 을 생성시킨 후, 이걸 다시 css 로 가려야 하니, 일상생활로 예를 들자면, 매일 퇴근할때마다 (웹사이트로 치면 로딩할때 마다) 제 차에서 서류가방을 꺼내서 집으로 갖고 들어와서는 제 아들한테 서류가방을 다시 차에 가져다 넣으라고 시키는 경우?

      서류가방이 필요없으면 아예 처음부터 서류가방을 차에 놔두면 저나 제 아들이나 서로 수고할 필요가 없죠.

      사실 이래서 반응형 웹사이트 (RWD) 가 모바일 view 에서 속도저하를 겪게 되는 것 입니다.

  • Hyeongjin Um says:

    좋은 글 잘 읽었습니다ㅎㅎ

    “머릿속이 백지상태인게 새로운 방식을 습득하는데 더 도움이 되기도 한다” 저예요ㅎㅎㅎ

    내일 학교에서 web app 시험이 있는데 레이아웃은 flexbox로 짜겠습니다^^

    • Matthew says:

      네, 젊다는건 참 좋죠. 개발자로서 큰 자산인거죠.

      저는 아직도 layout 잡을때, 그냥 하던데로 float 주고, clear: both 먹이고 media query 를 잔뜩 집어넣고 싶은 욕망을 꾹 참아야 합니다. ㅋㅋㅋㅋ

      flexbox 를 쓴지 2년이 지났는데도, 아직도 가끔 flexbox cheatsheet 을 흘끔흘끈 쳐다봐야 합니다. ㅠㅠㅠㅠ 나이가 들어서, 머리가 굳어버려서 그런거겠죠.

      하다못해 멍청하기 짝이 없는, 저한테 flexbox 를 배운 제 밑에 직원도 아무런 막힘이 없이 flexbox 를 그려내는데, 하….

      어쩌면 나이가 들었다는건 핑계고, 저는 원래부터 머리가 나빠서 그런걸수도. ㅋㅋㅋㅋㅋ

      시험 잘 보시고 좋은 한주 되세요.

Leave a Reply

Your email address will not be published. Required fields are marked *