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
Photo Credit: NathanaelBC via Compfight cc
레이아웃은 더 다양한 환경에 최적화되야 한다
레이아웃이 좀더 유연할 순 없을까?
요소들의 배치 방향을 손쉽게 설정할 수 있습니다
요소들의 정렬을 손쉽게 설정할 수 있습니다
요소들의 배치 순서를 정할 수 있습니다
활용할 수 있는 공간을 자동으로 계산합니다
플렉스박스는 컨테이너 태그와 아이템 태그로 나뉩니다
<ul>
<li>I'm First</li>
<li>I'm Second</li>
<li>I'm Third</li>
<li>I'm Fourth</li>
</ul>
ul{}
<ul>
<li>intro</li>
<li>business</li>
<li>project</li>
<li>contact us</li>
</ul>
ul{}
<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{}
<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{}
<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{}
RecipePlanner
- 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{}
플렉스박스를 더욱 풍부하게 쓰려면?
flex-wrap:nowrap
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+ */
}
Photo Credit: Horia Varlan via Compfight cc