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

티스토리툴바