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

๐Ÿ’ป Deep Wide Programming/Html & Css

[์ƒํ™œ์ฝ”๋”ฉ] WEB2-CSS 1๊ฐ•, 2๊ฐ•, 3๊ฐ•, 4๊ฐ• (CSS์˜ ํƒ„์ƒ ๋ฐฐ๊ฒฝ & CSS ๊ธฐ๋ณธ ๋ฌธ๋ฒ•)

728x90
๋ฐ˜์‘ํ˜•

1. CSS ๋“ฑ์žฅ ๋ฐฐ๊ฒฝ

WEB์ด ์ฒ˜์Œ ์„ธ์ƒ์— ๋“ฑ์žฅํ–ˆ์„ ๋•Œ์—๋Š” ๋‹จ ํ•˜๋‚˜์˜ ์„œ๋น„์Šค๋งŒ ์žˆ์—ˆ๋‹ค. ๋ฐ”๋กœ HTML. HTML์„ ์ด์šฉํ•ด์„œ๋Š” ์ „์ž๋ฌธ์„œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ปดํ“จํ„ฐ๋ฅผ ์ด์šฉํ•ด์„œ ์ •๋ณด๋ฅผ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์—ˆ๊ณ , ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ์ „์„ธ๊ณ„ ๋ˆ„๊ตฌ๋‚˜ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค! ๋‹น์‹œ๋กœ์„œ๋Š” ํ˜๋ช…์ ์ธ ์‚ฌ๊ฑด์ด์—ˆ๊ณ , ์‚ฌ๋žŒ๋“ค์€ ์›น์— ์—ด๊ด‘ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” html์œผ๋กœ ๋ฌธ์„œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๊ฒŒ๋œ ๊ฒƒ๋งŒ์œผ๋กœ๋„ ๋งŒ์กฑํ–ˆ์ง€๋งŒ, ๊ณง ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ถˆํ‰๋“ค์ด ์ƒ๊ธฐ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ˆ˜๋งŽ์€ ๋ถˆ๋งŒ์กฑ ์ค‘์— ์›นํŽ˜์ด์ง€๋ฅผ ์ข€ ๋” ๋ณด๊ธฐ ์ข‹๊ณ , ์•„๋ฆ„๋‹ต๊ฒŒ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋Š” ๋ถˆ๋งŒ์ด CSS์˜ ๋“ฑ์žฅ ๋ฐฐ๊ฒฝ์ด๋‹ค.

 

๋ฌธ์„œ์˜ ๊ธ€๊ผด, ๋ฌธ์ž์˜ ํฌ์™€ ์ƒ‰์ƒ, ๊ฐ€์šด๋ฐ ์ •๋ ฌ, ๋ฌธ์„œ์˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๊ณ  ์‹ถ์–ด์š” ๋“ฑ๋“ฑ๋“ฑ

์›นํŽ˜์ด์ง€๋ฅผ ์•„๋ฆ„๋‹ต๊ฒŒ ๋งŒ๋“ค ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ๊นŠ์€ ๊ณ ๋ฏผ์— ๋น ์ง€๊ฒŒ ๋œ๋‹ค. ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์—ˆ๋‹ค. 

1) ์‰ฝ์ง€๋งŒ ํ•œ๊ณ„๊ฐ€ ์žˆ๋Š” ๊ฒƒ -> html์— ์ƒˆ๋กœ์šด ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ
2) ์–ด๋ ต์ง€๋งŒ ๊ทผ๋ณธ์ ์ธ ํ•ด๊ฒฐ์ฑ… -> ๋””์ž์ธ์— ์ตœ์ ํ™”๋œ ์™„์ „ํžˆ ์ƒˆ๋กœ์šด ์–ธ์–ด๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ => CSS

 

1)์˜ ๋ฐฉ๋ฒ•์„ ํ•œ ๋ฒˆ ์‹œ๋„ํ•ด๋ณด์ž.

์ž ์›นํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๋ณด๋ฉด..

 

