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

์ „์ฒด ๊ธ€601

[HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 03 - ๊ทธ๋Ÿฌ๋ฐ์ด์…˜ ํšจ๊ณผ๋กœ ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 02 - ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 01 - ์›น์—์„œ ์ƒ‰์ƒ ํ‘œํ˜„ํ•˜๊ธฐ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 04 - ๋ชฉ๋ก ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 03 - ๋ฌธ๋‹จ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 02 - ํ….. onelight-stay.tistory.com ๋‹จ์ˆœํžˆ ์ด๋ฏธ์ง€์™€ ๋ฐฐ๊ฒฝ์ƒ‰์œผ๋กœ๋„ ๋ฐฐ๊ฒฝ์„ ๊พธ๋ฐ€ ์ˆ˜ ์žˆ์ง€๋งŒ ์ด๋ฒˆ์—๋Š” ์ข€ ๋” ๋‹ค์ฑ„๋กœ์šด ๊ทธ๋Ÿฌ๋ฐ์ด์…˜์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณด์ž. ๊ทธ๋Ÿฌ๋ฐ์ด์…˜๊ณผ ๋ธŒ๋ผ์šฐ์ € ์ ‘๋‘์‚ฌ ๊ทธ๋Ÿฌ๋ฐ์ด์…˜์„ ํ˜„์žฌ์—๋Š” ํ‘œ์ค€ํ™”๋œ ๊ตฌ๋ฌธ์ด ์™„์„ฑ๋˜์–ด ํ•œ๊ฒฐ ์ˆ˜์›”ํ•ด์ง„ ํŽธ์ด๋‹ค. ํ•˜์ง€๋งŒ ํ˜„์žฌ์˜ ํ‘œ์ค€ํ™”๋œ ๊ตฌ๋ฌธ ์™ธ์—๋„ ๊ทธ๋Ÿฌ๋ฐ์ด์…˜์„ ์ ‘๋‘์‚ฌ๋ฅผ ๋ถ™์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €๊นŒ์ง€ ๊ณ ๋ คํ•ด ํ•จ๊ป˜ ์ž…๋ ฅํ•ด์•ผ ํ•œ๋‹ค. ์ด๋•Œ, .. 2020. 7. 2.
[HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 02 - ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 01 - ์›น์—์„œ ์ƒ‰์ƒ ํ‘œํ˜„ํ•˜๊ธฐ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 04 - ๋ชฉ๋ก ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 03 - ๋ฌธ๋‹จ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 02 - ํ…์ŠคํŠธ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 01 - ๊ธ€๊ผด ๊ด€๋ จ ์Šคํƒ€์ผ.. onelight-stay.tistory.com ์ƒ‰์ƒ ํ‘œ๊ธฐ๋ฒ•๋“ค์— ๋Œ€ํ•ด ์ตํ˜€ ๋ณด์•˜๋‹ค๋ฉด ์ด๋ฅผ ํ™œ์šฉํ•˜๋Š” ๋ฐฐ๊ฒฝ ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. background-color ์†์„ฑ : ๋ฐฐ๊ฒฝ ์ƒ‰ ์ง€์ •ํ•˜๊ธฐ ์ƒ‰์ƒ์„ ์„ธ๋ฐ€ํžˆ ์กฐ์ ˆํ•˜๊ณ  ์‹ถ์„ ๊ฒฝ์šฐ์—” 16์ง„์ˆ˜๋ฅผ, ํˆฌ๋ช…๋„๋ฅผ ํ•จ๊ป˜ ์กฐ์ ˆํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด rgba ํ‘œ๊ธฐ๋ฒ•์„, ๊ฐ„๋‹จํ•œ ์›์ƒ‰๋งŒ์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ์—๋Š” ์ƒ‰์ƒ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•ด ์ƒ‰์ƒ์„ ์ง€์ •ํ•  ์ˆ˜ .. 2020. 7. 1.
[HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 01 - ์›น์—์„œ ์ƒ‰์ƒ ํ‘œํ˜„ํ•˜๊ธฐ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 04 - ๋ชฉ๋ก ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 03 - ๋ฌธ๋‹จ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 02 - ํ…์ŠคํŠธ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 01 - ๊ธ€๊ผด ๊ด€๋ จ ์Šคํƒ€์ผ [HTML+CSS][CSS ๊ธฐ์ดˆ] 03 - ์บ์Šค์ผ€์ด๋”ฉ ์Šคํƒ€์ผ ์‹œ.. onelight-stay.tistory.com ์›น์„ ๋””์ž์ธํ•  ๋•Œ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•˜๋Š” ์ƒ‰์ƒ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ณ  ์ƒ‰์ƒ์„ ํ‘œ๊ธฐํ•˜๋Š” ๋ฐฉ๋ฒ•๋“ค์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณด์ž. 16์ง„์ˆ˜ ํ‘œ๊ธฐ๋ฒ• ‘#’ ๊ธฐํ˜ธ ๋‹ค์Œ์— 6์ž๋ฆฌ์˜ 16์ง„์ˆ˜๋กœ ํ‘œ์‹œํ•˜๋ฉฐ #RRGGBB ํ˜•์‹์œผ๋กœ ํ‘œ์‹œํ•ด ์ค€๋‹ค. ์ด๋•Œ, ์ˆซ์ž๊ฐ€ ์ปค์งˆ์ˆ˜๋ก ์ƒ‰์ด ๋งŽ์ด ์„ž์˜€๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. rgb ์™€ rgba rgb๋Š” ๋นจ๊ฐ„์ƒ‰, ์ดˆ๋ก์ƒ‰, ํŒŒ๋ž€์ƒ‰์˜ ์–‘์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ 0.. 2020. 6. 30.
[HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 05 - ์—ฐ์Šต๋ฌธ์ œ 01 ์ตœ์‹  ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ - ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์— ์ตœ์ ํ™”ํ•˜๋‹ค ํ”Œ๋žซ ๋””์ž์ธ - ์ž…์ฒด์—์„œ ํ‰๋ฉด์œผ๋กœ ํ’€์Šคํฌ๋ฆฐ ๋ฐฐ๊ฒฝ - ์ฝ˜ํ…์ธ ์— ์ง‘์ค‘ ์› ํŽ˜์ด์ง€ ์‚ฌ์ดํŠธ - ํ•œ ํŽ˜์ด์ง€์— ๋ชจ๋“  ๋‚ด์šฉ์„ ๋‹ด๋‹ค ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค๋ง - ๋™์ ์ธ ํšจ๊ณผ๋กœ ๊ฐ•ํ•œ ์ธ์ƒ์„! ์›น ํฐํŠธ - ์›น ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ๋ฅผ ๋ฐ›์ณ์ฃผ๋Š” ๊ธฐ์ˆ  02 ์ตœ์‹  ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ - ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์— ์ตœ์ ํ™”ํ•˜๋‹ค ํ”Œ๋žซ ๋””์ž์ธ - ์ž…์ฒด์—์„œ ํ‰๋ฉด์œผ๋กœ ํ’€์Šคํฌ๋ฆฐ ๋ฐฐ๊ฒฝ - ์ฝ˜ํ…์ธ ์— ์ง‘์ค‘ ์› ํŽ˜์ด์ง€ ์‚ฌ์ดํŠธ - ํ•œ ํŽ˜์ด์ง€์— ๋ชจ๋“  ๋‚ด์šฉ์„ ๋‹ด๋‹ค ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค๋ง - ๋™์ ์ธ ํšจ๊ณผ๋กœ ๊ฐ•ํ•œ ์ธ์ƒ์„! ์›น ํฐํŠธ - ์›น ํƒ€์ดํฌ๊ทธ๋ž˜ํ”ผ๋ฅผ ๋ฐ›์ณ์ฃผ๋Š” ๊ธฐ์ˆ  03 ์ตœ์‹  ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ 04 ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ๋ฅผ ๋”ฐ๋ผ์žก๋Š” ๋น„๋ฒ• ๋Œ€๊ณต๊ฐœ! ๊ทธ๋ž˜ํ”ฝ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ์›น ๋””์ž์ธ ์š”์†Œ๋ฅผ ์ผ์ผ์ด ๋งŒ๋“ค.. 2020. 6. 29.
[HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 04 - ๋ชฉ๋ก ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 03 - ๋ฌธ๋‹จ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 02 - ํ…์ŠคํŠธ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 01 - ๊ธ€๊ผด ๊ด€๋ จ ์Šคํƒ€์ผ [HTML+CSS][CSS ๊ธฐ์ดˆ] 03 - ์บ์Šค์ผ€์ด๋”ฉ ์Šคํƒ€์ผ ์‹œํŠธ (CSS) [HTML+CSS][CSS ๊ธฐ์ดˆ] 02 - ์ฃผ์š” ์„ ํƒ์ž [H.. onelight-stay.tistory.com ๋‹จ์ˆœํžˆ ํ…์ŠคํŠธ๋‚˜ ๋ฌธ๋‹จ์˜ ์Šคํƒ€์ผ๋งŒ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์‹ค์งˆ์ ์œผ๋กœ ์ž์ฃผ ์‚ฌ์šฉ๋  ๊ฒƒ ๊ฐ™์€ ๋ชฉ๋ก์˜ ์Šคํƒ€์ผ์— ๋Œ€ํ•ด์„œ๋„ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. list-style-type ์†์„ฑ : ๋ชฉ๋ก์˜ ๋ถˆ๋ฆฟ๊ณผ ๋ฒˆํ˜ธ ์Šคํƒ€์ผ ์ง€์ • - ์ˆœ์„œ ์—†๋Š” ๋ชฉ๋ก์—์„œ ๋ถˆ๋ฆฟ ๋ชจ์–‘ ๋ฐ”๊พธ๊ธฐ - ๋ชฉ๋ก ์•ž์— ๋ถ™๋Š” ๋ถˆ๋ฆฟ์˜ ๋ชจ์–‘์„ ๋ฐ”๊พธ๊ฑฐ๋‚˜ ์—†์•จ ์ˆ˜ ์žˆ๋‹ค. - ์ˆœ์„œ ๋ชฉ๋ก์—์„œ ์ˆซ์ž ๋ฐ”๊พธ๊ธฐ -.. 2020. 6. 28.
[HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 03 - ๋ฌธ๋‹จ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 02 - ํ…์ŠคํŠธ ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 01 - ๊ธ€๊ผด ๊ด€๋ จ ์Šคํƒ€์ผ [HTML+CSS][CSS ๊ธฐ์ดˆ] 03 - ์บ์Šค์ผ€์ด๋”ฉ ์Šคํƒ€์ผ ์‹œํŠธ (CSS) [HTML+CSS][CSS ๊ธฐ์ดˆ] 02 - ์ฃผ์š” ์„ ํƒ์ž [HTML+CSS][CSS ๊ธฐ์ดˆ] 01 - ์Šคํƒ€์ผ๊ณผ ์Šคํƒ€์ผ ์‹œํŠธ [HTML.. onelight-stay.tistory.com ํ…์ŠคํŠธ์— ๋Œ€ํ•ด ๋‹ค์–‘ํ•œ ์Šคํƒ€์ผ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค๋ฉด ๋ฌธ๋‹จ์œผ๋กœ ๊ธ€์„ ์ž‘์„ฑํ•  ๋•Œ ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š” ์Šคํƒ€์ผ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. direction ์†์„ฑ : ๊ธ€์ž ์“ฐ๋Š” ๋ฐฉํ–ฅ ์ง€์ • text-align ์†์„ฑ : ํ…์ŠคํŠธ ์ •๋ ฌ text-justify ์†์„ฑ : ์ •๋ ฌ ์‹œ ๊ณต๋ฐฑ ์กฐ์ ˆ text-align ์†์„ฑ์ด justify์ผ ๊ฒฝ์šฐ, ์–‘ ๋์ชฝ์— ๋งž์ถฐ.. 2020. 6. 27.