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

+ Recent posts

티스토리툴바