์ด๋ ‡๊ฒŒ ํฐํŠธ ์ปฌ๋Ÿฌ๋ฅผ ๋นจ๊ฐ„์ƒ‰์œผ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค. <font> ํƒœ๊ทธ๊ฐ€ ๋“ฑ์žฅํ•˜๋ฉด์„œ ๋‹ค๋ฅธ ์ƒ‰์˜ ์ปฌ๋Ÿฌ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค! 

<h1> ์ œ๋ชฉ์ด๋ผ๋Š” ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ๋‹ด์€ ํƒœ๊ทธ๋‹ค. <font>๋ผ๋Š” ํƒœ๊ทธ๋Š” ์–ด๋– ํ•œ ์ •๋ณด๋ฅผ ๋‹ด์ง€๋Š” ์•Š๊ณ , ๋‹ค๋งŒ ์‹œ๊ฐ์  ๋””์ž์ธ์„ ํ‘œํ˜„ํ•˜๊ณ  ์žˆ์„ ๋ฟ์ด๋‹ค. ์›นํŽ˜์ด์ง€๋ผ๋Š” ์†Œ์ค‘ํ•œ ์ •๋ณด ์•ˆ์—, ์ •๋ณด๊ฐ€ ์•„๋‹ˆ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋Š” ๋””์ž์ธ ์ฝ”๋“œ๊ฐ€ ์„ž์ด๋ฉด์„œ, ์›นํŽ˜์ด์ง€๊ฐ€ ์ •๋ณด๋กœ์„œ์˜ ๊ฐ€์น˜๊ฐ€ ํ˜„๊ฒฉํžˆ ๋–จ์–ด์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

๋˜, a ํƒœ๊ทธ๋กœ ๋˜์–ด์žˆ๋Š” ๋งํฌ๊ฐ€ ๋ฌด์ˆ˜ํžˆ ๋งŽ์ด, 1์–ต๊ฐœ๊ฐ€ ์žˆ๋‹ค๊ณ  ์ณค์„ ๋•Œ, tag์˜ ์ปฌ๋Ÿฌ๋ฅผ ์ผ์ผ์ด ๋ฐ”๊ฟ”์•ผ ํ•˜๋Š” ๋‚œ๊ด€์— ๋งˆ์ฃผํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋‚œ๊ด€์—์„œ ๊ตฌ์›ํ•ด์ค„ CSS..!

 

2. CSS์˜ ๋“ฑ์žฅ

html์€ ์ฝ”๋“œ๋ฅผ ๊ธฐ๋ณธ์ ์œผ๋กœ html์ฝ”๋“œ๋กœ ์ธ์‹ํ•œ๋‹ค. 

css๋Š” ์™„์ „ํžˆ ๋‹ค๋ฅธ ์ฝ”๋“œ๊ธฐ ๋•Œ๋ฌธ์—, css์ž„์„ ์•Œ๋ฆฌ๋Š” ํƒœ๊ทธ๋กœ ํ‘œ์‹œํ•ด์ค˜์•ผ ํ•œ๋‹ค.

<style> </style> 

๋˜‘๊ฐ™์€ ๋‚ด์šฉ์ด ์ค‘๋ณต๋œ ๋””์ž์ธ ์ฝ”๋“œ๋ฅผ, CSS์—์„œ๋Š” ๋‹จ ํ•˜๋‚˜์˜ ์ฝ”๋“œ๋กœ ์†์‰ฝ๊ฒŒ ํ•ด๊ฒฐ ๊ฐ€๋Šฅํ•˜๋‹ค. ์ฆ‰, ์ค‘๋ณต์˜ ์ œ๊ฑฐ

 

3. CSS์˜ ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

style="color:red"๋ฅผ html ์ฝ”๋“œ์— ๋„ฃ์–ด์ฃผ๋ฉด, ์•Œ์•„์„œ css๋กœ ์ฝ์–ด์ค€๋‹ค. 

{} => ์„ ํƒ์ž, selector

 

HTML์—์„œ CSS๋ฅผ ์“ฐ๋Š” ๋ฒ•
1) style ํƒœ๊ทธ๋ฅผ ์“ด๋‹ค.
2) style ์†์„ฑ์„ ์“ด๋‹ค.

 

CSS ๊ธฐ๋ณธ ๋ฌธ๋ฒ•

 

728x90
๋ฐ˜์‘ํ˜•