생소한 HTML 요소 정리

프론트엔드 개발자라면 누구나 마크업에 자신있어야 한다. 근데 난 자신없다..😭 과연 모든 요소를 알고 적재적소에 마크업을 하는건가? 하는 의문이 들기 시작했다.

I'm Groot.. I'm Groot.. 맨날 같은 태그만 반복해서 사용한다...
생소한 태그들을 싹다 정리 해보려고 한다. 공부는 언제나 재미있다🔥

1. noscript

noscript는 자바스크립트를 지원하지 않을 경우에, 대신 제공할 폴백 콘텐츠를 정의할 때 사용한다.

라고 대략적으로는 알고 있었지만 직접 사용하거나 본적이 없어서 생소했다. 유즈 케이스를 살펴보자.

fallback 이란 '대체'를 뜻한다.

리다이렉트

 <noscript>
   <meta http-equiv="Refresh" content="0; URL=http://www.enable-javascript.com/ko/">
 </noscript>

메시지 전달

<noscript>
  <p>이 사이트의 기능을 활용하기 위해서는 자바스크립트를 활성화 시킬 필요가 있습니다.</p>
  <a href="http://www.enable-javascript.com/ko/" target="_blank">
    브라우저에서 자바스크립트를 활성화하는 방법</a>을 참고 하세요.
</noscript>

2. address

address 요소는 연락처 정보를 정의할 때 사용한다. 일반적으로 <footer>안에 사용한다.

기존 명세에서는 문서 작성자의 연락처만 나타내는 요소였지만, 최신 명세에는 임의의 연락처를 포함할 수 있도록 수정됨.
또한, 연락처 외의 정보(출판일 등)를 담아서는 안된다.

<footer>
  <address>      
     서울시 강남구 역삼동<br>
     Tel: (02)123-4567 | Fax: (02)234-5678
  </address>
</footer>

3. ol

ordered list는 순서형 목록을 나타낸다.

흔히들 목록을 표현하고 싶을 때 ul 요소를 사용한다. 스타일링도 편하고 습관(?)처럼 사용한다. 순서형 목록을 나타내는 ol은 언제쓸까? 도무지 떠오르지 않아서.. 직접 유즈케이스를 찾아보았다.

과거에는 네이버, 다음 등 많았지만 이제는 네이트에서 밖에 확인할 수 없는 이 실시간 검색순위! 여기서 ol요소를 사용하고 있었다. 개발자 도구로 확인해보자!

확인완료 📌

4. figure

논문에서 [fig.1-1]이런식으로 표현하는 것을 흔히 찾아볼 수 있다. 이처럼 HTML5의 figure도 웹 문서에서 그림, 그래프 등과 같은 컨텐츠를 표현하는데 사용된다.

WHATWG의 명세에 따르면 figure요소는 global attributes만 사용할 수 있다고 한다. 👇 글로벌 어트리뷰트 설명은 아래 링크 참조
Global Attributes 종류 및 설명 by mdn
유즈케이스를 알아보자.

우리 모두가 좋아하는 손흥민을 기사를 예로 들어본다.

<p>
  토트넘, 카라바오컵...(중략) 우승 갈증 풀 기회
</p>
<figure>
  <img src="흥민이형.png" alt="손세이셔널">
  <figcaption>토트넘 손흥민이...(중략) 달려가고 있다.</figcaption>
</figure>

figure 요소는 img와 figcaption을 감싸고 figcaption에는 설명을 달아줄 수 있는데 이 때 figcaption은 생략 가능하다.

주의할점은 문장의 중간 요소로서 figrue이 존재하면 안되고, 플로우상 하나의 완결한 문장이거나 자기 완결이 확실시 될 때 사용해야 한다.

잘못된 예시

<p>
  우리의 희망 
  <figure>
  	<img src="흥민이형.png" alt="손세이셔널">
  </figure>
  이 달려가고 있다!
</p>
/* 이렇게 완결한 문장 중간에 figure를 사용할 수 없다. */

또 주의할점은 figcaption을 복수로 작성했을 때 브라우저는 첫번째 figcaption요소만 figure의 설명으로 해석한다.

5. strong vs em

텍스트나 콘텐츠를 강조할 때 사용한다는 부분은 모두들 잘 알고 있지만 각자 언제 쓰이는지에 대해서는 애매모호합니다.

일단, 강조의 정도로는 em < strong 이다.

mdn의 명세에 따르면,

구어를 강조할 때 예를 들어 'I love carrots'에서 carrot에 강조하고 싶을 때 I love <em>carrot</em> 과 같이 사용할 수 있고,

strong은 경고, 심각성, 문장의 중요성을 나타낼 때 사용할 수 있다. <strong>Warning! this is very dangerous.</strong>

요약 : em은 문맥적 강조, strong은 em의 상위 개념으로 긴급, 심각을 나타내는 구문에 사용하면 될 거 같다.

