๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๐“ก๐“ธ๐“ธ๐“ถ3:๐น๐“‡๐‘œ๐“ƒ๐“‰๐‘’๐“ƒ๐’น/๐“ก๐Ÿฅ๐Ÿข๐Ÿฃ:๐ป๐’ฏ๐‘€๐ฟ&๐’ž๐’ฎ๐’ฎ

[CSS] 1. ๊ธฐ๋ณธ๋ฌธ๋ฒ•

CSS : Cascading Style Sheet

 

css๋Š” htmlํŒŒ์ผ์—์„œ <style> ํƒœ๊ทธ ์•ˆ์— ๊ตฌํ˜„ํ•œ๋‹ค.

 

   <head>
        <meta charset = "utf-8" />
        <style>
            h1 {color:red}
            
        </style>
    </head>

 

 

์ด์ฒ˜๋Ÿผ html ์ฝ”๋“œ ์•ˆ์— <style> ํƒœ๊ทธ๊ฐ€ ์žˆ๊ณ  ๊ทธ ํƒœ๊ทธ ์•ˆ์— css ์ฝ”๋“œ๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค.

h1์˜ ์ปฌ๋Ÿฌ๋ฅผ red๋กœ ํ•˜๋ผ๋Š” ๋œป! 

 

selector(์„ ํƒ์ž){description(์„œ์ˆ )}

์–ด๋–ค ํšจ๊ณผ๋ฅผ ์„ ํƒ์ž์—๊ฒŒ ์ค„ ๊ฒƒ์ธ์ง€ ์„œ์ˆ ํ•˜๋Š” ๊ฒƒ! ์ด๊ฒƒ์ด CSS

 

  h1 {color:red; font-size:10px}

์š”๋กœ์ฝ”๋กฌ ์ƒ๊ธด ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค๊ณ  ํ•˜๋ฉด color์™€ font-size ๊ฐ๊ฐ์ด h1์˜ ์†์„ฑ์ด ๋˜๋Š” ๊ฒƒ์ด๊ณ , ์†์„ฑ์„ ๊ตฌ๋ถ„ํ•ด์ฃผ๋Š” ๊ตฌ๋ถ„์ž๋Š” ์„ธ๋ฏธ์ฝœ๋ก (;)์ด๋‹ค.

  h1,h2 {
  	color:red; 
    font-size:10px
 }

์ด๋Ÿฐ ์‹์˜ ์ง€์ •๋„ ๊ฐ€๋Šฅํ•˜๋‹ค!

 

๋งŒ์•ฝ์— ์—ฌ๋Ÿฌ h1์ค‘์— header์— ์žˆ๋Š” h1์—๋งŒ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด?

 

header h1{
	border:1px solid red;
}

์ด๋Ÿฐ์‹์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์ด ์ฝ”๋“œ๋Š” ํ…์ŠคํŠธ์— ์‚ฌ๊ฐํ˜•์„ ์”Œ์šฐ๋Š” ์ฝ”๋“œ์ด๋‹ค. 

  ์ฐธ๊ณ ๋กœ border์˜ ์†์„ฑ์„ ์ง€์ •ํ•˜๋Š” 1px, solid, red์˜ ๊ฒฝ์šฐ๋Š” ๊ณต๋ฐฑ์œผ๋กœ ๊ทธ ์†์„ฑ์ด ๊ตฌ๋ถ„๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์„ธ๊ฐ€์ง€์˜ ์ˆœ์„œ๋ฅผ ๋ฐ”๊ฟ”์„œ ์จ๋„ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค. (ex. border:solid red 1px)

 

 

๋งŒ์•ฝ <li> ํƒœ๊ทธ ์ค‘ ์ผ๋ถ€์—๋งŒ ํšจ๊ณผ๋ฅผ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด? ์•„์ด๋””๋ฅผ ํ™œ์šฉํ•˜์ž!

 

<li id="selected">CSS</li>

์ด๋Ÿฐ ์‹์œผ๋กœ ํƒœ๊ทธ์— id๋ฅผ ์ ์šฉํ•˜๊ณ ,

<style>
  #selected {
     border:1px solid yellowgreen;
  }
</style>
    

 

