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

내가 원하는 디자인 종류를 정하고 코딩 시작한다.
과거에 사용된 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
Leave A Comment