본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

사용하지 말아야 할 요소들

최초 작성일
최종 수정일
이번 시간에는...
예전 HTML 강의에서 접했던 태그들 중에 지금은 폐기되었거나, 앞으로 지양해야할 태그들을 다룹니다. 보통 외형을 표현하는 태그들로 font, center, big, small, i, b, s같은 태그와 blink나 marquee같이 페이지를 산만하게 만드는 태그들을 살펴봅니다.

이번 강의는 조금 특이하게 사용하지 말아야 할 요소들을 살펴봅니다. 사용하지 말아야 할 요소들은 과거에는 쓰였지만, 지금은 거의 쓰지 않는 요소들, 또한 웹 표준의 의미와 외형의 분리에 반하는 요소들 몇 가지를 살펴봅니다.

이 강의 내용은 이런 요소들도 있었구나 정도로만 이해하시고 넘어가시면 됩니다. 또한 쓰지도 않을 거, 봐서 뭐하나 싶으신 분들은 그냥 다음 강의로 넘어 가셔도 됩니다.

여기서 다루는 요소들은 크게 절대 쓰지 말아야 할 요소들과, 실질적으로 종종 사용할 수 있지만 사용을 지양해야 할 요소들로 나누어 보겠습니다. 여기서 등장하는 요소들의 대부분은 Strict 타입의 문서에서 허용되지 않습니다.

절대 쓰지 말아야 할 요소들

font

글씨 크기와 색깔, 서체를 지정할 수 있는 요소입니다. 물론 이는 CSS에서 color, font-size, font-family로 지정해야 하므로, 사용하면 안됩니다.

이러한 요소들은 웹을 처음 접하는 초보자들에게도 혼란만을 가져다 줄 뿐입니다.

center

문단을 가운데 정렬 시키는 요소입니다. CSS의 'text-align:center'를 사용하시기 바랍니다.

blink 와 marquee

이 두 가지 요소는 일단 아예 비 표준 요소입니다. 그리고 앞의 요소 그 무엇보다도 절대 사용해선 안 되는 요소입니다.

blink 요소는 깜빡이는 효과를 주는 요소이고, marquee 요소는 텍스트를 수평 또는 수직으로 흐르게 애니메이션 효과를 주는 요소입니다.

이 두 요소는 웹 페이지를 몹시 산만하게 만들며, 광과민성 발작 증세가 있는 사용자에게 발작을 일으킬 수도 있습니다. 게다가 이 두 요소는 ESC키를 누르더라도 멈추지 않습니다.

절대 사용하지 마시기 바랍니다.

사용을 지양해야 할 요소들

iframe

아이프레임은 프레임을 만들어 그 안에 다른 웹 페이지를 보여줄 수 있는 요소입니다. 프레임셋과 비슷하지만, 아이프레임은 그나마 문서 내부로 인식합니다.

아무래도 별개의 웹 페이지로 보여주면, 해당 프레임 내에서는 CSS나 자바스크립트의 영향을 받지 않기 때문에, 많은 웹 서비스가 이 iframe 요소를 종종 자주 사용합니다. (이 사이트에서도 예시 페이지 같은 경우에 iframe을 사용합니다.)

하지만, 이 iframe은 검색엔진과 접근성에 있어서 좋지 못하기 때문에, 예시 같이 굳이 내용에 없어도 되는 부분이 아니라면, 다시 말해 페이지의 중요한 내용이라면 사용하지 않는 것이 좋습니다.

big 과 small

이 요소는 이름 그대로 글자를 크게 해주거나, 작게 해주는 요소입니다. 당연히 CSS에서 font-size로 지정해야 합니다.

다만 small 요소의 경우, HTML5에서 남아있는데, 저작권 같은 것들을 표현하는데 쓰이게 됩니다. 하지만, 현재의 html 4.01이나 xhtml 같은 경우에는 자제하는 것이 좋습니다.

참고로 big 요소는 html5에서 아예 폐기 되었습니다. 문구를 강조하기 위해서라면, strong이나 em을 사용하시기 바랍니다.

i, b, s

이 소문자 한 글자짜리 요소들은 각각 i : Italic(이텔릭), b : Bold (굵게), s : Strike (취소 선)을 나타내는 요소들 입니다.

이 요소들은 HTML5에서 유지되며 대부분 새로운 의미를 갖게 되었지만, HTML 4.01과 XTML에서는 아무런 의미를 가지고 있지 않습니다. 이 중에서 s요소 같은 경우는 strict 모드에서 아예 비 표준입니다.

각각 의미에 맞는 요소들, em(i에 대응), strong(b에 대응), del(s에 대응)으로 사용하시는 것이 좋습니다.

아마 HTML5에서도 i, b, s 보다는 em, strong, del이 더 적절한 경우가 많을 것입니다.

요점 정리
  • 외형적인 역할을 담은 font, center 같은 태그는 CSS로 처리해야 함.
  • blink, marquee 같은 태그는 페이지를 산만하게 만들고 강박장애 등을 일으킬 수 있으므로, 절대 사용 금지.
  • iframe으로 페이지를 넣을 경우, 검색엔진이나 스크린리더의 접근이 어려울 수 있으므로, 부득이한 경우가 아니면 지양할 것.
  • big과 small은 외형적인 태그. CSS 처리 권장
  • i, b, s는 보다 의미있는 em, strong, del 요소로 사용 권장

이 글이 유용하셨다면 친구들에게 공유 해주세요.