16.05.24 CSS style sheets - govl2233/project_studyej GitHub Wiki

CSS(Cascading Style Sheets)

: ์›น๋ฌธ์„œ์˜ ๊ธฐ๋ณธ์ ์ธ ์Šคํƒ€์ผ์„ ๋ฏธ๋ฆฌ ์ง€์ •ํ•ด๋‘” ์Šคํƒ€์ผ์‹œํŠธ. ๋ฌธ์„œ์˜ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ณ  ์ด์šฉํ•˜๊ธฐ ํŽธ๋ฆฌํ•˜๋‹ค๋Š” ํŠน์ง•์ด ์žˆ์Œ

External style sheets : ํ•˜๋‚˜์˜ css ํŒŒ์ผ๋กœ ๋ชจ๋“  style์ ์šฉ์‹œํ‚จ ๊ฒƒ

ex) <link rel="stylesheet" href="external.css">-- html๋ฌธ์„œ์— ํ™•์žฅ์žcssํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜ค๋Š”๊ฒƒ. (rel : ํ˜„์žฌ ๋ถˆ๋Ÿฌ์˜ค๋Š” ์–ธ์–ด)

Internal style sheets : HTML ๋ฌธ์„œ์˜ <body>์•ˆ์— ์š”์†Œ๋“ค์„ style๋กœ ์ ์šฉ ์‹œํ‚ค๋Š” ๊ฒƒ.

style ์ ์šฉ๋ฒ• : <head> ํƒœ๊ทธ์•ˆ์— <style> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ.

ex)

<html>
  <head>
      <meta charset="UTF-8">
       <title>css</title>
      <style>
            p {border :1px blue solid}
            span {border:1px #F00 solid}
           .box {border:1px blue solid; width:100px; height:100px;} (."name" --class๋กœ ์ด๋ฆ„์„ ์„ ํƒํ•ด์ค€๊ฒƒ ๋•Œ๋ฌธ์— .์„ ์จ์คŒ)
      </style>
  </head>

     <body>
        <p>hello world</p>
        <sapn>text</span>
        <div class="box">text</div>        (class๋กœ ์ด๋ฆ„์„ ์ž…ํžˆ๋Š” ๊ฒƒ์€ ์–ด๋Š ํŠน์ •ํ•œ  ์š”์†Œ ํ•˜๋‚˜๋งŒ ์ ์šฉ์‹œํ‚ค๋ ค๊ณ )
    </body>
</html>

Inline style sheets : HTML ๋ฌธ์„œ์˜ <body> ํƒœ๊ทธ ์•ˆ์— ์š”์†Œ๋“ค์„ style๋กœ ๋ฐ”๋กœ ์ ์šฉ์‹œํ‚ค๋Š” ๊ฒƒ.

style ์ ์šฉ๋ฒ• : <body> ํƒœ๊ทธ์•ˆ์— ์Šคํƒ€์ผ ์š”์†Œ๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ.

ex)

<html>
    <head>
    </head>
         <body>
              <div style="border:1px blue solid; width:100px; htight:100px;">text</div>
         </body>
</html>

โš ๏ธ **GitHub.com Fallback** โš ๏ธ