style, ์ฆ‰ css ์ฝ”๋“œ ์•ˆ์— #id๋ฅผ ์“ฐ๊ณ  ์†์„ฑ์„ ์ •์˜ํ•ด์ฃผ๋ฉด ๋œ๋‹ค!

 

๊ทธ๋Ÿฌ๋ฉด ์ด๋ ‡๊ฒŒ list ์ค‘ ํ•œ ๊ฐœ์˜ ๋ฆฌ์ŠคํŠธ์—๋งŒ ์†์„ฑ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค!

 

+padding์€ ์•ˆ์ชฝ ๊ฐ„๊ฒฉ, margin์€ ๋ฐ”๊นฅ์ชฝ ๊ฐ„๊ฒฉ์ด๋‹ค. xml์ด๋ž‘ ๊ต‰์žฅํžˆ ์œ ์‚ฌํ•˜๊ตฐ

 

 

์˜ˆ์ œ 3๋„ ๊ตฌํ˜„ํ•ด๋ณด์ž

 

<html>
    <head>
        <meta charset = "utf-8" />
        <style>
            img{
                border:1px solid red;
                float:right;
            }
        </style>
    </head>

    <body>
        <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
        ์ƒํ™œ์ฝ”๋”ฉ์˜ ์„ธ๊ณ„์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค. ์ƒํ™œ์ฝ”๋”ฉ์€ ์ผ๋ฐ˜์ธ๋“ค์—๊ฒŒ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์„ ๋ชฉ์ ์œผ๋กœ ํ•˜๋Š” ๋น„์˜๋ฆฌ ํ™œ๋™์ž…๋‹ˆ๋‹ค. ๊ทธ๊ฐ„ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋“ค์ด ์ด๋ฃฉํ•œ ์„ฑ์ทจ๋ฅผ ์ผ๋ฐ˜์— ์•Œ๋ ค์„œ ๊ณ ๋…ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋จธ๋“ค์˜ ๊ด€๊ฐ์„ ๋ชจ๊ฐํ•˜๋Š” ํ™œ๋™์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ƒํ™œ์ฝ”๋”ฉ์€ ์„ธ ๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
       
       
      ์˜จ๋ผ์ธ ๊ฐ•์˜
       
      ์ƒํ™œ์ฝ”๋”ฉ์˜ ๊ฐ•์˜๋Š” ์ˆ˜์—…๊ณผ ์‚ฌ์ „์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
       
      ์ž…๋ฌธ์ž์˜ ๊ฐ€์žฅ ํฐ ๊ณ ์ถฉ์€ '๋ฌด์—‡์„ ๋ชจ๋ฅด๋Š”์ง€ ๋ชจ๋ฅด๋Š” ์ƒํƒœ'์ผ ๊ฒ๋‹ˆ๋‹ค. ์˜จ๋ผ์ธ์—๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ์ตํžˆ๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ฑฐ์˜ ๋ชจ๋“  ์ •๋ณด๊ฐ€ ์žˆ์ง€๋งŒ, ์ด ์ง€์‹๋“ค์€ ๊ฒŒ์‹œํŒ์ด๋‚˜ ๋ธ”๋กœ๊ทธ ๋˜๋Š” ์ปค๋ฎค๋‹ˆํ‹ฐ์— ํฌ์ŠคํŒ… ๋‹จ์œ„๋กœ ํŒŒํŽธํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ตœ์†Œํ•œ ๋ฌด์—‡์„ ๊ฒ€์ƒ‰ํ•ด์•ผ ํ•˜๋Š”์ง€๋ฅผ ์•„๋Š” ์‚ฌ๋žŒ๋“ค์„ ์œ„ํ•ด์„œ๋Š” ๋” ์—†์ด ์ข‹์€ ๊ณต๊ฐ„์ด์ง€๋งŒ, '๋ฌด์—‡์„ ๋ชจ๋ฅด๋Š”์ง€ ๋ชจ๋ฅด๋Š” ์ƒํƒœ'์˜ ์ž…๋ฌธ์ž์—๊ฒŒ๋Š” ๊ทธ๋ฆผ์˜ ๋–ก์œผ๋กœ ๋‚จ์•„ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์‹œ๋งํ•ด์„œ ์ „๋ฌธ๊ฐ€๋ฅผ ๋”์šฑ ์ „๋ฌธ๊ฐ€๋‹ต๊ฒŒ ๋งŒ๋“œ๋Š” ํ˜์‹ ์— ๋จธ๋ฌผ๊ณ  ์žˆ๋Š” ๊ฒƒ์ด์ฃ .
       
      ์ƒํ™œ์ฝ”๋”ฉ ์‹ค์Šต ์‹œ๋ฆฌ์ฆˆ์ธ ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ๋Š” ์›น ๊ธฐ๋ฐ˜์˜ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ์ตœ์†Œํ•œ์˜ ์ ˆ์ฐจ๋ฅผ ๋ฐฐ๊ฒฝ์ง€์‹ ์—†์ด ๋ฌด์ž‘์ • ๋”ฐ๋ผํ•˜๋Š” ์ฝ”์Šค์ž…๋‹ˆ๋‹ค. ์ด ์ฝ”์Šค๋ฅผ ์™„์ฃผํ•˜๋ฉด ์›น์„œ๋น„์Šค๊ฐ€ ์–ด๋–ค ๋งฅ๋ฝ์—์„œ ์‹œ์ž‘๋˜๊ณ , ์–ด๋–ค ๊ณผ์ •์„ ํ†ตํ•ด์„œ ํ˜„์‹คํ™” ๋˜๋Š”์ง€์— ๋Œ€ํ•œ ์ „์ฒด์ ์ธ ์ธ์ƒ์„ ๊ฐ–๊ฒŒ ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ƒํ™œ์ฝ”๋”ฉ์„ ์ง€๊ธˆ ์‹œ์ž‘ํ•œ๋‹ค๋ฉด ์—ฌ๊ธฐ์„œ ์‹œ์ž‘ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
       
      ์ƒํ™œ์ฝ”๋”ฉ์˜ ์ˆ˜์—… ์‹œ๋ฆฌ์ฆˆ๋Š” ๋จผ์ € ์ตํ˜€์•ผํ•  ๊ฒƒ๊ณผ ๋‚˜์ค‘์— ์ตํ˜€์•ผํ•  ๊ฒƒ์„ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ฐฐ์น˜ํ•ด์„œ ๊ทธ ๊ธฐ์ˆ ์„ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•œ ์ง€์‹์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ '๋ฌด์—‡์„ ๋ชจ๋ฅด๋Š”์ง€ ๋ชจ๋ฅด๋Š” ์ƒํƒœ'์—์„œ ์žฌ๋น ๋ฅด๊ฒŒ ๋น ์ ธ๋‚˜์˜ฌ ์ˆ˜ ์žˆ๋„๋ก ์ตœ์†Œํ•œ์˜ ๊ฒƒ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
       
      ์ƒํ™œ์ฝ”๋”ฉ์˜ ์‚ฌ์ „ ์‹œ๋ฆฌ์ฆˆ๋Š” ๊ทธ ๊ธฐ์ˆ ์„ ์‹ค์ œ๋กœ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด์„œ ํ•„์š”ํ•œ ์ •๋ณด๋ฅผ ์ง์ ‘ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์—…์„ ํ†ตํ•ด์„œ '๋ฌด์—‡์„ ๋ชจ๋ฅด๋Š”์ง€'๋ฅผ ์•Œ์•˜๋‹ค๋ฉด ์ด์ œ '๋ชจ๋ฅด๋Š” ๊ฒƒ'์„ ์Šค์Šค๋กœ ์ฐพ์•„์„œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
       
      ์ƒํ™œ์ฝ”๋”ฉ์€ ํฌ๊ด„์ ์ธ ๊ธฐ์ˆ  ์ปค๋ฆฌํ˜๋Ÿผ์„ ์ง€ํ–ฅํ•ฉ๋‹ˆ๋‹ค.
       
      ์ž์‹ ์ด ํ•„์š”ํ•œ ๊ฒƒ์— ๋”ฐ๋ผ์„œ ์•„๋ž˜์™€ ๊ฐ™์€ ์ˆœ์„œ๋กœ ๊ณต๋ถ€ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
       
      ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ
       
      ์›น ์„œ๋น„์Šค ๋งŒ๋“ค๊ธฐ ์‹ค์Šต
      ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์˜ค๋ฆฌ์—”ํ…Œ์ด์…˜
      HTML
      CSS
      javascript
      jQuery
    </body>
</html>