⚡️ 번외로 <i>,<b>는 강조의 의미가 없다.

6. abbr

abbr요소는 축약어를 마크업할 때 사용한다. 부연 설명에 title속성을 지정할 수 있다.
유즈케이스

<h1><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>는 웹표준을 발표했다.</h1>

7. q vs blockquote

둘 다 인용문을 나타낼 때 사용한다. 단, <blockquote>는 콘텐츠 전체를 인용할 때, <q>는 텍스트 일부를 인용할 때 사용한다.

특이사항 : <q>로 마크업한 텍스트에는 자동으로 인용부호가 삽입된다.

8. kbd

<kbd>는 사용자의 입력을 요구하는 텍스트를 마크업할 때 사용한다.

<p>
  이 텍스트를 복사하시려면 
  <kbd>command</kbd>+<kbd>c</kbd>
  를 입력해주세요.
</p>

9. dfn

dfn은 정의어를 마크업할 때 사용된다. 정의어 마크업 방법에는 총3가지가 있다.

1. dfn에 title속성 사용
2. dfn에 <abbr>요소와 title 사용
3. dfn에 정의어를 정식 명칭으로 정의

  <p>
    <dfn title="Korean Web Contents Acessibility Guideline">KWCAG</dfn>
  </p>
  
  <p>
    <dfn>
      <abbr title="Korean Web Contents Acessibility Guideline">KWCAG</abbr>
    </dfn>
  </p>
  
  <p>
    <dfn>Korean Web Contents Acessibility Guideline</dfn>
  </p>

10. ruby, rp, rt

ruby태그는 정말 처음 들어보는 것 같다..ㅎㅎ
ruby는 mdn 명세에 따르면 루비 주석을 나타낸다. 동아시아 문자의 발음을 표기할 때 사용한다.

<ruby>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

코드 실행 결과

明日 (Ashita)

마크업을 살펴보면 전체 텍스트를 ruby로 감싸고 rp,rt는 자식 요소로 존재한다. rp는 괄호, rt는 번역, 발음 등을 나타낼 때 사용한다.

11. ins

ins요소는 추가로 삽입된 콘텐츠를 의미하고, 해당 콘텐츠가 추가되었음을 표현할 때 사용한다. cite와 datetime 속성을 가지며, cite속성은 URL을 명시할 수 있다. datetime은 해당 속성을 추가한 날짜 및 시간을 설정한다.

<p>“You're late!”</p>
<del>
  <p>“I apologize for the delay.”</p>
</del>
<ins cite="../howtobeawizard.html" datetime="2018-05">
  <p>“A wizard is never late …”</p>
</ins>

12. canvas

HTML5에서 추가된 요소로, 웹 페이지에 동적으로 이미지를 그릴 수 있는 기능이다. 독립적인 플러그인(플래시)이 없어도 애니메이션의 표현이 가능해졌다는 의미이다.

시작 태그와 종료 태그 사이에 폴백 컨텐츠를 지정하여 접근성을 보장해야한다.

<canvas id="canvas" width="300" height="300">
  캔버스의 내용을 설명하는 대체 텍스트
</canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

* canvas에 관한 내용은 워낙 방대하기 때문에 추후에 다시 공부해서 포스팅 해야겠다.

13. fieldset , legend

fieldset 요소는 form요소 안에 관련 있는 폼 컨트롤들을 그룹화할 때 사용한다. legend를 사용하면 fieldset요소의 caption을 정의할 수 있다.

<form method="get">
    <fieldset>
        <legend>로그인</legend>
        로그인 : <input type="text" name="st_name">
        비밀번호 : <input type="password" name="password"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>

fieldset의 속성들

• disabled : fieldset요소에 포함된 form 요소들을 비활성화 함.
• form : form 요소에 id 값을 할당하고 form 특성에 그 값을 주면 filedset과 form요소는 연결된다.
• name : fieldset 요소의 이름을 명시함.

14. datalist

datalist 요소는 다른 컨트롤에서 고를 수 있는 가능한 혹은 추천하는 선택지를 나타내는 option요소들을 포함한다. select와 비슷하지만 datalist는 input에 입력한 단어에 따라 보여주는 기능이 포함(?)되어 있다.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

15. progress

작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띈다.

<label for="file">File progress:</label>

<progress id="file" max="1" value="0.7">70%</progress>

File progress:
70%

16. dialog

dialog요소는 닫을 수 있는 경고, 검사기, 모달 등 상호작용 가능한 컴포넌트를 나타낼 때 사용한다.

단, 크로스브라우징 측면에서 좋지 않으니 잘 사용하길 바란다.

[참고]
1. https://dogleg.co.kr/?p=574
2. https://webdir.tistory.com/322
3. MDN
4. 웹 표준 핵심가이드북2