'TAG'에 해당되는 글 1

  1. 2009.12.14 HTML 4
2009. 12. 14. 16:00 | 개발이야기

지난주의 포스팅은 주로 CSS 그것도 요소의 레이아웃에 대한 이야기를 주로 했었는데요,
아는분들은 알지만, 모르시는분들은 "이놈이 무슨 이야기를 하는건가..." 하셨을겁니다 ^^;

사실 별 생각없이 포스팅을 한건데,
CSS 이미지 스프라이팅(2009/12/07 - [개발이야기] - CSS Sprite 를 이용한 간단한 롤오버 메뉴)을 포스팅한게
시작으로 탄력받아(일명 삘받는다 그러죠?) 작성하게 되었습니다. ^^;

이번부터는 차근차근 처음부터 짚어가도록 할테니 잘 살펴 봐주세요~


HTML (Hyper Text Markup Language) 란?

쉽게 생각하면 우리가 인터넷(WWW)에서 사용하는 웹페이지를 만드는 컴퓨터 '언어' 라고 생각하면 됩니다.
말 뜻대로 하이퍼텍스트를 표현하기 위한 '마크업 언어' 인데요, 마크업 언어란 문서의 구조를 표현하기 위한 언어로
일련의 요소(Element)들을 나열함으로 표현합니다.
뭔가 좀 어려운가요? ^^; 쉽게 풀면.. HTML 태그로 이루어진 문서라고 보시면 되겠습니다.


Tag 란?

위에도 알려드렸지만, HTML에서 문서의 구조를 표현하기 위해 해당 부분의 의미를 알려주는 녀석입니다.
비유를 하자면, 흔히 옷사러갈때 보는 가격태그 에 비유를 하면 되는데요,
가격 태그에는 해당 옷의 브랜드, 가격, 세탁법 등이 나와 있으며 해당 옷이 어떤 섬유로 만들어졌는지
정보를 알려줍니다.. ^^ 이와 마찬가지로 웹문서에서 HTML 태그는,
해당부분이 어떤 부분인지 (제목인지, 문단인지, 인용문구인지)를 정의하는 역할을 합니다.

이 태그들 중에는 혼자가 되어 그 역할을 하는 태그(단독태그),
시작과 끝으로 범위를 나타내는 태그(복합태그)가 있습니다.
단독 태그에는 <br>(line BReak)태그, <img>(image)태그 등 과같이 홀로 쓰이는 태그가 있고,
복합 태그에는 <p>(Paragraph)태그, <hn>(Headline n)태그 등이 있습니다.

문단처럼 문단의 시작과 끝이 있어 그 범위를 알려줘야 하는 부분의 경우엔 복합태그의 형태로 사용하고
이미지처럼 단순히 해당 이미지 하나를 보여줘야 하는 부분의 경우엔 단독태그의 형태로 사용합니다.
복합태그에는 시작태그와 종료태그가 있는데, 위의 예에 나온 p태그를 예로 들면,
<p>는 시작태그에 들어가고, </p>는 이 태그가 끝나는 종료태그로 보면 됩니다. ^^
즉, <p>~</p> 사이에 해당하는 문단을 넣으면 그부분은 브라우저가 문단 이라고 판단하여
웹문서에서 해당 부분을 문단으로 보여주게 됩니다.


하이퍼텍스트란?

결론부터 말씀드리자면 하이퍼텍스트는 웹문서에서 다른 매체(웹문서, 이미지, 영상 등)으로 이동하게끔 하는
기능을 제공하는것을 의미합니다. 
원래 기본 개념은 텍스트와 텍스트를 연결하여 서로 건너뛰기식의 이동(링크)을 제공하는 개념입니다.
하이퍼링크 라고도 하는데요, 이러한 기능이 인터넷에서 World Wide Web 환경으로 들어오면서
일련의 정보에 대한 연관정보들을 한번에 제공할 수 있어 각광받게된 기능입니다. ^^


HTML문서를 어떻게 화면으로 보여지는지?

