Flexible Layout – CSS3.0 Flexbox를 활용한 레이아웃 – CSS3.0 플렉스박스는새로운 개념의 레이아웃을 제공합니다



Flexible Layout – CSS3.0 Flexbox를 활용한 레이아웃 – CSS3.0 플렉스박스는새로운 개념의 레이아웃을 제공합니다

0 1


flexbox

flexbox 발표자료

On Github korearice / flexbox

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

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

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

1. 내비게이션

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

2. 채팅창

first! second! third! submit
HTML CSS
<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. 접힘/펼침메뉴

flex menu
  • 1depth
    • menu 1-1
    • menu 1-2
    • menu 1-3
  • 2depth
    • menu 2-1
    • menu 2-2
    • menu 2-3
  • 3depth
    • I am menu 3-1
    • I am menu 3-2
    • I am menu 3-3
HTML CSS
<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. 페이지 레이아웃

1. header
2. main3. nav4. aside
5. footer
HTML CSS
<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
  • 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
HTML CSS
<div class="recipes_wrap">
<header class="tit_recipes"><h1><span class="recipe">Recipe</span><span class="planner">Planner</span></h1></header><div id="calendar"><form id="weekform" method="get" target="_blank" action=""><table id="week"><thead><tr><th>Sunday </th><th>Monday </th><th>Tuesday </th><th>Wednesday </th><th>Thursday </th><th>Friday </th><th>Saturday </th></tr></thead><tbody><tr><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td><td class="breakfast"></td></tr><tr><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td><td class="lunch"></td></tr><tr><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td><td class="dinner"></td></tr></tbody></table></form></div><div class="recipe-container"><ul class="recipes"><li id="id27" data-servings="2" draggable="true">Almond Caesar salad with croutons</li><li id="40" data-servings="2" draggable="true">Apple Carrot Salad</li><li id="id20" data-servings="1" draggable="true">Apple-Brie Panini</li><li id="id57" data-servings="6" draggable="true">Artichoke, Leek, and Potato Casserole</li><li id="29" data-servings="4" draggable="true">Awesome Rice Salad</li><li id="id89" data-servings="8" draggable="true">Baby Brussels sprouts with wild rice and pecans</li><li id="id220" data-servings="10" draggable="true">Baked Beans</li><li id="2" data-servings="6" draggable="true">Baked Shrimp Scampi</li><li id="id105" data-servings="4" draggable="true">Baked eggs and beans on toast</li><li id="id6" data-servings="2" draggable="true">Basil-Lime Vinaigrette</li><li id="1" data-servings="4" draggable="true">Beef Stroganoff with Buttered Noodles</li><li id="48" data-servings="1" draggable="true">Berry Sauce</li><li id="55" data-servings="1" draggable="true">Best Oatmeal Ever</li><li id="id32" data-servings="4" draggable="true">Black bean and cheese tacos</li><li id="id173" data-servings="4" draggable="true">Black bean salad with avocado lime dressing</li><li id="59" data-servings="1" draggable="true">Blood Oxygen Smoothie</li><li id="47" data-servings="2" draggable="true">Blueberry Bliss Smoothie</li><li id="54" data-servings="1" draggable="true">Breakfast Mediterranean Burrito</li><li id="id58" data-servings="4" draggable="true">Broccoli with Parmesan and Walnuts</li><li id="id46" data-servings="2" draggable="true">Brown rice, chickpea, feta, and mint salad</li><li id="id31" data-servings="1" draggable="true">Brussels Sprout Salad</li><li id="id112" data-servings="8" draggable="true" class="dragging">Caesar Salad Dressing</li><li id="id59" data-servings="2" draggable="true">Cauliflower Puree</li><li id="id60" data-servings="4" draggable="true">Cauliflower Risotto</li><li id="19" data-servings="4" draggable="true">Chicken Parmesan Salad</li><li id="50" data-servings="1" draggable="true">Chickpea and Kale Bowl</li><li id="id162" data-servings="4" draggable="true">Chickpea salad and cilantro pesto</li><li id="id200" data-servings="4" draggable="true">Chopped Salad</li><li id="id17" data-servings="4" draggable="true">Citrus Rice Salad</li><li id="id50" data-servings="6" draggable="true">Cocktail Sauce</li><li id="id176" data-servings="10" draggable="true">Coffee, hazelnut, and banana granola</li><li id="id35" data-servings="4" draggable="true">Creamy tomato soup</li><li id="id151" data-servings="4" draggable="true">Dang cold Asian noodle salad</li><li id="id196" data-servings="8" draggable="true" class="dragging">Drop biscuits (Cook's Illustrated)</li><li id="id207" data-servings="6" draggable="true">Easy chickpea and vegetable curry</li><li id="id23" data-servings="2" draggable="true">Exercise Rejuvenator</li><li id="16" data-servings="12" draggable="true">Flaky Buttermilk Biscuits</li><li id="id132" data-servings="6" draggable="true">French onion soup</li><li id="15" data-servings="4" draggable="true">Greek Salad</li><li id="id41" data-servings="2" draggable="true">Green Goodness</li><li id="id134" data-servings="4" draggable="true">Green pea soup with cheddar scallion panini</li><li id="id19" data-servings="2" draggable="true">Green-packed Stir Fry with Fresh Herbs</li><li id="17" data-servings="4" draggable="true" class="dragging">Grilled Portobello Mushrooms Stacked with Fresh Spinach and Shaved Manchego Cheese</li><li id="id48" data-servings="4" draggable="true">Grilled Salmon with Herb and Meyer Lemon Compound Butter</li><li id="id14" data-servings="4" draggable="true">Grilled garlic-lime fish tacos</li><li id="id156" data-servings="4" draggable="true">Grilled salmon gyros</li><li id="id159" data-servings="4" draggable="true">Grilled salmon sushi rice bowl</li><li id="28" data-servings="1" draggable="true">Guacamole</li><li id="id51" data-servings="2" draggable="true">Heinz Chili Sauce</li><li id="id167" data-servings="4" draggable="true">Herb crusted salmon with spinach salad</li><li id="id157" data-servings="4" draggable="true">Homemade ponzu sauce</li><li id="id22" data-servings="4" draggable="true">Hot Cocoa</li><li id="id150" data-servings="4" draggable="true">Japanese style grilled salmon</li><li id="60" data-servings="2" draggable="true">Kale, Chard, and Hempseed Salad</li><li id="id221" data-servings="8" draggable="true">Lemonade</li><li id="id8" data-servings="8" draggable="true">Lentil Soup</li><li id="id174" data-servings="4" draggable="true">Linguine with asparagus and egg</li><li id="35" data-servings="2" draggable="true">Live Granola</li><li id="56" data-servings="2" draggable="true">Lovely Lentils</li><li id="id34" data-servings="4" draggable="true">Marinara Sauce</li><li id="id195" data-servings="4" draggable="true">Marinated feta, spinach & poached egg salad</li><li id="21" data-servings="2" draggable="true">Mexican Ensalada</li><li id="id54" data-servings="24" draggable="true">Monster Hot Chocolate</li><li id="id16" data-servings="4" draggable="true">Morning Muesli</li><li id="id40" data-servings="2" draggable="true">Muscle Maximizer</li><li id="id47" data-servings="4" draggable="true">Mushroom-onion stuffed potatoes</li><li id="id9" data-servings="1" draggable="true">Natural sports drink</li><li id="12" data-servings="6" draggable="true">Old Fashion Vegetable Soup</li><li id="id56" data-servings="4" draggable="true">One-Pot Curried Cauliflower Rice</li><li id="13" data-servings="6" draggable="true">Onion Pie</li><li id="id171" data-servings="4" draggable="true">Orecchiette with roasted cauliflower</li><li id="id30" data-servings="6" draggable="true">Oregano Marinated Chicken</li><li id="id43" data-servings="6" draggable="true">Parker's split pea soup</li><li id="id55" data-servings="4" draggable="true">Peanut Noodle Salad</li><li id="id118" data-servings="1" draggable="true">Pecan Pie</li><li id="id185" data-servings="10" draggable="true">Pecan molasses granola</li><li id="id99" data-servings="10" draggable="true">Pesto</li><li id="id25" data-servings="4" draggable="true">Pesto Orzo with Peas</li><li id="id64" data-servings="4" draggable="true">Pizza bianca</li><li id="23" data-servings="1" draggable="true">Popeye's Green Drink</li><li id="51" data-servings="1" draggable="true">Popeye's Muscle Salad</li><li id="11" data-servings="4" draggable="true">Pot Roast Carbonnade</li><li id="38" data-servings="1" draggable="true">Quinoa Banana Breakfast</li><li id="id86" data-servings="4" draggable="true">Raspberry-lemon thumbprint cookies</li><li id="id133" data-servings="4" draggable="true">Red lentil soup with sage and bacon</li><li id="id106" data-servings="4" draggable="true">Rice with almond pesto and beans</li><li id="id45" data-servings="6" draggable="true">Roasted Salmon with Walnut-Pepper Relish</li><li id="id53" data-servings="1" draggable="true">Roasted Shallot Vinaigrette</li><li id="id26" data-servings="6" draggable="true">Roasted potatoes and tomatoes</li><li id="id168" data-servings="4" draggable="true">Roasted salmon with white wine sauce</li><li id="62" data-servings="4" draggable="true">Roquefort Cheese Sauce</li><li id="id172" data-servings="2" draggable="true">Salsa fresca</li><li id="3" data-servings="2" draggable="true">Sauteed Beef Tips with Shiitake</li><li id="id29" data-servings="2" draggable="true">Schnitzel</li><li id="18" data-servings="1" draggable="true">Sherry Vinaigrette</li><li id="id21" data-servings="4" draggable="true">Shredded Green Beans</li><li id="id125" data-servings="1" draggable="true">Simple syrup</li><li id="8" data-servings="3" draggable="true">Smoked Salmon Ebelskivers</li><li id="id65" data-servings="10" draggable="true">Smokey Sweet-Potato Soup</li><li id="id206" data-servings="4" draggable="true">Smoky white bean and arugula panini</li><li id="id38" data-servings="4" draggable="true">Soba salad with asparagus and shrimp</li><li id="10" data-servings="4" draggable="true">Spaetzle</li><li id="id28" data-servings="4" draggable="true">Spiced Apple Sauce</li><li id="id15" data-servings="2" draggable="true">Spicy Rice Balls</li><li id="42" data-servings="2" draggable="true">Spinach and avocado salad with sesame wasabi dressing</li><li id="id109" data-servings="8" draggable="true">Spinach lasagna with mushroom ragu</li><li id="id52" data-servings="2" draggable="true">Spinach soufflé</li><li id="id11" data-servings="8" draggable="true">Spring Shells and Cheese</li><li id="id13" data-servings="4" draggable="true">Spring-vegetable and chickpea soup</li><li id="61" data-servings="2" draggable="true">Steakhouse steaks</li><li id="63" data-servings="6" draggable="true">Stove top mac and cheese</li><li id="id18" data-servings="4" draggable="true">Straw and Hay Fettuccine Tangle</li><li id="20" data-servings="1" draggable="true">Super Greens Salad</li><li id="32" data-servings="1" draggable="true">Super Protein Salad</li><li id="id158" data-servings="4" draggable="true">Sushi rice</li><li id="30" data-servings="2" draggable="true">Sweet Almond Date Smoothie</li><li id="52" data-servings="2" draggable="true">Sweet Green Goodness</li><li id="57" data-servings="4" draggable="true">Sweet Mashed Potatoes</li><li id="34" data-servings="2" draggable="true">Sweet and Savory Sea Wrap</li><li id="id104" data-servings="4" draggable="true">Tex-mex rice and black eyed peas</li><li id="31" data-servings="2" draggable="true">The Ironman Smoothie</li><li id="id1" data-servings="24" draggable="true">The Original Chex Party Mix</li><li id="36" data-servings="2" draggable="true">The Shake</li><li id="22" data-servings="2" draggable="true">The Ultimate Green Smoothie</li><li id="id39" data-servings="4" draggable="true">Tofu and Sweet Potato Jambalaya</li><li id="44" data-servings="2" draggable="true">Tomato Avocado Salad</li><li id="5" data-servings="4" draggable="true">Tomato Basil Soup (La Madeleine copycat)</li><li id="id36" data-servings="4" draggable="true">Triple Grilled Cheese</li><li id="26" data-servings="2" draggable="true">Tropical Nut Smoothie</li><li id="id12" data-servings="4" draggable="true">Vegetable Stock</li><li id="id5" data-servings="6" draggable="true">Vegetarian Chili</li><li id="id37" data-servings="4" draggable="true">Vegetarian Steamed Dumplings</li><li id="id107" data-servings="4" draggable="true">Warm shrimp and potato salad</li><li id="id44" data-servings="2" draggable="true">Wild Mushroom Risotto</li><li id="id24" data-servings="2" draggable="true">Zucchini Salad</li></ul><hr><ul class="recipes"><li id="id223" data-servings="8" draggable="true">Apple brandy brown betty</li><li id="id119" data-servings="2" draggable="true">Asian Salad</li><li id="id164" data-servings="12" draggable="true">Avocado feta dip</li><li id="id201" data-servings="8" draggable="true">Baby lamb chops with lemon</li><li id="id135" data-servings="4" draggable="true">Beef and coconut soup with crispy shallots</li><li id="id130" data-servings="4" draggable="true">Black bean soup</li><li id="id148" data-servings="6" draggable="true">Blood orange cocktails</li><li id="id91" data-servings="4" draggable="true">Braised lamb chops with red wine and figs</li><li id="id136" data-servings="8" draggable="true">Broccoli soup with cheddar toasts</li><li id="id128" data-servings="42" draggable="true">Broken glass cupcakes</li><li id="id219" data-servings="8" draggable="true">Brown sugar buttermilk pie</li><li id="id192" data-servings="4" draggable="true">Brussels sprouts with maple and cayenne</li><li id="id229" data-servings="4" draggable="true">Cajun mac and cheese</li><li id="id124" data-servings="6" draggable="true">Cannellini and Kale Soup</li><li id="id94" data-servings="14" draggable="true">Carrot currant muffins</li><li id="id98" data-servings="8" draggable="true">Cauliflower, red onion, and chestnut tart</li><li id="id213" data-servings="24" draggable="true">Cheese crackers</li><li id="id108" data-servings="4" draggable="true">Cherry couscous pudding</li><li id="id177" data-servings="10" draggable="true">Cherry lime granola</li><li id="id73" data-servings="6" draggable="true">Cherry-lime cups</li><li id="id140" data-servings="2" draggable="true">Chervil cream</li><li id="id62" data-servings="4" draggable="true">Chicken koftas with cucumbers and yogurt</li><li id="id78" data-servings="6" draggable="true">Chile-spiced steak and grilled onion tacos</li><li id="id210" data-servings="6" draggable="true">Chiles Rellenos</li><li id="id184" data-servings="4" draggable="true">Chili Lemon Cauliflower</li><li id="id234" data-servings="8" draggable="true">Chocolate babka</li><li id="id199" data-servings="8" draggable="true">Chocolate banana ice cream pie</li><li id="id145" data-servings="9" draggable="true">Chocolate cheesecake squares</li><li id="id110" data-servings="8" draggable="true">Chocolate chestnut mousse</li><li id="id146" data-servings="6" draggable="true">Chocolate cinnamon pudding</li><li id="id235" data-servings="1" draggable="true">Chocolate ice cubes</li><li id="id169" data-servings="12" draggable="true">Chocolate-Hazelnut Icebox Cake</li><li id="id231" data-servings="6" draggable="true">Cocoa rubbed steak with bacon whiskey gravy</li><li id="id83" data-servings="12" draggable="true">Coconut lime semifreddo</li><li id="id137" data-servings="4" draggable="true">Coconut shrimp soup</li><li id="id95" data-servings="16" draggable="true">Cranberry almond muffins</li><li id="id181" data-servings="2" draggable="true">Creamy artichoke dip</li><li id="id69" data-servings="16" draggable="true">Creamy blue cheese dressing</li><li id="id138" data-servings="8" draggable="true">Creamy caramelized onion soup</li><li id="id70" data-servings="16" draggable="true">Creamy peppercorn-Parmesan dressing</li><li id="id68" data-servings="16" draggable="true">Creamy ranch dressing</li><li id="id67" data-servings="16" draggable="true">Creamy roasted garlic dressing</li><li id="id224" data-servings="4" draggable="true">Creamy shiitake alfredo</li><li id="id147" data-servings="8" draggable="true">Creepy crawly cake</li><li id="id217" data-servings="4" draggable="true">Crispy chicken and apple salad</li><li id="id7" data-servings="6" draggable="true">Curried Carrot Soup</li><li id="id4" data-servings="2" draggable="true">Emeril Essence Creole Seasoning</li><li id="id63" data-servings="6" draggable="true">Emeril's strawberry lemonade</li><li id="id71" data-servings="4" draggable="true">Feta-stuffed BLT burgers</li><li id="id81" data-servings="4" draggable="true">Frozen chocolate mousse trifles</li><li id="id82" data-servings="4" draggable="true">Frozen lemon souffle</li><li id="id129" data-servings="5" draggable="true">Garlic-Pepper Sauce</li><li id="id88" data-servings="8" draggable="true">Glazed carrots</li><li id="id116" data-servings="3" draggable="true">Gluten-free chocolate chips cookies</li><li id="id165" data-servings="6" draggable="true">Goat cheese and mushroom stuffed chicken breasts</li><li id="9" data-servings="12" draggable="true">Godiva Angel Pie</li><li id="14" data-servings="10" draggable="true">Godiva Dark Chocolate Cheesecake</li><li id="id183" data-servings="18" draggable="true">Gooey layered everything bars</li><li id="id203" data-servings="4" draggable="true">Granitaville</li><li id="id49" data-servings="4" draggable="true">Greek yogurt with homemade honeycomb</li><li id="id76" data-servings="4" draggable="true">Green bean, tomato, and chickpea salad</li><li id="id66" data-servings="16" draggable="true">Green goddess dressing</li><li id="id61" data-servings="4" draggable="true">Grilled salmon and cucumbers</li><li id="id85" data-servings="4" draggable="true">Grilled zucchini with buttermilk-basil dressing</li><li id="id3" data-servings="4" draggable="true">Handmade Pasta</li><li id="id142" data-servings="8" draggable="true">Harvest pumpkin soup</li><li id="id212" data-servings="6" draggable="true">Hawaiian style short ribs</li><li id="id97" data-servings="2" draggable="true">Hazelnut pastry dough</li><li id="id96" data-servings="16" draggable="true">Hazelnut pear muffins</li><li id="id139" data-servings="4" draggable="true">Hearty spinach and chickpea soup</li><li id="id131" data-servings="6" draggable="true">Homemade beef stock</li><li id="id117" data-servings="16" draggable="true">Homemade candy canes</li><li id="id122" data-servings="4" draggable="true">Homemade sausage</li><li id="id126" data-servings="4" draggable="true">Hot and nutty whiskey sours</li><li id="id228" data-servings="4" draggable="true">Indian Chicken Wrap</li><li id="id33" data-servings="6" draggable="true">Joan's Broccoli Madness</li><li id="7" data-servings="12" draggable="true">John Thorne's Pecan Pie</li><li id="id114" data-servings="1" draggable="true">Kalitsounia Kritis: Sweet Cheese Pastries from Crete</li><li id="id115" data-servings="1" draggable="true">Koulourakia - Greek Butter Cookies with Sesame</li><li id="id160" data-servings="8" draggable="true">Lamb shepard's pie</li><li id="id180" data-servings="4" draggable="true">Lamb, potato, and leek stew</li><li id="id233" data-servings="48" draggable="true">Lemon white chocolate cookies</li><li id="id198" data-servings="8" draggable="true">Light Italian dressing</li><li id="id197" data-servings="8" draggable="true">Light ranch dressing</li><li id="id144" data-servings="8" draggable="true">Lighter macaroni and cheese</li><li id="id218" data-servings="10" draggable="true">Maple brown butter semifreddo</li><li id="id113" data-servings="1" draggable="true">Melomakarona - Honey Cookies with Walnuts</li><li id="id222" data-servings="4" draggable="true">Mushroom and lentil soup</li><li id="id141" data-servings="12" draggable="true">Mushroom soup</li><li id="id80" data-servings="12" draggable="true">No-churn vanilla ice cream</li><li id="id166" data-servings="10" draggable="true">PB&J Tiramisu</li><li id="id121" data-servings="4" draggable="true">Pasta with roasted vegetables and bacon</li><li id="id101" data-servings="1" draggable="true">Pate brisee</li><li id="id190" data-servings="8" draggable="true">Pear and chocolate brioche bread pudding</li><li id="id189" data-servings="6" draggable="true">Pear and cranberry crisp</li><li id="id204" data-servings="8" draggable="true">Pickled red onions</li><li id="id77" data-servings="4" draggable="true">Pork carnitas tacos</li><li id="id191" data-servings="4" draggable="true">Potato hash with spinach and eggs</li><li id="id186" data-servings="4" draggable="true">Pressed ham and pear sandwiches</li><li id="id123" data-servings="24" draggable="true">Pretzel shortbread bar</li><li id="id226" data-servings="10" draggable="true">Pumpkin chocolate whoopie pies</li><li id="id90" data-servings="10" draggable="true">Pumpkin mousse</li><li id="id154" data-servings="1" draggable="true">Red cabbage slaw</li><li id="id205" data-servings="4" draggable="true">Red sangria</li><li id="id161" data-servings="1" draggable="true">Roasted cauliflower and white beans</li><li id="id74" data-servings="3" draggable="true">Roasted salsa</li><li id="id215" data-servings="4" draggable="true">Roasted sweet potato salsa</li><li id="id193" data-servings="4" draggable="true">Roasted sweet potatoes and bacon</li><li id="id209" data-servings="6" draggable="true">Rose sangria</li><li id="id187" data-servings="4" draggable="true">Salmon and potatoes in tomato sauce</li><li id="id202" data-servings="8" draggable="true">Salmon rillettes with tomato salad</li><li id="id179" data-servings="8" draggable="true">Salmon with brown sugar and mustard glaze</li><li id="id93" data-servings="12" draggable="true">Salted caramel six layer chocolate cake</li><li id="id194" data-servings="4" draggable="true">Salted chocolate milk</li><li id="id100" data-servings="8" draggable="true">Sausage-stuffed red onions</li><li id="id225" data-servings="6" draggable="true">Shiitake and egg tart</li><li id="id216" data-servings="8" draggable="true">Shredded Brussels sprouts with pancetta</li><li id="id163" data-servings="4" draggable="true">Shrimp and cabbage stir fry</li><li id="id75" data-servings="4" draggable="true">Shrimp and edamame with lime</li><li id="id227" data-servings="4" draggable="true">Sicilian cauliflower pasta</li><li id="id182" data-servings="10" draggable="true">Simple lemon cake</li><li id="id153" data-servings="1" draggable="true">Smoke chili sauce</li><li id="id170" data-servings="6" draggable="true">Smoky Yukon Gold Potato Chowder</li><li id="id155" data-servings="4" draggable="true">Sour Orange BBQ'd Salmon Taco with Red Cabbage Slaw and Smoked Chile Sauce</li><li id="id152" data-servings="1" draggable="true">Sour orange BBQ sauce</li><li id="id175" data-servings="8" draggable="true">Spanakopita</li><li id="id102" data-servings="4" draggable="true">Spanish turkey sandwich</li><li id="id143" data-servings="4" draggable="true">Spiced chickpea and tomato soup</li><li id="id120" data-servings="4" draggable="true">Spicy Parmesan Kettle Chips</li><li id="id111" data-servings="6" draggable="true">Spicy sauteed kale with lemon</li><li id="id178" data-servings="4" draggable="true">Spinach and pear salad with lamb</li><li id="id149" data-servings="8" draggable="true">Stout short rib potpie</li><li id="4" data-servings="4" draggable="true">Strawberries Romanov (La Madeleine copycat)</li><li id="id79" data-servings="12" draggable="true">Strawberries and cream bars</li><li id="id84" data-servings="12" draggable="true">Sweet cherry granita</li><li id="id211" data-servings="6" draggable="true">Sweet potato fries with brown-butter marshmallow sauce</li><li id="id127" data-servings="10" draggable="true">Three cheese macaroni</li><li id="id92" data-servings="10" draggable="true">Three tier candied pecan cake with brown butter pears</li><li id="id232" data-servings="10" draggable="true">Towering flourless chocolate cake</li><li id="id188" data-servings="4" draggable="true">Turkey cutlets with balsamic pears</li><li id="id103" data-servings="4" draggable="true">Turkey honey avocado BLT</li><li id="id214" data-servings="2" draggable="true">Vegetable egg scramble with feta</li><li id="id230" data-servings="4" draggable="true">Veggie burger pockets</li><li id="id208" data-servings="6" draggable="true">White sangria</li><li id="id72" data-servings="4" draggable="true">Zucchini fries</li></ul></div>
                        </div>
.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
HTML CSS
<div class="flexbox">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
  <div class="item17">17</div>
  <div class="item18">18</div>
  <div class="item19">19</div>
  <div class="item20">20</div>
  <div class="item21">21</div>
  <div class="item22">22</div>
  <div class="item23">23</div>
  <div class="item24">24</div>
  <div class="item25">25</div>
  <div class="item26">26</div>
  <div class="item27">27</div>
  <div class="item28">28</div>
</div>
                        
.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