HTML Basic

● Website structure: header, nav, aside, main, footer

- div로 나누면 안된다.

- main 안에 여러 section으로 나눌 수 있다.

- section안에 article로 나눌 수 있다.

• article은 여러 아이템들을 그룹화해서 재사용 가능한 것들이 모아져 있다.
• 텍스트나 버튼 등 똑같은 패턴을 그룹화 한 것(예: 게시판 리스트, 댓글 리스트)

 

● HTML은 BOX와 ITEM으로 구성되어 있다.

- BOX: header, footer, nav, aside, main, section, article, nav, div,  span,  form

- ITEM: a, button, label, img, video, map, canvas, table

• main > section > article(여러가지 아이템들을 그룹화하여 재 사용가능한 것들이 모여있다.)

• div: 묶어서 스타일링을 할 때 쓰인다.

 

● Block / Inline

• Block: address, article, aside, blockquote, canvas, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1~h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video

• Inline: a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, p, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var

 

● 단축해서 쓰기

• ol>li*3 + tab

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

● input:

• 보통 label을 같이 사용한다.

• label, input은 Inline이다.

• id를 통해서 고유한 식별자를 준다. label에 for를 넣어줌으로서 서로 묶어준다.

<label for="input_name">Name: </label>
<input id="input_name" type="password">

 

 

● Study Link: developer.mozilla.org/en-US/docs/Web/HTML

HTML: HyperText Markup Language | MDN

 

● HTML elements reference: developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML elements reference - HTML: HyperText Markup Language | MDN

 

● Document and website structure: developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

Document and website structure - Learn web development | MDN

 

 

● 테그를 쓸 때는 Browser compatibility를 알아본다.

예) developer.mozilla.org/en-US/docs/Web/HTML/Element/video#browser_compatibility

 

 

 

 

★ MDN 사이트에 들어가서 공부하기 (처음엔 어렵겠지만 영어페이지에서 공부하기)

 

 

 

---

드림코딩 / MDN 사이트를 참고하여 작성되었습니다.