[HTML / CSS] 시맨틱 태그 장점 / CSS position 속성

Q. 질문 1

시맨틱 태그를 사용하면 좋은 점을 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #1)

 

A. 답변 1

시맨틱 태그란?

시맨틱(semantic)이라는 단어의 뜻은 '의미의, 의미론적인` 이라는 뜻을 담고 있다.

그렇다면 시맨틱 태그란 의미를 가지고 있는 태그라고 이해할 수 있다.

 

시맨틱 태그 (Semantic Tag)
포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그

 

시맨틱 태그는 기존 HTML의 <div> 태그와 기능이 똑같다.

하지만 시맨틱 태그는 단순 <div> 태그가 아니라, 태그의 의미를 부여하여 웹사이트의 구조를 쉽게 파악할 수 있게 도와준다.

 

시맨틱 태그의 종류

시맨틱 태그의 종류는 크게 다음과 같다. (이 외에도 다양한 종류가 있음)

태그	설명
<header>	문서의 머리말, 상단 ex) 로고, 제목 등을 포함
<nav>	문서의 내비게이션 링크 ex) 메뉴, 링크 목록 등을 포함
<main>	문서의 주요 콘텐츠 ex) 문서의 핵심적인 내용
<section>	문서의 구획 ex) 주제별로 나누어진 내용
<article>	독립적인 콘텐츠 ex) 블로그 글, 뉴스 기사 등
<footer>	문서의 꼬리말 정의 ex) 연락처 정보, 저작권 정보 등
<figure>	멀티미디어 콘텐츠 ex) 이미지, 그래픽 등

 

시맨틱 태그 장점

그렇다면 <div> 와 기능이 똑같다면 그냥 <div> 를 사용하면 되지 왜 굳이 시맨틱 태그를 사용하면 좋을까?

 

mdn 문서에 따르면 시맨틱 태그의 장점은 크게 다음과 같다.

• 검색 엔진은 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주
• 시각 장애인들이 사용하는 스크린 리더 같은 보조 기구들이 사이트를 파악하는데 도움을 줌
• 의미있는 코드 블럭을 찾는 것이 훨씬 쉬움

 

1. 검색 랭킹

시맨틱 태그를 사용함으로 문서의 구조와 내용을 정확하게 정의하게 된다.

 

그래서 해당 요소의 역할과 의미를 명확하게 이해할 수 있기 때문에, 검색엔진이 시맨틱 태그를 통해 페이지의 구조를 더 잘 이해하게 되어 이를 검색 결과에 적절하게 반영하게 된다.

그 결과 검색 엔진 최적화(SEO) 를 향상시키는 데에 도움이 된다.

 

2. 스크린 리더

시각장애를 가진 분들은 컴퓨터나 모바일 화면의 텍스트를 TTS 로 읽어주는 스크린 리더를 사용해 화면에 담긴 정보를 이해하기 위해 사용한다.

 

그래서 시맨틱 태그를 사용하여 웹 페이지의 구조를 쉽게 파악하고 어떤 부분인지 이해할 수 있기 때문에 스크린 리더 사용자들에게 적절한 정보를 전달할 수 있다.

 

3. 의미있는 코드 블럭

시맨틱 태그를 사용하면 코드의 가독성이 향상된다. 그래서 유지보수와 협업을 조금 더 편리하게 도와준다.

 

아래 사진은 화면상에서 동일한 결과가 나오지만, 오른쪽 코드가 가독성면에서 좋아 해당 코드블럭이 무슨 역할이며 무슨 내용을 담고 있는지 이해하기 더 쉬워진다.

(좌) 시맨틱 태그 사용 / (우) div 태그 사용

 

Q. 질문 2

