시맨틱 태그 / position의 속성

[위클리페이퍼 - 2주차]

 

[1] 시맨틱 태그  Semantic Tag 를 사용하면 좋은 점

 

시맨틱 태그란?

포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그

<div>처럼 block element이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재한다

웹페이지 안에서 각 영역을 구분하는 div 대신 의미있는 태그를 붙여주자 -> 작성하는 사람의 의도를 담는다

 

=> 시맨틱 태그는 HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것

 

시맨틱 태그의 종류

<header>, <nav>, <article>, <section>, <footer>, <main>  (main 태그는 한 페이지에 한 영역만) 등

 

 

시맨틱 태그를 사용했을때의 장점

1. 검색엔진 최적화 Search Engine Optimazation (SEO) ---검색엔진로봇입장에서 콘텐츠를 쉽게 이해할 수 있다

: 검색했을때 적합한 결과가 나오도록 사이트를 최적화

웹페이지의 메타데이터와 시맨틱 태그가 잘 갖추어져있으면 검색엔진이 해당 사이트를 보다 정확하게 파악할 수 있다

 

시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는 데 도움이 되며, 이를 통해 검색결과 상에서 웹 사이트 노출 순위를 높이고 더 많은 트래픽을 유도할 수 있습니다. 더불어 웹페이지의 성능과 속도를 향상시켜 이탈률을 줄이고 전환율을 높이는 데에도 도움이 될 수 있습니다.

 

2. 웹 접근성 향상 Web Accessibility (A11y)

시맨틱태그는 배리어프리 인터넷을 만드는데 중요한 역할을 한다.

스크린리더 이용자에게 큰 도움이 된다

신체적, 인지적 장애가 있는 사람들을 포함하여 모든 사람에게 원활하고 원활한 경험을 보장

웹페이지의 다양한 섹션을 명확하게 정의하고 웹 전체의 일관성을 유지함으로써 사용자 경험과 만족도 또한 향상

 

3. 웹페이지의 가독성 향상 & 개발자 생상성 향상

사람들이 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 됩니다. 시맨틱 태그는 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움  

시맨틱 태그는 제목과 키워드, 요약 등 콘텐츠의 가장 중요하고 관련성 높은 부분을 강조

 

가독성 측면에서 시맨틱 태그가 중요한 이유는 불필요하거나 중복되는 코드를 피하는 데 도움이 된다는 것입니다. 이를 통해 웹페이지를 더 빠르고 효율적으로 만들 수 있습니다.

 

협업 시 다른 개발자가 작성한 코드의 구조를 이해하기 쉬움 

---

[2] position의 속성들과 각각의 특징

 

position속성: CSS에서 요소의 배치 방식에 대한 속성

요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용

이동 방향은 영역 안쪽: +값, 영역 바깥쪽 : -값

 

1. static 

: 일반적인 자리 배치

position 값을 지정하지않으면 static 이 기본값임

HTML 문서 상에서 원래 있어야하는 위치에 배치

= 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다

top, left, bottom, right 속성값은 position 속성이 static일 때는 무시된다

 

2. relative

: 기존 static 요소위치에서 이동할 수 있다. 

이동 방향은 요소가 차지하는 

 

3. absolute

: 가장 가까운, 포지셔닝*이 된 조상 요소의 영역 경계선을 기준으로 설정된다

*포지셔닝: 명시적으로 position 을 지정해주는 것

 

크기를 정해주지 않으면 안에 있는 내용(text..) 만큼의 크기를 갖는다.

내용이 없으면 화면에서 안보임
left / right 양쪽 위치를 정해주면 그거에 맞는 크기로 생성이 됨 

left:0 ; right: 0 ; <=> width: 100%

absolute 요소에 상하좌우 모두 0px 주면 부모 요소를 가득 채우게 됨

= inset : 0 동일 (상하좌우에 같은 값을 줄때 사용)

 

부모 요소에서 자리 차지하지 않음

-> 뒤에있는 내용을 가릴수도 있음 -> 가려지는 요소에서 마진 필요

 

4. fixed

: 원하는 위치에 요소를 고정시킬 수 있다.

용도: 상단 nav bar 고정, 챗봇이 늘 같은 위치에 고정, 하단에 재생버튼이 고정 등

 

부모 요소에서 자리 차지하지 않음

-> 뒤에있는 내용을 가릴수도 있음 -> 가려지는 요소에서 마진 필요

 

5. sticky

:맨 위에 배너(광고 등) + 그 밑에 nav bar 가 있을때 스크롤을 내리다가 배너가 가려지고 nav bar 가 최상단에 위치했을때부터 nav위치가 고정되도록(fixed처럼) 

top: 0 => 브라우저 영역 기준, 스크롤을 내리다가 요소가 top 방향으로 0 px 위치가 됐을때 고정시킨다는 의미

 

원래 위치에서 자리를 차지한다 (static같은 성질) & 부모 요소에 소속되어있다 = 부모 요소 밖으로는 나가지 않는다

= 부모요소 컨텐츠가 끝나는 영역에서는 더이상 보이지 않음 

 

여러개 소제목이 각 컨텐츠 상단에 달라붙게 만들수 있음

 

 

 

 

 

내용 출처

https://seo.tbwakorea.com/blog/what-is-semantic-tag/

시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점

https://www.semrush.com/blog/semantic-html5-guide/

Semantic HTML: What It Is and How to Use It Correctly

https://www.daleseo.com/css-position/

CSS의 5가지 position 속성 값 기본 정리