디자인 방법

  • 웹디자인에 가장 중요한 단계가 디자인
  • 코딩 시작 전에 내가 만들길 원하는 명백한 그림 필요

내가 원하는 디자인 종류를 정하고 코딩 시작한다.

과거에 사용된 div 방법

  • div 태그 초반에 사용 – div 로 모든 것을 다 했다.
  • div가 서로 연관있는 content를 group하는 방법이였다
  • div는 항상 특별한 classes/ids를 가졌다.

Using Semantic Tags

<header>

  • 페이지가 어떤 것인지 입문이나 안내해주는 그룹 : title, navigatino links …
  • 다른 headings나 <head>와 혼동되지 말아야 한다.
    • head tag는 metadata
    • header tag는 단순한 aid에 가까움

<nav>

  • 다른 페이지들 또는 페이지 부분을 연결해주는 section
    • 내 페이지를 통해 사람들을 안내를 도와주는 tag
  • 종종 <header> 에서 발견됨

<footer>

  • 저작권이나 소셜미디어 링크 또는 연관된 문서와 같은 정보를 포함하는 section
  • 일반적으로 페이지 끝부분에 있으나 요구되는건 아님

<figure>

  • <img>보다 많은 의미를 가질 수 있다. 추가적인 정보를 담고 있다.
    • caption
    • 멀티 미디어 리소스

다른 New Tags

다 알 필요는 없다.
대신 개발할 때 찾아서 쓰면 된다.

  • Structural Elements
    • article, aside, main, menuitem, summary, section
  • Form Elements
    • datalist, keygen, output
  • Input Types
    • color, date, email, list
  • Graphics Elements
    • canvas, svg
  • Media Elements
    • audio, embed, source, track, video

Review

  • <div> 의 시대는 끝났다.
  • Semantic tags는 유저가 페이지에서 정보를 가이드하는 데 도움이 된다.

공부 위치 – https://www.coursera.org/learn/html/lecture/riOKu/02-03-semantic-tags