통신세계에선 규약(Protocol)이라는 녀석이 있습니다.
즉, 서로의 통신방법을 미리 약속을 해 두고 해당 방법으로 통신을 하는 것이지요.

이게 HTML에서도 적용이 됩니다. 이러한 HTML에서 사용되는 일련의 명령들(태그)에 대한 표준을
관리하고 배포하는 기관이 있는데요 그곳이 바로 w3c(World Wide Web Consortium) 이라는 단체입니다.
이곳에서 HTML에 대한 규격을 결정하면 그 규격에 맞춰 브라우저들을 만들게 되고
우리가 작성한 HTML문서는 브라우저에 의해서 규격에 맞게끔 보여지게 되는겁니다. ^^
(이러한 브라우저가 HTML을 해석하고 보여주는 것을 렌더링 이라고 합니다)

실제로 이런 규격에 대한 버전에 여러 개 있는데요, 현재 HTML 5가 꿈틀대고 있답니다 ^^


웹 표준, 웹 접근성이란?

웹 표준이란 w3c에서 만들어놓은 태그를 사용하는 표준 '권고안'을 뜻합니다.
요즘 웹 표준 준수 운동이 큰 이슈인데요 이는, 표준태그 만을 사용해서 웹문서를 만들자는 이야기입니다.
특정 브라우저에서만 보여 질 수 있는 태그를 사용하여 다른 브라우저를 사용하는 유저들의 접근성을 제한하지 않고
표준 태그를 사용하여 많은 브라우저, 많은 플랫폼에서 기능에 제약없이 사용하게끔 하는 내용입니다.

사실, 이러한 웹 표준을 잘 준수하면 웹 접근성이 어느정도 따라 오게 되어있는데요..
이전의 국내 웹 환경은 표를 만들어서 보여지는 <table>태그를 이용하여 웹문서의 레이아웃을 만들었었습니다.
즉, 지금 보는 블로그 화면을 기준으로, 상단에 셀 하나, 중간에 셀 두개, 하단에 셀 하나를 놓고
해당부분에 맞는 내용을 넣곤 했다는 것이지요.. 

이러한 방법은 <table>태그 본연의 기능에서 벗어난 사용이기 때문에 웹 표준에서 벗어나는 일입니다.
이것이 어떻게 웹 접근성과 관련이 있느냐...
웹 접근성은 장애인 비장애인 할 것 없이 누구나 편하게 웹을 쓸 수 있도록 하는 것을 말하는데요
만약, 스크린 리더를 이용하여 웹서핑을 하는 입장에서 봤을때 위의 <table>을 이용한 레이아웃은
스크린 리더가 해당부분을 표의 한 내용으로 안내를 하게 될 것입니다..
사실상 해당 부분 눈으로 보는것은 표가 아닌데 말이죠..

종합해서 쉽게 말하자면 웹 표준, 웹 접근성이란
사람(장애인-비장애인)에 차별 없이, 사용하는 시스템(OS, 브라우저 등)에 차별없이
누구나 웹을 이용할 수 있도록
 
하는 내용을 담고 있다고 보시면 되겠습니다. ^^

딱딱하게 글만 너무 길어졌네요...
정리를 해보자면,

요약.

1. HTML이란? 하이퍼텍스트를 나타내기위한 마크업 언어로 일련의 태그로 이루어져있음.
2. 태그란? 문서의 구조를 표현하기 위해 문서 부분부분을 정의해주는 명령어
3. 하이퍼텍스트란? 문서에서 각 부분부분으로 이동할 수 있도록 해주는 기능 (링크)
4. 웹표준, 웹 접근성이란? 누구나 편하게 웹을 이용할수 있도록 하는 문서 작성에 대한 권고안 


이상입니다.. ^^
다음번에는 HTML문서의 기본적인 구조와 DTD선언, HTML에디터를 소개 해드리도록 하겠습니다 :)


'개발이야기' 카테고리의 다른 글

HTML - HEAD 태그  (4) 2010.10.02
HTML 기본 구조  (2) 2009.12.15
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09