[Coding] CSS ๋ณต์Šต

๋ฌธ์ฑ„์˜ยท2023๋…„ 1์›” 25์ผ
CSSweb
0
post-thumbnail

๐Ÿ’ปCSS ๋ณต์Šต

html์—์„œ์˜ style ํƒœ๊ทธ

: style์€ html์˜ ๋ฌธ๋ฒ•์œผ๋กœ,
์ด style ํƒœ๊ทธ ์•ˆ์ชฝ์˜ ๋‚ด์šฉ์€ CSS์ด๋‹ˆ๊นŒ, ์ด ์•ˆ์ชฝ์˜ ๋‚ด์šฉ์„ CSS๋ผ๋Š” ์–ธ์–ด์˜ ๋ฌธ๋ฒ•์— ๋งž๊ฒŒ ํ•ด์„ํ•ด์„œ ์ฒ˜๋ฆฌํ•ด์•ผํ•ด. ๋ผ๋Š” ๋œป
(CSS์ฝ”๋“œ๋ฅผ HTML์˜ ํƒœ๊ทธ์ธ style๋กœ ๊ฐ์‹ธ๊ธฐ)

font color(htmlํƒœ๊ทธ๋กœ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•)

  • code
 <h1><a href="index.html"><font color="red">WEB</font></a></h1>
    <ol>
        <li><a href="1.html"><font color="red">HTML</font></a></li>
        <li><a href="2.html"><font color="red">CSS</font></a></li>
        <li><a href="3.html"><font color="red">JavsScript</font></a></li>
    </ol>
  • web

