React_ Semantic 구조

시멘틱 태그에 대해서 알아두면 굉장히 좋다

사실 <div> 이거 하나만 알아도 실제로는 무방하다 보지만, 협업이나 여러사람들이 같이 하는 구조에서는 이러한 방법은 비효율적인 방법이다.

어떤 곳에서 어떻게 쓰이는지 시각적으로 직관적으로 해야 협업이 가능하므로 알아두면 굉장히 좋다

필수라고 해도 과언이 아니다

https://velog.io/@oimne/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-HTML5-%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-%EC%A0%81%EC%9A%A9

리액트에서 HTML5 시멘틱 태그 적용

 

이 사이트가 설명을 잘 해놓은 것 같다.

 

<header>	말 그대로 헤더 , 머리말
<nav>	말 그대로 네비, 목차 , 리스트 등
<aside>	말 그대로 어사이드, 우,좌의 사이드 공간
<section>	말 그대로 섹션 , 카테고리 등
<article>	말 그대로 기사, 내용 적기
<footer>	말 그대로 밑, 바닥글
<address>	주소 , 정보 등
<hgroup>	그룹 묶음, 제목 및 부제목을 한 그룹으로 묶음
<main>	말 그대로 메인
<details>	말 그대로 세부사항, 세부적인 내용
<figure>	이미지, 사진 등 콘텐츠
<figcaption>	위의 부가적인 정의
<mark>	강조
<time>	시간
<summary>	요약

 

 

시멘틱 구조 잘 이해해 두면 나중에 할때도 쉽게 적용시킬 수 있어 시간 단축에 큰 도움을 준다. !!