Flexible Layout

CSS3.0 Flexbox를 활용한 레이아웃

Created by UIT개발실 / MinKyoungHwan

이 발표자료는 크롬브라우저/1280*800 해상도에 최적화 되있습니다

1. 화면은 방향키로 이동할 수 있습니다.
    메인 콘텐츠는 방향키 '좌/우(↑/↓)', 서브 콘텐츠는 방향키 '위/아래(↑/↓)'로 이동가능합니다
2. full 화면은 'f'키를 눌러주세요


#speaker {
    Name      : 민경환 대리
    Team      : UIT 개발실
    E-mail    : kyounghwan.min@nhn.com
    Project   : 네이버 포스트, 스마트에디터, 'webkit 사전' 서적 집필중
}

#speaker:description {
    content : '만나서 반가워요 :)’
}
					

레이아웃을 만든다는것은?

Photo Credit: @yakobusan Jakob Montrasio 孟亚柯 via Compfight cc

Photo Credit: kevin dooley via Compfight cc

  • 3단 레이아웃에 가운데 정렬로 해주세요. 네이버 메인처럼...
  • 푸터는 항상 하단에 고정시켜주시구요
  • 좌측 메뉴의 너비값은 20%인데 해상도가 1000px이상이면
    200px로 고정시켜주세요.
  • ...

CSS 2.1

  • Grid Layout
  • float:left; position:absolute;
  • display:inline-block; display:table-cell;
  • JavaScript
  • ...

Photo Credit: tribehut via Compfight cc

다양한 환경에 최적화 되는 UI

  • 모바일에선 박스가 좌측, 태블릿에선 우측 상단에 붙어야해요...
  • 텍스트 길이에 맞춰 박스가 늘어날 순 없을까요?
  • 성능최적화 좀 해주시구요...
  • ...

Photo Credit: NathanaelBC via Compfight cc

혁신적인 UI

  • 단순하면서 임팩트 있고 좀 고급스러워보였으면 좋겠어요...
  • 웹표준, 웹접근성은 기본인거 아시죠?
  • ...

레이아웃은 더 다양한 환경에 최적화되야 한다

레이아웃이 좀더 유연할 순 없을까?

CSS3.0 플렉스박스는
새로운 개념의 레이아웃을 제공합니다

2009/07/23display:box 2011/03/22 2011/11/29 2012/03/22display:flexbox 2012/06/12display:flex 2012/09/18 2014/03/25

Photo Credit: Adn! via Compfight cc

플렉스박스 속성 분류 4가지

  • Direction
  • Alignment
  • Ordering
  • Flexibility

Direction

요소들의 배치 방향을 손쉽게 설정할 수 있습니다

Alignment

요소들의 정렬을 손쉽게 설정할 수 있습니다

Ordering

요소들의 배치 순서를 정할 수 있습니다

Flexibility

활용할 수 있는 공간을 자동으로 계산합니다

display:flex

1
2
3

플렉스박스는 컨테이너 태그와 아이템 태그로 나뉩니다

<ul>
  <li>I'm First</li>
  <li>I'm Second</li>
  <li>I'm Third</li>
  <li>I'm Fourth</li>
</ul>
                        
ul{}

추천 사이트

CSS Trick : http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Stephen Hay : http://www.slideshare.net/stephenhay/flexbox-one-giant-leap-for-web-layout-brea-2013

1. 내비게이션

<ul>
  <li>intro</li>
  <li>business</li>
  <li>project</li>
  <li>contact us</li>
</ul>
                        
ul{}

2. 채팅창

<div class="wrap">
  <ol class="code_sample3">
    <li>first!</li>
    <li>second!</li>
    <li>third!</li>
  </ol>

  <form class="type_area">
    <input placeholder="Type your message here" size="50">
    <button>submit</button>
  </form>
</div>
                        
div{}

3. 접힘/펼침메뉴

