์ํ์ฝ๋ฉ3 ๋์ ์ํ์ฝ๋ฉ 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. ์ด์ 1 ๋ค์