font color (CSS) ์œ„์™€ ๊ฒฐ๊ณผ๊ฐ€ ๊ฐ™๋‹ค.

  • code
 <style>
    a{
        color: red;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
  • web

font color (HTML์•ˆ์— CSS๋„ฃ๊ธฐ)

  • code
<style>
    a{
        color: black;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html"style="color:red">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
  • web

HTML aํƒœ๊ทธ์—์„œ CSS๋กœ ๋ฐ‘์ค„ ์—†์• ๋Š” ๋ฒ•

-code:

<style>
    a{
        text-decoration: none;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
  • web

๋ฐ‘์ค„ ๊ธ‹๊ธฐ(HTML์•ˆ์— CSS๋„ฃ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ)

-code

<style>
    a{
        color: black;
        text-decoration: none;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html"style="color:red;text-decoration:underline">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>

-web

CSS ๋‹จ์–ด๋“ค

์„ ํƒ์ž, ์„ ์–ธ, ์†์„ฑ, ์†์„ฑ๊ฐ’

CSS ์†์„ฑ์„ ๊ฒ€์ƒ‰์œผ๋กœ ์•Œ์•„๋‚ด๊ธฐ

:๊ฒ€์ƒ‰ ํ‚ค์›Œ๋“œ๋Š” css text size/middle property

  • code
<style>
    a{
        color: black;
        text-decoration: none;
    }
    h1{
        font-size:45px;
        text-align: center;
    }
</style>

style ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ CSS ์‚ฌ์šฉํ•˜๊ธฐ

CSS ์„ ํƒ์ž๋ฅผ ๊ฒ€์ƒ‰์œผ๋กœ ์•Œ์•„๋‚ด๊ธฐ

  • code
    .saw ๋Š” ํด๋ž˜์Šค๊ฐ€ saw์ธ ํƒœ๊ทธ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” "์„ ํƒ์ž"
<style>
    a{
        color:black;
        text-decoration: none;
    }
    .saw{
        color: gray;
    }
    h1{
        font-size:45px;
        text-align: center;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>

-web

CSS๋ฅผ saw, acrive ๋‘ ๊ฐœ์˜ ํด๋ž˜์Šค์— ํฌํ•จ์‹œํ‚ค๊ธฐ

:ํด๋ž˜์Šค๋ผ๋Š” ์†์„ฑ์˜ ๊ฐ’์€ ์—ฌ๋Ÿฌ๊ฐœ์˜ ๊ฐ’์ด ๋“ค์–ด์˜ฌ ์ˆ˜ ์žˆ๊ณ  ๋„์–ด์“ฐ๊ธฐ๋กœ ๊ตฌ๋ถ„ํ•œ๋‹ค

  • code
<style>
    a{
        color:black;
        text-decoration: none;
    }
    .saw{
        color: gray;
    }
    .active{
        color: red;
    }
    h1{
        font-size:45px;
        text-align: center;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
  • web

class ์„ ํƒ์ž ๋ณด๋‹ค ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’์€ id ์„ ํƒ์ž

  • code
    : ํƒœ๊ทธ ์„ ํƒ์ž: a, ํด๋ž˜์Šค ์„ ํƒ์ž: .saw, id ์„ ํƒ์ž: #active
    ๋งŒ์•ฝ ๋˜‘๊ฐ™์€ ํ˜•ํƒœ์˜ ์„ ํƒ์ž๋ผ๋ฉด, ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰์— ๋“ฑ์žฅํ•œ(๊ฐ€์žฅ ๊ฐ€๊นŒ์šด) ์„ ํƒ์ž๊ฐ€ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’๋‹ค.
  • ์„ ํƒ์ž ์šฐ์„ ์ˆœ์œ„: id ์„ ํƒ์ž > ํด๋ž˜์Šค ์„ ํƒ์ž > ํƒœ๊ทธ ์„ ํƒ์ž
<style>
    a{
        color:black;
        text-decoration: none;
    }
    #active{
        color: red;
    }
    .saw{
        color: gray;
    }
    h1{
        font-size:45px;
        text-align: center;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw"id="active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>

-web

block level element: ํ™”๋ฉด ์ „์ฒด๋ฅผ ์“ฐ๋Š” ํƒœ๊ทธ๋“ค

: ex) h1,ol

-code

-web

inline element: ์ž๊ธฐ ์ž์‹ ์˜ ๋ถ€ํ”ผ, ์ฆ‰ ์ฝ˜ํ…์ธ ๋งŒํผ์˜ ๋ถ€ํ”ผ๋ฅผ ์“ฐ๋Š” ํƒœ๊ทธ๋“ค

:ex) a

  • code
    ์œ„์™€ ๊ฐ™์Œ
  • web
    ์œ„์™€ ๊ฐ™์Œ

block level element ๋ฅผ inline element์ฒ˜๋Ÿผ ์“ฐ๋Š” ๋ฒ• (display:inline)

  • code

-web

inline element๋ฅผ block level element์ฒ˜๋Ÿผ ์“ฐ๋Š” ๋ฒ• (display:block)

  • code

-web

์ค‘๋ณต ์—†์• ๊ธฐ

  • ์—†์• ๊ธฐ ์ „ ์ฝ”๋“œ

  • ์—†์•ค ํ›„ ์ฝ”๋“œ

padding: CSS๋ผ๋Š” ์ฝ˜ํ…์ธ ์™€ border์‚ฌ์ด์— ๊ฐ„๊ฒฉ์„ ์ฃผ๊ธฐ

  • code
<style>
            h1{
                border: 5px red solid;
                padding: 20px;
                
            }
        </style>
    </head>
    <body>
        <h1>CSS</h1>
    </body>

-web

margin: ํ…Œ๋‘๋ฆฌ(๋ฐ•์Šค)์™€ ํ…Œ๋‘๋ฆฌ ์‚ฌ์ด๋ฅผ ๋œปํ•จ

  • code
<style>
            h1{
                border: 5px red solid;
                padding: 20px;
                margin:0;
            }
        </style>
    </head>
    <body>
        <h1>CSS</h1>
        <h1>CSS</h1>

-web

-code

<style>
            h1{
                border: 5px red solid;
                padding: 20px;
                margin: 20px;;
            }
        </style>
    </head>
    <body>
        <h1>CSS</h1>
        <h1>CSS</h1>

-web

width

  • code
<style>
            h1{
                border: 5px red solid;
                padding: 20px;
                margin: 20px;
                display: block;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <h1>CSS</h1>
        <h1>CSS</h1>
  • web

    : h1์ด๋ฏ€๋กœ ๋ธ”๋ก ๋‹จ์œ„ element์œผ๋กœ ํ™”๋ฉด ์ „์ฒด๋ฅผ ๋นจ๊ฐ„ ๋ฐ•์Šค๊ฐ€ ์ฐจ์ง€ํ–ˆ์œผ๋‚˜, 100px๋กœ ๋„ˆ๋น„๋ฅผ ๋ณ€๊ฒฝํ–ˆ๋‹ค.

box ์จ๋จน๊ธฐ: border-bottom

-code

 h1{
        font-size:45px;
        text-align: center;
        border-bottom:1px solid gray;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw"id="active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
  • web

margin์—†์• ๊ธฐ

-code

 h1{
        font-size:45px;
        text-align: center;
        border-bottom:1px solid gray;
        margin: 0;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw"id="active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>

-web: ์—†์• ๊ธฐ ์ „(์ฃผํ™ฉ์ƒ‰์ด ๋งˆ์ง„)

  • -web: ์—†์•ค ํ›„

box ์จ๋จน๊ธฐ: border-right

border right์œผ๋กœ ์˜ค๋ฅธ์ชฝ์— ์ค„ ๊ธ‹๊ธฐ, ol์€ block element์ด๋ฏ€๋กœ ๋„ˆ๋น„ํฌ๊ธฐ ์กฐ์ •ํ•ด์„œ ๊ทธ์Œ.

-code

 h1{
        font-size:45px;
        text-align: center;
        border-bottom:1px solid gray;
        margin: 0;
        padding: 20px;
    }
    ol{
        border-right: 1px solid gray;
        width: 100px;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw"id="active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>

-web

div ํƒœ๊ทธ ์™€ span ํƒœ๊ทธ

  • div
    ์•„๋ฌด ๊ธฐ๋Šฅ๋„ ์—†๋Š” ํƒœ๊ทธ. ๋ ˆ์ด์•„์›ƒ์„ ๋‚˜๋ˆ„๋Š”๋ฐ ์“ฐ์ธ๋‹ค.
    block level element์ด๋ฏ€๋กœ ์ค„๋ฐ”๊ฟˆ์ด ๋œ๋‹ค.

  • span
    div ํƒœ๊ทธ์ฒ˜๋Ÿผ ์•„๋ฌด ๊ธฐ๋Šฅ๋„ ์—†๋Š” ํƒœ๊ทธ. ๋ ˆ์ด์•„์›ƒ์„ ๋‚˜๋ˆ„๋Š”๋ฐ ์“ฐ์ธ๋‹ค.
    inline level element ์ด๋‹ค.

grid (display:grid, grid-template-columns: )

์ฒซ ๋ฒˆ์งธ(NAVIGATION)๋Š” 150px, ๋‘ ๋ฒˆ์งธ(ARTICLE)๋Š” ๋‚˜๋จธ์ง€ ์ „์ฒด๋ฅผ ์“ฐ๊ฒŒ ํ•œ๋‹ค

-code

<style>
        #grid{
            border:5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr;
        }
        div{
            border:5px solid gray;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </div>
</body>

-web

grid ์จ๋จน๊ธฐ

  • code
    :div ์œผ๋กœ ๋‘ ๋ฌถ์Œ์„ ๋‚˜๋ˆ„๊ณ  grid๋กœ id๋ฅผ ์ค€ ํ›„์— ๊ทธ๊ฒƒ์„ *display:grid ํ•˜๊ณ  grid-template-columns:150px 1fr๋กœ ๋‚˜๋ˆ„์—ˆ๋‹ค.
 h1{
        font-size:45px;
        text-align: center;
        border-bottom:1px solid gray;
        margin: 0;
        padding: 20px;
    }
    ol{
        border-right: 1px solid gray;
        width: 100px;
        margin:0;
        padding: 20px;
    }
    #grid{
        display: grid;
        grid-template-columns: 150px 1fr;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
    <ol>
        <li><a href="1.html"class="saw">HTML</a></li>
        <li><a href="2.html"class="saw"id="active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
    <div>
        <h2>CSS</h2>
        <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
    </div>
    </div>
  • web

div์œผ๋กœ ๋‚˜๋ˆ„์–ด์„œ ๊ฐ„๊ฒฉ ์กฐ์ •ํ•˜๊ธฐ

  • code
    #grid{
        display: grid;
        grid-template-columns: 150px 1fr;
    }
    #grid ol{
        padding-left: 32px;
    }
    #article{
        padding-left: 25px;
    }
</style>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <div id="grid">
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html"id="active">CSS</a></li>
        <li><a href="3.html">JavsScript</a></li>
    </ol>
    <div id="article">
        <h2>CSS</h2>
        <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
    </div>
    </div>
</body>
  • web

๋ฐ˜์‘ํ˜• ๋””์ž์ธ (media query),@media(min-width:800px)

:800ํ”ฝ์…€๋ณด๋‹ค ํฌ๋ฉด ์‚ฌ๋ผ์ง€๊ฒŒ ํ•˜๊ธฐ

  • code
<style>
        div{
            border: 5px solid green;
            font-size: 60px;
        }
        @media(min-width:800px)
        {
            div{
                display:none;
            }
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>
  • web

    :800px๋ณด๋‹ค ํ™”๋ฉด์ด ์ปค์ง€๋ฉด ๋ชจ๋‘ ์‚ฌ๋ผ์ง„๋‹ค

media query ์จ๋จน๊ธฐ

: 1. 800ํ”ฝ์…€๋ณด๋‹ค ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ ์ž‘์„ ๋•Œ id๊ฐ’์ด grid์ธ ํƒœ๊ทธ์˜ display๊ฐ€ grid์˜€๋˜ ๊ฒƒ์ด block์œผ๋กœ ๋ฐ”๋€๋‹ค.
2. 800ํ”ฝ์…€๋ณด๋‹ค ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ ์ž‘์„ ๋•Œ ol ํƒœ๊ทธ์˜ ์˜ค๋ฅธ์ชฝ ๊ฒฝ๊ณ„๊ฐ€ ์‚ฌ๋ผ์ง„๋‹ค.
3. h1ํƒœ๊ทธ์˜ ์•„๋ž˜ ๊ฒฝ๊ณ„๊ฐ€ ์‚ฌ๋ผ์ง„๋‹ค.

css ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ

  1. css ์ฝ”๋“œ๋งŒ ๋‹ด๊ธด(์ฆ‰, style ์•ˆ์˜ ์ฝ”๋“œ๋งŒ) style.css ํŒŒ์ผ์— ๋„ฃ๋Š”๋‹ค.
  2. style์ด ์žˆ์–ด์•ผ ํ•  html ํŒŒ์ผ์˜ ๋ถ€๋ถ„์—
<link rel="stylesheet" href="style.css">

๋ฅผ ์ž…๋ ฅํ•œ๋‹ค.

  • style.css 
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
@media(max-width:800px){
#grid{
    display: block;
}
ol{
    border-right:none;
}
h1 {
    border-bottom:none;
}
}
  • 1.html ์˜ style.css ์‚ฝ์ž… ๋ถ€๋ถ„
<!doctype html>
<html>
<head>
<title>WEB - HTML</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
  โ™กโœงใ€‚ยฐโ‚Šยทหˆโˆ—โ™กโˆ—      CSS     หˆโ€งโ‚Šยฐใ€‚โœงโ™ก โœงใ€‚ยฐโ‚Š
<style></style>: html์˜ TAG, "style ์•ˆ์ชฝ์˜ ๋‚ด์šฉ์€ CSS์ด๋‹ˆ๊นŒ ๋„ˆ๋Š” ์ด๊ฒƒ์„  CSS์˜ ๋ฌธ๋ฒ•์— ๋งž๊ฒŒ ํ•ด์„ํ•ด์•ผ ํ•ด"
a{ color: red;}: "์›น ๋ธŒ๋ผ์šฐ์ €์•ผ, ์ด ์›นํŽ˜์ด์ง€์— ์žˆ๋Š” ๋ชจ๋“  a TAG์— ๋Œ€ํ•ด์„œ ํฐํŠธ ์ปฌ๋Ÿฌ๋ฅผ ๋นจ๊ฐ„์ƒ‰์œผ๋กœ ๋งŒ๋“ค์–ด์ค˜"
<a href="2.html" style="color:red">CSS</a>: CSS๊ธ€์ž๋งŒ ๋นจ๊ฐ„์ƒ‰์œผ๋กœ ํ•˜๊ธฐ. html๋ถ€๋ถ„์— ์žˆ์œผ๋ฏ€๋กœ CSS ์ž„์„ ์•Œ๋ ค์ฃผ๊ธฐ ์œ„ํ•ด style=""๋ฅผ ์‚ฌ์šฉ.
text-decoration: none;  : ํ•ด๋‹น ์›นํŽ˜์ด์ง€์— ์žˆ๋Š” ๋ชจ๋“  ์ง€์ • ์†์„ฑ(a)์— ๋Œ€ํ•ด ๋ฐ‘์ค„์ด ์—†์–ด์ง
<a href="2.html" style="color:red; text-decoration:underline">CSS</a>
->CSS์—๋งŒ ๋ฐ‘์ค„ ์ƒ๊น€
  h1{
      font-size: 45px;
      text-align: center;
    }
->์†์„ฑ h1์˜ ํฐํŠธํฌ๊ธฐ๋ฅผ 45ํ”ฝ์…€, ๊ฐ€์šด๋ฐ ์ •๋ ฌ.

<a href="1.html" class="saw">
saw๋ผ๋Š” ํด๋ž˜์Šค์˜ ๊ฐ’์„ ๊ฐ€์ง„ tag๋ฅผ ๋งŒ๋“ฌ.
 .saw{
      color:gray;
    }
ํด๋ž˜์Šค๊ฐ’์ด saw์ธ tag๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์„ ํƒ์ž
<a href="2.html" class="saw active">
: ํด๋ž˜์Šค๋ผ๋Š” ์†์„ฑ์˜ ๊ฐ’์€ ์—ฌ๋Ÿฌ๊ฐœ์˜ ๊ฐ’์ด ๋“ค์–ด์˜ฌ ์ˆ˜ ์žˆ๊ณ  ๋„์–ด์“ฐ๊ธฐ๋กœ ๊ตฌ๋ถ„ํ•œ๋‹ค
<a href="2.html" class="saw" id="active">
->id์„ ํƒ์ž์™€ class์„ ํƒ์ž๊ฐ€ ๋ถ™์œผ๋ฉด id๊ฐ€ ์šฐ์„ ์ˆœ์œ„.
class์„ ํƒ์ž์™€ tag์„ ํƒ์ža{}๊ฐ€ ๋ถ™์œผ๋ฉด ํด๋ž˜์Šค๊ฐ€ ์ด๊น€.
์ „๋ถ€ ๋‹ค ๊ฐ™์€ ์„ ํƒ์ž: ๊ฐ€์žฅ ๋งˆ์ง€๋ง‰ ๋“ฑ์žฅ ์„ ํƒ์ž๊ฐ€ ์šฐ์„ ์ˆœ์œ„.
=>id>class>tag
mediaquery:
์–ด๋– ํ•œ ์กฐ๊ฑด์„ ๋งŒ์กฑํ•  ๋•Œ๋งŒ css์˜ ๋‚ด์šฉ์ด ๋™์ž‘ํ•˜๋„๋ก ํ•˜๊ฒŒ ํ•˜๋Š” ๊ฒƒ.
ex)
  @media(min-width:800px){
        div{
          display:none;
        }
      }
-> ํ™”๋ฉด์˜ ๋„ˆ๋น„๊ฐ€800px์ด์ƒ์ด๋ฉด ์†์„ฑ div์˜display๋ฅผ none๋กœ ํ•œ๋‹ค (์ฆ‰ 800px์ด์ƒ ํ™”๋ฉด์ด ๋Š˜์–ด๋‚˜๋ฉด div๋กœ ๊ฐ์‹ผ ์ •๋ณด๊ฐ€ ์—†์–ด์ง. (@media(max-width:800px)๋„ ๊ฐ€๋Šฅ)
  @media(max-width:800px){
      #grid{
        display: block;
        
      }
    }
800px๋ณด๋‹ค ํ™”๋ฉด์˜ ํฌ๊ธฐ๊ฐ€ ์ž‘์„ ๋•Œ id๊ฐ’์ด grid์ธ tag์˜ display๊ฐ€ gird์—์„œ block์œผ๋กœ ๋ฐ”๋€œ.
profile
๋ฌธ์ฑ„์˜
์ด์ „ ํฌ์ŠคํŠธ

[Coding] JavaScript ๋ณต์Šต & React, JSX ๋ฌธ๋ฒ•

๋‹ค์Œ ํฌ์ŠคํŠธ

[Coding] ํฌ๋กฌ ๋ธŒ๋ผ์šฐ์ € ๋งŒ๋“ค๊ธฐ

0๊ฐœ์˜ ๋Œ“๊ธ€