Task 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Box Model 1</title>
    <style>
        .box {
            border: 5px solid rebeccapurple;
            background-color: lightgray;
            padding: 40px;
            margin: 40px;
            width: 300px;
            height: 150px;
        }

        .alternate {
            box-sizing: border-box;
            width: 390px;
        }
    </style>
</head>
<body>
    <div class="box">
        I use the standard box model.
    </div>
    <div class="box alternate">
        I use the alternate box model.
    </div>
</body>
</html>

 

Task 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Box Model 2</title>
    <style>
        .box {
            border: 5px dotted #333;
            margin: 20px 1em 40px 2em;
            padding: 1em;
        }
    </style>
</head>
<body>
    <div class="box">I use the standard box model.</div>
</body>
</html>

 

Task 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Box Model 3</title>
    <style>
        .box span {
            background-color: pink;
            border: 5px solid black;
            padding: 1em;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>
            Veggies es bonus vobis, 
            <span>proinde vos postulo</span> 
            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>
</body>
</html>
저작자표시 (새창열림)

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

Test your skills: Writing modes and logical properties  (0) 2022.11.07
Test your skills: Backgrounds and borders  (0) 2022.11.07
Test your skills: Selectors  (0) 2022.11.06
Test your skills: The Cascade  (0) 2022.11.04
Styling a biography page  (0) 2022.10.25

Task 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 1</title>
    <style>
        h1 {
            color: blue;
        }

        h2 {
            background-color: blue;
            color: white;
        }

        span {
            font-size: 200%;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>This is a heading</h1>
        <p>Veggies es <span>bonus vobis</span>
            , proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi
            tomatillo melon azuki bean garlic.</p>
        <h2>A level 2 heading</h2>
        <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>
</body>
</html>

 

Task 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 2</title>
    <style>
        #special {
            background-color: yellow;
        }

        .alert {
            border: 1px solid gray;
        }

        .alert.stop {
            background-color: red;
        }

        .alert.go {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>This is a heading</h1>
        <p>Veggies es 
            <span class="alert">bonus vobis</span>
            , proinde vos postulo 
            <span class="alert stop">essum magis</span> 
            kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
        </p>
        <h2 id="special">A level 2 heading</h2>
        <p>
            Gumbo beet greens corn soko endive gumbo gourd.
        </p>
        <h2>Another level 2 heading</h2>
        <p>
            <span class="alert go">Parsley shallot</span> 
            courgette tatsoi pea sprouts fava bean collard greens dandelion
            okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
        </p>
    </div>
</body>
</html>

 

Task 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 3</title>
    <style>
        a:link {
            color: orange;
        }

        a:visited {
            color: green;
        }
        
        a:hover {
            text-decoration: none;
        }

        .container > :first-child {
            font-size: 150%;
        }

        .container > :first-child::first-line {
            color: red;
        }

        tr:nth-child(even) {
            background-color: #333;
            color: white;
        }
    </style>
</head>

<body>
    <div class="container">
        <p>Veggies es 
            <a href="http://example.com">bonus vobis</a>
            , 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>
        <table>
            <tbody>
                <tr>
                    <th>Fruits</th>
                    <th>Vegetables</th>
                </tr>
                <tr>
                    <td>Apple</td>
                    <td>Potato</td>
                </tr>
                <tr>
                    <td>Orange</td>
                    <td>Carrot</td>
                </tr>
                <tr>
                    <td>Tomato</td>
                    <td>Parsnip</td>
                </tr>
                <tr>
                    <td>Kiwi</td>
                    <td>Onion</td>
                </tr>
                <tr>
                    <td>Banana</td>
                    <td>Beet</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

 

Task 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 4</title>
    <style>
        h2 + p {
            color: red;
        }

        ul.list > li {
            list-style-type: none;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>This is a heading</h2>
        <p>
            This paragraph comes after the heading.
        </p>
        <p>
            This is the second paragraph.
        </p>
    
        <h2>Another heading</h2>
        <p>
            This paragraph comes after the heading.
        </p>
    
        <ul class="list">
            <li>One</li>
            <li>Two
                <ul>
                    <li>2.1</li>
                    <li>2.2</li>
                </ul>
            </li>
            <li>Three</li>
        </ul>    
    </div>
</body>
</html>

 

Task 5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 5</title>
    <style>
        a {
            border: 5px solid grey;
        }

        a[title] {
            border-color: pink;
        }

        a[href*="contact"] {
            border-color: orange;
        }
        
        a[href^="https"] {
            border-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="https://example.com">Link 1</a>
        </li>
        <li>
            <a href="http://example.com" title="Visit example.com">Link 2</a>
        </li>
        <li>
            <a href="/contact">Link 3</a>
        </li>
        <li>
            <a href="../contact/index.html">Link 4</a>
        </li>
    </ul>
</body>
</html>

 

도움 받은 곳 

https://discourse.mozilla.org/t/assessment-wanted-for-test-your-skills-selectors-tasks-1-5/101702

 

 

깨달은 것

 

1.

 .container > :first-child {
            font-size: 150%;
}

.container > :first-child::first-line {
            color: red;
}

Task 3을 처음에 이렇게 작성하였는데

.container p:first-child {
  font-size: 150%;
}

.container p:first-child::first-line {
  color: red;
}

이 방법으로 작성하는게 가독성이 더 좋아보인다. 

 

2. 클래스는 여러번 쓰이기 때문에 클래스명 앞에 요소를 써줘야 특정성이 더 명확해진다.

 

 

 

저작자표시 (새창열림)

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

Test your skills: Writing modes and logical properties  (0) 2022.11.07
Test your skills: Backgrounds and borders  (0) 2022.11.07
Test your skills: The box model  (0) 2022.11.06
Test your skills: The Cascade  (0) 2022.11.04
Styling a biography page  (0) 2022.10.25

Task 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 1</title>
    <style>
            #outer div ul .nav a {
            background-color: powderblue;
            padding: 5px;
            display: inline-block;
            margin-bottom: 10px;
            }

            div div li a {
            color: rebeccapurple;
            }

            #outer #inner ul .nav a {
                background-color: unset;
            }
    </style>
</head>
<body>
    <div id="outer" class="container">
        <div id="inner" class="container">
            <ul>
                <li class="nav"><a href="#">One</a></li>
                <li class="nav"><a href="#">Two</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

 

Task 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task 2</title>
    <style>
            @layer yellow, green, purple;

            @layer yellow {
                #outer div ul .nav a {
                padding: 5px;
                display: inline-block;
                margin-bottom: 10px;
                }
            }
            @layer purple {
                div div li a {
                color: rebeccapurple;
                }
            }
            @layer green {
                a {
                color: lightgreen;
                }
            }               
    </style>
</head>
<body>
    <div id="outer" class="container">
        <div id="inner" class="container">
            <ul>
                <li class="nav"><a href="#">One</a></li>
                <li class="nav"><a href="#">Two</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

 

도움 받은 곳

Task1 :  https://discourse.mozilla.org/t/assessment-wanted-for-cascade-skill-test/85961

Task2 : https://discourse.mozilla.org/t/assessment-wanted-for-test-your-skills-the-cascade-tasks-1-2/101651

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#understanding_inheritance

 

 

깨달은 것

Task1  

#outer #inner ul .nav a {
	background-color: unset;
}

