Level 24

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;

 

-> 이해가 잘 안간다.

주황색 동그라미가 시작점이다.

flex-wrap: wrap-reverse;을 설정하면 요소들을 여러 줄에 걸쳐 반대로 정렬한다. (출처)

 

flex-direction: column-reverse;
flex-wrap: wrap-reverse;

 

-> flex-direction의 값으로 column을 설정함으로써 주축의 방향이 세로로 바뀌었다.

그러므로 justify-content 속성을 써야한다.

 

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;

 

-> 교차축인 가로축을 정렬해야 하는데, 줄이 두 개 이상이므로 align-content 속성을 사용한다.

 

flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;

 

 

-> flex-wrap: wrap-reverse; 를 이해 못해서 풀지 못한 문제였다. 그림으로 정리하니까 이해가 됐다.

 

 

도움 받은 곳: https://hj-tilblog.tistory.com/90

저작자표시 (새창열림)

'CSS > GAME' 카테고리의 다른 글

CSS Diner  (0) 2022.11.21

Level 1

plate

 

Level 2

bento

 

Level 3

#fancy

 

Level 4

plate apple

 

Level 5

#fancy pickle

 

Level 6

.small

 

Level 7

orange.small

 

Level 8

bento orange.small

 

Level 9

plate, bento

 

Level 10

*

 

Level 11

plate *

 

Level 12

plate + apple

 

Level 13

bento ~ pickle

 

Level 14

plate > apple

 

Level 15

orange:first-child

 

Level 16

plate > :only-child
plate :only-child

 

Level 17

.small:last-child

Pro Tip → In cases where there is only one element, that element counts as the first-child, only-child and last-child!

참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

 

-> :last-child를 선택하면 위의 그림을 선택하는 이유 

<div class="table">
	<plate id="fancy">
		<apple class="small" />
	</plate>
	<plate />
	<plate>
		<orange class="small" />
		<orange />
	</plate>
	<pickle class="small" />
</div>

1. #fancy의 처음이자, 하나이자, 마지막 자식 요소인 apple.small이 선택됨.

2. plate의 마지막 자식 요소가 선택됨.

3.div.table의 마지막 자식 요소인 pickle.small이 선택됨.

 

찾아볼 것

pickle.small:first-child
pickle.small:only-child
pickle.small:last-child

1, 2번은 선택이 불가능하고 3번은 선택이 가능한 이유가 무엇일까?

-> div.table의 기준으로 pickle은 마지막 요소이다. 그러므로 pickle.small:last-child가 가능하다.

 

Level 18

plate:nth-child(3)

 

Level 19

bento:nth-last-child(3)

 

Level 20

apple:first-of-type

 

Level 21

plate:nth-of-type(even)
plate:nth-of-type(2n)

 

Level 22

plate:nth-of-type(2n+3)

 

Level 23

plate apple:only-of-type
plate .small:only-of-type

 

Level 24

.small:last-of-type

 

Level 25

bento:empty

 

Level 26

apple:not(.small)
:not(.small, plate)

 

Level 27

[for]

 

Level 28

plate[for]

 

Level 29

[for="Vitaly"]

 

Level 30

[for^="Sa"]

 

Level 31

[for$="ato"]

 

Level 32

[for*="obb"]
저작자표시 (새창열림)

'CSS > GAME' 카테고리의 다른 글

FLEXBOX FROGGY - LEVEL 24  (0) 2022.11.25

HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Layout Task</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="logo">
        My exciting website!
    </div>

    <nav>
        <ul>
            <li>
                <a href="">Home</a>
            </li>
            <li>
                <a href="">Blog</a>
            </li>
            <li>
                <a href="">About us</a>
            </li>
            <li>
                <a href="">Our history</a>
            </li>
            <li>
                <a href="">Contacts</a>
            </li>
        </ul>
    </nav>

    <main class="grid">
        <article>
            <h1>
                An Exciting Blog Post
            </h1>
            <img src="images/balloon-sq6.jpg" 
                alt="placeholder" 
                class="feature">
            <p>
                Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
                tomatillo melon azuki bean garlic.
            </p>
            <p>
                Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
                collard greens
                dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
            </p>
            <p>
                Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach
                avocado daikon
                napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
                carrot soko.
                Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion
                chickpea gram
                corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot
                watercress.
                Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
            </p>
            <p>
                Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed
                pea prairie
                turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane
                fennel azuki
                bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.
            </p>
            <p>
                Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery
                bitterleaf wattle
                seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout
                chard.
            </p>
        </article>

        <aside>
            <h2>
                Photography
            </h2>
            <ul class="photos">
                <li>
                    <img src="images/balloon-sq1.jpg" 
                        alt="placeholder">
                </li>
                <li>
                    <img src="images/balloon-sq2.jpg" 
                        alt="placeholder">
                </li>
                <li>
                    <img src="images/balloon-sq3.jpg" 
                        alt="placeholder">
                </li>
                <li>
                    <img src="images/balloon-sq4.jpg" 
                        alt="placeholder">
                </li>
                <li>
                    <img src="images/balloon-sq5.jpg" 
                        alt="placeholder">
                </li>
            </ul>
        </aside>
    </main>
