HuSpIn
HTML(Semantic) 본문
HTML의 *Semantic* 요소
* 참고 :
Semantic(시멘틱)이란?
시멘틱(Semantic)의 사전적의미는 의미론적으로 라는 뜻을 가지고 있다.
HTML에서 Semantic 요소라 함은 의미를 가진 요소를 뜻한다.
HTML의 Semantic 요소에 대해 알아보기전 두 HTML 태그 요소를 알아보자.
[1] <div>, <span>
앞에서 인라인 요소와 블럭 요소에 대해 간단히 알아 보았는데 div와 span을 통해 좀 더 심층적으로 알아보자.
먼저 인라인 요소와 블럭 요소가 뜻하는 바는 주어진 요소(태그)가 문서의 컨텐츠 흐름에 들어가게 하는 방법을 말한다.
인라인 요소로써는 <a>태그 처럼 한 줄을 전부 차지하는게 아닌 그 줄에 다른 요소가 있더라도 그 요소 라인에 표시되는게 인라인 요소의 특징이고, 블럭 요소는 한 요소가 한 줄 전체를 차지한다. 대표적으로 <p> 태그가 있다.
이제 두 요소를 소개하겠다.
span과 div 라는 요소인 둘 다 일종의 *제너릭 컨테이너*이다.
* 참고 :
제너릭 컨테이너란?
HTML에서 제너릭 컨테이너 특별한 목적이 없는 컨테이너를 말한다.
일반적으로 스타일 속성을 제너릭 컨테이너에 연결하여 렌더링을 지정하거나 CSS 규칙을 사용한다.
(1) div
우선 div의 뜻은 'division' 즉 ,분할이라는 뜻을 가지고 있다.
div는 무언가를 잡아두는 또는 요소를 그룹화하는 제네릭 컨테이너이고, 블럭 성질의 요소이다.
따라서 어떤 컨텐츠에 div를 넣으면 div는 전체 블럭을 차지하고, 위 아래의 컨텐츠를 밀어낼 것이다.
하지만 CSS에서는 div로 컨텐츠를 그룹화 할 수 있다.
(2) span
span은 제네릭 컨테이너 이고, div와는 반대로 인라인 성질을 가진 요소이다.텍스트나 컨텐츠를 span으로 감싸면 하나의 그룹으로 묶어서 CSS 스타일을 정하거나 할 수 있다.div와 비슷하지만 span은 인라인 성질을 가지고 있어 전체 블럭을 차지하지 않는다.무언가를 그룹화 해서 다른 스타일을 적용하는 방법으로 쓰인다.
[2] 기타 요소 모음 - hr, br, sup, sub(1) hr 태그Horizontal rule의 약자이며, 자주 사용되진 않지만 마주칠 가능성은 있다.이 요소의 특징으로는 닫는 태그 </hr>이 없다는 것이다.그래서 그 <hr>만 있을 뿐 내용이나 속성을 부여할 필요가 없다.기본적인 기능은 일단 스크린을 수평으로 가로지르는 선을 하나 만드는 것이다.
줄을 나누는것 처럼 말이다.MDN에서는 문단 사이 공백을 표시하거나 문단 레벨 요소들 사이의 공백을 의미한다고 설명하고있다.
따라서 이야기의 장면 전환이나, 주제의 변경을 나타낼 수 있다.보통은 그냥 줄만 있지만 다르게 보이도록 꾸밀수도 있다.
(2) <br> 태그내용의 줄을 바꿔주는 역할을 하는 태그이다.
우리가 타이핑을 하면서 줄을 바꾸어야 할 때 엔터키를 누르는 기능을 한다고 보면 된다.어떨 때 유용하냐면 예를 들어 시 하나가 있고 그 시의 줄바꿈을 하나하나 컨트롤 하고 싶은 경우 그냥 <p></p> 태그를 여러개 사용해 줄 바꿈을 해줄 순 있지만하지만 이렇게 <p> 태그를 사용한다면 * <p>* 태그 즉, 문단의 의미를 잃어 버리게 된다.
문단은 일종의 덩어리이다. 내용이 한 데 뭉쳐진 덩어리 이럴 때 줄바꿈<br> 태그를 사용한다면 효과적으로 시를 만들 수 있고 원하는 곳에서 정확이 문장의 줄을 바꿀 수 있다.
* 참고 :
<p>태그 안에서 타이핑 하는 것처럼 엔터키로 줄 바꿈을 하여도 화면
즉, 브라우저 상에선 일자로 표현된다.
(3) sup 태그 윗 첨자
sup 태그는 독특한 기능을 가지고 있다.
평소에 잘 사용할 일은 없지만 위키피디아나 나무위키에선 자주 보이는 태그인데,
바로 윗첨자를 나타내는 기능을 가지고 있다.
윗첨자는 기준선 보다 더 위에 표시되는 텍스트를 표현한다.
윗 첨자는 텍스트로의 표현 보다 이미지로의 표현이 좀 더 이해하기 쉬울 것 같아
이미지를 보면서 간단히 설명하고 넘어가겠다.
이미지를 보면 글자에 [3], [4] 라고 글자의 윗라인에 표시되는 걸 볼 수 있다.
이 것이 바로 윗첨자이다.
(4) sub 태그 아래 첨자
sup 태그와는 반대로 아래첨자라 하며 기준선보다 더 아래에 있는 텍스트를 표현한다.
수학,화학에서 많이 보인다.
[2] HTML 엔티티
엔티티는 HTML대신 쓸 수 있는 특별한 코드 또는 시퀸스이다.
이걸 사용하면 다른글자가 표시된다.
또한 타이핑하기 어려운 글자에도 쓰인다.
저작권 가호, 다이아몬드 모양, 십자가, 화살표 등등
모든 엔티티 코드는 &로 시작해서 ;로 끝난다.
예를 들자면 &aabbcc; 이런식으로 말이다.
흔하게 사용되는건 예약 문자이다. HTML에 입력하면 안되는 글자들이 몇 개 있는데 HTML 구문에서 중요한 역할을 하기 때문이다.
예를 들면 태그를 표시하는 < > 부등호 괄호가 있다. 두 번째는 & 이 있다.
브라우저는 < > 를 시작점이라 읽기 때문에 사용하면 안되고 엔티티 코드로 입력하는게 좋다.
엔티티 코드는 사용자가 타이핑하기 보단 좋은 레퍼런스 사이트가 있다.
entitycode.com라는 사이트인데 이 사이트에서 필요한 엔티티 코드를 찾아보거나 구글링을 하면 된다.
[3] 시멘틱 마크업 Semantic Markup
시멘틱 마크업의 '시멘틱'의 의미는 '의미와 관련된' 이라는 뜻이다.
즉, 시멘틱 마크업이라는 것은 의미를 가지고 있는 마크업을 뜻하거나 그 요소의 내용의 의미에 관련된 마크업이다.
시멘틱 마크업의 대표적인 종류를 알아 볼텐데 대표적으로는
main, header, nav, section, article, footer 가 있고, 가장 많이 사용된다.
이 태그들은 div 태그와 기능이 갖지만 각각의 의미를 가지고 있다.
그렇다면 왜? 의미를 가지고 있는게 왜 중요할까?
결론부터 말하자면 마크업에 의미를 부여하는것 자체가 중요하기 때문이다.
부여된 의미는 다른 컴퓨터나 Google 같은 크롤러 프로그램에도 의미가있는데,
요소의 이름만으로도 무슨 기능을 하는지 알 수 있기 때문이다.
즉, 첫 번째 이유는 크롤러가 더 쉽게 코드를 알아볼수 있게 다른 어플리케이션 또는 코드와 더 잘 융합되도록 하기 위함이고,
두 번째 이유는 접근성이다. 스크린 리더를 쓰는 사람들이 더 쉽게 코드에 접근할 수 있게 하기 위함도 있다.
시각 장애인 처럼 렌더링된 내용을 보지 못하는 경우 스크린 리더라는 프로그램을 사용하는데
스크린 리더는 어렵게 생각 안해도 되는게 음성으로 어떤 기능이 있는지 어떤 역할을 하는지 알려주는 프로그램이다.
따라서 시멘틱 마크업은 쉽게 이야기해 표지만 같은 역할을 해준다고 보면된다.
세 번째 이유는 가독성인데 내가 만든 코드가 div 태그들로만 이루어져 있다면 이 div는 어떤 역할을 하는 중인지 해석을 하는데에 불필요한 시간이 소요될 것이다. 내가 만든 코드도 시간이 소요될텐데 다른 개발자가 보았을땐 더 시간이 소요될게 뻔하다.
그래서 가독성 즉, 더 쉽게 눈에 읽히기 위해서라도 시멘틱 마크업을 사용하는것이 중요하다.
마크업에 의미를 부여한다는것 외에 전혀 새로울게 없지만 div, div, div 만 쓰는것 보단 헤더의 영역에서 역할을 하는 div는 header 로 감싸주고 하는것이 좋다.
[5] 시멘틱 요소의 사용법
<main></main> :
=> 문서의 주요 내용을 나타낸다. 페이지의 주요 내용의 의미하고, 페이지 전반에서 계속 반복되는 내용은 전부 제외하는게 원칙이다.
사이드바, nav링크, 저작권 정보, 로고 등등 여러 페이지에서 반복되는 것은 페이지의 메인 컨텐츠에 포함되지 않는다.
<nav></nav> :
=> nav는 페이지에서 내비게이션 링크를 제공하는 것들을 나타낸다.
페이지 내에서 다른 곳으로 이동하는걸 나타낼 때에도 사용한다.
사용법은 심플하다. 원하는 내용으로 채우되 링크는 포함해야한다.
예를 들어 쇼핑몰 사이트가 있다면 카테고리 컨텐츠에 포함될 것이다.
<section></section> :
=> section 요소는 꽤나 제너릭 하다. 웹 사이트나 애플리케이션의 독립적인 부분을 나타낼 뿐 딱히 다른 기능은 없지만 그래도 그냥 div만 사용하는 것 보단 훨씬 낫다.
div는 그냥 제너릭 컨테이너이다.
아무곳에서나 다 쓸 수 있다.
하지만 section은 내용의 한 부분이며 웹 사이트의 독립적인 부분이어야 한다.
예를 들어 테두리를 넣거나 색을 바꾸고 싶다면 div를 사용해도 되겠지만 section이 좀 더 낫다는 것이다.
<article></article> :
article은 문서 내의 독립적인 구성을 나타내야 한다.
section과 거의 똑같은 의미를 내포하고 있다.
<header></header> :
머리말 header 요소는 보통 내용을 소개한다. 종종 내비게이션 관련 내용을 포함한다.
<footer></footer> :
header와 성격이 비슷하며 꼬리말에 해당하는 부분을 가리킨다.