HTML

<!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>Cool box</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <body>
        <p>This is a cool box</p>
    </body>
</body>
</html>

 

CSS

html {
    font-family: sans-serif;
}

/* Your CSS below here */

p {
    /* sizing and position */
    width: 200px;
    margin: 10px auto;
    line-height: 8;
    /* text */
    font-size: 1.1rem;
    /* Since the default font-size is 16px,
        I guessed that the correct size would be 1.1rem. */
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px black;
    /* border */
    border-radius: 0.6rem;
    border: 1px solid rgb(141, 18, 18);
    /* background */
    background-color: red;
    background-image: linear-gradient(to top left,
            rgba(0, 0, 0, .2),
            rgba(0, 0, 0, .2) 30%,
            rgba(0, 0, 0, 0));
    /* other effects */
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .5),
        inset -2px -2px 2px rgba(0, 0, 0, .5),
        2px 2px 5px black;
}

 

도움 받은 곳

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

https://discourse.mozilla.org/t/a-cool-looking-box-assessment/24685/2

https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-finished/style.css

https://github.com/mdn/learning-area/blob/main/css/styling-boxes/cool-information-box-finished/marking-guide.md

 

 

깨달은 것

1. linear-gradinet의 값으로 사이드 키워드의 순서는 중요하지 않다. (MDN)

2.

background-color: red;
background: linear-gradient(to top left,
    rgba(0, 0, 0, .2),
    rgba(0, 0, 0, .2) 30%,
    rgba(0, 0, 0, 0));

-> css를 이렇게 작성하였을 때, 배경색으로 설정한 red가 안 나왔다. 그 이유가 backgroudn-color의 값을 후에 선언된 background가 재정의했기 때문이었다. 

 

 

저작자표시 (새창열림)

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

Fundamental layout comprehension  (0) 2022.11.18
Typesetting a community school homepage  (0) 2022.11.13
Creating fancy letterheaded paper  (0) 2022.11.09
Fundamental CSS comprehension  (0) 2022.11.09

HTML

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <article>
        <h1>Awesome<br>Company</h1>

        <address>
            <p>The Awesome Company</p>
            <p>102-112 Frail Bend Bridge<br>
                The Dwindlings<br>
                Little Hornet<br>
                HX3 9ZQ<br>
                UK</p>
        </address>
    </article>
</body>
</html>



CSS

* {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
}

body {
    margin: 0;
    background: #ccc;
}

article {
    width: 210mm;
    height: 297mm;
    margin: 20px auto;
    position: relative;
}

address {
    position: absolute;
    bottom: 8mm;
    right: 20mm;
}

h1 {
    position: absolute;
    top: 12mm;
    left: 20mm;
    width: 128px;
    height: 128px;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    padding: 44px 0;
    color: white;
    text-shadow: 1px 1px 1px black;
}

/* Your CSS below here */

article {
    background: url(images/top-image.png) no-repeat;
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .2),
            rgba(255, 255, 255, 0) 20%,
            rgba(255, 255, 255, 0) 80%,
            rgba(0, 0, 0, .2)),
        url(images/top-image.png) no-repeat,
        url(images/bottom-image.png) 0% 100% no-repeat;
    background-color: white;
    border-top: 1mm solid red;
    border-bottom: 1mm solid red;
}

h1 {
    background-image: url(images/logo.png) ;
    /* filter: drop-shadow(1px 1px 0px rgb(0, 0, 0)); */
    border-radius: 100%;
    box-shadow: 3px 3px 3px black;
}

도움 받은 곳
https://github.com/reyob/Creating-fancy-letterheaded-paper/blob/master/style.css

https://discourse.mozilla.org/t/creating-fancy-letterheaded-paper-assessment/24684

https://mdn.github.io/learning-area/css/styling-boxes/letterheaded-paper-finished/

https://github.com/mdn/learning-area/blob/main/css/styling-boxes/letterheaded-paper-finished/style.css

 

 

깨달은 것

 

1. border-radius

/* The syntax of the second radius allows one to four values */
/* (first radius values) / radius */
border-radius: 10px / 20px;

/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#see_also

 

 

2.  속성을 알 수 없거나 지정된 속성에 대해 값이 유효하지 않은 경우, 선언이 유효하지 않은 것으로 간주되어 브라우저의 CSS 엔진에서 완전히 무시된다. (MDN) 그러므로 상단 이미지를 추가하는 또 다른 배경 선언을 추가한 것이다.

 

 

찾아볼 것

border-radius: 64px;과 border-radius: 100%;가 똑같이 작동하는 이유는?

-> % 기준으로 50%가 원을 그리고 px 기준으로 50px이 원을 그린다. 이유는 모르겠다.

 

저작자표시 (새창열림)

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

Fundamental layout comprehension  (0) 2022.11.18
Typesetting a community school homepage  (0) 2022.11.13
A cool-looking box  (0) 2022.11.10
Fundamental CSS comprehension  (0) 2022.11.09

HTML

