시멘틱 태그
⭐ 시멘틱 (Semantics)
: 의미론적인, 의미를 담고 있는
시멘틱 태그란 영역을 구분한다는 점에서 블록 컨테이너와 유사하지만, 단순한 영역만 구분하는 것이 아니라 특정 의미에 따라서 요소를 구분하는 태그를 의미합니다.
⭐ 시멘틱 태그를 사용하는 이유
시멘틱 태그는 태그에 의미요소를 부여한다는 점에서 가치가 있습니다. 우선 <div>나 <span>과 같은 태그를 사용했을 때는 이 태그에 어떤 내용이 담겨있을 지 전혀 유추할 수가 없지만 <article>, <form>, <header>, <footer> 이런 태그들을 이용하면 태그에 대략 어떤 내용이 담겨있는지 직접 확인하지 않아도 유추가 가능합니다. 이런 점은 다른 개발자가 코드를 볼 때나 후에 코드를 수정해야 할 일이 생길 때 태그를 좀 더 찾기 쉽게 도와줍니다.
또한 시멘틱 태그들을 사용하면 검색엔진에 최적화된 문서를 작성할 수 있게 됩니다. 검색엔진은 태그를 기반으로 키워드의 우선순위를 판단하기 때문에, 중요한 의미를 가진 태그들을 적절히 사용하면 검색에 많은 도움이 됩니다.
그리고 시멘틱 태그를 사용하면 시각장애가 있는 사용자가 스크린리더를 사용할 때 도움을 줄 수 있는데 예를 들어서 강조해야 하는 중요한 부분에 strong 태그를 쓴다던가 하면 스크린리더에서 성우가 조금 더 강세를 주는 식으로 읽기 때문에 좀 더 효과적으로 내용을 전달할 수 있게 됩니다.
+
시멘틱 웹?
시멘틱 웹이란 ‘의미론적인 웹’이라는 뜻을 가지고 있는 단어입니다.
기계는 각각의 문서나 파일, 웹 페이지 등의 데이터를 읽어낼 수는 있지만 관련이 있는 두 데이터가 서로 어떤 관계에 있다는 것을 인간이 하는 것처럼 직관적으로 파악하지 못합니다. 예를 들어 ‘바나나’라는 단어와 ‘노란색’이라는 단어가 있으면 우리는 ‘바나나’의 색깔이 ‘노란색’이다라는 연관관계를 추론할 수 있지만 기계는 별도의 데이터로 읽을 수 있을 뿐, 둘을 관련짓지는 못합니다.
시멘틱 웹은 이러한 데이터들에 메타데이터를 부여하여 데이터끼리의 관계를 기계가 파악할 수 있도록 하는 기술입니다. 예를 들어 바나나에 ‘색 : 노란색’이라는 데이터를 넣을 수 있다면 기계는 두 데이터를 관련지어 해석할 수 있을 것입니다.
한마디로 시멘틱 웹이란 웹에 존재하는 수많은 데이터들을 기계가 관계를 가지는 의미있는 정보로 해석할 수 있도록 구축하는 기술을 의미합니다.
웹 표준
⭐ 웹 표준
HTML5 : W3C에서 공식 표준화한 HTML 작성법
- 웹 표준을 준수해서 작성해야 하는 이유?
웹 표준을 준수해서 작성해야 운영체제, 브라우저마다 의도된 대로 보여지는 페이지를 만들 수 있음 - 웹 호환성 / 크로스 브라우징
- VSCODE에서 기본제공되는 HTML5 양식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>⭐ 웹 호환성 : Cross Browsing
웹 브라우저 버전, 종류와 관계없이 웹 사이트를 접근/이용 가능하게 하는 것
- 웹 호환성이 필요한 이유?
OS가 다르고 글꼴이 다르며, HTML을 렌더링(Rendering)하는 엔진이 다르기 때문에 같은 웹 페이지라도 모든 웹브라우저에서 100% 똑같이 보이게 하는 것은 가능하지 않다.
이러한 차이를 최소한으로 줄여 사용자가 다른 환경에서 웹페이지를 이용하더라도 불편함이 적도록 만드는 것이 중요하다.
- 웹 호환성의 기본
HTML/CSS 웹 표준을 준수하는 것
