๋ฐ์ํ CSS313 [HTML5 & CSS3] ํผ ๊ด๋ จ ํ๊ทธ๋ค - ์ฌ๋ฌ ๋ฐ์ดํฐ ๋์ดํด ๋ณด์ฌ์ฃผ๊ธฐ โถ ์ฌ๋ฌ ๋ฐ์ดํฐ ๋์ดํด ๋ณด์ฌ์ฃผ๊ธฐ * , ํ๊ทธ - ๋๋กญ๋ค์ด ๋ชฉ๋ก ๋ง๋ค๊ธฐ ์ฌ์ฉ์๊ฐ ๋ด์ฉ์ ์ ๋ ฅํ๋ ๊ฒ์ด ์๋๋ผ ์ฌ๋ฌ ์ต์ ์ค์์ ์ ํํ๋๋ก ํ๊ณ ์ถ์ ๋ ์ฌ์ฉ. * ํ๊ทธ - ์ต์ ๋ผ๋ฆฌ ๋ฌถ๊ธฐ ๋๋กญ๋ค์ด ๋ชฉ๋ก์์ ์ฌ๋ฌ ํญ๋ชฉ๋ค์ ๋ช ๊ฐ์ง ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ด์ผ ํ ๊ฒฝ์ฐ์ ์ฌ์ฉ. * ํ๊ทธ, ํ๊ทธ * ํ๊ทธ - ์ฌ๋ฌ ์ค ์ ๋ ฅํ๋ ํ ์คํธ ์์ญ ๋ง๋ค๊ธฐ โถ ๊ธฐํ ๋ค์ํ ํผ ์์๋ค * ํ๊ทธ - ๋ฒํผ ๋ฃ๊ธฐ ํ๊ทธ๋ ํ๊ทธ ์ด๋ฆ์์ ๊ทธ ์ญํ ์ ์ ์ ์๋ค. ํ๊ทธ๋ฅผ ์ฌ์ฉํ ๋ฒํผ์๋ ์ฝํ ์ธ ๋ฅผ ํฌํจํ ์ ์๊ธฐ ๋๋ฌธ์ ์์ด์ฝ์ ์ถ๊ฐํ ์๋ ์๊ณ CSS๋ฅผ ์ด์ฉํด ์ํ๋ ํํ๋ก ๊พธ๋ฐ ์๋ ์๋ค. ์ ์กํ๊ธฐ * ํ๊ทธ - ๊ณ์ฐ ๊ฒฐ๊ณผ ์ ๋ ฅํ๋ ๊ฐ์ด ๊ณ์ฐ ๊ฒฐ๊ณผ๋ผ๋ ๊ฒ์ ๋ธ๋ผ์ฐ์ ์๊ฒ ์๋ ค ์ค๋ค. โ + = * ํ๊ทธ - ์งํ ์ํ ๋ณด์ฌ์ฃผ๊ธฐ ์์ ์งํ ์ํ๋ฅผ ๋ํ๋ผ .. 2021. 2. 2. [HTML5 & CSS3] ์ํ ์ฃผ๋ฌธ์ ์์ฑํ๊ธฐ // ๊ฐ์ธ์ ๋ณด ์นธ ๊ฐ์ธ ์ ๋ณด ์ด๋ฆ ์ฐ๋ฝ์ฒ // ๋ฉ๋ชจ ์นธ ๋ฉ ๋ชจ // ์ปคํผ ์ฒดํฌ๋ฐ์ค ๊ณผํ ๋ง๋ผ ์ํฐ๊ตฌ์ (100g) ๊ฐ // ์ฃผ๋ฌธํ๊ธฐ, ๋ค์ ์์ฑ ๋ฒํผ -์ฒ์์ ์ด๋ฌ๋๋ฐ css๋ฅผ ์ ์ฉํ๋๊น ํจ์ฌ ๊น๋ํด์ก๋ค. ์ํ ์ฃผ๋ฌธ์ ๊ฐ์ธ ์ ๋ณด ์ด๋ฆ ์ฐ๋ฝ์ฒ ๋ฐฐ์ก์ง ์ ๋ณด ์ฃผ์ ์ ํ๋ฒํธ ๋ฉ ๋ชจ ์ฃผ๋ฌธ ์ ๋ณด ๊ณผํ ๋ง๋ผ ์ํฐ๊ตฌ์ (100g) ๊ฐ ์ธ๋๋ค์์ ๋ง๋ธ๋ง (100g) ๊ฐ ํ๋ผ๋๋๋ค(๋ธ๋ ๋ฉ) (100g) ๊ฐ 2021. 1. 30. [HTML5 & CSS3] <input> ํ๊ทธ์ ๋ค์ํ ์์ฑ โถ ํ๊ทธ์ ๋ค์ํ ์์ฑ * autofocus ์์ฑ - ์ ๋ ฅ ์ปค์ ํ์ํ๊ธฐ โโ * placeholder ์์ฑ - ํํธ ํ์ํ๊ธฐ ์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ ๋ ฅํ ๋ ๋์์ด ๋๋๋ก ์ ๋ ฅ๋์๋ ์ ๋นํ ํํธ ๋ด์ฉ์ ํ์ํ๊ณ ์๋ค๊ฐ ๊ทธ ํ๋๋ฅผ ํด๋ฆญํ๋ฉด ๋ด์ฉ์ด ์ฌ๋ผ์ง๋๋ก ๋ง๋ค ์ ์๋ค. ์ด๋ ๊ฒ ํ๋ฉด ํ ์คํธ ํ๋ ์์ ์ ๋ชฉ์ ์ฌ์ฉํ์ง ์๊ณ ๋ ์ฌ์ฉ์์๊ฒ ํด๋น ํ๋์ ์ด๋ค ๋ด์ฉ์ ์ ๋ ฅํด์ผ ํ ์ง ์๋ ค ์ค ์ ์์ด์ ํธ๋ฆฌํ๋ค. โโ * readonly ์์ฑ - ์ฝ๊ธฐ ์ ์ฉ ํ๋ ๋ง๋ค๊ธฐ โโ * required ์์ฑ - ํ์ ํ๋ ์ง์ ํ๊ธฐ โ * min, max, step ์์ฑ min์์ฑ๊ณผ max์์ฑ์ ๊ฐ๊ฐ ํด๋น ํ๋์ ์ต์๊ฐ๊ณผ ์ต๋๊ฐ์ ์ง์ ํ๋ค step์์ฑ์ ํ์ฉ๋ ๋ฒ์ ๋ด์ ์ซ์์ ์ผ์ ํ ๊ฐ๊ฒฉ์ ๊ฐ๋ฆฌํด โโ * size, min.. 2021. 1. 29. [HTML5 & CSS3] <input> ํ๊ทธ โถ ์ฌ์ฉ์ ์ ๋ ฅ์ ์ํ ํ๊ทธ * ํผ์์ ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ฐ๊ธฐ ์ํด ์ฌ์ฉํ๋ ํ๊ทธ. โ * ํ๊ทธ - ์ ๋ ฅ ํญ๋ชฉ ๋ง๋ค๊ธฐ ์น์์์ ํผ์ ํฌ๊ฒ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ๋ ๋ถ๋ถ๊ณผ ์ ๋ ฅํ ๋ด์ฉ์ ์๋ฒ๋ก ๋ณด๋ด๋ ๋ฒํผ ๋ถ๋ถ์ผ๋ก ๋๋ ์ ์๋ค. ์ฌ์ฉ์๊ฐ ๋ด์ฉ์ ์ ๋ ฅํ๋ ๋ถ๋ถ์ ํ ์ค์ง๋ฆฌ ํ ์คํธ๋ ๋น๋ฐ๋ฒํธ๊ฐ์ ๋ถ๋ถ์ธ๋ฐ ์ด๋ฐ ๋ถ๋ถ์ ๋ง๋ค ๋ ์ฌ์ฉํ๋ ํ๊ทธ๊ฐ ํ๊ทธ์ด๋ค. ← ํ ์ค ์ง๋ฆฌ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๋ ํ๋๊ฐ ์์ฑ ← ์ฒดํฌ๋ฐ์ค๊ฐ ์ฝ์ ๋จ โ * type="hidden" - ํ๋ ํ๋ ๋ง๋ค๊ธฐ ํ๋ฉด์์ ํผ์๋ ๋ณด์ด์ง ์์ง๋ง ์ฌ์ฉ์๊ฐ ์ ๋ ฅ์ ๋ง์น๊ณ ํผ์ ์๋ฒ๋ก ์ ์กํ ๋ ์๋ฒ๋ก ํจ๊ป ์ ์ก๋๋ ์์. โ * type="text" - ํ ์คํธ ํ๋ ๋ง๋ค๊ธฐ ํ ์ค ์ง๋ฆฌ ์ผ๋ฐ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๋ ํ๋โ โ * type="password" - ๋น๋ฐ๋ฒํธ ์ .. 2021. 1. 29. [HTML5 & CSS3] Form โถ Form * โ * ํ๊ทธ - ํผ ์์์ ๋ ์ด๋ธ ๋ถ์ด๊ธฐ ์๊ฐ ๋ถ์ผ(๋ค์ ์ ํ ๊ฐ๋ฅ) ๋ฌธ๋ฒ ์๋ฌธ ๋ ํด ์๊ฐ ๊ณผ๋ชฉ(1๊ณผ๋ชฉ๋ง ์ ํ ๊ฐ๋ฅ) ์์ดํํ ์ค๊ตญ์ดํํ ์ผ์ดํํ -๋นจ๊ฐ์์ผ๋ก ํ์ํ ๋ถ๋ถ์ ์ค๋ฌด์์ ๋ ๋ง์ด ์ด๋ค. โ โ * ํ๋์ ํผ ์์์ ์ฌ๋ฌ ๊ตฌ์ญ์ ๋๋์ด ํ์ํ๋ ค๊ณ ํ ๋ ์ฌ์ฉํ๋ค. ํ๊ทธ๋ ๊ณผ ํ๊ทธ ์ฌ์ด์ ํผ๋ค์ ํ๋์ ์์ญ์ผ๋ก ๋ฌถ๊ณ ์ธ๊ณฝ์ ์ ๊ทธ๋ ค์ค. โ * ํ๊ทธ๋ก ๋ฌถ์ ๊ทธ๋ฃน์ ์ ๋ชฉ์ ๋ถ์ฌ ์ค๋ค. 2021. 1. 29. [HTML5 & CSS3] ์ค์ต (๋ฌ๋ ฅ ๋ง๋ค๊ธฐ, ์๊ธฐ์๊ฐ ํ์ด์ง ๋ง๋ค๊ธฐ) ์ค์ต 1) ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ *์นธ ๊ฐ๊ฒฉ+ํ ์คํธ ์์น ๋ง์ถ๊ธฐ โ *ํฐํธ ์๊น ์ ํ๊ธฐ 1 ๊ตญ๊ตฐ์ ๋ โ *ํฐํธ ์๊น ์ ํ๊ธฐ+๋ฐ์คํ์ํ๊ธฐ 3 ๊ฐ์ฒ์ โ *์ ์ ์ ์ฑ์ฐ๊ธฐ 4 โ *ํ ์คํธ๋งํฌ+๊ธ์์ ๋ฐ๊พธ๊ธฐ ํ๊ธ๋ ์ค์ต 2) ํ๋กํ ๋ง๋ค๊ธฐ Kyunghee Ko ์ค๋์ ๋จ์ ์ธ์์ด ์์๋๋ ์ฒซ์งธ๋ Jeju, Korea funcom@gmail.com SNS Who am I? ํ๋ฐํธ์๋ ์น ๊ธฐ์ (Front-end Web Tech.) ์ ๊ด์ฌ์ด ๋ง์ต๋๋ค. ํ์ฌ ์ ์ฃผ์ ํ ์๊ณจ ๋ง์์์ ์ฝ๋ฉ ์ค์ ๋๋ค. โ Experience ํ๋ก ํธ์๋ ๊ฐ๋ฐ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ ์น ๋์์ธ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ ์ ๋ฌด ๋ด์ฉ Skills Education ํ๋ ฅ ์ฌํญ ์ถ์ ํ๊ต ์ ๊ณต ๊ธฐ๊ฐ ๊ตฌ๋ถ ใ ใ ๋ํ๊ต ์ปดํจ.. 2021. 1. 26. ์ด์ 1 2 3 ๋ค์ ๋ฐ์ํ