Sementic Tag & Position

**이미 지난 주차의 위클리 페이퍼이지만 블로그 이사로 인해서 새롭게 올리게 되었습니다.**

내용은 유사하지만, 조금 더 보완해서 게시했습니다!

 

- 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.
- position의 속성들과 각각의 특징을 설명해 주세요.

 

Semantic tag란?

: 의미론적(semantic) 태그라는 뜻으로,

이를 이용하면 HTML에서 각각의 태그 안에 있는 내용이 어떤 목적으로 구현되었는지를 나타낼 수 있고,

사용할 때는 콘텐츠의 의미와 기능에 따라 적합한 태그를 선택해야한다.

 

시맨틱 태그의 종류

1) header

로고 및 제목이 포함된 페이지의 최상단 콘텐츠

 

2) main

메인 콘텐츠의 전체를 감싸는 태그

 

3) footer

저작권, 연락처, 사업자 정보, 소셜 미디어 계정 정보 등이 포함된 하단 콘텐츠

 

4) article

독립적으로 배포 및 재사용할 수 있는 콘텐츠

 

시맨틱 태그의 종류가 너무 많은 관계로, 공식 문서의 Sementice Tag 내용을 링크 걸어두겠다.

 

왜 사용해야할까?

- HTML만 보고도, 각 태그의 콘텐츠가 어떤 목적으로 구현된 것인지 파악하기 쉽다.

- SEO 검색엔진 최적화에 도움이 된다. 시맨틱 태그에서 강조한 내용은 검색 엔진에서도 중요하다고 판단해서 사용자에게 노출될 수 있도록 한다.

- 장애가 있는 사용자의 경우, 스크린 리더기에서 화면을 탐색할 때 시맨틱 태그를 통해 내용을 찾을 수 있다. (웹 접근성 향상)

 

---

CSS - Position

요소를 배치하는 방법을 지정하는 CSS 속성으로, 대표적으로 다섯 가지의 속성값을 가진다.

position : static | relative | absolute | fixed | sticky ;

top : 0px;
right : 0px;
bottom : 0px;
left : 0px;

 

1. static

: position의 기본값으로 별도로 position 값을 지정해주지 않았을 때 가지는 값이다.

 

2. relative

: static일 때 위치하는 곳을 기준으로 추가해준 값을 따라 이동한다.

- 원래 자리를 차지한다.

 

3. absolute

: '가장 가까운 포지셔닝이 된 조상'을 기준으로 위치가 정해진다.

- 원래 자리를 차지하지 않는다.

 

4. fixed

: '브라우저 화면'을 기준으로 위치가 정해진다.

- 원래 자리를 차지하지 않는다.

 

5. sticky

: 스크롤을 하던 중, 지정된 위치를 지날 때부터 고정된다.

ex) 글의 중간에 있는 제목이 스크롤 되면서 고정되는 효과 

- 원래 자리를 차지한다.