[html] 시멘틱 태그 (Sementic) 사용이유와 Section 요소 파악

 

 

서론

 

html을 상당히 클래식한 방식으로 나누면 이런식의 부류로 나눌 수 있다.

header, main, nav, aside, footer, section, article, ... 와 같이 웹 페이지를 의미 단위로 나누기 위한 태그,

의미를 가진 이 태그들을 시멘틱 태그 (Sementic) 이라고 부른다.

 

 

 

시멘틱 태그를 사용하면 개좋은점을 설명해보자면

 

1. 시맨틱 태그를 안쓸때

 

 

흔히 말하는 divdivdiv... div지옥이 펼쳐진다.

 

 

2. 시맨틱 태그를 쓸때

 

 

 

코드를 접었다가 다시 펼 때 어디로 바로 찾아들어가면 되는지 알수 있기 때문에

개발자도구 들어갈때 개 편함. (유지보수 용이)

 

 

✔ header 영역

 

흔히 사이트의 로고, 메뉴, 검색창, 로그인/로그아웃, 회원가입 버튼으로

구성되어 있는 영역을 header 영역이라고 한다.

 

일반적으로는 사이트 가장 상단 부분의 특정영역을 header라고 한다.

이 header 에는 사용자들의 접근성을 쉽게 하기 위해 대부분의 웹 사이트에서

로고, 메뉴, 검색 바, 로그인/로그아웃, 회원가입 버튼 등으로  구성한다.

 

이 header 영역에는 대체로 사이트의 main과는 상관이 없지만 user 와

연관이 되어 도움을 주는 것들이 대부분 포함되어져 있는 영역이다.

 

 

 

✔ main 영역

 

html 코드를 짜다보면 내가 main이라고 생각하고 만드는 그 부분이 바로 main 영역이다.

 

문서 내부의 핵심적인 콘텐츠를 대부분 다루는 영역이다.

주요 콘텐츠 영역은 문서의 핵심 주제나 애플리케이션의 핵심 기능이 포함되어져 있다.

광고나 부가 설명 정보들은 제외한 모든 핵심 부분만 다루는 부분이다.

(광고나 부연 같은 정보를 main에다가 집어넣으면 user입장에서도,

같이 코드를 짜는 사람 입장에서도 큰 이질감을 느낀다.)

 

main은 여러개 짤 수 있는데 한 페이지에서는 하나만 보여져야 한다.

여러개 짜고 하나만 보여주고, 어떤 버튼을 누르면

 

특정 main 이 보여지고 먼저 존재하던 main 은 안보이게 하던가

뭐 어쨋든 하나만 보여주고 나머지는 가리는 노력이 필요하다.

 

Internet Explorer에서 지원하지 않다고는 하나 이제 우리가 신경쓸 필요가 없다.

😎😎😎😎😎 마이크로소프트에서 공식적으로 Internet Explorer 를 사장시켰기 때문이다 😎😎😎😎😎

 

 

갈때 됐잖아 ㅋㅋ 들어가시고

 

 

✔ section 영역

 

section 영역은 main영역과 구분되는 개념이다.

 

main 영역은 main 콘텐츠가 보여지는 포괄적인 의미이기도 하지만

section 영역은 main 보다는 조금 더 작은 단위로 쪼개서 영역을 관리한다.

 

 

✔ article 영역

 

article 영역은 section을 포함하는 태그로 다룰 수도 있고, section 에 포함된 태그가 될 수도 있다.

 

article 영역은 특히 독립된 부분이라는 점에서 이것 자체로도 의미가 있는, 그렇게 의도 된 태그이다.

예시로는 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등이 있다.

 

 

 

✔ aside 영역

 

보통 aside 영역은 main 영역에서 다루기 어려운 내용들 (광고같은거),

짜잘짜잘한 것들이나 아니면 광고, 위로 한번에 가기 스크롤 버튼, 내정보 버튼 등등...

이런 것들이 aside영역에 주로 들어간다.

 

velog 이런 블로그를 이용하면 왼쪽이나 오른쪽에 이런거 붙어서 따라오는데

이런게 aside 영역에 집어넣고 따라오게 fixed 해놓은거다.

 

 

footer 영역

 

footer 영역은 블로그나 이런 웹사이트를 가면 footer영역이 생략된 사이트들도 보이곤 한다.

 

 

(쿠팡 footer 영역 캡쳐해옴)

 

그 외의 사이트들은 footer 영역에 해당 웹사이트를 운영하는 사이트 정보에 관한 것들이나

위의 사진과 같이 고객정보, 이용약관 등등 사이트 이용자와 소통 창구를 열어놓는 공간으로 활용된다.