Task 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Position: 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-sizing: border-box;
        }

        .container {
            width: 500px;
            padding: 0.5em;
            border: 5px solid #ccc;
            position: relative;
        }

        .target {
            width: 150px;
            height: 150px;
            border-radius: 5px;
            background-color: rgb(207,232,220);
            padding: 1em;
            position: absolute;
            top: 0;
            right: 0;

            /* Additional question */
            
            z-index: -1;
        }
    </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>
        <div class="target">Target</div>
        <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" />
    <title>Position: 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;
        }

        * {
            box-sizing: border-box;
        }

        .container {
            width: 550px;
            height: 400px;
            padding: .5em;
            border: 5px solid #ccc;
            overflow: auto;
        }

        .sidebar {
            background-color: rgb(207, 232, 220);
            padding: 1em;
            float: left;
            width: 150px;
            position: fixed;
        }

        .content {
            padding: 1em;
            margin-left: 160px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <p>
                This is the sidebar. It should remain in position as the content scrolls.
            </p>
        </div>
        <div class="content">
            <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>
        </div>
    </div>
</body>
</html>

도움 받은 곳

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

 

 

 

저작자표시 (새창열림)

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

Test your skills: Responsive web design and media queries  (0) 2022.11.18
Test your skills: Multicol  (0) 2022.11.17
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>Float: 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-sizing: border-box;
        }

        .box {
            width: 500px;
            padding: 0.5em;
        }

        .float {
            margin: 15px;
            width: 150px;
            height: 150px;
            border-radius: 5px;
            background-color: rebeccapurple;
            color: #fff;
            padding: 1em;
        }

        .float1 {
            float: left;
        }

        .float2 {
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="float float1">One</div>
        <div class="float float2">Two</div>
        <p>The two boxes should float to either side of this text.</p>
    </div>
</body>
</html>

 

Task 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Float: 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;
        }

        * {
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            padding: 0.5em;
        }

        .float {
            margin: 15px;
            width: 150px;
            height: 150px;
            border-radius: 5px;
            background-color: rebeccapurple;
            color: #fff;
            padding: 1em;
        }

        .float {
            float: left;
        }

        .below {
            clear: left;
            
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="float">Float</div>
        <p>This sentence appears next to the float.</p>
        <p class="below">Cause this sentence to appear below the float.</p>
    </div>
</body>
</html>

 

 

Task 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Float: 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;
        }

        .box {
            width: 500px;
            padding: 0.5em;
        }

        .float {
            margin: 15px;
            width: 150px;
            height: 150px;
            border-radius: 5px;
            background-color: rgb(207, 232, 220);
            padding: 1em;
            float: right;
        }

        .box {
            background-color: rebeccapurple;
            padding: 10px;
            color: #fff;
            display: flow-root;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="float">Float</div>
        <p>This sentence appears next to the float.</p>
    </div>
</body>
</html>

 

도움 받은 곳

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

 

 

저작자표시 (새창열림)

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

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

Task 1

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Grid: 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;
        }

        .grid > * {
            background-color: #4D7298;
            border: 2px solid #77A6B6;
            border-radius: 0.5em;
            color: #fff;
            padding: 0.5em;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
    </style>

</head>
<body>
    <div class="grid">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        <div>Four</div>
    </div>
</body>
</html>

 

 

Task 2

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Grid: 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;
        }

        .grid > * {
            border-radius: .5em;
            color: #fff;
            padding: .5em;
        }

        .grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 100px 100px 100px;
            gap: 10px;
        }

        .item1 {
            background-color: rgba(74, 102, 112, .7);
            border: 5px solid rgba(74, 102, 112, 1);
            grid-column: 1 / 4;
            grid-row: 1 / 3;
        }

        .item2 {
            background-color: rgba(214, 162, 173, .7);
            border: 5px solid rgba(214, 162, 173, 1);
            grid-column: 2 / 5;
            grid-row:  2 / 4;
        }

        /* Additional question */

        .item1 {
            order: 1;
        }
    </style>
</head>

<body>
    <div class="grid">
        <div class="item1">One</div>
        <div class="item2">Two</div>
    </div>
</body>
</html>

 

 

