생활코딩과 드림코딩by엘리 영상의 도움을 받아 HTML을 공부했다.
HTML: Hyper Text Markup Language
태그를 사용해 구조적인 것이 특징이다.
드림코딩에서는 레시피로 HTML을 설명해주었는데,
<recipe>
<title>Peanut-butter On a Spoon</title>
<ingredientList>//부모태그
<ingredient>Peanut-butter</ingredient>//자식태그
</ingredientList>
<preparation>
Stick a spoon in a jar of peanut-butter, scoop and pull out a big glob of peanut-butter.
</preparation>
</recipe>
이와같이 부모태그와 자식태그, 그리고 전체 바디태그를 레시피에 설명해서 알려주었다.
-해당 와이어프레임은 유튜브 클론 코딩을 하기 위해 만들어 본 것이고.. 완벽하진 않을 수 있다.
웹사이트를 작은 단위로 나눌 수 있어야 CSS 스타일링이 손쉽고, React를 사용할 때에도 작은 단위로 구현하는 것이 중요하다고 강조한다.
1) box: 보이지 않는 박스 - CSS로 스타일링이 가능하다는 것이 특징
ex) header, section, footer, articla, nav, div, aside, span, main, form ...
2) item: 사용자에게 보여지는 것들
ex) a, video, button, audio, input, map, label, canvas, img, table
2-1) block&inline
✔ block: 한 줄에 하나
✔ inline: 공간이 허용하면 다른 태그 옆에 배치 가능
3)tag & element
<p>My cat is very grumpy</p>
✔<p>: opening tag
✔</p>: closing tag
✔My cat is very grumpy: Content
✔<p> My cat is very grumpy</p> : Element
4) Attributes
<p class="note">My cat is very grumpy</p>
✔class="note" : Attribute