[TIL]#1 HTML 이해하기

이나현·2021년 1월 31일
0

HTML부터 CSS까지

목록 보기
1/6

1. HTML

생활코딩과 드림코딩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>

이와같이 부모태그와 자식태그, 그리고 전체 바디태그를 레시피에 설명해서 알려주었다.

2. 개발자의 마인드셋 Box 구조

-해당 와이어프레임은 유튜브 클론 코딩을 하기 위해 만들어 본 것이고.. 완벽하진 않을 수 있다.

웹사이트를 작은 단위로 나눌 수 있어야 CSS 스타일링이 손쉽고, React를 사용할 때에도 작은 단위로 구현하는 것이 중요하다고 강조한다.

3. Tag

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

profile
technology blog

0개의 댓글