알아두면 재미있는 HTML5 태그
안녕하세요! 티그리스 디자인팀입니다.
오늘은 쉬어가는 느낌으로 재미있고(?) 생소한 HTML5 태그를 몇 개 들고 왔습니다.
태그 목록을 쭉 보다 보니 '이런 것도 있어?' 하는 태그들이 많았어요.
작업상 저는 잘 쓰지 않는 태그들이라 한번 정리해 보면 좋겠다 싶어 구성해 봤어요!
<abbr>
[코드]
<p><abbr title="별 걸 다 줄이네">별다줄</abbr>
별 걸 다 줄여서 생긴 말. 하지만 그러는 너도...</p>
[실행 화면]
'별다줄' 단어 위에 마우스 커서를 올리면 title 속성에 의해 툴팁(별 걸 다 줄이네)이 제공된다.
<abbr> 태그는 "GNB(Global Navigation Bar)", "LNB(Local Navigation Bar)", "HTML(Hyper Text Markup Language)"과 같이 단어의 축약형이나 머리글자로 만들어진 단어를 정의할 때 사용합니다. title 속성을 사용해 단어의 정의를 작성합니다.
<cite>
[코드]
<img src="/images/parasite.jpg" alt="기생충">
<p><cite>기생충</cite>, 2019년</p>
[실행 화면]
추가한 이미지와 함께 <cite> 태그 안에 들어간 영화 제목이 기울어진 형태(css 기본값)로 출력된다.
<cite> 태그는 책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의할 때 사용합니다.
<dfn>
[코드]
<p><dfn>시맨틱 마크업</dfn>은 의미 있는 마크업이라는 뜻으로, <header>, <main>, <footer>처럼 HTML을 의미있는 태그로 구성하는 것을 말한다.</p>
[실행 화면]
<p> 태그 내의 문장과 함께 <dfn> 태그 안에 들어간 용어가 기울어진 형태(css 기본값)로 출력된다.
<dfn> 태그는 용어의 정의를 나타낼 때 사용합니다.
이때 부모 요소에는 해당 용어에 대한 정의나 설명이 반드시 포함되어야만 합니다.
<kbd>
[코드]
<p><kbd>ALT</kbd>키와 <kbd>F4</kbd>키를 동시에 누르면 포커스를 가지고 있는 윈도우를 곧바로 닫을 수 있습니다.</p>
[실행 화면]
<kbd> 태그 내에 들어간 'ALT', 'F4'가 스타일을 가진 채 출력된다.
<kbd> 태그는 키보드 입력을 나타낼 때 사용합니다. 기본값은 브라우저의 고정폭 글꼴로 출력되는 것이지만, CSS를 통해 다양한 효과를 줄 수 있습니다.
<meter>
[코드]
<p>보컬 <meter min="0" max="10" value="8">8</meter></p>
<p>댄스 <meter min="0" max="10" value="5">5</meter></p>
<p>랩 <meter min="0" max="10" value="3">3</meter></p>
[실행 화면]
<meter> 태그 내에 적은 min 값과 max 값, value 값에 의해 막대가 생성되고 일정한 비율로 색이 채워져 게이지 형태로 출력된다.
<meter> 태그는 분수 값이나 게이지 내에서 특정 값이 어느 정도인지 시각적으로 보여주고 싶을 때 사용합니다. 위 속성 외에도 low, high 등의 속성으로 범위를 지정해 주면 변화하는 색상도 확인할 수 있습니다.
<q>
[코드]
<p><q>여기는 너희 집이 아니다. 이 세상에는 네가 찾는 게 하나도 없다.<q>
이 문장이 <기적 수업>에 나오는데 요즘 제 모토에요. 성공이든 사랑이든 무의미함을 느낄 때, 그 문장이 있으면 힘듦이 정리돼요.</p>
[실행 화면]
<q> 태그 내에 들어간 인용구의 앞뒤로 큰 따옴표가 삽입된 채로 출력된다.
- 예시는 이충걸 인터뷰집, <질문은 조금만> 중 개그우먼 강유미의 인터뷰를 사용했습니다.
<q> 태그는 짧은 인용구를 정의할 때 사용합니다. 브라우저에서는 앞뒤에 큰따옴표(””)를 붙여 출력합니다.
<blockquote> 태그는 블록 단위의 인용구에 사용한다면, <q> 태그는 짧거나 문단 안에 포함될 수 있는 작은 단위의 인용구에 사용할 수 있습니다.
<ruby>
[코드]
<p>업무의 모든 것,
<ruby>티그리스<rt>쉬운 업무 플랫폼</rt></ruby>로 쉽고 빠르게</p>
[실행 화면]
'티그리스' 단어 위에 <rt> 태그 내의 글자가 작게 출력된다.
<ruby> 태그는 일본어의 후리가나와 같이 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석을 정의할 때 사용합니다.
<wbr>
[코드]
<p>김수한무<wbr>거북이와두루미<wbr>삼천갑자<wbr>동방삭</p>
[실행 화면]
브라우저 사이즈를 줄이면 <wbr> 태그가 들어간 부분을 기점으로 줄바꿈되어 출력된다.
<wbr> 태그는 단어 중간에서 행을 바꿀 수 있는 위치를 표시할 때 사용합니다.
길이가 긴 단어의 경우 브라우저가 잘못된 위치에서 행을 바꾸지 않도록 <wbr> 요소를 사용해 직접 명시할 수 있습니다.
참고자료
제작. 티그리스 디자인팀
궁금한 점이나 다양한 의견은 아래 메일로 연락 주세요.
design@tigrison.com