Task 3

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Grid: 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;
        }

        .grid > * {
            background-color: #4D7298;
            border: 2px solid #77A6B6;
            border-radius: .5em;
            color: #fff;
            padding: .5em;
        }

        .grid {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr 2fr;
            grid-template-areas: 
                "one one"
                "two three"
                ". four";
        }

        .one {
            grid-area: one;
        }

        .two {
            grid-area: two;
        }

        .Three {
            grid-area: three;
        }

        .four {
            grid-area: four;
        }
        </style>
</head>

<body>
    <div class="grid">
        <div class="one">One</div>
        <div class="two">Two</div>
        <div class="three">Three</div>
        <div class="four">Four</div>
    </div>
</body>
</html>

 

 

Task 4

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Grid and Flex: task 4</title>
    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        .card {
            display: grid;
            grid-template-rows: 200px min-content;
        }

        .card > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

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

        .tags > * {
            background-color: #999;
            color: #fff;
            padding: 0.2em 0.8em;
            border-radius: 0.2em;
            font-size: 80%;
            margin: 5px;
        }

        .container {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(3, 1fr);
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="card">
            <img src="balloons1.jpg" 
                alt="a single red balloon">
            <ul class="tags">
                <li>balloon</li>
                <li>red</li>
                <li>sky</li>
                <li>blue</li>
                <li>Hot air balloon</li>
            </ul>
        </div>
        <div class="card">
            <img src="balloons2.jpg" 
                alt="balloons over some houses">
            <ul class="tags">
                <li>balloons</li>
                <li>houses</li>
                <li>train</li>
                <li>harborside</li>
            </ul>
        </div>
        <div class="card">
            <img src="balloons3.jpg" 
                alt="close-up of balloons inflating">
            <ul class="tags">
                <li>balloons</li>
                <li>inflating</li>
                <li>green</li>
                <li>blue</li>
            </ul>
        </div>
        <div class="card">
            <img src="balloons4.jpg" 
                alt="a balloon in the sun">
            <ul class="tags">
                <li>balloon</li>
                <li>sun</li>
                <li>sky</li>
                <li>summer</li>
                <li>bright</li>
            </ul>
        </div>
    </div>
</body>
</html>

 

도움 받은 곳

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

 

 

깨달은 것

min-content 사이즈 키워드는 본질적인 최소 너비를 나타낸다. Task 4의 경우, div.card의 직계 자식이 <img>와 <ul> 두개이다. <img>의 row 사이즈는 200px로 설정하고 ul의 사이즈를 min-width로 설정하여 ul의 텍스트를 최소 너비로 나타내는 것이다. 

 

min-width를 설정하지 않았을 경우 display:grid로 설정된 부모 요소에 따라서 세번째 <ul>의 row 사이즈가 나머지 <ul>의 사이즈에 맞게 커진다.

출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/min-content#specifications

 

 

 

저작자표시 (새창열림)

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

Test your skills: Positioning  (0) 2022.11.15
Test your skills: Floats  (0) 2022.11.15
Test your skills: Flexbox  (0) 2022.11.14
Test your skills: Tables  (0) 2022.11.09
Test your skills: Images and form elements  (0) 2022.11.08

Task 1

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

 

 

Task 2

ul {
  display: flex;
}

li {
  flex: 1;
}

li:first-child {
  flex: 2;
}

 

 

Task 3

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

 

 

Task 4

ul {
  display: flex;
  flex-flow: row wrap;
}

li {
  flex: 1 auto;
}

 

도움 받은 곳

https://discourse.mozilla.org/t/assessment-wanted-for-test-your-skills-flexbox-tasks-1-4/102862

 

 

저작자표시 (새창열림)

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

Test your skills: Floats  (0) 2022.11.15
Test your skills: Grid  (0) 2022.11.15
Test your skills: Tables  (0) 2022.11.09
Test your skills: Images and form elements  (0) 2022.11.08
Test your skills: Sizing  (0) 2022.11.08

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>St Huxley's Community College</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>St Huxley's Community College</h1>
    </header>
    
    <section>
        <h2>Brave new world</h2>
        <p>
            It's a brave new world out there. Our children are being put in increasing more competitive situations, both
            during recreation, and as they start to move into the adult world of <a
                href="https://en.wikipedia.org/wiki/Examination">examinations</a>, <a
                href="https://en.wikipedia.org/wiki/Jobs">jobs</a>, <a
                href="https://en.wikipedia.org/wiki/Career">careers</a>, and other life choices. Having the wrong mindset,
            becoming <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or making the wrong choices can
            contribute to them experiencing difficulty in taking their rightful place in today's ideal society.
        </p>
    
        <p>
            As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start
            in life — and you've come to the right place.
        </p>
    
        <h2>The best start in life</h2>
    
        <p>
            At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them
            the societal and emotional intelligence they need to win big in the coming utopia. We not only excel at subjects
            such as genetics, data mining, and chemistry, but we also include compulsory lessons in:
        </p>
    
        <ul>
            <li>Emotional control</li>
            <li>Judgement</li>
            <li>Assertion</li>
            <li>Focus and resolve</li>
        </ul>
    
        <p>
            If you are interested, then you next steps will likely be to:
        </p>
    
        <ol>
            <li><a href="#">Call us</a> for more information</li>
            <li><a href="#">Ask for a brochure</a>, which includes signup form</li>
            <li><a href="#">Book a visit</a>!</li>
        </ol>
    </section>
    
    <aside>
        <h2>Top course choices</h2>
        <ul>
            <li><a href="#">Genetic engineering</a></li>
            <li><a href="#">Genetic mutation</a></li>
            <li><a href="#">Organic Chemistry</a></li>
            <li><a href="#">Pharmaceuticals</a></li>
            <li><a href="#">Biochemistry with behaviour</a></li>
            <li><a href="#">Pure biochemistry</a></li>
            <li><a href="#">Data mining</a></li>
            <li><a href="#">Computer security</a></li>
            <li><a href="#">Bioinformatics</a></li>
            <li><a href="#">Cybernetics</a></li>
        </ul>    
        <p>
            <a href="#">See more</a>
        </p>    
    </aside>
    
    <nav>    
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Finding us</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Media</a></li>
            <li><a href="#">Prospectus</a></li>
        </ul>
    </nav>
    
    <footer>
        <p>
            &copy; 2016 St Huxley's Community College
        </p>
    </footer>
</body>
</html>

 

CSS - text-decorataion: none; 속성

/* General setup */

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1400px;
}