</body>
</html>

 

 

CSS

body {
    background-color: #fff;
    color: #333;
    margin: 0;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

.logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
}

.grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}

nav {
    background-color: #000;
    padding: .5em;
    top: 0;
    position: sticky;
    
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
}

.photos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    grid-template-columns: 1fr 1fr;
}

.feature {
    width: 200px;
    float: left;
    margin: 0 20px 20px 0;
}

도움 받은 곳

https://github.com/mdn/learning-area/blob/main/css/css-layout/fundamental-layout-comprehension-finish/styles.css

https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982/2

 

 

깨달은 것

 

1. <nav>가 아닌 <ul>에 display: flex;를 설정해야 하는 이유

nav ul {
    display: flex;
    justify-content: space-between;
}

 

<nav>에 display: flex;를 설정할 경우

-> 플렉스 영역이 위와 같이 나타난다. <nav>의 직계 자식인 <ul>이 플렉스로 배치되는 것이다. 그러므로 <ul>에 flex 값을 부여해야 직계 자식인 <li>가 플렉스로 배치되므로 네비게이션 바와 같이 나타난다.

 

출처 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

저작자표시 (새창열림)

'CSS > MDN 평가' 카테고리의 다른 글

Typesetting a community school homepage  (0) 2022.11.13
A cool-looking box  (0) 2022.11.10
Creating fancy letterheaded paper  (0) 2022.11.09
Fundamental CSS comprehension  (0) 2022.11.09

