๊ฐ๋ฐ์๊ฐ ๋ฌธํ ๋์๋ฆฌ ๋ฌธ์ง์ ํ์ง๋ฅผ ๋์์ธ
์ฌ์ค ์ด๊ฒ๋ ์ข ์ง๋ ์ด์ผ๊ธฐ๋ค. 9์์ ๋๋ ์์ ์ด๋๊น ๋ง์ด๋ค. ์ฐธ์ง ๋ชปํ๋ ๋ถ๋ค์ ์ํด ๊ฒฐ๊ณผ๋ฌผ ๋จผ์ ๋ณด์ฌ๋๋ฆฌ๊ฒ ๋ค. ์ด ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์๋ฉด ๋๋ค.
๋ฌผ๋ก ๋ ์์๋ ์ค๋ ์๊ฐ ํ์ง๊ฐ ์์๊ฒ ๋ฝํ ๋์์ง๋ง, ๋ด๊ฐ ์๋ ๋์์๋ ๋ชป์๊ธด(=๋ด ๋ง์ ์ ๋๋) ํ์ง๊ฐ ๋์ฌ ์ ์๋ค๋ ์ผ๋ ์ผ๋ก ํ์ง ๋์์ธ์ ๋๋งก์๋ค. ์ ๋ฒ ํ์ง๋ ๋งก์์ผ๋ ๋ ๋ฒ์งธ ์์ ์ด์๋ค.
์ ๋ฒ์๋ ๋ญ๋๋ผ, ํ๊ต ๋ผ์ด์ ์ค๋ก ํฌํ ์ต์ธ๊ฐ๋ฅผ ์จ์ ํ์๋ค. ๊ทธ๋ฐ๋ฐ ์์ฒด ๋ญ ์๊ธด ๊ฑธ ๋ง๋๋ ๋ฐ์ HTML๊ณผ CSS๊ฐ ์ต์ํ๊ธฐ๋ ํ๊ณ , ๊ณตํต ๋ณ์ ๊ฐ์ ๊ธฐ๋ฅ์ด ์๋ค๋ณด๋ ๋ญ ํ๋ ๋ฐ๊พธ๋ ค๋ฉด ์ผ์ผํ ์ฐ๋ค๋ค๋ค ๋ฐ๊ฟ์ผ ํ๋ ๊ฒ ๊ทธ๋ ๊ฒ ๋ถํธํ ์๊ฐ ์์๋ค. ๊ธฐ๋ฅ์ด ์๋ ๊ฒ ์๋๋ผ ๋ด๊ฐ ๋ชจ๋ฅด๋ ๊ฑฐ๋๋ ํ ์ ์๋ค. ๋ด๊ฐ ๋ฐฅ ๋ฒ์ด ๋จน๋ ๊ฑด ์ฝ๋๋ก ๋ฒ์ด ๋จน๋ ๊ฑฐ์ง ํฌํ ์ต์ด ์๋๊ธฐ ๋๋ฌธ์ด๋ค.
๊ทธ๋์ HTML, CSS, JS๋ก ํ์ง๋ฅผ ๋ง๋ค๊ธฐ๋ก ํ๋ค. HTML์ ๊ตฌ์กฐ, CSS๋ ๋ชจ์, JS๋ ๋์์ด๋ผ๋ ๋จ์ํ ํ์ ๋ฑ ๋ค์ด๋ง๊ฒ ์์ฑํ๋ค. ์ฑ ํ์ง ๋ง๋๋๋ฐ ๋ฌด์จ ๋์์ด๋๊ณ ํ์ ๋ค๋ฉด ๋ณ ๊ฑฐ ์์ง๋ง HTML ํ ํ๋ฆฟ์ ์ปดํ์ผํ๋ ๊ฒ์ด์๋ค.
์ฑ ํ์ง๋ ํฌ๊ฒ ์ธ ๋ถ๋ถ์ผ๋ก ๋๋ ์ ์๋ค. ์ ํ์ง, ๋ค ํ์ง, ๊ทธ๋ฆฌ๊ณ ๊ฐ์ด๋ฐ๋ผ๊ณ ํ ์ ์๋ ์ฑ ๋ฑ์ด๋ค. ์ฑ ์ ์ฃผ๋ฌธ์ ์ํ๋ ์ฌ์ดํธ์์ ํ์ด์ง๋ฅผ ๋ฃ์ผ๋ฉด ์ฑ ๋ฑ ๋๊ป๋ฅผ mm๋ก ์๋ ค์คฌ๊ธฐ ๋๋ฌธ์ ๋ง์ถ์ด์ ์ ์ํ ์ ์์๋ค. ์ค์ ์ค๊ฐ์ ์๊ณ ๊ฐ ์์๋ณด๋ค ํจ์ฌ ๋ฐฉ๋ํด์ง๋ ๋ฐ๋์ ์ฑ ๋ฑ์ด ํ์ฐธ ๋๊บผ์์ก๋๋ฐ, ์ฝ๋๋ก ํ์ง๋ฅผ ๋ง๋ ํ์ ์ฌ๊ธฐ์ ๋น ๋ฅด๊ณ ์ฝ๊ฒ ๋์ํ ์ ์์๋ค. ์์น๋ง ์กฐ๊ธ ๋ฐ๊พธ๊ณ ๋์ด์ง, ์๋ฅผ ๋ค์ด ํฌํ ์ต ๋ฌด์ง๋ ์ด์ธ ๋ด๊ฐ ํฌํ ์ต์ ์ผ๋๋ผ๋ฉด ์ผ์ผํ ์ฌํํธ ๋๋ฅด๊ณ โฆ ์ค๋ฅธ์ชฝ์ผ๋ก ์ฐ๋์ฐ๋ ์ฎ๊ธฐ๊ณ โฆ ์์ฐจ ์์ด ๋ฏธ๋๋ฌ์ ธ์ ์ปจํธ๋กค Z ๋๋ฅด๊ณ โฆ ์ด๋ฌ์ ๊ฒ์ด๋ค. ๋์์ธ ์์ฒด๋ ์ข์ํ๋ ์จ๋ฒ์ ๋ง์ด ๋ฒ ๊ผ๋ค. ๊ทธ๋ฐ๋ฐ ์ด์ ์์ ๋ณด๋๊น ๋ท๋ฉด์ ์์ฌ๋ด๋ค ๊ดด์ํด์ง ๊ฒ ๊ฐ๊ธฐ๋ ํ๊ณ , ์ข ์์ฝ๋ค.
์ด๋ฒ ์์
์ ํ๋ฉด์ ๊ฐ์ฅ ์ฌ๋ฐ์๋ ๊ฑด ์ฒ์ ํด๋ณด๋ HTML + CSS ์คํ์ ์ธ์๋ฌผ ์์
์ด์๋ค๋ ๊ฒ์ด๋ค. ๋งค์ผ ์คํฌ๋ฆฐ์ ๋ณด์ด๋ ์น ๊ฐ๋ฐ๋ง ํ๋ค๊ฐ ์ธ์๋ฌผ ์์
์ ํด๋ด์, max-width
๋ min-width
๊ฐ์ ์กฐ๊ฑด ์๋ @media screen
์ฟผ๋ฆฌ๋ฅผ ์ฒ์ ์จ๋ณด์๋ค. ๋๋ฆ๋๋ก ๊ธฐ๋ถ์ ๋ด๋ ค๊ณ ์คํฌ๋ฆฐ์ฉ ๋ฏธ๋ฆฌ๋ณด๊ธฐ์๋ ๊ฒฉ์ ๋ฌด๋ฌ ๋ฐฐ๊ฒฝ๋ ๋ฃ๊ณ , ์ค์ ๊ฒฐ๊ณผ๋ฌผ์๋ ๋์ค์ง ์์ ์์ญ(์, ๋ค, ์ฑ
๋ฑ) ๊ตฌ๋ถ์ ๋ ๋ฃ์๋ค.
๊น๋ค๋ก์ ๋ ๊ฑด ๊ฒฐ๊ณผ๋ฌผ์ ๋ฝ์๋ผ ๋ A4๋ ๋ ํฐ์ง ๊ฐ์ด ์ ํด์ ธ ์๋ ํฌ๊ธฐ์ ๋ค์ด๋ง์ง ์๋๋ค๋ ๊ฒ์ด์๋ค. ์ด๊ฑด ๋ ์ง์คํธ๋ฆฌ๋ฅผ ์ด๊ณ ์ด์ฉ๊ณ ํด์ ์ปค์คํ ์ฌ์ด์ฆ๋ฅผ ์ถ๊ฐํ๋ ๋ฒ์ ์ฐพ์๋ด์ ํด๊ฒฐํ๋ค.
๋ง์ฝ์ ๋ ๋น์ทํ ์ผ์ ํ ๊ธฐํ๊ฐ ์๊ธด๋ค๋ฉด? 100% ์ด ๋ฐฉ๋ฒ์ ์ฐ๊ฒ ๋ค. ์ต์ํ ๋๊ตฌ๋ฅผ ์ฐ๋๊น ์ฌ๋ฏธ๋ ์๊ณ ํจ์ฌ ์์ํ๋ค. ์ด์ ์กธ์ ์ด๋ ํด์ผ ํ ํ ๋ฐ ์์ง๋ ๋์๋ฆฌ ์ผ์ ๊ณ์ํ ์๊ฐ์ ํ๊ณ ์๋ค. ์กธ์ ์ ํ๊ณ ์ถ์ง๋ง, ์กธ์ ์ ํ๊ธฐ ์ซ์, ๋ญ ๊ทธ๋ฐ ๋ณต์กํ ์ฌ์ ์ด๋ค. ์ด๋ฌธ์ฐ์ ์๊ด ์์ผ๋ฉด ์ข๊ฒ ๋ค. ๋.