/* Layout */

section {
    float: left;
    width: 50%;
}

aside {
    float: left;
    width: 30%;
}

nav {
    float: left;
    width: 20%;
}

footer {
    clear: both;
}
header,
section,
aside,
nav,
footer {
    padding: 20px;
}

/* header and footer */

header,
footer {
    border-top: 5px solid #a66;
    border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 12, 2022 */

@font-face {
    font-family: 'afta_serifregular';
    src: url('fonts/aftaserifthin-regular-webfont.woff2') format('woff2'),
        url('fonts/aftaserifthin-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bree_serifregular';
    src: url('fonts/breeserif-regular-webfont.woff2') format('woff2'),
        url('fonts/breeserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* typography stuff */

html {
    font-family: 'afta_serifregular', sans-serif;
    font-size: 10px;
}

h1,
h2 {
    font-family: 'bree_serifregular', sans-serif;
    letter-spacing: 5px;
}

h1 {
    font-size: 5rem;
    text-align: center;
}

h2 {
    font-size: 3.2rem;
}

section h2 + p {
    text-indent: 20px;
}

p, 
li {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 3px;
}

/* Link styling */

a {
    outline: none;
}

a[href^="https"] {
    padding-right: 18px;
    background: url(external-link-52.png) no-repeat 100% 0;
    background-size: 16px 16px;
}

a:link, 
a:visited {
    color: #AB6866;
}

a:focus,
a:hover {
    text-decoration: none;
}

a:active {
    color: transparent;
    text-shadow: 0px 0px 1px #f00,
            0px 0px 2px #f00,
            0px 0px 3px black,
            0px 0px 4px black;
}

/* lists: extra margin top and bottom to make it
always have the same spacing as with paragraphs */

ul, ol {
    margin: 16px 0;
}

ul {
    list-style-type: square;
}

ol {
    list-style-type: lower-latin;
}

/* nav menu */

nav ul {
    padding-left: 0;
    margin-top: 10px;
}

nav li {
    list-style-type: none;
    margin-bottom: 20px;
}

nav li a {
    text-decoration: none;
    display: inline-block;
    width: 100%;
    line-height: 3;
    text-align: center;
    font-size: 2.5rem;
    border: 1px solid #a66;
}

nav li a:focus, 
nav li a:hover {
    color: white;
    background-color: #a66;
}

nav li a:active {
    color: yellow;
    background-color: black;
}

 

CSS - border-bottom 속성으로 밑줄 만들기

/* General setup */

* {
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1400px;
}

/* Layout */

section {
    float: left;
    width: 50%;
}

aside {
    float: left;
    width: 30%;
}

nav {
    float: left;
    width: 20%;
}

footer {
    clear: both;
}
header,
section,
aside,
nav,
footer {
    padding: 20px;
}

/* header and footer */

header,
footer {
    border-top: 5px solid #a66;
    border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 12, 2022 */

@font-face {
    font-family: 'afta_serifregular';
    src: url('fonts/aftaserifthin-regular-webfont.woff2') format('woff2'),
        url('fonts/aftaserifthin-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bree_serifregular';
    src: url('fonts/breeserif-regular-webfont.woff2') format('woff2'),
        url('fonts/breeserif-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* typography stuff */

html {
    font-family: 'afta_serifregular', sans-serif;
    font-size: 10px;
}

h1,
h2 {
    font-family: 'bree_serifregular', sans-serif;
    letter-spacing: 5px;
}

h1 {
    font-size: 5rem;
    text-align: center;
}

h2 {
    font-size: 3.2rem;
}

section h2 + p {
    text-indent: 20px;
}

p, 
li {
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 3px;
}

/* Link styling */

a {
    outline: none;
    text-decoration: none;
}

a[href^="https"] {
    padding-right: 18px;
    background: url(external-link-52.png) no-repeat 100% 0;
    background-size: 16px 16px;
}

a:link,
a:visited {
    color: #AB6866;
    border-bottom: 1px solid;
}

a:focus,
a:hover {
    border-bottom: none;
}

a:active {
    color: transparent;
    text-shadow: 0px 0px 1px #f00,
        0px 0px 2px #f00,
        0px 0px 3px black,
        0px 0px 4px black;
}

/* lists: extra margin top and bottom to make it
always have the same spacing as with paragraphs */

ul,
ol {
    margin: 16px 0;
}

ul {
    list-style-type: square;
}

ol {
    list-style-type: lower-latin;
}

/* nav menu */

nav ul {
    padding-left: 0;
    margin-top: 10px;
}

nav li {
    list-style-type: none;
    margin-bottom: 20px;
}

nav li a {
    display: inline-block;
    width: 100%;
    line-height: 3;
    text-align: center;
    font-size: 2.5rem;
}

nav li a:link,
nav li a:visited,
nav li a:focus,
nav li a:hover {
    border: 1px solid #a66;
}

nav li a:focus,
nav li a:hover {
    color: white;
    background-color: #a66;
}

nav li a:active {
    color: yellow;
    background-color: black;
    border: 1px solid black;
}

 

도움 받은 곳

https://github.com/mdn/learning-area/blob/main/css/styling-text/typesetting-a-homepage-finished/style.css

https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683/2

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

 

 

깨달은 것

1.  밑줄은 border-bottom가 아니라 text-decoration 을사용하여 만들어졌습니다. 일부 사람들은 전자가 후자보다 더 나은 스타일 옵션을 가지고 있기 때문에 이것을 선호합니다. 또한 밑줄이 그어진 단어의 디센더를 가로지르지 않도록 약간 더 낮게 그려집니다. (MDN)

 

2. border-bottom 속성으로 밑줄을 만들어보려고 시도했는데 코드의 가독성을 보면 text-decoration: none;을 쓰는게 더 좋아보인다. 하지만 단어를 가로지르지 않기에 border-bottom을 쓰는 것에 익숙해져야겠다.

 

 

찾아볼 것

CSS 2번째 코드를 더 쉽게 작성하는 법이 뭘까?

 

 

 

저작자표시 (새창열림)

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

Fundamental layout comprehension  (0) 2022.11.18
A cool-looking box  (0) 2022.11.10
Creating fancy letterheaded paper  (0) 2022.11.09
Fundamental CSS comprehension  (0) 2022.11.09

+ Recent posts

티스토리툴바