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

์ „์ฒด ๊ธ€601

[HTML+CSS][CSS ๋ ˆ์ด์•„์›ƒ] 01 - CSS ํฌ์ง€์…”๋‹๊ณผ ์ฃผ์š” ์†์„ฑ๋“ค [HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 03 - ์—ฌ๋ฐฑ์„ ์กฐ์ ˆํ•˜๋Š” ์†์„ฑ๋“ค [HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 02 - ํ…Œ๋‘๋ฆฌ ๊ด€๋ จ ์†์„ฑ๋“ค [HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 01 - CSS์™€ ๋ฐ•์Šค๋ชจ๋ธ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 03 - ๊ทธ๋Ÿฌ๋ฐ์ด์…˜ ํšจ๊ณผ๋กœ ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ.. onelight-stay.tistory.com CSS๋ฅผ ํ™œ์šฉํ•ด ์–ด๋–ป๊ฒŒ ๊ฐ ์˜์—ญ๋“ค์„ ํšจ๊ณผ์ ์œผ๋กœ ๋ฐฐ์น˜ํ• ์ง€๋ฅผ ๊ฒฐ์ •ํ•ด ๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด๋„๋ก ํ•˜์ž. CSS ํฌ์ง€์…”๋‹ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ์•ˆ์— ๊ฐ ์ฝ˜ํ…์ธ  ์˜์—ญ์„ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ• ์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ฐ™์€ ๋‚ด์šฉ์ด๋”๋ผ๋„ ๋ฐฐ์น˜๋ฅผ ์–ด๋–ป๊ฒŒ ํ•˜๊ณ  ์–ด๋–ค ๋ฐฐ๊ฒฝ๊ณผ ์ƒ‰์ƒ์„ ์‚ฌ์šฉํ• ์ง€์— ๋”ฐ๋ผ ์™„์ „ํžˆ ๋‹ค๋ฅธ ์‚ฌ์ดํŠธ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค. box-sizing ์†์„ฑ :.. 2020. 7. 8.
[HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 04 - ์—ฐ์Šต๋ฌธ์ œ 01 02 ๋ฉ”๋‰ด1 ๋ฉ”๋‰ด2 ๋ฉ”๋‰ด3 ๋ฉ”๋‰ด4 Do it! HTML5+CSS3 ์›น ํ‘œ์ค€์˜ ์ •์„ โ€ป ํ•ด๋‹น ๊ธ€์€ ์Šต๋“ ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋œ ๊ธ€์ž…๋‹ˆ๋‹ค โ€ป 2020. 7. 7.
[HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 03 - ์—ฌ๋ฐฑ์„ ์กฐ์ ˆํ•˜๋Š” ์†์„ฑ๋“ค [HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 02 - ํ…Œ๋‘๋ฆฌ ๊ด€๋ จ ์†์„ฑ๋“ค [HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 01 - CSS์™€ ๋ฐ•์Šค๋ชจ๋ธ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 03 - ๊ทธ๋Ÿฌ๋ฐ์ด์…˜ ํšจ๊ณผ๋กœ ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 02 - ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ [HTML+CSS][์ƒ‰์ƒ.. onelight-stay.tistory.com ๋ฐ•์Šค ๋ชจ๋ธ์˜ ํ…Œ๋‘๋ฆฌ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์›Œ๋ณด์•˜๋Š”๋ฐ ๊ธฐ์กด์— ์žˆ๋Š” ๋ฐ•์Šค ๋ชจ๋ธ์„ ๋‹จ์ˆœํžˆ ํ…Œ๋‘๋ฆฌ๋งŒ ์ ์šฉํ•˜๋ฉด ์ฝ˜ํ…์ธ  ์˜์—ญ์— ๋ฐ”์ง ๋ถ™์€ ํ…Œ๋‘๋ฆฌ์˜ ์–ด์ •์ฉกํ•œ ๋ชจ์–‘์— ์–ด์ƒ‰ํ•จ์„ ๋Š๋‚„ ๊ฒƒ์ด๋‹ค. ์ด๋ฒˆ์—๋Š” ๋ˆˆ์œผ๋กœ ๋ณด๊ธฐ์— ํ›จ์”ฌ ์•ˆ์ •์ ์ธ ๋ฐ•์Šค ๋ชจ๋ธ์˜ ์—ฌ๋ฐฑ์„ ๋„ฃ์–ด ๋ณด๋„๋ก ํ•˜์ž. margin ์†์„ฑ : ์š”์†Œ ์ฃผ๋ณ€ ์—ฌ๋ฐฑ ์„ค์ • margin์ด๋ž€ ํ˜„์žฌ ์š”์†Œ ์ฃผ๋ณ€์˜ ์—ฌ๋ฐฑ์„ ๋‚˜ํƒ€๋‚ด๋ฉฐ, ํ•œ .. 2020. 7. 6.
[HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 02 - ํ…Œ๋‘๋ฆฌ ๊ด€๋ จ ์†์„ฑ๋“ค [HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 01 - CSS์™€ ๋ฐ•์Šค๋ชจ๋ธ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 03 - ๊ทธ๋Ÿฌ๋ฐ์ด์…˜ ํšจ๊ณผ๋กœ ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 02 - ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 01 - ์›น์—์„œ ์ƒ‰์ƒ ํ‘œ๏ฟฝ onelight-stay.tistory.com ํ…์ŠคํŠธ ๋‹จ๋ฝ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ทธ๋ฆผ์ด๋‚˜ ํ‘œ, ์–‘์‹ ๋“ฑ์— ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ํ…Œ๋‘๋ฆฌ์— ๋Œ€ํ•œ ๊ด€๋ จ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž. border-style ์†์„ฑ : ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ ์ง€์ • border-width ์†์„ฑ : ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ ์ง€์ • border-width๋Š” ํ…Œ๋‘๋ฆฌ์˜ ๋‘๊ป˜๋ฅผ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ•ด๋‹น ์†์„ฑ์„ ์ด์šฉํ•ด ํ•œ๊บผ๋ฒˆ์— ํ‘œ์‹œํ•  ๋•Œ ์†์„ฑ ๊ฐ’์ด 2๊ฐœ๋ผ๋ฉด ์œ„์•„๋ž˜์™€ ์ขŒ์šฐ๋ฅผ ๋ฌถ์–ด ์ง€์ •ํ•˜๊ณ  .. 2020. 7. 5.
[HTML+CSS][CSS ๋ฐ•์Šค๋ชจ๋ธ] 01 - CSS์™€ ๋ฐ•์Šค๋ชจ๋ธ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 03 - ๊ทธ๋Ÿฌ๋ฐ์ด์…˜ ํšจ๊ณผ๋กœ ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 02 - ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ [HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 01 - ์›น์—์„œ ์ƒ‰์ƒ ํ‘œํ˜„ํ•˜๊ธฐ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ ์Šคํƒ€์ผ] 04 - ๋ชฉ๋ก ์Šคํƒ€์ผ [HTML+CSS][ํ…์ŠคํŠธ ๊ด€๋ จ onelight-stay.tistory.com CSS์— ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ๋ณธ ๊ฐœ๋…๋“ค์— ๋Œ€ํ•ด์„œ ์ดํ•ดํ•˜๊ณ  CSS์˜ ์‹ค์งˆ์ ์ธ ๋””์ž์ธ์„ ๋งŒ๋“ค์–ด๋ณด๋Š” ์‹œ๋„๋ฅผ ํ•ด๋ณด์ž. CSS ๋ฐ•์Šค ๋ชจ๋ธ CSS ๋ฐ•์Šค ๋ชจ๋ธ์ด๋ž€ ์›น ๋ฌธ์„œ์˜ ๋‚ด์šฉ์„ ๋ฐ•์Šค ํ˜•ํƒœ๋กœ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ฐ•์Šค ๋ชจ๋ธ๋“ค์ด ๋ชจ์—ฌ ์›น ๋ฌธ์„œ๋ฅผ ์ด๋ฃจ๊ฒŒ ๋œ๋‹ค. ์ด๋•Œ, ๋ฐ•์Šค ๋ชจ๋ธ์€ ์š”์†Œ์— ๋”ฐ๋ผ์„œ ๋‚˜์—ด ๋ฐฉ์‹์ด ๋‹ฌ๋ผ์ง€๋ฉฐ ๋ถ€๋ฅด๋Š” ๋ช…์นญ๋„ ๋‹ค๋ฅด๋‹ค. ๋ธ”.. 2020. 7. 4.
[HTML+CSS][์ƒ‰์ƒ๊ณผ ๋ฐฐ๊ฒฝ์„ ์œ„ํ•œ ์Šคํƒ€์ผ] 04 - ์—ฐ์Šต๋ฌธ์ œ 01 ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ๋ฅผ ๋”ฐ๋ผ์žก๋Š” ๋น„๋ฒ• ๋Œ€๊ณต๊ฐœ! ๊ทธ๋ž˜ํ”ฝ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ์›น ๋””์ž์ธ ์š”์†Œ๋ฅผ ์ผ์ผ์ด ๋งŒ๋“ค์–ด ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ์‹œ๋Œ€๋Š” ์ง€๋‚ฌ๋‹ค. ์ด์ œ ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, PC ๋“ฑ ๋ฉ€ํ‹ฐ ๋””๋ฐ”์ด์Šค์— ํ•œ ๋ฒˆ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์›น ๋””์ž์ธ ๋ฐฉ๋ฒ•์„ ์•Œ์•„์•ผ ํ•œ๋‹ค. ๋ฐ”๋กœ ์ฝ”๋”ฉ์„ ์ด์šฉํ•œ ์›น ๋””์ž์ธ์ด๋‹ค. 02 ์›น ๋””์ž์ธ ํŠธ๋ Œ๋“œ๋ฅผ ๋”ฐ๋ผ์žก๋Š” ๋น„๋ฒ• ๋Œ€๊ณต๊ฐœ! ๊ทธ๋ž˜ํ”ฝ ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ์›น ๋””์ž์ธ ์š”์†Œ๋ฅผ ์ผ์ผ์ด ๋งŒ๋“ค์–ด ์›น์‚ฌ์ดํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ์‹œ๋Œ€๋Š” ์ง€๋‚ฌ๋‹ค. ์ด์ œ ๋ชจ๋ฐ”์ผ, ํƒœ๋ธ”๋ฆฟ, PC ๋“ฑ ๋ฉ€ํ‹ฐ ๋””๋ฐ”์ด์Šค์— ํ•œ ๋ฒˆ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์›น ๋””์ž์ธ ๋ฐฉ๋ฒ•์„ ์•Œ์•„์•ผ ํ•œ๋‹ค. ๋ฐ”๋กœ ์ฝ”๋”ฉ์„ ์ด์šฉํ•œ ์›น ๋””์ž์ธ์ด๋‹ค. 03 ํ•˜๋ฃจ ํ•œ ์•Œ์˜ ์‚ฌ๊ณผ๋Š” ์˜์‚ฌ๋ฅผ ๋ฉ€๋ฆฌ ํ•œ๋‹ค Do it! HTML5+CSS3 ์›น ํ‘œ์ค€์˜ ์ •์„ โ€ป ํ•ด๋‹น ๊ธ€์€ ์Šต๋“ ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋œ ๊ธ€์ž…๋‹ˆ๋‹ค โ€ป 2020. 7. 3.