시맨틱태그는 2년전 SK아카데미에서 반응형 웹개발을 배웠을 때 처음 접해보았는데
나는 무분별한 div 태그 남발을 막고 좀 더 논리적이고 기능적인 구조를 짜기 위해 생겨난 개념이자 기능으로 이해하고 있다.
프론트엔드 개발 중 UI를 만들 때 구조를 논리적으로 잘 쌓지않고, 꼼꼼하게 체크하지 않으면 결국 나중에 동적기능을 붙일 때 문제가 생긴다.
1. 시맨틱태그
흔히 이러한 도표를 통해 개념에 대한 이해를 돕고 있다.
논리적인 html 구조를 짜기 위해서는 적재적소에 알맞은 태그를 사용해야하는데
그렇지 않으면 웹페이지를 개발할 때 전체 구조가 어떤 기준와 이유로 작성되어있는지 파악하기 어렵게 된다.
뼈대를 잘 세워야 나중에 CSS로 살을 붙이고 후에 javascript 등으로 기능을 추가할 때 헷갈리지 않고
명확한 웹페이지 개발을 할 수 있게된다.
문서요소
<title>
전체 콘텐트 중에 두번째로 중요한 요소
브라우저의 탭과 검색결과에 뜨는 정보
모든 페이지에 뜨는 만큼 특별해야한다.
<link href="..." rel="stylesheet">
css와 같은 다른 소스를 불러옴
href는 파일의 경로
rel은 다른 리소스의 다른 값
<header>
<body>태그 안에 있을경우 가장 첫번째에 나오는 것,웹사이트의 머리 부분.
<article>태그 안에 있을 경우 그 안에서 가장 중요한 정보
<footer>
<body>태그 안에 있을경우 가장 아래 부분에 나오는 것, 웹사이트의 하단 부분.
<article>태그 안에 있을 경우 그 안에서 가장 덜 중요한 정보
<main>
페이지의 주요한 콘텐츠
<nav>
네비게이션 링크들의 그룹
<article>
독자적인 콘텐츠 부분
없어도 된다면 없어도 됨
<section>
시리즈로 이어지는 콘텐츠 피스
<aside>
두번째로 중요한 콘텐츠
* 출처 | 시맨틱 태그 치트시트
https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/#text
* 출처 | 시맨틱 태그 치트시트 참고자료 모음
https://www.rankred.com/html-cheat-sheet/
2. 요소테이블
Periodic Table of HTML5 Elements
마치 화학기호표 처럼 표현한 것으로 html의 각 요소들이 어떤 역할을 하는지 한눈에 알 수 있다.
이런 부분을 명확하게 알고 싶었었는데 마침 이런 식으로 누군가 친절히도 정리해 놓은 자료들이 있었음
'Frontend' 카테고리의 다른 글
| 07월 01일 월 | UI 화면구현 01 - HTML과 CSS (0) | 2019.07.01 |
|---|---|
| JAVA로 배우는 자료구조 - ArrayList (1) | 2019.06.13 |
| JAVA로 배우는 자료구조 - Data Structure란? Array, ArrayList (0) | 2019.06.13 |
| 신입 프론트엔드 개발자들의 구직을 위한 소소한 팁 (0) | 2019.06.04 |
| 프론트엔드 개발자 면접은행 (0) | 2019.05.23 |
댓글