์ฒซ ์ ๊ท ์์ ๋ ! 1์ผ 1 ์ปค๋ฐ, ์์ผ๋ก ๋ฐฐ์ธ ๋ด์ฉ๊ณผ ์งํํ ํ๋ก์ ํธ, ์์ ์ฃผ์ ์ฌํญ์ ๋จผ์ ๋ค์๋ค. ์ค๋์ HTML ๊ธฐ์ด์ ๋ํด์ ๋ฐฐ์ ๊ณ , ์ธํ๋ฐ์ผ๋ก ์์ตํ #1.5 HTML ์ ๊ฒน์น๋ ๋ด์ฉ์ด ์์ด์ ์ ๋ฆฌํ๋ฉด์ emmet ๋ฌธ๋ฒ์ด๋ ๋ค์ํ ์ฐธ๊ณ ์๋ฃ ๋ฑ์ผ๋ก ๋ณด์ถฉํ ์ ์๋ ์๊ฐ์ด์๋ค.
html cheat sheet ๋ ์์ผ๋ก ์ฐธ๊ณ ํ๋ฉด ์ข์๋ฏ.
client - network - router - DNS (ip ์ฐพ์์ด)
client - network - router - ์๋ฒ (ํด๋น ํ์ด์ง ๊ฐ์ ธ์ด) (-> ๋ฐฉํฅ : request, <- ๋ฐฉํฅ : response )
- ctrl + P
- >snippet
- Configure User snippets
- html.json ์์
a ํ๊ทธ์ download ์์ฑ ๊ฐ์ ๊ฒ๋ค์ ํ์ธํ๊ธฐ ์ํด ํ์.
Settings > Pages > branch: main / root > save
์์
์๋ฃ๋ก ์ ๊ณตํด์ฃผ์ ์๋ฒฝ ์ ๋ฆฌ ๊ฐ์ด๋. (์ถ์ฒ - weniv)
์์๋๋ฉด ๋น ๋ฅด๊ฒ ์ฝ๋๋ฅผ ์งค ์ ์์.
๋ฌธ๊ตฌ๋ฅผ ์ฐ๊ณ tab
h1{hello world} <!-- h1 --> h1+p <!-- h1, p ์์ฑ๋จ --> h1{hello}*10 <!-- 10๊ฐ ์์ฑ --> h1#one <!-- id="one" --> h1.one <!-- class="one" --> <br> table>(tr>(td*4))*3 <!-- ํ 3๊ฐ ์ด 4๊ฐ ์์ฑ --> lorem <!-- lorem ipsum --> lorem*3 lorem5 <!-- 5 ๋จ์ด๋ง ๋์ด --> img:z <!-- img ์์ฑ์ด ๋ ๋ง์ --> <br> a[href="www.naver.com"] a[a="value1" b="value2" c=1] h1.one.two#three <!-- class, id ์ง์ --> h$*6{hello world} <!-- $๋ณ์ -> h1~h6 ์ ๋ถ ๋์ด. -->
ํ์ค!
header, nav, main, footer
<h1>~<h6> <p></p> <br> <hr> <a href="๊ฒฝ๋ก"> <b>, <strong> <!-- bold / + ๊ฐ์กฐ --> <i>, <em> <!-- italic / + ๊ฐ์กฐ --> <mark> <!-- highlight --> <abbr title="National Aeronautics and Space Administration">NASA</abbr> <!-- abbr : ์ค์๋ง --> <sup>, <sub> <!-- ์์ฒจ์ ์๋ซ์ฒจ์ --> <blockquote> <!-- ์ธ์ฉ --> <span> <!-- line ๊ตฌ์กฐ. span ์์ list ๊ตฌ์กฐ๋ฅผ ๋ฃ์ง ์๋๋ค. -->
kbd : ํค๋ณด๋
pre : ์๋ ๊ทธ๋๋ก
code : ์ฝ๋๋ธ๋ก
cite : ์ธ์ฉ
a ํ๊ทธ ๊ฐ์ ๊ฒฝ์ฐ๋ ์ด๋ค ํ์ด์ง์ ์ ์ํ๋์ง ์ ์ ์๊ธฐ ๋๋ฌธ์ ๋ณด์์ ์ด์ ์กด์ฌ.
๋์์ธ ์ ์ธ ๋ชฉ์ ์ ๊ฐํ์๋ span์ ์ฌ์ฉํ์.
ol, ul, li dl, dt, dd div <!-- ๋ฌถ์ด์ ์์ฑ์ ์ฃผ๊ธฐ ์ํด --> figure, figcaption <!-- figure ์์ figcaption์ ๋ฃ์ด์ ์ด๋ฏธ์ง์ ์บก์ ์ด ์ฐ๊ฒฐ๋๋๋ก -->
๋ฏธ๋์ด ์ฌ์ฉ ์, ์์ ์ ์ฉ๋ ์ฌ์ฉ ๊ฐ๋ฅ / ์ถ์ฒ ์ ๋ฐํ๋ ๋จ ํ์ธํ๊ธฐ. audio, video ๊ฐ์ ์คํธ๋ฆฌ๋ฐ ์๋น์ค๋ฅผ ํ๋ ค๋ฉด ๊ต์ฅํ ํธ๋ํฝ์ผ๋ก ์์ฒญ๋ ๐ฐ์ด ๋๊ฐ์ง๋ ๋ชจ๋ฅด๋ ์ฃผ์ํ์!
img <!-- srcset="a.jpg, b.jpg" ๋ก ์ฌ๋ฌ ์ด๋ฏธ์ง ๋ฌถ์ ์ ์์. ํน์ ์กฐ๊ฑด์ ๋ง์กฑํ๋ฉด A, ์๋๋ฉด B ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ๊ฒ ์ค์ ๊ฐ๋ฅ. --> iframe <!-- ํ ํ์ด์ง ๋ด์์ ๋ค๋ฅธ ์นํ์ด์ง๋ฅผ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋. --> <!-- ๊ทผ๋ฐ ์ฌ์ฉ์ ์ ๋ ฅ ๋ฑ์ ๋ชจ๋ํฐ๋ง ํ ์ ์์ด์ ๋ณด์ ์ ๋ง์๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค. iframe injection ๊ณต๊ฒฉ๋ ๊ฐ๋ฅ--> audio video
<img
width="200px"
srcset="img/logo_1.png 300w,
img/logo_2.png 600w,
img/logo_3.png 700w"
<!-- ํ๋ฉด width๊ฐ 300 ๋ฏธ๋ง์ด๋ฉด 1 / ~600 2 / ~700 3 -->
src="a.jpg"
alt="test">
์๋์ ๊ฐ์ ๊ณณ๋ค์ ์ด์ฉํด์ ์ด๋ค ํ๊ทธ๋ฅผ ์ด์ฉํด๋ ๋๋์ง, ์๋๋์ง ๋ฑ์ ํ๋จ ํ ์ ์๋ค.
HTML docs, Can I Use, Validator
form tag ๋ฅผ ์ดํดํ๊ธฐ์ ์์์ url์ ๋ํ ์ดํด๊ฐ ํ์ํ๋ค. protocol, host(DNS, port) ์ ๋ํด์๋ #1.5 HTML ์์ ํ๋ฒ ์ ๋ฆฌ๋ฅผ ํ์๊ณ , ์ด๋ฒ์๋ ๊ทธ ๋ค์ ๋ถ๋ ๊ฒ์ ๋ํด์ ์ ๋ฆฌํ๋ค.
? query=string /* get ๋ฐฉ์์ผ๋ก ํธ์ถํ๋ฉด ๋ค์ ๋ถ๋ ์ ๋ณด */ #hash /* ๋ฌธ์ ๋ด์์ ํน์ id๋ฅผ ๊ฐ์ง ๊ฐ์ฒด๋ก ์ด๋ํ ๋ ๋ถ๋ ์ ๋ณด */ /* ํ๊ธ์ด ๋ถ๋ ๊ฒฝ์ฐ, url encoding ์ผ๋ก ์ฒ๋ฆฌ๋จ. */
query=string ์ ๊ฒฝ์ฐ query: string ํํ๋ก parsing ๋์ด์ ์๋ฒ์ ์ ๋ฌ๋๋ค. post ๋ฐฉ์์ ๊ฒฝ์ฐ url์๋ ๋๋ฌ๋์ง ์๊ณ ์ ๋ณด๊ฐ ์๋ฒ๋ก๋ง ์ ์ก๋๋ค.
action : form ์ ์ถ ์ ์ด๋๋ก ์ด๋ํ ์ง
method : form data ๋ฅผ ์๋ฒ์ ์ด๋ค ๋ฐฉ์์ผ๋ก ๋ณด๋ผ์ง (get, post)
input์๋ ์ฌ๋ฌ type์ด ์๋ค.
<form action="./008.html" method="get">
<input type="text" name="id" id="">
<input type="password" name="pw" id="">
<button type="submit">๋ก๊ทธ์ธ</button>
</form>
์์ ์ฝ๋์ ๊ฒฝ์ฐ submit ๋ฒํผ์ ๋๋ฅด๋ฉด ./008.html์ ?id=ddosang&pw=1234 ์ ๋ณด๊ฐ ๋ถ๋๋ค.
radio, checkbox ์ ๊ฒฝ์ฐ name ์ ๊ธฐ์ค์ผ๋ก ํ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ธ๋ค.
label ์ฝ๋๋ input ์ ๋ํด ๋ณด์ฌ์ฃผ๋ ํ๊ทธ๋ฅผ input์ ๋ฌถ์ด์ฃผ๋ ์ฉ๋๋ก ์ฌ์ฉํ๋ค. label์ ๋๋ฌ๋ ํด๋น input ์ฐฝ์ด ์๋ํ๋ค!
<!-- 1 --> <label> ์ด๋ฆ : <input type="text" name="name"> </label> <!-- 2 --> <label for="myName">์ด๋ฆ : </label> <input type="text" name="name" id="myName">
์ด๋ฆ์ ์ ๋ ฅํด๋ณด์ธ์!
<select name="device" id="myDevice"> <option value="iphone" selected="selected">์์ดํฐ</option> <option value="galaxy">๊ฐค๋ญ์</option> <option value="lg">์์งํฐ</option> </select>
get์ธ ๊ฒฝ์ฐ action?device=iphone ์ ๊ฐ์ url์ด ์์ฑ๋๋ค.
fieldset : input ๊ณผ ๊ฐ์ tag ๊ฐ ๋ง์์ ์์ญ์ ๋ถ๋ฆฌํ๊ณ ์ถ์ ๋ ์ฌ์ฉ.
legend : input-label ์ฒ๋ผ fieldset์ ์ ๋ณด๋ฅผ ๋ํ๋. fieldset์ ์ฒซ๋ฒ์งธ ์์์ผ๋ก ์ฌ์ฉํด์ผํจ<fieldset> <legend>๊ฐ์ธ์ ๋ณด</legend> <!-- input, select, ... tags --> </fieldset>
์ฌ๋งํ๋ฉด input ๋์ ์์ ํ๊ทธ๋ฅผ ๋ฃ์ด์ ๊พธ๋ฐ ์ ์๋ button ํ๊ทธ๋ฅผ ์ฌ์ฉํ์!! form ์์ button์ด ์๋ ๊ฒฝ์ฐ์๋ a ํ๊ทธ๋ฅผ ์ด์ฉํ๊ณ ๋์ค์ ๊พธ๋ฏธ๋ ๊ฒฝ์ฐ๋ ์์.
<button type = submit, reset, button title="์ ์ถ"> </button>
submit : ์ ์ถ (default)
reset : ํผ ์ด๊ธฐํ
button : ๊ธฐ๋ฅ ์๋ ๋ฒํผ
progress bar
<progress value="0.85" max="1"> 85% </progress>
<table> <!-- caption์ ๋ฃ์ ์ ์๋ค. --> <caption> hello ์ฑ ํ๋งค๋ ํ </caption> <!-- colgroup์ผ๋ก column์ ์์ฑ ์ค ์ ์๋ค. --> <colgroup> <col class="๊ตฌ๋ถ"> <col class="์ด๋ฆ"> <col class="๊ฐ๊ฒฉ"> <col class="ํ๋งค๋"> </colgroup> <thead> <tr> <th>๊ตฌ๋ถ</th> <th>์ด๋ฆ</th> <th>๊ฐ๊ฒฉ</th> <th>ํ๋งค๋</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>hello</td> <td>1000</td> <td>1</td> </tr> <tr> <td>2</td> <td>hello2</td> <td>2000</td> <td>2</td> </tr> <tr> <td>3</td> <td>hello3</td> <td>3000</td> <td>3</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">์ด ํ๋งค๋</td> <td>6</td> </tr> </tfoot> </table>
๊ตฌํ์ ๋๋๋ค. ๋์ค์ js๋ก ์ปจํธ๋กค ํ๊ธฐ ๋๋ฌธ์ ๊ผญ ๋ฃ์ด์ฃผ์!
th scope="col"
th scope="row"
block : ํ๋ฉด์ ๊ฐ๋ก ํญ ์ ์ฒด๋ฅผ ์ฐจ์งํจ.
inline : ์์ ์ ํฌ๊ธฐ๋งํผ๋ง ์์ญ์ ๊ฐ์ง. (ex. span, strong) inline ์์ block์ ๋ฃ์ผ๋ฉด ์๋จ!!!
inline-block
๋๊ฐ์ ul์ ๊ฐ๋ก๋ก ๋ถ์ด๊ณ ์ถ์ด์ ์ด๋ ๊ฒ ์ผ๋๋ฐ, ์ด๋ ๊ฒ๋ ์ฌ์ฉํ์ง ์๋๋ค๊ณ ํ๋ค.
<span>
<ul>
<li>Home</li>
<li>์ฑ์ฉ์ ๋ณด</li>
<li>์บ๋ฆญํฐ ์๊ฐ</li>
</ul>
</span>
<span>
<ul>
<li>About</li>
<li>์ปค๋ฆฌํ๋ผ</li>
<li>์๋ฃ์ค</li>
</ul>
</span>
๊ทธ๋ฆฌ๊ณ ์๊ฐ์ด ๊ฐ์๋ก ํ์ผ๊น์ง ๋ง๋ค์ง ์๊ณ ์ ๋ฆฌ๋ก ๋๋ผ ์ ์๋ ๋ด์ฉ์ด ๋ง์์ ์ ์ ์ค์ด๋๋ ์ค...
๊ฐ๋ฅํ๋ค!! ์ฐพ์๋ณด๋ ์ด๋ ๊ฒ ์ฌ์ฉํ๋ ์์๋ค์ด ๊ฝค ๋์๋ค.