position의 속성들과 각각의 특징을 설명해 주세요.

 (코드잇 스프린트 위클리 페이퍼 #1)

 

A. 답변 2

css 에서 요소들을 원하는 위치에 조절하기 위해 position 을 사용한다. 

position 은 요소들의 위치를 top, bottom, left, right 속성과 함께 사용하여 정확한 위치를 조절할 수 있다.

 

position 의 속성에는 다섯가지가 있다

• static
• relative
• absolute
• fixed
• sticky

 

1. static

staic 은 position 을 지정하지 않았을 때, 기본적으로 적용되는 디폴트 값으로  HTML 문서 상 원래 있어야 할 자리에 배치가 된다.

그래서 다른 postion 속성과 다르게 static 은 top, bottom, left, right 속성을 사용하여 위치를 지정해 주지 못한다.

static

 

 

2. relative

relative 은 `상대적인, 비교적인` 뜻을 담고 있으며, 원래 위치(static 일 때 위치) 기준으로 위치를 상대적으로 배치시켜준다. 

그래서 원래 위치 기준에서 top, bottom, left, right 속성을 사용해서 원하는 위치에 배치할 수 있게 된다.

  

    
    
    
    
  
.positionTest {
  background-color: fuchsia;
  position: relative;
  top: 20px;
  left: 40px;
}

원래 위치에서 위에서 20px 만큼 이동하고, 왼쪽에서 40px 만큼 이동하여 배치하면 다음과 같은 결과가 나온다.

relative

 

3. absolute

absolute 는 `절대적인` 이라는 뜻을 가지고 있으며, position 을 가진 부모 요소를 기준으로 배치시켜준다.

여기서 position 을 가진 부모요소란 static 을 제외한 postion 값을 가진 부모를 의미하며, 만약 position 을 가진 부모요소가 없다면 body 를 기준으로 배치된다.

그래서 주로 부모 기준으로 위치를 배치시키기 위해 부모를 relative 속성을 적용시킨다.

  

    
    
    
    
  
.parent {
  width: 400px;
  height: 400px;
  background-color: beige;
  position: relative;
}

.positionTest {
  background-color: fuchsia;
  position: absolute;
  top: 20px;
  left: 40px;
}

부모 기준에서 위에서 20px, 왼쪽에서 40px 만큼 이동하여 배치하면 다음과 같은 결과가 나온다.

원래 핑크색 요소가 있어야 할 위치를 무시하고 다른 요소들이 배치되며, 핑크색 요소는 부모 기준으로 배치된다.

absolute

 

4. fixed

fixed 는 `고정된` 이라는 의미를 가지며, 말그대로 요소를 항상 고정된 위치에 배치시켜준다.

  

    
    
    
    
  
.positionTest {
  background-color: fuchsia;
  position: fixed;
  top: 20px;
  left: 40px;
}

뷰 포트(전체화면)을 기준으로 위에서 20px, 왼쪽에서 40px 만큼 위치에 항상 고정이 되어 아무리 스크롤을 해도 고정된 위치에 배치된다.

fixed

 

5. sticky

sticky 는 `끈적거리는` 라는 의미를 가졌다.

이는 부모 요소 안에서 작동하며, 스크롤을 하다가 해당 요소 지점에 오게 되면 그 위치에 고정이 된다.

  

    
    
    
    
  
.positionTest {
  background-color: fuchsia;
  position: sticky;
  top: 0px;
}

스크롤을 내려 해당 요소가 원래 위치되어 있는 곳까지 static 처럼 작동하다가, 해당 요소가 있는 위치를 지나면 스티커처럼 달라붙는다.

sticky

 

결론

평상시에 시맨틱 태그를 신경쓰지 않았는데 코드잇 강의를 들으면서 시맨틱 태그에 대한 중요성을 알게 되어 앞으로 시맨틱 태그를 사용하도록 신경써야겠다!

그리고 position 에서 매번 absoulte 가 헷갈렸는데 이렇게 코드잇 강의를 들으면서 제대로 알게 되고 글로 작성하면서도 다시 한 번 상기할 수 있어 좋았다! 그리고 sticky 속성도 모르고 있었는데 이번에 알게 되어 나중에 한 번 사용해보고 싶다!