HTML&CSS (17) ์ธ๋ค์ผํ ๋ฆฌ์คํธํ [html] <button> ๋งํฌํ๊ธฐ , ์์ฐฝ ๋งํฌํ๊ธฐ(a๋งํฌ, onclick ๋งํฌ, input ๋งํฌ) ๋ฒํผ์ ๋งํฌํ๋ ๋ฐฉ๋ฒ, ์์ฐฝ์ผ๋ก ๋งํฌํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. ๋ฒํผ ์ ๋งํฌํ๋ ๋ฐฉ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง ์ ๋๋ค. ๋ก ๋งํฌํ๋ ๋ฐฉ๋ฒ ์ onclick๋ก ๋งํฌํ๋ ๋ฐฉ๋ฒ ์ผ๋ก ๋งํฌํ๋ ๋ฐฉ๋ฒ ํ๊ทธ์ ๋งํฌํ๋ ๋ฐฉ๋ฒ ์ a ํ๊ทธ๋ก ๋งํฌํ๋ ๋ฐฉ๋ฒ ๋ก ์ ๊ฐ์ธ์ ๋งํฌ๋ฅผ ํฉ๋๋ค. ๋ฒํผ๋งํฌ ๋ฐฉ๋ฒ1 ์ผ๋ก ํ๊ทธ๋ฅผ ๊ฐ์ธ์ ๋งํฌ๋ฅผ ํฉ๋๋ค. ๋ฒํผ๋งํฌ ๋ฐฉ๋ฒ1 ์ ํ๊ทธ๋ก ๋งํฌํ์ ๋ ์ผ๋ถ ๋ธ๋ผ์ฐ์ ์์ ํด๋ฆญ์ด ์๋๋ ํ์์ด ์์ ๊ฒฝ์ฐ onclick๋ฅผ ์ด์ฉํ์ธ์. ๐ ์ onclick ๋ก ๋งํฌํ๊ธฐ ํ๊ทธ ์์ ์๋ฐ์คํฌ๋ฆฝํธ onclick ์์ฑ์ ์ฌ์ฉํด์ ๋งํฌ๋ฅผ ํฉ๋๋ค. ์์ด๋ง๊ณ ๋ฐ๋ก๊ฐ๊ธฐ ๋ฒํผ ์ ์์ฐฝ์ผ๋ก ๋งํฌํ๋ ค๋ฉด onclick="window.open('url')"์ ์ฌ์ฉํ๋ฉด๋ฉ๋๋ค. ์์ด๋ง๊ณ ๋ฐ๋ก๊ฐ๊ธฐ input type="button"์ ๋งํฌํ๊ธฐ input.. icomoon ํฐํธ ์์ด์ฝ ์ฌ์ฉ๋ฒ icomoon ํฐํธ ์์ด์ฝ ์ฌ์ฉ๋ฒ์ ํฐํธ ์ด์ธ๊ณผ ๋น์ทํฉ๋๋ค. iconoon์ ์ฅ์ ์ ๋ด๊ฐ ๋ง๋ svg ํ์ผ์ ํฐํธ ์์ด์ฝ์ ๋ณํํ์ฌ ์ฌ์ฉํ ์ ์๋ ์ ์ ๋๋ค. ๋ณธ ํ์ด์ง์์๋ icomoon ํฐํธ ์์ด์ฝ์ ๋ค์ด๋ก๋ ๋ฐ๊ณ ์นํ์ด์ง์์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. icomoon ๋ค์ด๋ก๋ โ icomoon ์ฌ์ดํธ์์ ์ฐ์ธก ์๋จ์ ์๋ ๋ณด๋ผ์ IcoMoon App ๋ฅผ ํด๋ฆญํฉ๋๋ค. โก ๋ค์ด๋ก๋ ๋ฐ๊ณ ์ถ์ ์์ด์ฝ์ ์ ํํด ์ค๋๋ค. โข ์ฐ์ธก ํ๋จ์ [Generate Font F]๋ฅผ ์ ํํฉ๋๋ค. โฃ ์ ํํ ์์ด์ฝ์ ํฐํธ ์ฝ๋๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. Enable Quick Usage๋ฅผ ํด๋ฆญํ์ฌ ์๋ฒ์ ๋งํฌํ ์ ์๋ css ์ฝ๋๋ฅผ ํ์ธํ์ธ์. ํด๋ฆญํ๋ฉด icomoon์ link rel ๊ฒฝ๋ก๋ฅผ ๋ณต์ฌํ ์ ์์ต๋๋ค. ์๋ฒ์ css๋ฅผ .. <button> ๋ฒํผ์ ๋งํฌํ๊ธฐ ๋ฌธ์๋ ์ด๋ฏธ์ง์ ๋งํฌํ๋ ค๋ฉด ๋ฅผ ํ๋ฉด ๋ฉ๋๋ค. ๋ฒํผ์ ๋งํฌํ๋ ๋ฐฉ๋ฒ์ ์กฐ๊ธ ๋ค๋ฆ ๋๋ค. button ๋ฒํผ์ ๋งํฌํ๊ธฐ1. ํ์ฌ ํ์ด์ง์์ ๋งํฌ ์ ํํ ๋(button onclick ๋งํฌ)๋ฒํผ ํ๊ทธ ์์ onclick="location.heft='#'" ์ด๊ฒ์ ์ถ๊ฐํด ์ฃผ๋ฉด ๋ฉ๋๋ค.๋ง์ดํ์ด์ง ๋ฐ๋ก๊ฐ๊ธฐ 2. ์์ฐฝ์ผ๋ก ๋งํฌํ ๋(button ๋งํฌ ์์ฐฝ)๋ฒํผ ํ๊ทธ ์์ onclick="window.open('#')" ์ด๊ฒ์ ์ถ๊ฐํด ์ฃผ๋ฉด ๋ฉ๋๋ค.๋ง์ดํ์ด์ง ๋ฐ๋ก๊ฐ๊ธฐ3. ํ์ ์ฐฝ์ผ๋ก ๋งํฌ ์ด ๋๋ง์ดํ์ด์ง ๋ฐ๋ก๊ฐ๊ธฐ ํจ๊ป ๋ณด๋ฉด ์ข์ ๊ธ ํฐ์คํ ๋ฆฌ ๋งํฌ ๋ฒํผ ๋ง๋๋ ์ฌ์ดํธ ์ถ์ฒํฐ์คํ ๋ฆฌ๋ ์๋ํ๋ ์ค, ๊ตฌ๊ธ ๋ธ๋ก๊ทธ ์คํ์ ์ด์ํ๋ฉด์ ๋งํฌ ๋ฒํผ์ ์ด์ฉํ ํ ๋ฐ์, html๊ณผ css๋ฅผ ์ ๋ชจ๋ฅด์๋ ์ฌ๋์์ ๋ค๋ฅธ ์ฌ๋์ ๋ฒํผ ๋งํฌ css.. ์ด์ 1 2 3 4 5 6 ๋ค์