나는 코드를 이렇게 작성했는데 (2-1-2) 

#outer #inner a {
	background-color: unset;
}

이렇게 작성해도 2-0-1로 

 #outer div ul .nav a {
	background-color: powderblue;
	padding: 5px;
	display: inline-block;
	margin-bottom: 10px;
}

위의 1-1-3보다 우선이 되므로 상관없다. 

 

 

 

찾아볼 것 

Task 1

#outer #inner ul .nav a {
	background-color: unset;
}

background-color의 값으로 inherit, initial, revert, unset 4개 모두 가능한 이유 

inherint -> 상속이 불가능하므로 초기값인 transparent를 가진다.

initial -> 초기값인 transparent를 가진다.

revert -> 상속 혹은 기본 브라우저 스타일을 가지는데 상속이 불가능 하므로 브라우저 기본 스타일인 transparent를 가진다.

unset -> 상속 혹은 초기값인데 상속이 불가능하므로 초기값인 transparent를 가진다.

 

저작자표시 (새창열림)

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

Test your skills: Writing modes and logical properties  (0) 2022.11.07
Test your skills: Backgrounds and borders  (0) 2022.11.07
Test your skills: The box model  (0) 2022.11.06
Test your skills: Selectors  (0) 2022.11.06
Styling a biography page  (0) 2022.10.25 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting a biography</title>
    <style>
        body {
            background-color: #fff;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            padding: 1em;
            margin: 0;
        }
    
        h1 {
            color: hotpink;
            font-size: 2em;
            font-family: Georgia, 'Times New Roman', Times, serif;
            border-bottom: 10px dotted purple;
        }
    
        h2 {
            font-size: 1.5em;
            font-style: italic;
        }
    
        .job-title {
            color: #999999;
            font-weight: bold;
        }
    
        a:link,
        a:visited {
            color: #fb6542;
        }
    
        a:hover {
            color: green;
            text-decoration: none;
        }

        ul {
            background-color: #eeeeee;
            border: 5px solid purple;
            padding: 1em;
        }
    </style>
</head>

<body>
    <h1>Jane Doe</h1>
    <div class="job-title">Web Developer</div>
    <p>
        Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.
        Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
    
    <p>
        A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic
        country, in which roasted parts of sentences fly into your mouth.
    </p>
    
    <h2>Contact information</h2>
    <ul>
        <li>Email:
            <a href="mailto:jane@example.com">jane@example.com</a>
        </li>
        <li>Web:
            <a href="http://example.com">http://example.com</a>
        </li>
        <li>Tel: 123 45678</li>
    </ul>
    
</body>

</html>
저작자표시 (새창열림)

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

Test your skills: Writing modes and logical properties  (0) 2022.11.07
Test your skills: Backgrounds and borders  (0) 2022.11.07
Test your skills: The box model  (0) 2022.11.06
Test your skills: Selectors  (0) 2022.11.06
Test your skills: The Cascade  (0) 2022.11.04

+ Recent posts

티스토리툴바