<!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>Fundamental CSS comprehension</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="card">
        <header>
            <h2>Chris Mills</h2>
        </header>
        <article>
            <img src="images/chris.jpg" 
                alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
            <p>50 My Street<br>
                The Town<br>
                Gray Peach<br>
                UK<br>
                ZO50 1MU<br>
                <strong>Tel</strong>: 01234 567 890<br>
                <strong>Mail</strong>: chris@nothere.com
            </p>
        </article>
        <footer>
            <p>Editing, writing, and web development services</p>
        </footer>
    </section>
</body>
</html>

 

CSS

/* General page styles */

body {
    margin: 0;
}

html {
    font-family: 'Helvetica neue', Arial, 'sans serif';
    font-size: 10px;
    background-color: #ccc;
}

/* Style for card container  */

.card { 
    width: 35em;
    height: 22em;
    margin: 5em auto;
    background-color: red;
    border: 0.2em solid black;
    border-radius: 1.5em;
}

.card h2,
.card p {
    margin: 0;
}

/* Style for header and footer */

.card header {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    border-radius: 1.5em 1.5em 0 0;
}

.card footer {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    border-radius: 0 0 1.5em 1.5em;
}

.card header,
.card footer {
    height: 3em;
    padding: 1em;
}

.card header h2 {
    font-size: 2em;
    line-height: 1.5;
}

.card footer p {
    font-size: 1.5em;
    line-height: 2;
}

/* Style for main contents */

.card article {
    height: 12em;
    background-color: rgba(0, 0, 0, .5);
}

.card article img{
    max-height: 100%;
    float: right;
}

.card article p {
    line-height: 1.3;
    padding: 1em;
    color: white;
}

도움 받은 곳

https://discourse.mozilla.org/t/fundamental-css-comprehension/101395

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values

 

깨달은 것

line-height 속성이 em 단위로 제공된 값은 예기치 않은 결과를 생성할 수 있으므로 단위 없는 값으로 나태내기.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values

저작자표시 (새창열림)

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

Fundamental layout comprehension  (0) 2022.11.18
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

First Task

 

<!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>Table task</title>
    <style>
        table {
            font-size: 75%;
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
        }

        thead th:nth-child(1) {
            width: 20%;
        }

        thead th:nth-child(2) {
            width: 15%;
        }

        thead th:nth-child(3) {
            width: 15%;
        }

        thead th:nth-child(4) {
            width: 50%;
        }

        th,
        td {
            vertical-align: top;
            padding: .3em;
        }
        
        th:first-child,
        th:last-child,
        td:last-child,
        tfoot td:last-child {
            text-align: left;
        }        

        thead,
        tbody,
        tfoot,
        tfoot th:first-child {
            text-align: right;
        }
        
        tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        tfoot {
            border-top: 1px solid #999;
        }
        </style>
</head>
<body>
    <table>
        <caption>A summary of the UK's most famous punk bands</caption>
        <thead>
            <tr>
                <th scope="col">Band</th>
                <th scope="col">Year formed</th>
                <th scope="col">No. of Albums</th>
                <th scope="col">Most famous song</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Buzzcocks</th>
                <td>1976</td>
                <td>9</td>
                <td>Ever fallen in love (with someone you shouldn't've)</td>
            </tr>
            <tr>
                <th scope="row">The Clash</th>
                <td>1976</td>
                <td>6</td>
                <td>London Calling</td>
            </tr>
            <tr>
                <th scope="row">The Damned</th>
                <td>1976</td>
                <td>10</td>
                <td>Smash it up</td>
            </tr>
            <tr>
                <th scope="row">Sex Pistols</th>
                <td>1975</td>
                <td>1</td>
                <td>Anarchy in the UK</td>
            </tr>
            <tr>
                <th scope="row">Sham 69</th>
                <td>1976</td>
                <td>13</td>
                <td>If the kids are united</td>
            </tr>
            <tr>
                <th scope="row">Siouxsie and the Banshees</th>
                <td>1976</td>
                <td>11</td>
                <td>Hong Kong Garden</td>
            </tr>
            <tr>
                <th scope="row">Stiff Little Fingers</th>
                <td>1977</td>
                <td>10</td>
                <td>Suspect Device</td>
            </tr>
            <tr>
                <th scope="row">The Stranglers</th>
                <td>1974</td>
                <td>17</td>
                <td>No More Heroes</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row" colspan="2">Total albums</th>
                <td colspan="2">77</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

-> 처음으로 작성한 코드이다. 가독성이 최악이다.

 

Second Task

