HTML과 태그

HTML과 태그에 대해서 알아보도록 하겠습니다. HTML을 이용하면 자신이 원하는 콘텐츠를 웹상에 표기하는 것이 가능합니다. 저번 시간에 Hello world라는 글을 편집기를 통해서 웹상에 표기하는 작업을 했었습니다. 이번에는 좀 더 긴 문자를 편집기에 입력하고 이를 웹상에 표시해 보도록 하겠습니다. 저는 임의로 제가 원하는 글을 적었으니 여러분들도 자신이 원하는 내용을 작성하시면 될 것 같습니다. 우선 아톰 편집기를 열어서 내용을 작성합니다.

오른쪽에 아톰 편집기를 이용해서 작성한것이 HTML이라는 문법에 맞게 작성된 코드이고 원인입니다. 이 원인에 의해서 왼쪽 웹 상에 결과로 콘텐츠가 표시되어 나오게 되는 것입니다.  그런데 왼쪽을 보면 만족스럽지 않아 하실분이 계실지도 모르겠습니다. 그냥 텍스트를 나열해 놓은 것에 불과하기 때문에 우리는 변화를 주고 싶습니다. 그래서 우리는 태그라는 기본 문법이 필요합니다. 우선 조금 손을 보도록 하겠습니다. 

우리는 TAG에 대해서 이미 알고 있습니다. 옷가게에 가면 꼭 하나씩 붙어있는 것이 우리가 알고 있는 태그입니다. 태그는 그 옷의 가격, 소재, 원산지 등을 설명하는 역할을 합니다. 바로 위에 사진을 보면서 태그에 대해서 알아보도록 하겠습니다. 첫 번째, 두 번째, 세 번째, 네 번째를 <strong>이라는 태그로 감싸고 있습니다. 이 strong태그는 중간에 있는 글자들이 중요하니깐 진하게 표시해 달라는 태크입니다. 만약 자신이 강조하고 싶은 단어나 문장이 있으면 이렇게 strong태그를 이용하면 되겠습니다. 어떤 글이든 제목이 필요합니다. 뉴스에 있는 헤드라인을 생각해보시면 헤드라인은 눈에 잘보이고 강조가 됩니다. h태그를 사용하면 헤드라인을 만들 수 있습니다. h태그는 1부터 6까지 그 크기가 다양한 헤드라인을 만들 수가 있습니다. 참고로 숫자가 커질 수록 헤드라인의 글자 크기는 줄어드는 효과가 있습니다. ul태그는 순번이 없는 목록을 나타냅니다. 여기서는 줄바꿈 처럼 보이지만 실제로 줄을 바꿀때 사용하는 태그는 p나 br이 있으므로 참고하시면 될 것같습니다.

HTML을 이용하면 이렇게 자신이 원하는 콘텐츠를 웹상에 표기가 가능합니다. 그런데 오늘 한 작업은 글자 크기를 키우고 진하게 하는 등에 일을 하였습니다. 그런데 이런 작업은 블로그 상에서 글자를 진하게 하거나 키우면 바로 가능한 일입니다. 그렇다면 이렇게 블로그에서 글자를 작업한 것이랑 HTML을 이용해서 작업한것은 어떠한 차이가 있는지 알아보겠습니다. 그것은 바로 정보의 차이입니다. 그냥 글자를 키우는 것 보단 h태그를 이요하면 이 글은 헤드라인으로 사용되며 중요한 글이라는 정보를 가지고 있습니다. 이러한 정보를 가진 HTML로 작업이 되어진 코드들로 이루어진 웹은 검색 엔진에서 아주 유리한 위치를 차지한다고 볼 수 있습니다. 정보화시대에서 검색 엔진에서 유리하다는 것은 매우 큰 강점을 가지고 있는 것이며 이는 HTML이 중요하다는 것을 의미합니다.