tags 는 start tag와 closing tag를 가지고 있다.
self-closing 하는 tag도 있다.

일부 태그는 attributes 를 가지고 있다.

Display

  • 가장 중요한 attributes는 display이고 대부분 block과 inline은 있다.
    • block (width, height 를 가질 수 있음)
      • 새로운 line이 삽입된다.
    • inline (width, height 를 가질 수 없음)
      • element를 포함하기 위해 필요한 공간을 사용

Common Tags

  • Headings (block)
    • <h1>, <h2>…
    • 이러한 tags는 syntax와 semantics 를 가지고 있다.
  • Paragraphs (block)
    • <p> … </p>
    • inline elements만 포함할 수 있다
  • Divs (block)
    • <div> … </div>
    • 포괄적인 section ( paragraph보다 더 큼 )

Attributes

  • Attributes는 element에 대한 추가적인 정보를 제공
  • 항상 start tag 안에 명시
  • Attributes는 name/value 쌍으로 있음

Images

  • Images (inline)
    • <img src = “abc.jpg” alt = “Image of Colleen”/>
      • 2개의 Attributes – name 은 src, value는 “abc.jpg” , alt 는 대안으로 보여주는 거
  • Images는 첫번째로 동작하는건 드물다
    • 깨진 링크, 너무 큰거, 너무 작은거 등.. 보여줌

More Attributes

  • tag를 배울 때, 특정한 Attributes도 배우는 게 좋다.
    • class – elements 그룹에게 특별한 properties를 적용
    • id – 페이지에 1개의 element에게 유일한 id를 명시
    • style – 확실하게 보여지는 스타일을 명시 (피하는게 좋음)
    • accesskey – element를 활성화하는 key
    • tabindex – tab키 눌렀을 때 focus되는 순서

Special Entities

tags는 항상 ‘<‘ 으로 시작하는데
‘<‘ 이런 거를 tag로 인식하지 않고 출력하기 위해서는 어떻게 해야 할까?

‘<‘ 를 쓰지 말고 &lt; 를 쓰면 된다.

Review

  • tag와 attribute의 차이 ( ‘<‘ 차이, name/value 쌍 )
  • self-closing tag도 있다.

cheatsheets – https://www.wpkube.com/html5-cheat-sheet/

공부 위치 – https://www.coursera.org/learn/html/lecture/m1BQg/02-02-html5-tags-and-syntax