럿고의 개발 노트
Semantic한 태그 본문
● Semantic HTML = 의미론적 HTML
- 문서 의미에 맞게, 앱의 의미에 맞게 HTML을 작성하는 것이 중요
- 예제)
■ <div>안녕하세요. 럿고입니다.</div>
■ <p>안녕하세요. 럿고입니다.</p>
- 예제 2개 중 저 의미를 잘 전달하는 것이 무엇일까요? 한번 고민해보세요.
- 기계에는 명확한 의미를 부여해줘야 한다는 점을 꼭 숙지하고 코딩을 하는 것이 중요(스마트 리더, 크롤러 등)
- HTML코드를 작성할때 정답이 존재하지 않기때문에 가장 최선이라고 생각하면서 코드를 작성해야 함
- semantic하게 짜는 것도 중요하지만, 디자인 시안처럼 똑같이 구현하는 것도 무척 중요
- HTML와 CSS와 JavaScript가 조화롭게 이루어져야 한다는 점을 생각하고 코딩할 것!
● <main>
- 해당 페이지의 main 콘텐츠
- 한페이지에 한번만 사용 가능
● <section>
- 구획을 구분하기 위해 사용
- 문법상 반드시 제목 요소(<h>태그)를 가져야 함
- 섹션의 관심사가 무엇인지 검색 로봇에 알려줘야 함
● <article>
- 관심사에 따라 글을 작성하기 위해 사용하는 요소
- 독립적으로 존재해도 되는 경우에 쓰임(ex) 날씨위젯 등)
- 문법상 반드시 제목요소(<h>태그)를 가져야 함
- 관심사가 무엇인지 검색 로봇에 알려줘야 함
- article태그 안에 section태그가 존재할수도 있고 section태그 안에 article태그가 존재할 수도 있음
● <aside>
- 페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만, 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역
- sidebar와 같이 약간의 다른 콘텐츠를 정의한다고 생각하면 됨.
- 페이지의 내용과 연관되어 있어야 함.
● <details>
- 사용자가 직접 조작하여 보거나, 숨길 수 있는 부가적인 세부사항을 명시할때 사용
- 보통 사용자가 직접 접거나 펼 수 있는 대화영 위젯을 정의할때 사용, 그 안에 어떠한 종류의 콘텐츠도 포함될 수 있음
- open속성이 설정되기 전까지는 화면에 보이지 않음
● <figcaption>
- <figure>요소의 캡션
- <figure>요소의 첫 번째 자식 요소이거나, 마지막 자식 요소로만 위치 가능
● <figure>
- 삽화, 다이어그램, 사진 등과 같이 독립적 콘텐츠를 정의할 때 사용
- 문서의 내용과 연관성을 가지지만, 해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안됨.
● <footer>
- 문서, 특정 Section의 footer를 정의할 때 사용
- 아래와 같은 정보를 포함
■ 저자(author)정보
■ 저작권 정보
■ 연락처
■ 사이트맵(sitemap)
■ 페이지 맨 위로 되돌아 갈 수 있는 Top 버튼
■ 연관 페이지
- 여러 개의 footer 요소가 포함될 수 있음
● <header>
- 특정 section의 header를 정의
- header는 보통 도입부에 해당하는 콘텐츠, 네비게이션 링크등과 같은 정보를 포함
- 하나 이상의 제목 요소(<h>태그)
- 로고(logo)나 아이콘(icon)
- 저자(author)정보
- <header>태그는 <footer>, <address>또는 다른 <header> 요소 내에 배치 할 수 없음
● <mark>
- 형광펜으로 칠한 것 처럼 highlighted 텍스트 정의할때 사용
● <nav>
- 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합
- 일반적인 예로 메뉴, 목차, 인덱스 등이 있음
- 스크린 리더기같은 브라우저는 해당 콘텐츠의 초기 랜더링을 생략하지 여부를 결정
- 문서의 모든 링크가 <nav>태그 내에 있으면 안됨
● <summary>
- <details>태그에서 화면에 보일 제목을 명시할때 사용
- 이 제목을 클릭함으로써 <details>태그를 화면에 보여줄수도 있고 없을수도 있음
● <time>
- 날짜와 시간 데이터를 정의할 때 사용
- 웹 브라우저에서 특별한 형태로 랜더링되지는 않지만, 검색 엔진의 검색 결과 향상이나 알림 및 스케줄과 같은 사용자 기능을 위해 날짜와 시간 데이터를 기계가 읽을 수 있는 형태로 변환해주는 detetime속성을 포함할수 있음
- detetime 속성값
■ 24시간 형태
■ 그레고리력
■ 유요한 기간 데이터
● 마무리
- 출처
■ https://www.w3schools.com/html/html5_semantic_elements.asp
'Web Note' 카테고리의 다른 글
| [WEB] SPA란? (0) | 2019.11.12 |
|---|---|
| [WEB] HTTP, TCP/IP, 메시지란? (0) | 2019.11.10 |
