์ฝ๋ฉ4 ๋์ ์ํ์ฝ๋ฉ HTML+CSS+์๋ฐ์คํฌ๋ฆฝํธ - <๋ฏธ๋์ด ์ฟผ๋ฆฌ> ๋ฐ์ํ ์น์ด ์๋ค. ํ๋ฉด์ ํญ์ ํฌ๊ธฐ๊ฐ ๋ณํ๋ค. ๊ฐ์ ๋ด์ฉ์ ๋ชจ๋ํฐ๋ก ๋ณผ ์๋ ์๊ณ ์ค๋งํธํฐ์ผ๋ก ๋ณผ ์๋ ์๋ค. ์ด ๋ ์น ํ์ด์ง๋ฅผ ๊ตฌ์ฑํ๋ ์์๋ค์ด ํ๋ฉด ํฌ๊ธฐ์ ๋ง์ถฐ ์์์ ์ต์ ํ๋๋ ๊ฒ์ ๋ฐ์ํ ์น์ด๋ผ๊ณ ํ๋ค๊ณ ํ๋ค(๋๋ ๊ณต๋ถํ๋ ์ค์ด๋ผ ์ ๋ชจ๋ฅธ๋ค). ์ด๋ฐ ๋ฐ์ํ ์น์ ์ํด์๋ ๋ฏธ๋์ด์ฟผ๋ฆฌ๋ผ๋ ๊ธฐ์ ?๋ฐฉ๋ฒ? ์๋ฌดํผ ๋ฏธ๋์ด์ฟผ๋ฆฌ๊ฐ ํ์ํ๋ค. ์ค๋๋ ๋ ๊ทธ๋ ๋ฏ '์ํ์ฝ๋ฉ! HTML+CSS+์๋ฐ์คํฌ๋ฆฝํธ' ์ฑ ์ ์์ ๋ฅผ ๋ฐ๋ผ๊ฐ๋ณด์. ์์ ์ฝ๋ฉ์ ์น๋ ํ๋ฉด์๋ ๋ค์๊ณผ ๊ฐ์ด ํ์๋๋ค. ์๋ ์ฑ ์์๋ ํ ์ค ์ ์ฒด๋ฅผ ์ฐ๋๋ก ํ์๋๋ฐ display: inline;์ ์ถ๊ฐํ์ฌ ์์ ์ ๋ถํผ๋งํผ๋ง ์ฌ์ฉํ๋๋ก ์กฐ์ ํ์๋ค. ํน๋ณํ ๊ฒ์ ์๋ค. Responsive์ ์๋ฌด ์๋ฏธ ์๋ div ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ณ ๊ฑฐ๊ธฐ์ ๋ด๊ฐ ์ํ๋ ํจ๊ณผ๋ฅผ ์ค.. 2020. 12. 15. ๋์ ์ํ์ฝ๋ฉ HTML+CSS+์๋ฐ์คํฌ๋ฆฝํธ - <div ํ๊ทธ> HTML์ ๊ณต๋ถํ๋ฉฐ ๊ฐ์ฅ ์ดํด๊ฐ ์ ๋๋ ๊ฒ์ด ์๋ค. ์ฌ์ค ์ง๊ธ๋ ์ดํด๋ ์ ์๊ฐ๋ค. ๋ฐ๋ก div ํ๊ทธ. ์น๊ตฌ๋ค์ด ๋ค์ด๋ฒ๊ฐ์ ์ฌ์ดํธ์ ๋ค์ด๊ฐ์ ๋ฉ์ธ ํ์ด์ง๊ฐ ์ด๋ป๊ฒ ์ง์ก๋์ง ๋ณด๋ ๊ฒ๋ ๊ณต๋ถ๋ผ๊ณ ํด์ ๋ดค๋๋ฐ ๊ฐ์ฅ ๋ง์ด ๋ณด์ธ ํ๊ทธ ์ค ํ๋๊ฐ div ํ๊ทธ์๋ค. ๋ฌธ์ ๋ ์ด div ํ๊ทธ๊ฐ ๋์ฒด ๋ญ์ง ๋ชจ๋ฅด๊ฒ ๋ค๋ ๊ฒ์ด๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ์ฐ๋ฆฌ๊ฐ ์ฐ๋ ํ๊ทธ๋ ๋ค ๊ทธ ์๋ฏธ์ ์ญํ ์ด ์ ํด์ ธ์๋ค. ์๋ฅผ ๋ค์ด h1ํ๊ทธ๋ผ๋ฉด ์ ๋ชฉ์ ๋ํ๋ด๋ tag์ด๋ฉด์ ๋ชจ๋ hํ๊ทธ์ค ๊ฐ์ฅ ๊ธ์ ์ฌ์ด์ฆ๊ฐ ํฌ๋ค๋๊ฐ, ์ด๋ฐ ์์ด๋ค. div๋ (์ง๊ธ๊น์ง ์ดํดํ ๊ฒ์ผ๋ก ๋ณผ ๋) ์ด๋ฐ๊ฒ ์ ํด์ ธ์์ง ์์ ํ๊ทธ๋ค. ๋ง๋ฅํ๊ทธ๋๊น. ์๋ฅผ ๋ค์ด ์ฑ ์ ์ฐ๋ค๊ณ ํด๋ณด์. ๋ณดํต์ ์ฑ ์ ๋ค ์ ๋ชฉ๊ณผ ๋ด์ฉ์ด ์ด๋ฏธ ์จ์ ธ์๋ค. ๋ฐ๋ผ์ ์ฐ๋ฆฌ๋ ๊ทธ ์ฑ ์ ์ฌ์ ์ ํด์ง ๋ด์ฉ์ ์ฝ๊ธฐ๋ง ํ๋ฉด ๋.. 2020. 12. 13. ๋์ ์ํ์ฝ๋ฉ HTML+CSS+์๋ฐ์คํฌ๋ฆฝํธ - <border, padding, margin> CSS๋ฅผ ํ๋ฉฐ ํญ์ ํท๊ฐ๋ ธ๋ ๊ฒ ์ค ํ๋๊ฐ border, padding, margin 3๊ฐ์ง๋ค. ์ฌ์ค ์ฐจ๋ถํ ์ฝ๊ณ ๋ฐ๋ผํด๋ณด๋ฉด ์๋ฌด๊ฒ๋ ์๋๋ฐ ๋์ถฉํ๊ณ ๋์ด๊ฐ๋ ์ต๊ด์ด ๋ฌธ์ ๊ฐ ๋์๋ ๊ฒ ๊ฐ๋ค. ์๋ง ์์ผ๋ก๋ ํท๊ฐ๋ฆฌ๊ฒ ์ง๋ง ๊ทธ๋๋ ์ ๋ฆฌ๋ฅผ ํด๋ณดํ ๋ง์์ ์ฌ๊ธฐ์ ์ ์ด ๋ณธ๋ค. ํฐ์คํ ๋ฆฌ์ง๋ง ๋ค์ด๋ฒ์์ ์ฌ์ ์ ์ฐพ์ ๋ณด๋ border๋ ๊ฒฝ๊ณ, padding์.. ์ถฉ์ ์ฌ..๊ทธ ๊ณ ๋ฉ๋ค์ ํจ๋ฉ?? ์ง๋ฉ๋ค์ ํจ๋ฉ์กฐ๋ผ์ ํจ๋ฉ?? ์ด ๋์๊ณ margin์ ์ฌ๋ฐฑ์ด ๋์๋ค. ํธ ๋ญ๊ฐ ๋ป์ ์ฐพ์๋ณด๋ ๋ชจ๋ ๊ฒ์ด ์ดํด๋๋ ๋๋์ ์ธ ๋๋์ด์ง๋ง, ํ ๋ฒ ํ์ธํด๋ณด์. ์ฐ์ border๋ค. border์ ๊ฒฝ์ฐ ํ๊ทธ๋ฅผ ์ ์ฉ ์ ํด๋น ํ๊ทธ๊ฐ ์ฐจ์งํ๋ ๋ฒ์์ ํ ๋๋ฆฌ๋ผ๊ณ ๋ณด๋ฉด ๋๋ค. ์ฑ ์์๋ border์ ์์๋ก h1์ ๋ค๊ณ ์๋ค. ์์ ๊ฐ์ด ์ ๋ ฅ ์ .. 2020. 12. 3. ๋์ ์ํ์ฝ๋ฉ HTML+CSS+์๋ฐ์คํฌ๋ฆฝํธ - <style ํ๊ทธ, style ์์ฑ> ์์ ๋ถํฐ ์ฝ๋ฉ์ ๋ฐฐ์๋ณด๊ณ ์ถ์๋ค. ๊ธฐํ๋ ๋ง์๋ค. ๊ทธ๋ฐ๋ฐ ๋๋ฌด ์ด๋ ค์ ๋ค. ์ฒ์ ๋ฌธ๊ณผ๋ผ ๊ทธ๋ฐ์ง ๋ชฐ๋ผ๋ ๋๋ ๊ทธ ์ฝ๋ค๋ ํ์ด์ฌ๋, ๊ฐ๋ฐ์๋ค์ด ์ฝ๋ฉ์ด๋ ์ธ์ด๋ผ๊ณ ๋ถ๋ฅด๋ฉด ํ๋ฅผ ๋ธ๋ค๋ html๋ ์ ์ดํด๊ฐ ๊ฐ์ง ์์๋ค. ์ ๋ฐํจ์ด ๋ถ์กฑํ์๋์ง๋ ๋ชจ๋ฅด๊ฒ ๋ค. ๊ทธ๊ฑธ ๋ชฐ๋ผ๋ ๋จน๊ณ ์ฌ๋๋ฐ๋ ์ง์ฅ์ด ์์์ผ๋๊น. ๊ณต๋ถ๋ฅผ ํ๋ค ์กฐ๊ธ ์ด๋ ค์์ง๋ฉด ๊ทธ๋ง๋๊ณ (๊ฐ๋ฐ์ ์น๊ตฌ๋ค์ ์กฐ๊ธ ์ด๋ ค์ด ๋ถ๋ถ์ด ์์๋ฆฌ๊ฐ ์๋ค๊ณ ํ์๋ค) ๋ช ๊ฐ์ ์ง๋์ ๋ค์ ์ฒ์๋ถํฐ๋ฅผ ๋ฐ๋ณตํ๋ค๋ณด๋ ๊ทธ ๋ฌด์๋ ๋์ง ์์๋ค. ์น๊ตฌ๋ค์ ์ ๋ฐ ๋ญ๊ฐ๋ฅผ ๋ง๋ค์ด๋ณด๋ผ๊ณ ํ์๋ค. ๊ทธ๋์ผ ์ฑ์ฅํ๋ค๊ณ ํ์๋ค. ๊ทธ๋์ ๋ง์ง๋ง์ผ๋ก ์ํ์ฝ๋ฉ์์ ๋์จ html+CSS+์๋ฐ์คํฌ๋ฆฝํธ ์ฑ ์ ๊ณต๋ถํ๊ณ ๋ญ๊ฐ๋ฅผ ๋ง๋ค์ด๋ณผ ์๊ฐ์ด๋ค. ์ฌ์ค html๊น์ง๋ ๋ด์ฉ์ด ํฌ๊ฒ ์ด๋ ต์ง ์๋ค. ์ ์ด์ ์ฑ ์์ฒด๊ฐ ๊ต์ฅํ ๊ธฐ์ด์ .. 2020. 12. 2. ์ด์ 1 ๋ค์