노마드코더 카카오톡 클론코딩 2일차

• HTML의 목적 : 브라우저에게 무엇이 무엇인지 알려주는 것. 이건 링크야, 이건 제목이야, 이건 이미지야 등...
• '여기부터 여기까지가 무엇이다' → 이걸 말해주는걸 HTML Tag라고 함. 이 두 태그 사이에 넣는 내용이 무언가가 되는 것이다.
• HTML에서는 tag를 텍스트로 넣는다. 실제로 tag가 어떤 의미를 하는지 생각해보자.(물건에 붙어서 이게 뭔지 말해준다.)
• /이 있다면 tag가 끝났다는 뜻. tag를 닫지 않으면 제대로 작동하지 않는다.

<!-- HTML의 목적 : 브라우저에게 어떤 컨텐츠가 있는지 알려줌 -->
<!-- h1~h6 : header number, 제목 -->
<h1>Hello this is my website!</h1>
<h2>Hello this is my website!</h2>
<h3>Hello this is my website!</h3>
<h4>Hello this is my website!</h4>
<h5>Hello this is my website!</h5>
<h6>Hello this is my website!</h6>

<!-- ul : unordered list, li : list item(목록 요소), ol : ordered list -->
<ol>
  <li>beer</li>
  <li>soju</li>
  <li>meat</li>
  <li>milk</li>
</ol>

<!-- attributes(속성) : tag에 추가하는 부가적인 정보-->
<!-- a : anchor(닻), href : http reference/hyperlink reference-->
<!-- target="_blank" : 새로운 탭에서 링크 열기-->
<!-- img 태그 : self-closing tag(자체 닫기 태그)중 하나,이미지-->
<!-- src : source(소스)-->
<a href="http://www.google.com" target="_blank">Go to google</a>
<img
  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTo2x09km7b35RzvH8yg_tXzVkSi_jXJnmOWA&usqp=CAU"
/>

header number tag 1~6 ( 제목 )
h1 ~ h6 까지 있다.

• 제대로 된 위치에 제대로 된 tag를 쓰면 브라우저가 이해하고 표시한다.
• 모든 tag를 전부 기억하고 암기할 필요는 없다. 아주 많은 tag가 있고 그냥 작동원리를 이해하면 된다.

1. orderded list = 순서가 있는 리스트
2. unordered list = 순서가 없는 리스트 (ul)
3. 리스트 안에 사용할 수 있는 태그 = list item (li)

a = anchor를 뜻함 (link를 떠올리면 됨, 추가적인 정보가 필요함) + href(hypertext reference)

• tag에 추가하는 부가정보를 attributes(속성)라고 한다.
• 한 tag 안에 2개 이상의 attributes를 동시에 사용할 수 있다.
• 속성 'href'는 오직 'a'tag에만 붙일 수 있다.
• 속성 'target' : 기본값은 _self로, _blank 입력 시 새 탭에서 링크가 열림

img = image를 뜻함, self-closing tag(자체 닫기 태그) + src(source, 사진의 주소)

• 'src'는 오직 'img' tag에서만 작동한다.