10 css basic

  1. css ๊ธฐ๋ณธ ๊ณจ๊ฒฉ

     ์„ ํƒ์ž{
         ์†์„ฑ: ๊ฐ’;
         ์†์„ฑ: ๊ฐ’;
     }
    1. ์„ ํƒ์ž(selector)์˜ ์—ญํ• 

      • HTML์— ์Šคํƒ€์ผ(css)๋ฅผ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด HTML ์˜ ํŠน์ • ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๋Š” sign

      • ์Šคํƒ€์ผ์„ ์ ์šฉ์‹œํ‚ค๋ ค๋Š” ๋Œ€์ƒ

      • ๋Œ€ํ‘œ ์ข…๋ฅ˜

        • ํƒœ๊ทธ๋กœ ์ฐพ๊ธฐ

        • ํด๋ž˜์Šค๋กœ ์ฐพ๊ธฐ (.)

        • id๋กœ ์ฐพ๊ธฐ (#)

        • ๊ทธ๋ฐ–์— ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์€ ์ถ”ํ›„ ํ•™์Šต

    2. ์†์„ฑ(properites) ๊ณผ ๊ฐ’(value)

      • ์Šคํƒ€์ผ์„ ์ง€์ •ํ•  ๋•Œ ์‚ฌ์šฉ

      • ๋Œ€ํ‘œ ์†์„ฑ

        • ํฌ๊ธฐ: width, height, font-szie...

        • ์—ฌ๋ฐฑ:

          • margin: ์š”์†Œ ๋ฐ”๊นฅ์—ฌ๋ฐฑ, ์š”์†Œ์™€ ์š”์†Œ ์‚ฌ์ด์˜ ์—ฌ๋ฐฑ(๊ฑฐ๋ฆฌ,๊ณต๊ฐ„)์ƒ์„ฑ

          • padding: ์š”์†Œ ๋‚ด๋ถ€ ์—ฌ๋ฐฑ, ์ž์‹์š”์†Œ๋ฅผ ๊ฐ์‹ธ๋Š” ์—ฌ๋ฐฑ

        • ์ปฌ๋Ÿฌ: color(๊ธ€์ž ์ƒ‰์ƒ), background(์š”์†Œ ์ƒ‰์ƒ)

        • ๊ทธ๋ฐ–์— ๋‹ค์–‘ํ•œ ์†์„ฑ๋ฐ ๊ฐ’๋“ค์€ ์ถ”ํ›„ ํ•™์Šต

  2. ์„ ์–ธ๋ฐฉ์‹ 1. ์ธ๋ผ์ธ์„ ์–ธ

    • ํƒœ๊ทธ์— ์ง์ ‘ ์ž‘์„ฑํ•˜๊ธฐ

    • ํƒœ๊ทธ์— ์ง์ ‘ ์ž‘์„ฑํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ ํƒ์ž ํ•„์š” ์—†์Œ

    • ์˜ˆ: <div style="color:red;">

    • ์ผ์ผ์ด ๋‹ค ์ž‘์„ฑํ•ด์•ผํ•˜๋Š” ์–ด๋ ค์›€๊ณผ ์ˆ˜์ •์˜ ์–ด๋ ค์›€์ด ํฌ๋ฏ€๋กœ

      ์ง์ ‘ ์ž‘์„ฑ ํ”ผํ•˜๋„๋กํ•˜์ž

      1. ๋‚ด์žฅ(embeded):

    • HTML์— ํฌํ•จํ•˜๊ธฐ

      <heade>
        <style>
            h1{
                color: red;
            }
        </style>
      </heade>
      1. HTML ์™ธ๋ถ€ ์—์„œ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ:

    • css ์ฝ”๋“œ๋ฅผ ์™„์ „ํžˆ ๋ถ„๋ฆฌ

    • css ํŒŒ์ผ์— ์„ ์–ธ๋œ ๋ฐฉ์‹์œผ๋กœ, ์—ฌ๋Ÿฌ htmlํŒŒ์ผ์— ์ ์šฉํ• ์ˆ˜ ์žˆ๋‹ค.

      <head>
        <link rel="stylesheet" href="/css/main.css">
      </head>

Last updated