header {display: flex}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Responsive Web Design Task: Task</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
        * {
            box-sizing: border-box;
        }

        html {
            font: 1.2em/1.4 Arial, Helvetica, sans-serif;
        }

        body {
            padding: 0 0 1em;
        }

        header {
            background-color: #333;
            color: #fff;
            border: 5px solid #000;
        }

        header ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        header a {
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 0.5em 1em;
            border-top: 1px solid #999;
        }

        header .title {
            font-size: 150%;
            font-style: italic;
            font-weight: bold;
            padding: 1em;
        }

        main {
            padding: 0 1em;
        }

        .cards {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .cards li {
            border: 5px solid #000;
            margin-bottom: 1em;
        }

        .cards h2 {
            background-color: #333;
            color: #fff;
            margin: 0;
            padding: 0.5em 1em;
        }

        .cards .inner {
            padding: 0.5em 1em;
        }

        .sidebar {
            background-color: #333;
            border: 5px solid #000;
            padding: 0.5em 1em;
            color: #fff;
        }

        @media screen and (min-width: 60em) {
            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            header ul {
                display: flex;
            }

            header li {
                margin: 0;
            }

            header a {
                border: 0;
            }

            main {
                display: grid;
                grid-template-columns: 3fr 1fr;
                gap: 20px;
                margin-top: 20px;
            }

            .cards {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <header>
        <div class="title">My Website</div>
        <nav>
            <ul>
                <li>
                    <a href="">Link 1</a>
                </li>
                <li>
                    <a href="">Link 2</a>
                </li>
                <li>
                    <a href="">Link 3</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>This is the main heading</h1>
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
                tomatillo melon azuki bean garlic.</p>

            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
                collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

            <ul class="cards">
                <li>
                    <h2>Card One</h2>
                    <div class="inner">
                        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
                            spinach avocado.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Two</h2>
                    <div class="inner">
                        <p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin
                            horseradish spinach carrot soko.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Three</h2>
                    <div class="inner">
                        <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale
                            pumpkin onion chickpea gram corn pea.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Four</h2>
                    <div class="inner">
                        <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale
                            pumpkin onion chickpea gram corn pea.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Five</h2>
                    <div class="inner">
                        <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya
                            nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
                    </div>
                </li>

            </ul>
        </article>

        <aside class="sidebar">
            <p>Have you discovered all of the other excellent content on this website?</p>
        </aside>
    </main>

</body>

</html>

 

 

 

hedaer {display: grid}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Responsive Web Design Task: Task</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
        * {
            box-sizing: border-box;
        }

        html {
            font: 1.2em/1.4 Arial, Helvetica, sans-serif;
        }

        body {
            padding: 0 0 1em;
        }

        header {
            background-color: #333;
            color: #fff;
            border: 5px solid #000;
        }

        header ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        header a {
            color: #fff;
            text-decoration: none;
            display: block;
            padding: 0.5em 1em;
            border-top: 1px solid #999;
        }

        header .title {
            font-size: 150%;
            font-style: italic;
            font-weight: bold;
            padding: 1em;
        }

        main {
            padding: 0 1em;
        }

        .cards {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .cards li {
            border: 5px solid #000;
            margin-bottom: 1em;
        }

        .cards h2 {
            background-color: #333;
            color: #fff;
            margin: 0;
            padding: 0.5em 1em;
        }

        .cards .inner {
            padding: 0.5em 1em;
        }

        .sidebar {
            background-color: #333;
            border: 5px solid #000;
            padding: 0.5em 1em;
            color: #fff;
        }

        @media screen and (min-width: 60em) {
            header {
                display: grid;
                grid-template-columns: 1fr 1fr;
                align-items: center;
            }

            header nav {
                justify-self: end;
            }

            header ul {
                display: flex;
            }

            header li {
                margin: 0;
            }

            header a {
                border: 0;
            }

            main {
                display: grid;
                grid-template-columns: 3fr 1fr;
                gap: 20px;
                margin-top: 20px;
            }

            .cards {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <header>
        <div class="title">My Website</div>
        <nav>
            <ul>
                <li>
                    <a href="">Link 1</a>
                </li>
                <li>
                    <a href="">Link 2</a>
                </li>
                <li>
                    <a href="">Link 3</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>This is the main heading</h1>
            <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
                tomatillo melon azuki bean garlic.</p>

            <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
                collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

            <ul class="cards">
                <li>
                    <h2>Card One</h2>
                    <div class="inner">
                        <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
                            spinach avocado.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Two</h2>
                    <div class="inner">
                        <p>Daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin
                            horseradish spinach carrot soko.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Three</h2>
                    <div class="inner">
                        <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale
                            pumpkin onion chickpea gram corn pea.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Four</h2>
                    <div class="inner">
                        <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale
                            pumpkin onion chickpea gram corn pea.</p>
                    </div>
                </li>
                <li>
                    <h2>Card Five</h2>
                    <div class="inner">
                        <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya
                            nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p>
                    </div>
                </li>

            </ul>
        </article>

        <aside class="sidebar">
            <p>Have you discovered all of the other excellent content on this website?</p>
        </aside>
    </main>

</body>

</html>

도움 받은 곳

https://github.com/mdn/css-examples/blob/main/learn/tasks/rwd/marking.md

 

깨달은 것

1. <header>를 grid로 구현하는 것보다 flex로 구현하는 게 훨씬 간단하다. 

 

2. 미디어 쿼리가 꼭 필요하지 않을수도 있다. 

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

코드를 작성할 경우 auto-fill 값은 비록 비어있을지라도, 가능한 행에 가능한 한 많은 열을 맞춘다. 그러면 minmax(200px,1fr)에 따라 최소 200px와 최대 1fr의 비율을 가진 열이 생성된다. 하지만 모바일 버전과 이외의 장치의 너비를 명확히 구분하고 싶으면 미디어 쿼리를 쓰는게 더 좋아보인다. 

 

 

참조 : https://css-tricks.com/books/greatest-css-tricks/flexible-grids/

 

 

저작자표시 (새창열림)

'CSS > MDN 문제 풀이' 카테고리의 다른 글

Test your skills: Multicol  (0) 2022.11.17
Test your skills: Positioning  (0) 2022.11.15
Test your skills: Floats  (0) 2022.11.15
Test your skills: Grid  (0) 2022.11.15
Test your skills: Flexbox  (0) 2022.11.14

Task 1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Multiple-column Layout: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            column-count: 3;
            column-gap: 50px;
        }
    </style>

</head>

<body>
    <div class="container">
        <p>
            Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.
        </p>

        <p>
            Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
            collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

        <p>
            Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
            daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
            carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
            onion chickpea gram corn pea.
        </p>
    </div>
</body>
</html>

 

 

Task 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Multiple-column Layout: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            column-width: 200px;
            column-gap: 25px;
            column-rule: 5px solid #ccc;
        }
    </style>
</head>

<body>

    <div class="container">
        <p>
            Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.
        </p>

        <p>
            Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
            collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
        </p>

        <p>
            Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
            daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
            carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
            onion chickpea gram corn pea.
    
        </p>
    </div>
</body>
</html>

 

 

Task 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Multiple-column Layout: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            column-count: 3;
        }

        .box {
            text-align: center;
            margin: 1em 0;
            column-span: all;
        }

        .box h2 {
            margin: 0;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            column-gap: 0.5em;
            align-items: center;
        }

        .box h2::before {
            content: "";
            border-bottom: 5px dotted #ccc;
        }

        .box h2::after {
            content: "";
            border-bottom: 5px dotted #ccc;
        }

        .subhead {
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>
            Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.
        </p>

        <p>
            Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean
            collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
        </p>

        <div class="box">
            <h2>I am a level 2 heading</h2>
            <div class="subhead">Lotus root water spinach fennel</div>
        </div>

        <p>
            Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado
            daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
            carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin
            onion chickpea gram corn pea.
        </p>
    </div>
</body>
</html>

 

도움 받은 곳

https://github.com/mdn/css-examples/blob/main/learn/tasks/multicol/marking.md

https://discourse.mozilla.org/t/assessment-wanted-for-multicol-skill-test-1/61699/3

 

저작자표시 (새창열림)

'CSS > MDN 문제 풀이' 카테고리의 다른 글

Test your skills: Responsive web design and media queries  (0) 2022.11.18
Test your skills: Positioning  (0) 2022.11.15
Test your skills: Floats  (0) 2022.11.15
Test your skills: Grid  (0) 2022.11.15
Test your skills: Flexbox  (0) 2022.11.14

+ Recent posts

티스토리툴바