시멘틱 태그란?? -두번쨰-

시멘틱 태그의 종류 2번째 이야기

안녕하세요! 이번엔 저번 시간에 알려드렸던 시멘틱 태그 중 추가적인 것들에 대해 설명 해드리도록 하겠습니다.

시멘틱 태그 종류2

• 인라인 텍스트 시멘틱
  
• 이미지 & 멀티미디어
  
• 내장 콘텐츠
  
• SVG와 MathML
  
• 스크립트
  

인라인 텍스트 시멘틱

HTML 인라인 텍스트 시멘틱을 사용해서 단어, 줄, 혹은 아무 부분의 의미나 구조, 스타일을 정의할 수 있습니다.

요소	설명
a	href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. a 안의 콘텐츠는 링크 목적지의 설명을 나타내야 합니다.
abbr	준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.
b	독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 “굵은 글씨 요소”로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 b를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, strong 요소를 사용해 특별히 중요한 텍스트를 나타내세요.
bdi	포함된 텍스트를 주변 텍스트와 분리하여 처리하도록 브라우저의 양방향 알고리즘에 지시합니다. 웹 사이트가 일부 텍스트를 동적으로 삽입하고 삽입되는 텍스트의 방향성을 모를 때 특히 유용합니다.
bdo	현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.
br	텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.
cite	저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.
code	짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다.
data	주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다. 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 time 요소를 사용하세요.
dfn	현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. dfn 에서 가장 가까운 p, dt, dd, 쌍, section 조상 요소를 용어 정의로 간주합니다.
em	텍스트의 강세를 나타냅니다. em 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.
i	텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.
kbd	키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.
mark	현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.
q	둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. q는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 blockquote 요소를 사용하세요.
rp	ruby 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다. rt 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 rp 요소로 나타내야 합니다.
rt	동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.
ruby	루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.
s	글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. s 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, s 는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 del과 ins 요소를 대신 사용하세요.
samp	컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다. 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.
small	덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 기본 상태에서 small은 자신의 콘텐츠를 한 사이즈 작은 글꼴(small에서 x-small 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.
span	구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. span은 div와 매우 유사하지만, div는 블록 레벨 요소인 반면 span은 인라인 요소입니다.
strong	중대하거나 긴급한 콘텐츠를 나타냅니다. 보통 브라우저는 굵은 글씨로 표시합니다.
sub	활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.
sup	활자 배치를 위 첨자로 해야 하는 인라인 텍스트를 지정합니다. 위 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 위로 올려 렌더링 합니다.
time	시간의 특정 지점 또는 구간을 나타냅니다. datetime 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.
u	글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.
var	수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다. 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다.
wbr	현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.

이미지 & 멀티미디어

HTML은 사진, 오디오, 비디오 등 다양한 멀티미디어 리소스를 지원합니다.

요소	설명
area	이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다. map 요소 안에서만 사용할 수 있습니다.
audio	문서에 소리 콘텐츠를 포함할 때 사용합니다. src 특성 또는	source	요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. MediaStream을 사용하면 미디어 스트림을 바라볼 수도 있습니다.
img	문서에 이미지를 넣습니다.
map	area 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.
track	미디어 요소(audio, video)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다. 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 Timed Text Markup Language(TTML)형식을 사용해야 합니다.
video	비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나,	audio	요소가 사용자 경험에 좀 더 적합합니다.

내장 콘텐츠

HTML은 일반적인 멀티미디어 콘텐츠 외에도 다양한 종류의 기타 콘텐츠를 포함할 수 있습니다.

요소	설명
embed	외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.
iframe	중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다.
object	이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.
picture	0개 이상의 source 요소와 하나의 img 요소를 포함하여 다양한 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공합니다.
portal	새 페이지로의 원활한 탐색을 위해 다른 HTML 페이지를 현재 페이지에 포함할 수 있습니다.
source	그림, 오디오 요소 또는 비디오 요소에 대한 여러 미디어 리소스를 지정합니다. 이는 콘텐츠가 없고 닫는 태그가 없음을 의미하는 무효 요소입니다. 일반적으로 이미지 파일 형식과 미디어 파일 형식에 대한 서로 다른 지원을 제공하는 광범위한 브라우저와의 호환성을 제공하기 위해 여러 파일 형식으로 동일한 미디어 콘텐츠를 제공하는 데 사용됩니다.

SVG와 MathML

요소	설명
svg	새 좌표계 및 뷰포트를 정의하는 컨테이너입니다. SVG 문서의 가장 바깥쪽 요소로 사용되지만 SVG 또는 HTML 문서 내부에 SVG 조각을 포함하는 데에도 사용할 수 있습니다.
math	MathML의 최상위 요소입니다. 모든 유효한 MathML 인스턴스는 여기에 래핑되어야 합니다. 또한 두 번째 math 요소를 다른 요소에 중첩해서는 안 되지만 그 안에 임의의 수의 다른 자식 요소를 포함할 수 있습니다.

스크립트

HTML은 동적인 콘텐츠와 웹 어플리케이션을 위해 스크립트 언어, 그 중에서도 주로 JavaScript를 지원합니다. 특정 요소가 이런 기능을 가지고 있습니다.

요소	설명
canvas	캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.
noscript	페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.
script	데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있습니다.

다음시간에 계속…