๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[HTML+CSS][ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ] 02 - ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ํ•ญ๋ชฉ ๋ฐฐ์น˜๋ฅผ ์œ„ํ•œ ์†์„ฑ๋“ค [HTML+CSS][ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ] 01 - ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ธฐ๋ณธ ์†์„ฑ๋“ค [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 03 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ์›น ๋ฌธ์„œ ๋งŒ๋“ค๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 02 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ ์šฉํ•˜๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 01 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ดํ•ดํ•˜๊ธฐ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 03 - ๊ฐ€๋ณ€.. onelight-stay.tistory.com ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ํ•ญ๋ชฉ์„ ๋ฐฐ์น˜ํ•˜๊ธฐ ์œ„ํ•œ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. justify-content ์†์„ฑ - ์ฃผ์ถ• ๊ธฐ์ค€์˜ ๋ฐฐ์น˜ ๋ฐฉ๋ฒ• ์ง€์ • ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์„ ์œ„ํ•ด ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ ์‚ฌ์šฉ ์‹œ ๊ธ€์ž ํฌ๊ธฐ๋„ ์œ ๋™์ ์œผ๋กœ ๋ฐ”๋€Œ๋Š” ๊ฒƒ์ด๋‹ค. align-items ์†์„ฑ, align-self ์†์„ฑ - ๊ต์ฐจ์ถ• ๊ธฐ์ค€์˜ ๋ฐฐ์น˜ ๋ฐฉ๋ฒ• ์ง€์ • ๊ต.. 2020. 8. 11.
[HTML+CSS][ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ] 01 - ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ธฐ๋ณธ ์†์„ฑ๋“ค [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 03 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ์›น ๋ฌธ์„œ ๋งŒ๋“ค๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 02 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ ์šฉํ•˜๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 01 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ดํ•ดํ•˜๊ธฐ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 03 - ๊ฐ€๋ณ€ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ฐ€๋ณ€ ์š”์†Œ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 02 - ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„.. onelight-stay.tistory.com ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ์ด ๋ฌด์—‡์ธ์ง€ ์‚ดํŽด๋ณด๊ณ  ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ๋ณธ ์†์„ฑ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. ํ”Œ๋ ‰์Šค ๋ฐ•์Šค ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์„ ๊ธฐ๋ณธ์œผ๋กœ ํ•˜๋ฉฐ ํ”Œ๋ ‰์Šค ๋ฐ•์Šค๋ฅผ ์›ํ•˜๋Š” ์œ„์น˜์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ์—ฌ์œ  ๊ณต๊ฐ„์— ๋”ฐ๋ผ ๋„ˆ๋น„๋‚˜ ๋†’์ด, ์œ„์น˜๋ฅผ ์ž์œ ๋กญ๊ฒŒ ๋ณ€ํ˜•ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ™”๋ฉด ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋ ˆ์ด์•„์›ƒ์˜ ๋ฐฐ์น˜๊ฐ€.. 2020. 8. 10.
[HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 03 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ์›น ๋ฌธ์„œ ๋งŒ๋“ค๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 02 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ ์šฉํ•˜๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 01 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ดํ•ดํ•˜๊ธฐ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 03 - ๊ฐ€๋ณ€ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ฐ€๋ณ€ ์š”์†Œ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 02 - ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 01 - ๋ฐ˜์‘ํ˜• ์›น๊ณผ ๋ทฐํฌํŠธ(v.. onelight-stay.tistory.com ์ด์ œ๊ป ๋ฐฐ์›Œ์˜จ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ์ง์ ‘ ์›น์„ ๋งŒ๋“ค์–ด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด๋„๋ก ํ•œ๋‹ค. ๋ ˆ์ด์•„์›ƒ ๊ตฌ์ƒํ•˜๊ธฐ ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์€ ํ™”๋ฉด ํ•ด์ƒ๋„์— ๋”ฐ๋ผ ํ™”๋ฉด ์š”์†Œ๋“ค์„ ์˜ฎ๊ธธ ์ˆ˜ ์žˆ์–ด์•ผ ํ•˜๋ฏ€๋กœ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋ ˆ์ด์•„์›ƒ์„ ์ž˜ ๊ตฌ์ƒํ•˜๊ณ  ์˜ฎ๊ธธ ๋ถ€๋ถ„์„ ๊ฒฐ์ •ํ•ด์•ผ ํ•œ๋‹ค. ์ด๋•Œ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์„ ์‹œ์ž‘์œผ๋กœ ํƒœ๋ธ”๋ฆฟ๊ณผ PC ํ™”๋ฉด ์ˆœ์œผ๋กœ ๊ตฌ์ƒ์‹œ ํŽธํ•˜๋‹ค. ์šฐ๋ฆฌ๋Š” ํ™”๋ฉด ๋„ˆ๋น„์— ๋”ฐ๋ผ ์นด๋“œ.. 2020. 8. 9.
[HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 02 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ ์šฉํ•˜๊ธฐ [HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 01 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ดํ•ดํ•˜๊ธฐ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 03 - ๊ฐ€๋ณ€ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ฐ€๋ณ€ ์š”์†Œ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 02 - ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 01 - ๋ฐ˜์‘ํ˜• ์›น๊ณผ ๋ทฐํฌํŠธ(viewport)์˜ ๊ฐœ๋… [HTML+CSS][CSS3์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜] 03 -.. onelight-stay.tistory.com ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์œผ๋‹ˆ ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์ ์šฉํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด๋„๋ก ํ•˜์ž. ์™ธ๋ถ€ CSS ํŒŒ์ผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์™ธ๋ถ€ ์Šคํƒ€์ผ ์‹œํŠธ ํŒŒ์ผ๋กœ ๋”ฐ๋กœ ์ €์žฅํ•œ ํ›„ ์›น ๋ฌธ์„œ ์—ฐ๊ฒฐ์„ ํ•ด๋ณด๋ ค ํ•œ๋‹ค. - ํƒœ๊ทธ ์‚ฌ์šฉํ•˜๊ธฐ - ํŠน์ • ์กฐ๊ฑด์— ๋งž์„ ๊ฒฝ์šฐ ์ง€์ •ํ•œ CSS ํŒŒ์ผ์„ ๊ฐ€์ ธ์™€ ์ ์šฉํ•˜๋ผ๋Š” ์˜๋ฏธ๋กœ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ํ•ด๋‹น ํƒœ๊ทธ๋Š” ํƒœ๊ทธ ์‚ฌ์ด์— ์‚ฝ์ž….. 2020. 8. 6.
[HTML+CSS][๋ฏธ๋””์–ด ์ฟผ๋ฆฌ] 01 - ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ์ดํ•ดํ•˜๊ธฐ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 03 - ๊ฐ€๋ณ€ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ฐ€๋ณ€ ์š”์†Œ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 02 - ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 01 - ๋ฐ˜์‘ํ˜• ์›น๊ณผ ๋ทฐํฌํŠธ(viewport)์˜ ๊ฐœ๋… [HTML+CSS][CSS3์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜] 03 - ํŠธ๋žœ์ง€์…˜ [HTML+CSS][CSS3์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜] 02 - ๋ณ€ํ˜•๊ณผ.. onelight-stay.tistory.com ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๊ฐ€ ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ  ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ณ ๋ คํ•ด์•ผ ํ•  ์—ฌ๋Ÿฌ ์กฐ๊ฑด๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ CSS3 ๋ชจ๋“ˆ ์ค‘์— ํ•˜๋‚˜๋กœ ์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค ๋ฏธ๋””์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๊ฐ€์— ๋”ฐ๋ผ ์‚ฌ์ดํŠธ์˜ ํ˜•ํƒœ๊ฐ€ ๋ฐ”๋€Œ๋„๋ก CSS๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ๋ฏธ๋””์–ด ์ฟผ๋ฆฌ ๊ตฌ๋ฌธ @media ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ํŠน์ • ๋ฏธ๋””์–ด์—์„œ ์–ด๋–ค CSS๋ฅผ .. 2020. 8. 5.
[HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 03 - ๊ฐ€๋ณ€ ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ฐ€๋ณ€ ์š”์†Œ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 02 - ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ [HTML+CSS][๋ฐ˜์‘ํ˜• ์›น] 01 - ๋ฐ˜์‘ํ˜• ์›น๊ณผ ๋ทฐํฌํŠธ(viewport)์˜ ๊ฐœ๋… [HTML+CSS][CSS3์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜] 03 - ํŠธ๋žœ์ง€์…˜ [HTML+CSS][CSS3์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜] 02 - ๋ณ€ํ˜•๊ณผ ๊ด€๋ จ๋œ ์†์„ฑ๋“ค [HTML+CSS][CSS3์™€ ์• ๋‹ˆ๋ฉ”์ด์…˜] 01 -.. onelight-stay.tistory.com ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์— ๋Œ€ํ•ด ๋ฐฐ์› ์œผ๋‹ˆ ๋ ˆ์ด์•„์›ƒ์ด ๋ณ€๊ฒฝ๋  ๋•Œ์—๋„ ๋‹ค๋ฅธ ์š”์†Œ๋“ค๋„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ํ‘œํ˜„ ๋  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๊ฐ€๋ณ€ ์š”์†Œ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž. ๊ฐ€๋ณ€ ๊ธ€๊ผด ๋ฐ˜์‘ํ˜• ์›น ๋””์ž์ธ์„ ์œ„ํ•ด ๊ฐ€๋ณ€ ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ ์‚ฌ์šฉ ์‹œ ๊ธ€์ž ํฌ๊ธฐ๋„ ์œ ๋™์ ์œผ๋กœ ๋ฐ”๋€Œ๋Š” ๊ฒƒ์ด๋‹ค. em ๋‹จ์œ„ ๋ถ€๋ชจ ์š”์†Œ์—์„œ ์ง€์ •ํ•œ ํฐํŠธ์˜ ๋Œ€๋ฌธ์ž M์˜ ๋„ˆ๋น„๋ฅผ 1em์œผ๋กœ ์ง€.. 2020. 8. 4.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”