๊ตฌ๋งค ์ด๋ ฅ์ ๊ธฐ๋ฐ์ผ๋ก ๊ณ ๊ฐ์ ๋งค์ผ๋งค์ผ ์๋ ๋ถ์ํฉ๋๋ค.
๋ค์ํ ๊ด์ ์ผ๋ก ๊ณ ๊ฐ์ ๋ถ์ํ๊ณ ์ธ์ฌ์ดํธ๋ฅผ ์ป์ผ์ธ์.
100์ฌ ๊ฐ์ง์ ์ค์๊ฐ ์น๋ถ์ ๋ฆฌํฌํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
ํจ๊ป ๊ตฌ๋งค๋ ๊ฐ๋ฅ์ฑ์ด ๋์ ์ํ์ ์๋ ์ถ์ฒํฉ๋๋ค.
์ํ ์ ๋ณด๋ฅผ ๋ฐฉ๋ฌธ๊ฐ์๊ฒ ์ค์๊ฐ ๊ณต์ ํฉ๋๋ค.
๊ณ ๊ฐ์ ์ดํดํ๋ฉด์ ์ํตํ์ธ์.
๋ฐ๋ณต๋๋ ๋ฌธ์๋ ์ฑ ๋ด์๊ฒ ๋งก๊ธฐ์ธ์.
ํธ์ ๋ฉ์์ง๋ฅผ ์์ฝํด ๋๊ณ , โ์ค๋ฅ ์์ด ์ ๋ฐ์ก๋์์๊น?โ, โ์ง๊ธ ๋ณด๋ธ ๋ฉ์์ง๋ ๋ช ๋ช ์๊ฒ ๋๋ฌํ์๊น?โ ๋งค๋ฒ ๊ด๋ฆฌ์ ํ์ด์ง๋ฅผ ๋ค๋ฝ๋ ๋ฝํ๋ฉฐ ํ์ธํ์์ง๋ ์์ผ์ จ๋์? ํนํ ์ฃผ๋ง์ด๋ ํด๊ทผ ์ดํ ์๊ฐ์ฒ๋ผ PC๋ก ๊ด๋ฆฌ์ ํ๋ฉด์ ์ง์ ์ ์ํ๊ธฐ ์ด๋ ค์ด ์ํฉ์์๋ ํธ์ ๋ฉ์์ง๊ฐ ์ ๋๋ก ๋ฐ์ก๋์๋์ง ๊ณ์ ์ ๊ฒฝ ์ฐ์ด์ จ์ ํ ๋ฐ์. ๋ด๋น์๋๋ค์ ๋ถ์ํจ์ ๋์ด๋๋ฆฌ๊ณ , ๋ณด๋ค ์๋ฒฝํ ์ ๋ฌด ๊ด๋ฆฌ๋ฅผ ์ง์ํ๊ธฐ ์ํด โํธ์ ๋ฉ์์ง ์๋ฆผ ์ค์ ๊ธฐ๋ฅโ์ ์๋ก ์ถ๊ฐํ์ต๋๋ค! ์ค์๊ฐ ๋ฐ์ก ๊ฒฐ๊ณผ๋ถํฐ ์ ์ผ ๋ฐ์ก ์์ฝ ๋ณด๊ณ ์, ํธ์ ์ถฉ์ ๊ธ ์๋ฆผ๊น์ง ๋ฉ์ผ๊ณผ ๋ฌธ์๋ก ํธํ๊ฒ ๋ฐ์๋ณด์ธ์. ๋ ธํธ๋ถ์ ์ด ํ์ ์์ด ์ค๋งํธํฐ์ผ๋ก ๊ฐ๋ณ๊ฒ ํ์ธํ ์ ์์ต๋๋ค???? ์๋กญ๊ฒ ์ถ๊ฐ๋ 3๊ฐ์ง ํธ์ ์๋ฆผ ๊ธฐ๋ฅํธ์ ๋ฉ์์ง ์ด์์ ๊ผญ ํ์ํ ๋ชจ๋ํฐ๋ง ์ ๋ณด๋ฅผ ์ค์๊ฐ ๋๋ ์ ๊ธฐ ๋ฆฌํฌํธ ํํ๋ก ๋ฐ์๋ณด์ค ์ ์์ต๋๋ค. ์ค๋งํธํ ์๋ฆผ์ผ๋ก ์ ๋ฌด๋ฅผ ๋ ๊ผผ๊ผผํ ๊ด๋ฆฌํด ๋ณด์ธ์. 1. ์ค์๊ฐ ๋ฐ์ก ๊ฒฐ๊ณผ ์๋ฆผ๋ฌธ์, ์นด์นด์ค ๋ธ๋๋ ๋ฉ์์ง ๋ฑ ํธ์ ๋ฉ์์ง ๋ฐ์ก์ด ์ต์ข ์๋ฃ๋๋ฉด ์์ ์๋ก ๋ฑ๋ก๋ ๊ด๋ฆฌ์/๋ด๋น์์ ๋ฉ์ผ๋ก ๋ฐ์ก ๊ฒฐ๊ณผ ๋ณด๊ณ ์๋ฅผ ์ ์กํด ๋๋ฆฝ๋๋ค. (ํธ๋ฆฌ๊ฑฐ ๋ฐ์ก ์ ์ธ)? ๋ฐ์ก ์๋ฃ ํ ๋ฉ์ผ์ด ๋๋ฌํ๊ธฐ๊น์ง ์ต๋ 30๋ถ ์์๋ฉ๋๋ค. 2. ์ ์ผ ๋ฐ์ก ์์ฝ ์๋ฆผ๋งค์ผ ์ค์ 9์ 50๋ถ, ์ ๋ ๋ฐ์ก๋ ์ ์ฒด ํธ์ ๋ฉ์์ง ๋ด์ญ์ ๊น๋ํ๊ฒ ์์ฝํ์ฌ ๋ฉ์ผ๋ก ๋ฐ์กํด ๋๋ฆฝ๋๋ค. ์ผ์ผ ์ ๋ฌด ๋ณด๊ณ ์์ฑ ์ ์ ์ฉํ๊ฒ ํ์ฉํด ๋ณด์ธ์? 3. ํธ์ ์ถฉ์ ๊ธ ์๋ฆผํธ์ ๋ฉ์์ง ๋ฐ์ก์ ์ฌ์ฉ๋๋ ์ถฉ์ ๊ธ์ก์ด ๋ฏธ๋ฆฌ ์ค์ ํด๋ ๋น์จ ์ดํ๋ก ๋จ์ด์ง๋ฉด ์ด๋ฉ์ผ๊ณผ ๋ฌธ์๋ก ์ฆ์ ์๋ ค๋๋ฆฝ๋๋ค. ์ถฉ์ ๊ธ์ด ๋ชจ๋ ์์ง๋๊ธฐ ์ ์ ๊ผญ ์ถฉ์ ํ์ธ์? ๋จ 5์ด๋ฉด ๋! ํธ์ ์๋ฆผ ์์ ์ค์ ๋ฐฉ๋ฒ์ฝ๊ฒ ๋ฐ๋ผ ํ ์ ์๋ ์๋ฆผ ์ค์ ๊ฒฝ๋ก๋ฅผ ์๋ดํด ๋๋ฆฝ๋๋ค. 1. ์ค์ ํ์ด์ง๋ก ์ด๋์ดํ๋ ๋ก๊ทธ์ธ ํ ์ค์ > ๋ฌธ์ ๋ฉ์์ง ์ฌ์ ์ค์ > ๊ธฐํ๋ก ์ด๋ํฉ๋๋ค. 2. ์์ ๋์ ์ถ๊ฐํ์ํ ์๋ฆผ ์๋น์ค์ + ์์ด์ฝ์ ํด๋ฆญํฉ๋๋ค. ์๋ฆผ์ ์์ ํ ๊ด๋ฆฌ์/๋ด๋น์๋ฅผ [์ถ๊ฐ]ํ์ธ์. ์ถ๊ฐ๋ ๋ด๋น์๋ฅผ ํ์ธํฉ๋๋ค. 3. ์๋ฆผ ํญ๋ชฉ ํ์ฑํํ์ํ ์๋ฆผ ์๋น์ค๋ฅผ ํ์ฑํํ๊ณ [์ ์ฅ]ํฉ๋๋ค. ? ์ง๊ธ ๋ฐ๋ก ํธ์ ์๋ฆผ์ ํ์ฑํํด ๋ณด์ธ์! ํธ์๋ฉ์์ง ์๋ฆผ ๊ธฐ๋ฅ์ ํตํด, ํธ์๋ฉ์์ง ๋ฐ์ก ์ฑ๊ณผ๋ฅผ ๋ ์ง๊ด์ ์ผ๋ก ํ์ ํด ๋ณด์ธ์. ์ง๊ธ ๊ด๋ฆฌ์ ํ์ด์ง์ ์ ์ํ์ฌ ์๋ฆผ์ ์ผ๋๋ฉด ์ด๋ฉ์ผ๊ณผ ๋ฌธ์๊ฐ ์๋์ผ๋ก ๋ฐ์ก๋ฉ๋๋ค. ?? ์ด์ด์ ํ์ธํด ๋ณด์ธ์!์ดํ๋ ์ฑ๊ณผ ์์ฝ ๋ฆฌํฌํธ ์ ์ฒญ ๋ฐฉ๋ฒ๋ด๋น์ ์ด๋ ๋ฐฉ๋ฒ
โก๏ธ ์ฐ๋ฆฌ ์ผํ๋ชฐ ๋ถ์๊ธฐ์ ๋ฑ ๋ง๋ ์ถ์ฒ UI๊ฐ ํ์ํ์ จ๋์?์ผํ๋ชฐ์์ ์ฐ๊ด ์ํ ์ถ์ฒ(IFDO Suggest)์ ๊ณ ๊ฐ์ ์ถ๊ฐ ๊ตฌ๋งค๋ฅผ ์์ฐ์ค๋ฝ๊ฒ ์ ๋ํ๋ ์ค์ํ ๋ง์ผํ ์ฅ์น์ ๋๋ค. ํ์ง๋ง ๊ธฐ๋ณธ ํ ํ๋ฆฟ์ด ์ฐ๋ฆฌ ์ผํ๋ชฐ์ ์์, ๋ถ์๊ธฐ, ์ํ ์ ๋ณด ๋ ธ์ถ ๋ฐฉ์๊ณผ ์กฐ๊ธ ๋ฌ๋ผ ์์ฌ์ ๋ ์ ์ด ์์ผ์ จ์ ๊ฑฐ์์.์ด๋ฌํ ๊ณ ๋ฏผ์ ํด๊ฒฐํ ์ ์๋ CSS/HTML ์ปค์คํ ๊ธฐ๋ฅ๊ณผ ํ์คํ ๋ฆฌ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋์์ต๋๋ค? ๊ฐ๋จํ ์ฌ๋ฐฑ ์กฐ์ ๋ถํฐ ์ ๊ตํ UI ๋ณ๊ฒฝ๊น์ง, ๊ธฐ์กด ์ผํ๋ชฐ ๋์์ธ์ ๋ง์ถฐ IFDO Suggest ์์ญ์ ๋ ์์ฐ์ค๋ฝ๊ฒ ๋ค๋ฌ์ ์ ์์ต๋๋ค. ์ด๋ฒ ๊ธ์์๋ IFDO Suggest์ ๋์์ธ ์์ฑ๋๋ฅผ ๋์ฌ์ค ์ปค์คํ ํ์ฉ๋ฒ์ ์ฝ๊ฒ ์๊ฐํด ๋๋ฆด๊ฒ์.1. ์ฐ๊ด ์ํ ์ถ์ฒ โ์ปค์คํ โ ๊ธฐ๋ฅ์ด๋?IFDO Suggest๋ฅผ ์ฌ์ดํธ์์ ๋ ธ์ถํ ๋ ์ฐ๊ด ์ํ ์ถ์ฒ ์์ญ์ ๋์์ธ๊ณผ ๊ตฌ์กฐ๋ฅผ ์ผํ๋ชฐ ์คํ์ผ์ ๋ง๊ฒ ์ง์ ์์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ๋๋ค. ๋ธ๋๋ ๊ณ ์ ์ ์์ ์ ์ฉ์ ๋ฌผ๋ก , ์ํ ์ ๋ณด ๋ ธ์ถ ๋ฐฉ์๊น์ง ์ง์ ์ ์ดํ ์ ์์ต๋๋ค. CSS ์คํ์ผ vs HTML ํ๊ทธ, ๋ฌด์์ ์ ํํ ๊น์?์์ ํ๋ ค๋ ๋ชฉ์ ์ ๋ฐ๋ผ ์๋์ ๊ฐ์ด๋๋ฅผ ์ฐธ๊ณ ํด์ ์ ํํด ๋ณด์ธ์!CSS ์คํ์ผ ์ปค์คํ ๋ฐฐ๊ฒฝ ์์, ๋ฐฐ์ง ํฌ๊ธฐ, ์ฌ๋ฐฑ ๋ฑ ์๊ฐ์ ๋์์ธ ์์ ์ ์ ํฉํฉ๋๋ค. HTML ํ๊ทธ ์ปค์คํ ์ํ ์ ๋ณด์ ๋ฐฐ์น ์์, ๋ ธ์ถ ๊ตฌ์กฐ ๋ฑ UI ํ๋ ์ ์์ฒด๋ฅผ ๋ณ๊ฒฝํ ๋ ์ฌ์ฉํฉ๋๋ค. โ ๏ธ ์ด์ฉ ์ ๊ผญ ํ์ธํด ์ฃผ์ธ์์ปค์คํ ์ CSS ์คํ์ผ๊ณผ HTML ํ๊ทธ ์ค ํ๋์ ์ต์ ๋ง ์ ํํ์ฌ ์ด์ฉํ ์ ์์ต๋๋ค. ๋ ์ต์ ์ ๋ชจ๋ ์ ๋ ฅํ์ฌ ์ ์ฅํ๋ ๊ฒฝ์ฐ, ํ์ฌ ์กฐํ ์ค์ธ ํญ์ ๊ธฐ์ค์ผ๋ก ๋ด์ฉ์ด ์ ์ฅ๋ฉ๋๋ค.HTML ํ๊ทธ๋ฅผ ์ง์ ์์ ํ ๊ฒฝ์ฐ, ํฅํ ์ดํ๋ ์์คํ ์ ์๋ ์ ๋ฐ์ดํธ ๊ธฐ๋ฅ์ด ์ ํ๋ ์ ์์ต๋๋ค. ๋์์ธ ์ค์ฌ์ ์์ ์ด๋ผ๋ฉด CSS ์ปค์คํ ์ ์ด์ฉํด ์ฃผ์ธ์. 2. ์ค์ํด๋ ๊ฑฑ์ ๋ง์ธ์! โHistoryโ์ โ์ด๊ธฐํโ ๊ธฐ๋ฅ๋์์ธ์ ์์ ํ๋ค ๋ณด๋ฉด ์ฝ๋๊ฐ ๊ผฌ์ด๊ฑฐ๋, ์ด์ ์ํ๋ก ๋๋๋ฆฌ๊ณ ์ถ์ ๋๊ฐ ์์ต๋๋ค. ์ด๋ด ๋๋ฅผ ์ํด Suggest ์ปค์คํ ์๋ ์์ ํ๊ฒ ์์ ์ ๋ณดํธํ ์ ์๋ ๊ด๋ฆฌ ๊ธฐ๋ฅ์ด ํจ๊ป ์ ๊ณต๋ฉ๋๋ค. History [์ ์ฉ] ๋ฒํผ์ ๋๋ฅผ ๋๋ง๋ค ์์ ๋ด์ญ์ด ์ ์ฅ๋์ด ์ธ์ ๋ ์ด์ ๋ฒ์ ์ผ๋ก ๋ณต๊ตฌํ ์ ์์ต๋๋ค. *์ต๋ 10๊ฐ ์ ์ฅ, ์ดํ์๋ ์ค๋๋ ๋ด์ญ๋ถํฐ ์๋ ์ญ์ ์ํด๋ฆญ ์ด๊ธฐํ[์ด๊ธฐํ] ๋ฒํผ์ ํด๋ฆญํ๋ฉด ์ฆ์ ๊ธฐ๋ณธ ์ํ์ Suggest๋ก ๋๋๋ฆด ์ ์์ต๋๋ค. 3. ์ค์ ์์ : CSS์ HTML๋ก ์ถ์ฒ ์์ญ ๋์์ธ ๋ค๋ฌ๊ธฐ์ด์ ์ค์ ๋ก ์ปค์คํ ์ ์ ์ฉํด ๋ณด๊ฒ ์ต๋๋ค. ์ด๋ฒ ์์ ์์๋ ๋ค์ ๋ ๊ฐ์ง๋ฅผ ์งํํฉ๋๋ค. 1. CSS ์คํ์ผ์ ์ปค์คํ ํ์ฌ ์ํ ๋ฐฐ์ง ์ฌ๋ฐฑ ๋ค๋ฌ๊ธฐ2. HTML ํ๊ทธ ์ปค์คํ ์ผ๋ก ํ ์ธ์จ, ํ ์ธ๊ฐ, ์ ์๊ฐ๋ฅผ ํ ์ค๋ก ๋์ดํ๊ธฐ? ๊ฐ์ด๋๋ ์ปค์คํ ์ ์งํํ์ง ์์ ๊ธฐ๋ณธ ํ๋ฉด์ ๊ธฐ์ค์ผ๋ก ์์ฑ๋์์ต๋๋ค. ์ด๋ฏธ ์ปค์คํ ์ด ์ ์ฉ๋ ๊ฒฝ์ฐ ํ๋ฉด ๊ตฌ์ฑ์ด ๋ค๋ฅผ ์ ์์ต๋๋ค. ? CSS ์คํ์ผ ์ปค์คํ : ์ํ ๋ฐฐ์ง ์ฌ๋ฐฑ ๋ค๋ฌ๊ธฐCSS ์ปค์คํ ์ ํ์ฉํ์ฌ ์ํ ๋ฐฐ์ง์ ์ฌ๋ฐฑ์ ๋ค๋ฌ๋ ๋ฐฉ๋ฒ์ ๋๋ค. 1๋จ๊ณ : ์ปค์คํ ์ค์ ํ๋ฉด ์ด๊ธฐSuggest ํธ์ง ํ๋ฉด์์ ์ธ๋ถ ์ค์ > ์ปค์คํ [์์ ]์ ํด๋ฆญํฉ๋๋ค. 2๋จ๊ณ : CSS์ฝ๋ ์ ๋ ฅํ๊ธฐCSS ํญ์ ์๋์ ์ฝ๋๋ฅผ ๋ถ์ฌ ๋ฃ๊ณ โpadding-topโ๊ณผ โpadding-bottomโ ๊ฐ์ ์ํ๋ ํฌ๊ธฐ๋ก ์กฐ์ ํ ๋ค [์ ์ฉ]ํฉ๋๋ค. .badge>div{padding-top:5px;padding-bottom:5px;}3๋จ๊ณ : ๋ณ๊ฒฝ ๋ด์ฉ ์ ์ฅํ๊ธฐ๋ณ๊ฒฝ๋ ๋ฐฐ์ง ์คํ์ผ์ ํ์ธํ๊ณ [์ ์ฅ]ํ์ธ์! ?๏ธ HTML ํ๊ทธ ์ปค์คํ : ์ํ ์ ๋ณด ํ ์ค๋ก ๋ ธ์ถํ๊ธฐ์ด๋ฒ์๋ ์ํ์ ํ ์ธ์จ, ํ ์ธ๊ฐ, ์ ์๊ฐ๋ฅผ ํ ์ค๋ก ๋๋ํ ๋ณด์ฌ์ฃผ๋ ๋ฐฉ๋ฒ์ ๋๋ค. 1๋จ๊ณ : ์ปค์คํ ์ค์ ํ๋ฉด ์ด๊ธฐSuggest ํธ์ง ํ๋ฉด์์ ์ธ๋ถ ์ค์ > ์ปค์คํ [์์ ]์ ํด๋ฆญํฉ๋๋ค. 2๋จ๊ณ : ์คํ์ผ ํ๊ทธ ์ถ๊ฐํ๊ธฐHTML ํญ์ </head> ์์ ์คํ์ผ ํ๊ทธ๋ฅผ ์ฝ์ ํฉ๋๋ค. <style> .hide.rate{ display:none; } .discount{ padding-right:5px; } </style>3๋จ๊ณ : ์ํ ์ ๋ณด ๊ตฌ์กฐ ์์ญ ์ฐพ๊ธฐ์ํ ์ ๋ณด ๊ตฌ์กฐ ์์ญ(ํ์๋ ์์ญ)์ ์ฐพ์ผ์ธ์. ? ์ผ๋ฐ์ ์ผ๋ก ์ํ ์ ๋ณด ๊ตฌ์กฐ๋ ๋ฐฐ์ง ๋ ์ด์ด ์์ ์์นํฉ๋๋ค. 4๋จ๊ณ : ์ํ ์ ๋ณด ๊ตฌ์กฐ ๋ณ๊ฒฝํ๊ธฐ์๋์ ๋ด์ฉ์ผ๋ก ๋ฎ์ด์์ด ๋ค [์ ์ฉ]ํ์ธ์. <div class="info"> <span class="name"><%-goods.name%></span> <div> <span class="rate <%-goods.discount_hide%>"><%-goods.rate%></span> <span class="discount"><%-goods.discount_price%></span> <span class="price <%-goods.discount_hide%>"><%-goods.price%>์</span> </div>5๋จ๊ณ : ๋ณ๊ฒฝ ๋ด์ฉ ์ ์ฅํ๊ธฐ๋ณ๊ฒฝ๋ ์คํ์ผ์ ํ์ธํ๊ณ [์ ์ฅ]ํ์ธ์! IFDO Suggest ์ปค์คํ ์ผ๋ก ์ถ์ฒ ์์ญ์ ๋ ์์ฐ์ค๋ฝ๊ฒ ์์ฑํด ๋ณด์ธ์์ดํ๋์ Suggest ์ปค์คํ ๊ธฐ๋ฅ์ ํ์ฉํ๋ฉด ์ผํ๋ชฐ์ ๋ธ๋๋ ํค์ค๋งค๋๋ฅผ ์ ์งํ๋ฉด์, ์ถ์ฒ ์ํ ์์ญ์ ๋ ์์ฐ์ค๋ฝ๊ณ ๋ณด๊ธฐ ์ข๊ฒ ๋ค๋ฌ์ ์ ์์ต๋๋ค. ๊ณ ๊ฐ์ด ์ถ์ฒ ์ํ์ ๋ ํธํ๊ฒ ํ์ธํ ์ ์๋๋ก ๋์์ธ์ ์ต์ ํํ๊ณ , ์์ฌ๋ชฐ์ ์ ํ ์ฑ๊ณผ๋ฅผ ํ ๋จ๊ณ ๋ ๋์ฌ๋ณด์ธ์! Suggest ๊ด๋ จ ๊ธ์ ๋ ์ฝ์ด๋ณผ๊น์?ํด๋ฆญ์ ๋ถ๋ฅด๋ โ์ํ ๋ฐฐ์งโ ์ ์ฉํ๊ธฐ์ต๊ทผ ๋ณธ ์ํ์ ์ถ์ฒํด ๋ณผ๊น์? โํ์ ์ํ ๋ฆฌ๋ง์ธ๋โํ๊ธฐ
์ดํ๋ ์คํ ๋ฉ์์ง์ ๊ฐ์ฅ ์๋ง์ ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ ๋ฌด์์ผ๊น์? ์ด๋ฏธ์ง ์ ์ ์ ๊ถ์ฅ ์ฌ์ด์ฆ๋ถํฐ ๋ ธ์ถ ์ฌ์ด์ฆ๊น์ง. ์ด๋ฏธ์ง ์ต์ ํ ์ฌ์ด์ฆ๋ฅผ ์๋ดํด ๋๋ฆฌ๊ฒ ์ต๋๋ค๐
์ธ์ฑ ๋ฉ์์ง๋ณ ์ด๋ฏธ์ง ์ต์ ํ ์ฌ์ด์ฆ
1. ํธ์๋ ธํธ
ํธ์๋ ธํธ ์ด๋ฏธ์งํ ๋ฉ์์ง์ ์ด์ฉ๋๋ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ์ ๋๋ค.
์ด๋ฏธ์ง ์ ์ ์ ๊ถ์ฅ ์ฌ์ด์ฆPCยท๋ชจ๋ฐ์ผ: 660x370
*ํ๋กํ ์ด๋ฏธ์ง๋ 1:1 ๋น์จ๋ก ์ต์ ์ฌ์ด์ฆ 64px์ ๋๋ค.
๋ ธ์ถ ์ฌ์ด์ฆPC: 330x185๋ชจ๋ฐ์ผ: ๋๋ฐ์ด์ค ํด์๋์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋ฉ๋๋ค. ๋๋ฐ์ด์ค์ ๋ฐ๋ผ ์ด๋ฏธ์ง์ ์๋จ ํ๋จ์ด ์๋ ค ๋ณด์ผ ์ ์์ต๋๋ค.
2. ํ์ฝ
ํ์ฝ ์ด๋ฏธ์งํ ๋ฉ์์ง์ ์ด์ฉ๋๋ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ์ ๋๋ค.
*ํ๋กํ ์ด๋ฏธ์ง๋ 1:1 ๋น์จ๋ก ์ต์ ์ฌ์ด์ฆ 64px์ ๋๋ค. โ
3. ๋ฆฌ์นํ์
๋ฆฌ์นํ์ ์ ์ด์ฉ๋๋ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ์ ๋๋ค.
์ด๋ฏธ์ง ์ ์ ์ ๊ถ์ฅ ์ฌ์ด์ฆPCยท๋ชจ๋ฐ์ผ: ์ง์ ๋ ์ฌ์ด์ฆ๋ ์์ผ๋ฉฐ, ์ธ๋ก๊ฐ ๋๋ฌด ๊ธด ์ง์ฌ๊ฐํ ํํ๋ ๋ชจ๋ฐ์ผ ๊ธฐ์ข ์ ๋ฐ๋ผ ํ๋ฉด์ ๋ฎ์ ์ ์์ด ์ถ์ฒํ์ง ์์ต๋๋ค.
๋ ธ์ถ ์ฌ์ด์ฆ
PC
์ด๋ฏธ์ง ์๋ณธ ์ฌ์ด์ฆ ๋๋ ์๋ณธ ํฌ๊ธฐ์ 90~50%๋ก ๋ณ๊ฒฝ ๊ฐ๋ฅํฉ๋๋ค.
๋ชจ๋ฐ์ผ
์๋ณธ ํฌ๊ธฐ์ 90%~40%๋ก ์ฌ์ด์ฆ๋ฅผ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค. ์ต๋ ๊ฐ๋ก ์ฌ์ด์ฆ๋ 340px์ด๋ฉฐ ์ด๋ณด๋ค ํฐ ๊ฒฝ์ฐ 340px์ ๋ง์ถฐ ์ธ๋ก ๋น์จ์ด ์กฐ์ ๋ฉ๋๋ค.
์ด๋ฏธ์ง ๋ณด๊ดํจ ๊ฐ์ด๋
์ด๋ฏธ์ง ๋ณด๊ดํจ์ด๋ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ ์ ์๋ ํด๋ผ์ฐ๋ ๊ณต๊ฐ์ ์๋ฏธํฉ๋๋ค. ์ง์ ํ์ผ์ ์ ๋ก๋ํ๊ฑฐ๋ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๊ฐ 500KB ์ด์์ธ ๊ฒฝ์ฐ URL์ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์ด์ฉํ ์ ์์ต๋๋ค.
์ด๋ฏธ์ง ํฌ๊ธฐ์ง์ ์ ๋ก๋๋ 500KB ์ดํ์ ์ด๋ฏธ์ง๋ง ๊ฐ๋ฅํฉ๋๋ค. 500KB ์ด์์ ์ด๋ฏธ์ง๋ ์ด๋ฏธ์ง URL ๊ธฐ๋ฅ์ ํตํด ์ถ๊ฐํ์ธ์.
์ด๋ฏธ์ง ์ฌ์ด์ฆ๊ฐ๋ก 1280px ๋๋ ์ธ๋ก 1000px ์ดํ์ ์ด๋ฏธ์ง๋ง ์ ๋ก๋ํ ์ ์์ต๋๋ค.
URL์ ์ ๋ ฅํ์ฌ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ๋ ์ด๋ฏธ์ง URL์ ์ด๋ฒ์ ์๋ก ์ถ๊ฐ๋ ๊ธฐ๋ฅ์ ๋๋ค. ํด๋ผ์ฐ๋ ์ฉ๋์ ์ํฅ์ ๋ฏธ์น์ง ์๊ณ , 500KB ์ด์์ ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ ์ ์์ด์. ๋ค์ ํฌ์คํ ์์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋ํด ๋ ์์ธํ ์์๋ณด์ธ์!๐
์ด๋ฏธ์ง URL ๊ธฐ๋ฅ ์ฌ์ฉ ๋ฐฉ๋ฒ ์ฝ๊ธฐโ