CSS 101

Cascading Style Sheets

โ€‹ css

์›ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ธฐ๋Šฅ์˜ property ๋ฅผ ๊ตฌ๊ธ€๋ง ํ•˜์ž

  1. style ํƒœ๊ทธ ์“ฐ๊ธฐ

    <style>
            a {
                color:red;
                text-decoration: none;
            }
    </style>
  2. style ์†์„ฑ ์“ฐ๊ธฐ

    <li><a href="1.html"><font color='red'> HTML </font></a> </li>

Selector

id < class < tag

css seclector ๋ฅผ ๊ฒ€์ƒ‰ํ•ด๋ณด์ž

  1. tag

    • ๋ชจ๋“  ํƒœ๊ทธ์— ๋Œ€ํ•ด

  2. .class

    <style>
      .class1 {
        ~
      }
      .class2 {
    
      }
    </style>
    
    <body>
      <class='class1 class2'> </>
        -> style ํƒœ๊ทธ์—์„œ ์ˆœ์„œ๋Œ€๋กœ ๋จ
    </body>
  3. id

  4. ์–ด๋–ค id ์•ˆ์˜ ์–ด๋–ค ํƒœ๊ทธ

    # id tag {
    
    }

Property

  1. border

  2. display

  3. padding

    ์š”์†Œ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ์นธ

  4. margin

    ์š”์†Œ๊ฐ„ ์ฐจ์ง€ํ•˜๋Š” ์นธ

  5. width

    ๊ฐ€๋กœ ์ฐจ์ง€ํ•˜๋Š” ์นธ

  6. display

    ๊ฐ•๋ ฅํ•จ. ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€ ํ•ด์ค„ ์ˆ˜ ์žˆ์Œ inline block ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๊ณ  none ๊ฐ€๋Šฅ

Box

  1. block level element (div)

    ์ „์ฒด๋ฅผ ์”€

  2. Inline element (span)

    ์š”์†Œ๋งŒํผ๋งŒ ์”€

Grid

css ์˜ ์ตœ์‹ ๊ธฐ์ˆ 

  1. how to use

    <style>
            #grid {
                border:5px solid pink;
                display: grid;
                grid-template-columns: 150px 1fr;
              # 150์„ ๊ณ ์ •์œผ๋กœ ๊ฐ™๊ณ  Fr ์€ ๋‚˜๋จธ์ง€ ๊ฒƒ๊ณผ ๋น„์œจ๋กœ ๋‚˜๋ˆ ๊ฐ™๋Š”๋‹ค.
            }
            div {
                border: 5px solid gray;
            }
    </style>

๋ฏธ๋””์–ด ์ฟผ๋ฆฌ

๋””๋ฐ”์ด์Šค๋งˆ๋‹ค, ํ™”๋ฉด์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ ๋‹ค๋ฅด๊ฒŒ

  • how to use

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                border: 5px solid green;
                font-size: 60px;
            }
            /* screen width > 800px */
            @media(max-width:800px){
                div {
                    display:none;
                }
            }
        </style>
    </head>
    <body>
        <div>
            Responsive
        </div>
    </body>
    </html>
  • how to use 2

    <style>
            body {
                margin: 0px;
            }
            #active {
                color: red;
            }
            .saw {
                color: gray;
            }
            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: 0px;
                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;
            }
        </style>

css ํŒŒ์ผ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ

style.css ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ ์žฌํ™œ์šฉํ•˜์ž

  • html

    <link rel="stylesheet" href="style.css">
  • style.css

    style ํƒœ๊ทธ๋ฅผ ์ œ์™ธํ•˜๊ณ  ์ž‘์„ฑ

Last updated

Was this helpful?