๐ป Web/-- HTML | CSS
-
* ์ (RGB) CSS์์ ์ ํํ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ RGB(๋นจ๊ฐ, ํ๋, ์ด๋ก์ ๋น์จ)๋ก ๋ํ๋ด๋ ๋ฐฉ๋ฒ์ ๋๋ค. color - property (์์ฑ) div{ color: ํ ์คํธ ์; background-color : ๋ฐฐ๊ฒฝ์ border_color :ํ ๋๋ฆฌ ์ } 16์ง์ ํํ๋ฒ (hex) #RR GG BB ๊ฐ ์ฑ๋ถ (R,G,B)๋ 8๋นํธ(0๋ถํฐ 255)์ ์ ์์ด๋ฉฐ, ์ด๊ฒ์ 16์ง์๋ก ๋ฃ์ด ๋ํ๋ ๋๋ค. ex ) #FF0000 : ๋นจ๊ฐ์ , #00FF00 : ์ด๋ก์ , #0000FF ํ๋์ div{color : #2A2BFF;} 10์ง์ ํํ๋ฒ rgb(Red,Green,Blue) ๋ง์ฐฌ๊ฐ์ง๋ก 0๋ถํฐ 255์ ์๋ฅผ 10์ง์๋ก ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. p{color : rgb(121,23,59..
CSS ๋ฒผ๋ฝ์น๊ธฐ 2 - ํ ์คํธ, ์ , ํฐํธ , ๋ฐ์ค* ์ (RGB) CSS์์ ์ ํํ๋ฒ์ ์ฌ๋ฌ๊ฐ์ง๊ฐ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ RGB(๋นจ๊ฐ, ํ๋, ์ด๋ก์ ๋น์จ)๋ก ๋ํ๋ด๋ ๋ฐฉ๋ฒ์ ๋๋ค. color - property (์์ฑ) div{ color: ํ ์คํธ ์; background-color : ๋ฐฐ๊ฒฝ์ border_color :ํ ๋๋ฆฌ ์ } 16์ง์ ํํ๋ฒ (hex) #RR GG BB ๊ฐ ์ฑ๋ถ (R,G,B)๋ 8๋นํธ(0๋ถํฐ 255)์ ์ ์์ด๋ฉฐ, ์ด๊ฒ์ 16์ง์๋ก ๋ฃ์ด ๋ํ๋ ๋๋ค. ex ) #FF0000 : ๋นจ๊ฐ์ , #00FF00 : ์ด๋ก์ , #0000FF ํ๋์ div{color : #2A2BFF;} 10์ง์ ํํ๋ฒ rgb(Red,Green,Blue) ๋ง์ฐฌ๊ฐ์ง๋ก 0๋ถํฐ 255์ ์๋ฅผ 10์ง์๋ก ๋ฃ์ด์ฃผ๋ฉด ๋ฉ๋๋ค. p{color : rgb(121,23,59..
2020.03.22 -
* CSS : Cascading Style Sheet HTML์ ์ธ๊ด๊ณผ ๊ด๋ จ๋์ด์๋ค. ํฐํธ์ ์, ๋ฐฐ๊ฒฝ์, ์ถ๋ ฅ ์์น, ๋ ์ด์์ ๋ฑ HTML์ ๊พธ๋ฏธ๋ ์ธ์ด์ ๋๋ค. div { color : red ; font-size : 20px ;} div : ์ ๋ ํฐ(์ ํ์) ๋ผ๊ณ ๋ถ๋ฆ ๋๋ค. CSS๊ฐ ์ ์ฉ๋ HTML์ ์์๋ฅผ ์ ํํฉ๋๋ค. color , font-size : ํ๋กํผํฐ(property) ๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์์ฑ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. red, 20px : ๊ฐ (value)์ ๋๋ค. * CSS ๋ฌธ๋ฒ ๊ท์น 1. CSS3 ์คํ์ผ ์ํธ๋ { } ์ค๊ดํธ๋ฅผ ์ด์ฉํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋.์๋ฌธ์์ ๊ตฌ๋ถ์ด ์์ต๋๋ค. 2. ํ๋กํผํฐ:๊ฐ ๋ค์๋ ;(์ธ๋ฏธ์ฝ๋ก )์ ๋ถ์ฌ ๋ถ๋ฆฌ์์ผ์ฃผ์ด์ผ ํฉ๋๋ค. 3. ์ ๋ ํฐ์ ๊ฐ์ ๋ชจ๋ HTML ํ๊ทธ์๋ ์คํ์ผ ..
CSS ๋ฒผ๋ฝ์น๊ธฐ 1 - ๊ธฐ์ด ๊ตฌ์ฑ(์ํธ) , CSS์ ์ฉ ๋ฐฉ๋ฒ , ์ ๋ ํฐ (์ ํ์, Selector)* CSS : Cascading Style Sheet HTML์ ์ธ๊ด๊ณผ ๊ด๋ จ๋์ด์๋ค. ํฐํธ์ ์, ๋ฐฐ๊ฒฝ์, ์ถ๋ ฅ ์์น, ๋ ์ด์์ ๋ฑ HTML์ ๊พธ๋ฏธ๋ ์ธ์ด์ ๋๋ค. div { color : red ; font-size : 20px ;} div : ์ ๋ ํฐ(์ ํ์) ๋ผ๊ณ ๋ถ๋ฆ ๋๋ค. CSS๊ฐ ์ ์ฉ๋ HTML์ ์์๋ฅผ ์ ํํฉ๋๋ค. color , font-size : ํ๋กํผํฐ(property) ๋ผ๊ณ ๋ถ๋ฅธ๋ค. ์์ฑ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋ฉ๋๋ค. red, 20px : ๊ฐ (value)์ ๋๋ค. * CSS ๋ฌธ๋ฒ ๊ท์น 1. CSS3 ์คํ์ผ ์ํธ๋ { } ์ค๊ดํธ๋ฅผ ์ด์ฉํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋.์๋ฌธ์์ ๊ตฌ๋ถ์ด ์์ต๋๋ค. 2. ํ๋กํผํฐ:๊ฐ ๋ค์๋ ;(์ธ๋ฏธ์ฝ๋ก )์ ๋ถ์ฌ ๋ถ๋ฆฌ์์ผ์ฃผ์ด์ผ ํฉ๋๋ค. 3. ์ ๋ ํฐ์ ๊ฐ์ ๋ชจ๋ HTML ํ๊ทธ์๋ ์คํ์ผ ..
2020.03.20 -
* form , ํผ ์น ํ์ด์ง์์, ์ฌ์ฉ์์๊ฒ ์ ๋ ฅ์ ๋ฐ๊ธฐ ์ํ ์์์ ํผ์ด๋ผ๊ณ ํฉ๋๋ค. ์๋ฅผ๋ค์ด ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๊ฒ์ ๋ฑ.... ์์ ํผ์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๊ฒ ๋ฉ๋๋ค. ํผ์ ๋ง๋ค๊ธฐ ์ํ ๋ค์ํ ํ๊ทธ๋ค์ด ์กด์ฌํ๋ฉฐ, ๊ทธ๋ฌํ ํ๊ทธ๋ค์ ํผ ์์(form element) ๋ผ๊ณ ํฉ๋๋ค. *ํ ์คํธ ์ ๋ ฅ, ์ ์ถ ๋ฒํผ , ์ด๊ธฐํ ๋ฒํผ ์ ์ฒด๋ฅผ ํ๊ทธ๋ก ๊ฐ์ธ๊ณ , ์์ input์์๋ฅผ ๋ฃ์ด์ค๋๋ค. text : ํ ์คํธ ์ ๋ ฅ์นธ์ ๋๋ค. submit : ์ ์ถ๋ฒํผ์ด ๋ฑ์ฅํฉ๋๋ค. (ํ์ง๋ง ์ฌ๊ธฐ์ ๋ฒํผ์ form ํ๊ทธ์ action์ ์ง์ ํ์ง ์์์ ๊ธฐ๋ฅ์ ํ์ง ์์ต๋๋ค.) password : ๋ ***์๊ฐ์ด ์ ๋ ฅํ ๋ฌธ์๋ฅผ ๊ฐ๋ ค์ฃผ๊ฒ ๋ฉ๋๋ค. reset : ์ ๋ ฅ๋ ์์์ ์ฒ์ ์ํ๋ก ์ด๊ธฐํํฉ๋๋ค. paceholder : in..
HTML - web form , ํผ , input* form , ํผ ์น ํ์ด์ง์์, ์ฌ์ฉ์์๊ฒ ์ ๋ ฅ์ ๋ฐ๊ธฐ ์ํ ์์์ ํผ์ด๋ผ๊ณ ํฉ๋๋ค. ์๋ฅผ๋ค์ด ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๊ฒ์ ๋ฑ.... ์์ ํผ์ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์์ ์ ๋ ฅ์ ๋ฐ๊ฒ ๋ฉ๋๋ค. ํผ์ ๋ง๋ค๊ธฐ ์ํ ๋ค์ํ ํ๊ทธ๋ค์ด ์กด์ฌํ๋ฉฐ, ๊ทธ๋ฌํ ํ๊ทธ๋ค์ ํผ ์์(form element) ๋ผ๊ณ ํฉ๋๋ค. *ํ ์คํธ ์ ๋ ฅ, ์ ์ถ ๋ฒํผ , ์ด๊ธฐํ ๋ฒํผ ์ ์ฒด๋ฅผ ํ๊ทธ๋ก ๊ฐ์ธ๊ณ , ์์ input์์๋ฅผ ๋ฃ์ด์ค๋๋ค. text : ํ ์คํธ ์ ๋ ฅ์นธ์ ๋๋ค. submit : ์ ์ถ๋ฒํผ์ด ๋ฑ์ฅํฉ๋๋ค. (ํ์ง๋ง ์ฌ๊ธฐ์ ๋ฒํผ์ form ํ๊ทธ์ action์ ์ง์ ํ์ง ์์์ ๊ธฐ๋ฅ์ ํ์ง ์์ต๋๋ค.) password : ๋ ***์๊ฐ์ด ์ ๋ ฅํ ๋ฌธ์๋ฅผ ๊ฐ๋ ค์ฃผ๊ฒ ๋ฉ๋๋ค. reset : ์ ๋ ฅ๋ ์์์ ์ฒ์ ์ํ๋ก ์ด๊ธฐํํฉ๋๋ค. paceholder : in..
2020.03.19 -
*์ต์ปค , anchor ๋ด์ฉ์ด ๋ง์ ์นํ์ด์ง์ ๊ฒฝ์ฐ ๋ฌธ์์ ํน์ ์์น๋ก ์ด๋ ํ ์ ์๋๋ก ๋งํฌ๋ฅผ ๊ฑฐ๋ ๊ธฐ๋ฅ์ ๋งํฉ๋๋ค. id์์ฑ์ ์ด์ฉํ์ฌ ํญ๋ชฉ์ ํด๋ฆญํ๋ฉด, ๊ทธ ํญ๋ชฉ๊ณผ ์ฐ๊ฒฐ๋ ๋ณธ๋ฌธ์ผ๋ก ์คํฌ๋กค์ ์์น์ํต๋๋ค. ์ต์ปค ์์ฑ id๊ฐ์ ์ ๋ ฅํด์ฃผ๋ฉด ๋ฉ๋๋ค. ๋๋์ด ์ต์ปค์ ์ฐ๊ฒฐ๋๋ ๋งํฌ ์์ฑ ํ์ดํผ๋งํฌ์ ๊ฐ์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉฐ, URL์ "#" + "์ต์ปค id"๋ก ์ค์ ํ๋ฉด ๋ฉ๋๋ค. ๋๋์ด ์ฌ์ง๋ณด๊ธฐ ๋๋์ด ์ฌ์ง๋ณด๊ธฐ * ํ์ผ ๋ค์ด๋ก๋ ๋งํฌ img, pdf, ppt ๋ฑ ๋ชจ๋ ํ์ผ์ ๋ค์ด๋ก๋ ๊ฐ๋ฅํ๋๋ก ๋งํฌ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ํ๊ทธ๋ก URL์ ๊ฑธ์ด์ฃผ๊ณ , download๋ง ์จ์ฃผ์๋ฉด ๋ฉ๋๋ค. ๋๋์ด ์ฌ์ง ๋ค์ด๋ก๋ * ์ธ๋ผ์ธ ํ๋ ์ ์น ํ์ด์ง์ ๋ด๋ถ์ ๋๋ค๋ฅธ ๋ด์ฅ ์๋์ฐ๋ฅผ ๋ง๋ค์ด์ ๋ค๋ฅธ HTMLํ์ด์ง๋ฅผ ์ถ๋ ฅ ๊ฐ๋ฅํ๋๋ก ํด์ฃผ๋ ๊ธฐ..
HTML ๋ฒผ๋ฝ์น๊ธฐ 3 - ์ต์ปค(anchor) , iframe*์ต์ปค , anchor ๋ด์ฉ์ด ๋ง์ ์นํ์ด์ง์ ๊ฒฝ์ฐ ๋ฌธ์์ ํน์ ์์น๋ก ์ด๋ ํ ์ ์๋๋ก ๋งํฌ๋ฅผ ๊ฑฐ๋ ๊ธฐ๋ฅ์ ๋งํฉ๋๋ค. id์์ฑ์ ์ด์ฉํ์ฌ ํญ๋ชฉ์ ํด๋ฆญํ๋ฉด, ๊ทธ ํญ๋ชฉ๊ณผ ์ฐ๊ฒฐ๋ ๋ณธ๋ฌธ์ผ๋ก ์คํฌ๋กค์ ์์น์ํต๋๋ค. ์ต์ปค ์์ฑ id๊ฐ์ ์ ๋ ฅํด์ฃผ๋ฉด ๋ฉ๋๋ค. ๋๋์ด ์ต์ปค์ ์ฐ๊ฒฐ๋๋ ๋งํฌ ์์ฑ ํ์ดํผ๋งํฌ์ ๊ฐ์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉฐ, URL์ "#" + "์ต์ปค id"๋ก ์ค์ ํ๋ฉด ๋ฉ๋๋ค. ๋๋์ด ์ฌ์ง๋ณด๊ธฐ ๋๋์ด ์ฌ์ง๋ณด๊ธฐ * ํ์ผ ๋ค์ด๋ก๋ ๋งํฌ img, pdf, ppt ๋ฑ ๋ชจ๋ ํ์ผ์ ๋ค์ด๋ก๋ ๊ฐ๋ฅํ๋๋ก ๋งํฌ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค. ํ๊ทธ๋ก URL์ ๊ฑธ์ด์ฃผ๊ณ , download๋ง ์จ์ฃผ์๋ฉด ๋ฉ๋๋ค. ๋๋์ด ์ฌ์ง ๋ค์ด๋ก๋ * ์ธ๋ผ์ธ ํ๋ ์ ์น ํ์ด์ง์ ๋ด๋ถ์ ๋๋ค๋ฅธ ๋ด์ฅ ์๋์ฐ๋ฅผ ๋ง๋ค์ด์ ๋ค๋ฅธ HTMLํ์ด์ง๋ฅผ ์ถ๋ ฅ ๊ฐ๋ฅํ๋๋ก ํด์ฃผ๋ ๊ธฐ..
2020.03.19