<!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>Table task</title>
    <style>
        table {
            font-size: 75%;
            table-layout: fixed;
            width: 100%;
            max-width: 800px;
            border-collapse: collapse;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
        }

        thead th:nth-child(1) {
            width: 20%;
        }

        thead th:nth-child(2) {
            width: 15%;
        }

        thead th:nth-child(3) {
            width: 15%;
        }

        thead th:nth-child(4) {
            width: 50%;
        }

        th,
        td {
            vertical-align: top;
            padding: .3em;
        }
        
        tr :nth-child(1),
        tr :nth-child(4) {
            text-align: left;
        }

        tr :nth-child(2),
        tr :nth-child(3) {
            text-align: right;
        }

        tfoot tr :nth-child(1) {
            text-align: right;
        }

        tfoot tr :nth-child(2) {
            text-align: left;
        }

        tbody tr:nth-child(odd) {
            background-color: #eee;
        }

        tfoot {
            border-top: 1px solid #999;
        }
        </style>
</head>
<body>
    <table>
        <caption>A summary of the UK's most famous punk bands</caption>
        <thead>
            <tr>
                <th scope="col">Band</th>
                <th scope="col">Year formed</th>
                <th scope="col">No. of Albums</th>
                <th scope="col">Most famous song</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Buzzcocks</th>
                <td>1976</td>
                <td>9</td>
                <td>Ever fallen in love (with someone you shouldn't've)</td>
            </tr>
            <tr>
                <th scope="row">The Clash</th>
                <td>1976</td>
                <td>6</td>
                <td>London Calling</td>
            </tr>
            <tr>
                <th scope="row">The Damned</th>
                <td>1976</td>
                <td>10</td>
                <td>Smash it up</td>
            </tr>
            <tr>
                <th scope="row">Sex Pistols</th>
                <td>1975</td>
                <td>1</td>
                <td>Anarchy in the UK</td>
            </tr>
            <tr>
                <th scope="row">Sham 69</th>
                <td>1976</td>
                <td>13</td>
                <td>If the kids are united</td>
            </tr>
            <tr>
                <th scope="row">Siouxsie and the Banshees</th>
                <td>1976</td>
                <td>11</td>
                <td>Hong Kong Garden</td>
            </tr>
            <tr>
                <th scope="row">Stiff Little Fingers</th>
                <td>1977</td>
                <td>10</td>
                <td>Suspect Device</td>
            </tr>
            <tr>
                <th scope="row">The Stranglers</th>
                <td>1974</td>
                <td>17</td>
                <td>No More Heroes</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row" colspan="2">Total albums</th>
                <td colspan="2">77</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

-> 검색을 통해 수정한 코드이다. 훨씬 읽기 편해졌다. :nth-child 의사 클래스를 사용하는 경우, :first-child, :last-child를 사용하는 것보다 :nth-child로 통일시키는게 가독성이 좋아보인다. 

 

도움 받은 곳

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

https://discourse.mozilla.org/t/test-your-skills-tables-help-wanted/85467

https://discourse.mozilla.org/t/assessment-wanted-for-test-your-skills-tables-task/102305

 

 

깨달은 것

vertical-align 속성은 인라인, 인라인 블록 또는 테이블 셀 상자의 수직 정렬을 설정한다.

 

 

찾아볼 것

https://alistapart.com/article/web-typography-tables/ -> 읽어보기 

저작자표시 (새창열림)

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

Test your skills: Grid  (0) 2022.11.15
Test your skills: Flexbox  (0) 2022.11.14
Test your skills: Images and form elements  (0) 2022.11.08
Test your skills: Sizing  (0) 2022.11.08
Test your skills: Values and units  (0) 2022.11.08

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>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        .box {
            border: 5px solid #000;
            width: 400px;
            height: 200px;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/balloons.jpg" alt="balloons">
    </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>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        .myform {
            border: 2px solid #000;
            padding: 5px;
        }

        .myform input[type] {
            font-size: inherit;
            padding: 10px;
        }

        .myform input[type="submit"] {
            background-color: rebeccapurple;
            color: white;
            border: 0;
            border-radius: 5px;
        }

    </style>
</head>
<body>
    <form method="post" action="" class="myform">
        <div>
            <label for="fldSearch">Keywords</label>
            <input type="search" id="fldSearch" name="keywords">
            <input type="submit" name="btnSubmit" value="Search">
        </div>
    </form>
</body>
</html>

도움 받은 곳

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

https://discourse.mozilla.org/t/need-help-with-task-1-of-images-and-form-elements-skill-test/62981

https://discourse.mozilla.org/t/assessment-wanted-for-images-and-form-elements-skill-test-1/62977

 

 

깨달은 것

Task 1:

object-fit 속성은 컨테이너 내부의 이미지에 대한 설정을 하는 것이므로 이미지가 컨테이너 내부에 들어가게 설정해야 한다.

 

찾아볼 것

https://discourse.mozilla.org/t/need-help-with-task-1-of-images-and-form-elements-skill-test/62981

-> 이해하기 

 

 

저작자표시 (새창열림)

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

Test your skills: Flexbox  (0) 2022.11.14
Test your skills: Tables  (0) 2022.11.09
Test your skills: Sizing  (0) 2022.11.08
Test your skills: Values and units  (0) 2022.11.08
Test your skills: Overflow  (0) 2022.11.07

+ Recent posts

티스토리툴바