๐ฃ ๋ทํ ํธ์คํ
์ฃผ์์ฌํญ
- HTML ๋๋ ํ ๋ฆฌ์ ํ์ผ ์
๋ก๋
- ์ฒซ ํ์ด์ง๋ ํญ์ index.html๋ก ์
๋ก๋(๋ฌด์กฐ๊ฑด ์๋ฌธ์)
- FTP(File Transfer Protocol)
- ํด๋ผ์ด์ธํธ - ์๋ฒ(C/S)์ฉ ํ๋กํ ์ฝ
- ํด๋ผ์ด์ธํธ๊ฐ ํ์ผ์ ์์ฒญํ๋ฉด ์๋ฒ๊ฐ ์์ฒญ๋ ํ์ผ์ ์ ๊ณต
- ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ํ์ผ์ ์ ๋ฌ
- ์ฃผ๋ก ๋๋์ ํ์ผ์ ์ฒ๋ฆฌํ ๋ ์ฌ์ฉ
- ๊ธฐ๋ณธํฌํธ : 21๋ฒ
- ํธ์คํ
- ์๋ฒ ์ปดํจํฐ์ ์ ์ฒด ๋๋ ์ผ์ ๊ณต๊ฐ์ ์ด์ฉํ ์ ์๋๋ก ์๋ํด์ฃผ๋ ์๋น์ค
- ftp-simle
-
๋น์ฃผ์ผ์คํ๋์ค์ฝ๋์ FTP ํ๋ก๊ทธ๋จ ์ฌ์ฉ
f1 - ftp-simple: conpig -FTP connection setting ์ ์ ํ
f1 - ftp-simple: remote directory open to workspace
- ์์ดํ๋ ์
- ํผ ํ๊ทธ
-
์นํ์ด์ง์์ ์ฌ์ฉ์๋ก๋ถํฐ ์
๋ ฅ์ ๋ฐ์ ๋ ์ฌ์ฉํ๋ ํ๊ทธ
-
์ฌ์ฉ์๊ฐ ์
๋ ฅํ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ๋ณด๋ผ ๋ form ์์๋ฅผ ์ฌ์ฉ
<form action="์๋ฒ์๊ฒ ์ ๋ฌํ ํ์ผ์์น" method="์ ์ก๋ฐฉ๋ฒ">
form ํ๊ทธ ์์ form ์์๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ์ ๋ฌ
</form>
- ์
๋ ฅ ์์ <input>
- type ์์ฑ
- ์์ฑ
- name: ์์์ ์ด๋ฆ์ ์ค์ , ์๋ฒ์์ ๊ฐ์ ์ ๋ฌ ๋ฐ์ ๋ ํค๋ก ์ฌ์ฉ
- id: ์์์ ์ ์ผํ ์ด๋ฆ์ ์ค์ , HTML๋ฌธ์์์ ํด๋น ์์์ ์คํ์ผ์ ์ฃผ๊ฑฐ๋ ๋์ ์ธ ํ๋ก๊ทธ๋๋ฐ์ ํ ๋ ์ฌ์ฉ(ํ๋์ HTML ๋ฌธ์์์ ๋ค๋ฅธ ์์์ ๊ฐ์ด ๊ฐ์ ์ ์์)
- maxlength: ๊ฐ์ ์ต๋ ๊ธธ์ด๋ฅผ ์ค์ ํ๋ ์์ฑ
- placeholder: ์
๋ ฅ ์ ํน์ ๋ฐ์ดํฐ๋ฅผ ์
๋ ฅํ๋๋ก ์๋ดํ๋ ๊ฐ
- value: ์๋ฒ๋ก ์ ๋ฌ๋ ์
๋ ฅ ์์์ ๊ฐ์ ์ค์
- checked: ๋ผ๋์ค ๋๋ ์ฒดํฌ๋ฐ์ค ์ค์์ ๋ฏธ๋ฆฌ ์ ํํ๋ ์ต์
์ ์ค์
- readonly: ๋ฐ์ดํฐ๋ฅผ ๋ณผ ์ ์์ผ๋ ์์ ํ ์ ์๊ฒ ์ค์
- ์๋ฒ๋ก ๋ฐ์ดํฐ๊ฐ ์ ๋ฌ๋จ
- disabled: ์
๋ ฅ ํ๋๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ ์ค์
- ์๋ฒ๋ก ๋ฐ์ดํฐ๊ฐ ์ ๋ฌ๋์ง ์์
- required: ๋ฐ์ดํฐ๋ฅผ ํ์๋ก ์
๋ ฅํ๋๋ก ๊ฐ์ ํ๋ ์ค์
- ๋ผ๋ฒจ
-
ํผ ์์์ ์ด๋ฆ์ ๋ถ์ด๋ ์์
-
๋ค๋ฅธ ์์๋ฅผ ์ฐ๊ฒฐํ๋ฉด ํด๋น ์์ญ์ด ๋์ด์ง
-
radio, checkbox์ ์คํ์ผ์ ์ค์
<label for="์์์ id">ํ
์คํธ ๋๋ ์ด๋ฏธ์ง</label>
- ๋ฒํผ
-
๊ธฐ๋ณธ ๊ธฐ๋ฅ์ <input type=โsubmitโ>
-
์ผ๋ฐ ๋ฒํผ์ผ๋ก ์ฌ์ฉํ๋ ค๋ฉด <button type=โbuttonโ></button>
<button>๋ฒํผ์ ์ฐ์ผ ํ
์คํธ</button>
- ์ ํ์์
-
์ฌ๋ฌ ๊ฐ์ ์ต์
์ด ๋๋กญ๋ค์ด ๋ฆฌ์คํธ๋ก ๋์ด ์์ผ๋ฉฐ ๊ทธ ์ค์์ ๋จ ํ๋์ ์ต์
๋ง์ ์ ํ
<select name=''>
<option value="">์์ดํ
1</option>
<option value="">์์ดํ
1</option>
...
</select>
- ์ฌ๋ฌ์ค ๊ธ์์
- HTMl์ ๋์คํ๋ ์ด
- inline
- content ํฌ๊ธฐ๋งํผ ์๋ฆฌ๋ฅผ ์ฐจ์งํ๋ ์์
- ํ
์คํธ, img, span
- ๋ฌธ์(ํ
์คํธ)์ ํน์ง์ ๊ฐ์ง๊ณ ์์
- block
- ๋ผ์ธ์ ๋ชจ๋ ์ฐจ์งํ๋ ์์
- p, h, ul, li, divโฆ
- ๋ฉด์ ํน์ง์ ๊ฐ์ง๊ณ ์์
- span ํ๊ทธ
- ์ค ๋จ์๋ก ์์ญ์ด ์ค์
- inline ํน์ง์ ๊ฐ์ง๊ณ ์์
- div ํ๊ทธ
- ๋ฉด ๋จ์๋ก ์์ญ์ด ์ค์
- block ํน์ง์ ๊ฐ์ง๊ณ ์์
- ์๋งจํฑ ํ๊ทธ
-
Semantic: ์๋ฏธ๋ก ์ ์ธ
-
์๋ฏธ๊ฐ ์๋ ํ๊ทธ๋ฅผ ์ฌ์ฉ
๐ ์๋งจํฑ ํ๊ทธ์ ์ฅ์
- ๊ฒ์์์ง ์ต์ ํ
- ์คํฌ๋ฆฐ ๋ฆฌ๋๋ฅผ ์ฌ์ฉํ์ฌ ํ์ด์ง๋ฅผ ํ์ํ ๋ ๋์
- ๋์๋ div๋ฅผ ํ์ํ๋ ๊ฒ๋ณด๋ค ํจ์จ์
- ๊ฐ๋ฐ์์๊ฒ ๋ช
ํํ ์๋ฏธ๋ฅผ ์ ๋ฌ
- header
- ํ์ด์ง์ ์ ๋ชฉ๊ณผ ๊ฐ์ ์๊ฐ ๋ด์ฉ์ ํฌํจ
- heading ํ๊ทธ๋ ๋ก๊ณ ์ ์๊ถ ์ ๋ณด, ๊ฒ์ ์์, ์์ฑ์ ์ด๋ฆ ๋ฑ์ ํฌํจ
- nav
- ๋ฉ๋ด, ๋ชฉ์ฐจ ๋ฑ์ ์ฌ์ฉ
- main
- ์ง๋ฐฐ์ ์ธ ์ปจํ
์ธ ์์ญ์ ๋ํ๋ด๋ ํ๊ทธ
- section
- ๊ตฌ์ฒด์ ์ธ ์๋งจํฑ ํ๊ทธ๊ฐ ์๋ ๋ฌธ์์ ๋
๋ฆฝ์ ์ธ ์์ญ์ ๋ํ๋
- ์น์
์๋ ํญ์ ์ ๋ชฉ์ด ์๋ ๊ฒ์ด ์ผ๋ฐ์
- article
- ์์ฒด๋ก ์๋ฏธ๊ฐ ์๋ ์น์ฌ์ดํธ ๋ถ๋ถ์ด๋ฉฐ, ๋
๋ฆฝ์ ์ผ๋ก ๋ฐฐํฌ ๋๋ ์ฌ์ฌ์ฉ๋๋๋ก ์๋๋ ๋ฌธ์
- ๊ฒ์๋ฌผ, ์ก์ง ๋๋ ์ ๋ฌธ๊ธฐ์ฌ
- footer
- ์์ฑ์์ ๋ํ ์ ๋ณด, ์ ์๊ถ ๋ฐ์ดํฐ ๋๋ ๊ด๋ จ ๋ฌธ์์ ๋ํ ๋งํฌ, ์นดํผ๋ผ์ดํธ๋ฅผ ํฌํจ
- aside
- ๊ฐ์ ์ ์ผ๋ก ๋ฌธ์์ ๊ด๋ จ๋ ๋ด์ฉ
- ์ฌ์ด๋๋ฐ ๋๋ ์ฝ์์ ์์
- indent-rainbow : ๋ค์ฌ์ฐ๊ธฐ์ ์ปฌ๋ฌ๊ฐ ์
ํ์ง
- CSS(Cascading Style Sheets)
- ์น ํ์ด์ง์ ํน์ ์์ ๋๋ ์์ ๊ทธ๋ฃน์ ์ ์ฉํ ์คํ์ผ ๊ทธ๋ฃน์ ์ง์ ํ๋ ๊ท์น์ ์ ์ํ๋ ์ธ์ด
- CSS ๋ฌธ๋ฒ
- ์ฃผ์๋ฌธ
- / ~ / ์ฌ์ด์ ๋ด์ฉ์ ์
๋ ฅ
- CSS๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ
-
inline ์คํ์ผ
- HTML ์์ ๋ด๋ถ์ style ์์ฑ์ ์ฌ์ฉํ์ฌ ์ ์ฉํ๋ ๋ฐฉ๋ฒ
-
๋ด๋ถ ์คํ์ผ
- HTML ๋ฌธ์์ <head>~</head> ์ฌ์ด์ <style>~</style> ์์๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฉํ๋ ๋ฐฉ๋ฒ
-
์ธ๋ถ ์คํ์ผ
- ์น ์ฌ์ดํธ ์ ์ฒด์ ์คํ์ผ์ ํ๋์ ํ์ผ์์ ๋ณ๊ฒฝ
<link href="css ํ์ผ๊ฒฝ๋ก" rel="stylesheet">
๐ rel
ํ์ฌ ๋ฌธ์์ ๋งํฌ๋ ๋ฌธ์ ์ฌ์ด์ ์ฐ๊ด ๊ด๊ณ๋ฅผ ๋ช
์
- ์ ํ์
-
์ ์ฒด ์ ํ์
- ์คํ์ผ์ ๋ชจ๋ ์์์ ์ ์ฉ
๐ฃ ๊ฐ๋ณ์ ์ผ๋ก ์ ์ฉํ ์คํ์ผ์ ์ ์ฒด ์ ํ์์ ์ ์ฉํ ์คํ์ผ๋ณด๋ค ์ฐ์
-
์์ ์ ํ์
- ํน์ ์์๊ฐ ์ฐ์ธ ๋ชจ๋ ์์์ ์คํ์ผ์ ์ ์ฉ
๐ ์์
๋ถ๋ชจ ์์์ ์์ฑ๊ฐ์ด ์์ ์์์๊ฒ ์ ๋ฌ๋๋ ๊ฒ