<div>
  <article>flex menu</article>
  <ul class="nav">
    <li>1depth
    <ul>
      <li>menu 1-1</li>
      <li>menu 1-2</li>
      <li>menu 1-3</li>
    </ul>
    </li>
    <li>2depth
    <ul>
      <li>menu 2-1</li>
      <li>menu 2-2</li>
      <li>menu 2-3</li>
    </ul>
    </li>
    <li>3depth
    <ul>
      <li>I am menu 3-1</li>
      <li>I am menu 3-2</li>
      <li>I am menu 3-3</li>
    </ul>
    </li>
  </ul>
</div>
                        
div{}

4. 페이지 레이아웃

<div class="wrap">
  <header>1. header</header>
  <div>
    <article>2. main</article>
    <nav>3. nav</nav>
    <aside>4. aside</aside>
  </div>
  <footer>5. footer</footer>
</section>
                        
.wrap{}

5. 래시피 플래너

by Tab Atkins Jr

RecipePlanner

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
X Drop biscuits (Cook's Illustrated)
X Grilled Portobello Mushrooms Stacked with Fresh Spinach and Shaved Manchego Cheese
X Caesar Salad Dressing
  • Almond Caesar salad with croutons
  • Apple Carrot Salad
  • Apple-Brie Panini
  • Artichoke, Leek, and Potato Casserole
  • Awesome Rice Salad
  • Baby Brussels sprouts with wild rice and pecans
  • Baked Beans
  • Baked Shrimp Scampi
  • Baked eggs and beans on toast
  • Basil-Lime Vinaigrette
  • Beef Stroganoff with Buttered Noodles
  • Berry Sauce
  • Best Oatmeal Ever
  • Black bean and cheese tacos
  • Black bean salad with avocado lime dressing
  • Blood Oxygen Smoothie
  • Blueberry Bliss Smoothie
  • Breakfast Mediterranean Burrito
  • Broccoli with Parmesan and Walnuts
  • Brown rice, chickpea, feta, and mint salad
  • Brussels Sprout Salad
  • Caesar Salad Dressing
  • Cauliflower Puree
  • Cauliflower Risotto
  • Chicken Parmesan Salad
  • Chickpea and Kale Bowl
  • Chickpea salad and cilantro pesto
  • Chopped Salad
  • Citrus Rice Salad
  • Cocktail Sauce
  • Coffee, hazelnut, and banana granola
  • Creamy tomato soup
  • Dang cold Asian noodle salad
  • Drop biscuits (Cook's Illustrated)
  • Easy chickpea and vegetable curry
  • Exercise Rejuvenator
  • Flaky Buttermilk Biscuits
  • French onion soup
  • Greek Salad
  • Green Goodness
  • Green pea soup with cheddar scallion panini
  • Green-packed Stir Fry with Fresh Herbs
  • Grilled Portobello Mushrooms Stacked with Fresh Spinach and Shaved Manchego Cheese
  • Grilled Salmon with Herb and Meyer Lemon Compound Butter
  • Grilled garlic-lime fish tacos
  • Grilled salmon gyros
  • Grilled salmon sushi rice bowl
  • Guacamole
  • Heinz Chili Sauce
  • Herb crusted salmon with spinach salad
  • Homemade ponzu sauce
  • Hot Cocoa
  • Japanese style grilled salmon
  • Kale, Chard, and Hempseed Salad
  • Lemonade
  • Lentil Soup
  • Linguine with asparagus and egg
  • Live Granola
  • Lovely Lentils
  • Marinara Sauce
  • Marinated feta, spinach & poached egg salad
  • Mexican Ensalada
  • Monster Hot Chocolate
  • Morning Muesli
  • Muscle Maximizer
  • Mushroom-onion stuffed potatoes
  • Natural sports drink
  • Old Fashion Vegetable Soup
  • One-Pot Curried Cauliflower Rice
  • Onion Pie
  • Orecchiette with roasted cauliflower
  • Oregano Marinated Chicken
  • Parker's split pea soup
  • Peanut Noodle Salad
  • Pecan Pie
  • Pecan molasses granola
  • Pesto
  • Pesto Orzo with Peas
  • Pizza bianca
  • Popeye's Green Drink
  • Popeye's Muscle Salad
  • Pot Roast Carbonnade
  • Quinoa Banana Breakfast
  • Raspberry-lemon thumbprint cookies
  • Red lentil soup with sage and bacon
  • Rice with almond pesto and beans
  • Roasted Salmon with Walnut-Pepper Relish
  • Roasted Shallot Vinaigrette
  • Roasted potatoes and tomatoes
  • Roasted salmon with white wine sauce
  • Roquefort Cheese Sauce
  • Salsa fresca
  • Sauteed Beef Tips with Shiitake
  • Schnitzel
  • Sherry Vinaigrette
  • Shredded Green Beans
  • Simple syrup
  • Smoked Salmon Ebelskivers
  • Smokey Sweet-Potato Soup
  • Smoky white bean and arugula panini
  • Soba salad with asparagus and shrimp
  • Spaetzle
  • Spiced Apple Sauce
  • Spicy Rice Balls
  • Spinach and avocado salad with sesame wasabi dressing
  • Spinach lasagna with mushroom ragu
  • Spinach soufflé
  • Spring Shells and Cheese
  • Spring-vegetable and chickpea soup
  • Steakhouse steaks
  • Stove top mac and cheese
  • Straw and Hay Fettuccine Tangle
  • Super Greens Salad
  • Super Protein Salad
  • Sushi rice
  • Sweet Almond Date Smoothie
  • Sweet Green Goodness
  • Sweet Mashed Potatoes
  • Sweet and Savory Sea Wrap
  • Tex-mex rice and black eyed peas
  • The Ironman Smoothie
  • The Original Chex Party Mix
  • The Shake
  • The Ultimate Green Smoothie
  • Tofu and Sweet Potato Jambalaya
  • Tomato Avocado Salad
  • Tomato Basil Soup (La Madeleine copycat)
  • Triple Grilled Cheese
  • Tropical Nut Smoothie
  • Vegetable Stock
  • Vegetarian Chili
  • Vegetarian Steamed Dumplings
  • Warm shrimp and potato salad
  • Wild Mushroom Risotto
  • Zucchini Salad

  • Apple brandy brown betty
  • Asian Salad
  • Avocado feta dip
  • Baby lamb chops with lemon
  • Beef and coconut soup with crispy shallots
  • Black bean soup
  • Blood orange cocktails
  • Braised lamb chops with red wine and figs
  • Broccoli soup with cheddar toasts
  • Broken glass cupcakes
  • Brown sugar buttermilk pie
  • Brussels sprouts with maple and cayenne
  • Cajun mac and cheese
  • Cannellini and Kale Soup
  • Carrot currant muffins
  • Cauliflower, red onion, and chestnut tart
  • Cheese crackers
  • Cherry couscous pudding
  • Cherry lime granola
  • Cherry-lime cups
  • Chervil cream
  • Chicken koftas with cucumbers and yogurt
  • Chile-spiced steak and grilled onion tacos
  • Chiles Rellenos
  • Chili Lemon Cauliflower
  • Chocolate babka
  • Chocolate banana ice cream pie
  • Chocolate cheesecake squares
  • Chocolate chestnut mousse
  • Chocolate cinnamon pudding
  • Chocolate ice cubes
  • Chocolate-Hazelnut Icebox Cake
  • Cocoa rubbed steak with bacon whiskey gravy
  • Coconut lime semifreddo
  • Coconut shrimp soup
  • Cranberry almond muffins
  • Creamy artichoke dip
  • Creamy blue cheese dressing
  • Creamy caramelized onion soup
  • Creamy peppercorn-Parmesan dressing
  • Creamy ranch dressing
  • Creamy roasted garlic dressing
  • Creamy shiitake alfredo
  • Creepy crawly cake
  • Crispy chicken and apple salad
  • Curried Carrot Soup
  • Emeril Essence Creole Seasoning
  • Emeril's strawberry lemonade
  • Feta-stuffed BLT burgers
  • Frozen chocolate mousse trifles
  • Frozen lemon souffle
  • Garlic-Pepper Sauce
  • Glazed carrots
  • Gluten-free chocolate chips cookies
  • Goat cheese and mushroom stuffed chicken breasts
  • Godiva Angel Pie
  • Godiva Dark Chocolate Cheesecake
  • Gooey layered everything bars
  • Granitaville
  • Greek yogurt with homemade honeycomb
  • Green bean, tomato, and chickpea salad
  • Green goddess dressing
  • Grilled salmon and cucumbers
  • Grilled zucchini with buttermilk-basil dressing
  • Handmade Pasta
  • Harvest pumpkin soup
  • Hawaiian style short ribs
  • Hazelnut pastry dough
  • Hazelnut pear muffins
  • Hearty spinach and chickpea soup
  • Homemade beef stock
  • Homemade candy canes
  • Homemade sausage
  • Hot and nutty whiskey sours
  • Indian Chicken Wrap
  • Joan's Broccoli Madness
  • John Thorne's Pecan Pie
  • Kalitsounia Kritis: Sweet Cheese Pastries from Crete
  • Koulourakia - Greek Butter Cookies with Sesame
  • Lamb shepard's pie
  • Lamb, potato, and leek stew
  • Lemon white chocolate cookies
  • Light Italian dressing
  • Light ranch dressing
  • Lighter macaroni and cheese
  • Maple brown butter semifreddo
  • Melomakarona - Honey Cookies with Walnuts
  • Mushroom and lentil soup
  • Mushroom soup
  • No-churn vanilla ice cream
  • PB&J Tiramisu
  • Pasta with roasted vegetables and bacon
  • Pate brisee
  • Pear and chocolate brioche bread pudding
  • Pear and cranberry crisp
  • Pickled red onions
  • Pork carnitas tacos
  • Potato hash with spinach and eggs
  • Pressed ham and pear sandwiches
  • Pretzel shortbread bar
  • Pumpkin chocolate whoopie pies
  • Pumpkin mousse
  • Red cabbage slaw
  • Red sangria
  • Roasted cauliflower and white beans
  • Roasted salsa
  • Roasted sweet potato salsa
  • Roasted sweet potatoes and bacon
  • Rose sangria
  • Salmon and potatoes in tomato sauce
  • Salmon rillettes with tomato salad
  • Salmon with brown sugar and mustard glaze
  • Salted caramel six layer chocolate cake
  • Salted chocolate milk
  • Sausage-stuffed red onions
  • Shiitake and egg tart
  • Shredded Brussels sprouts with pancetta
  • Shrimp and cabbage stir fry
  • Shrimp and edamame with lime
  • Sicilian cauliflower pasta
  • Simple lemon cake
  • Smoke chili sauce
  • Smoky Yukon Gold Potato Chowder
  • Sour Orange BBQ'd Salmon Taco with Red Cabbage Slaw and Smoked Chile Sauce
  • Sour orange BBQ sauce
  • Spanakopita
  • Spanish turkey sandwich
  • Spiced chickpea and tomato soup
  • Spicy Parmesan Kettle Chips
  • Spicy sauteed kale with lemon
  • Spinach and pear salad with lamb
  • Stout short rib potpie
  • Strawberries Romanov (La Madeleine copycat)
  • Strawberries and cream bars
  • Sweet cherry granita
  • Sweet potato fries with brown-butter marshmallow sauce
  • Three cheese macaroni
  • Three tier candied pecan cake with brown butter pears
  • Towering flourless chocolate cake
  • Turkey cutlets with balsamic pears
  • Turkey honey avocado BLT
  • Vegetable egg scramble with feta
  • Veggie burger pockets
  • White sangria
  • Zucchini fries
.recipes_wrap{}
.recipe-container{}

6. 데이터 테이블 소팅

플렉스박스를 더욱 풍부하게 쓰려면?

flex-wrap:wrap

flex-wrap:nowrap

A
B
C
D

flex-wrap:wrap

flex-wrap:wrap-reverse

Masonry layout?

Usually say "Pinterest layout"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.flexbox{}

플렉스박스 크로스브라우징


.page-wrap {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
                        

또 다른 레이아웃 알고리즘

플렉서블 레이아웃이란?

  • px, em, %등등...사이즈 계산을 최소화는 것
  • 레이아웃을 알고리즘화 하는 것
  • 다양한 환경에 UI를 최적화 하는 것

Photo Credit: Veribatim via Compfight cc

Photo Credit: Horia Varlan via Compfight cc