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

HTML 초급 정리

최초 작성일
최종 수정일
이번 시간에는...
HTML 기초과정에서 배운 내용을 토대로, 블로그 같은 문서를 보다 의미에 맞게 태그를 사용하는 방법을 살펴봅니다. 이런 체계적인 글쓰기로 웹 페이지를 검색 엔진에 보다 최적화 시킬 수 있습니다.

지난 강의 까지 HTML의 초급을 다뤄봤습니다. 이 요소들을 하나하나 보면서 실제로 꾸며지는 것은 아니라서 흥미를 못 느꼈을지 모르겠습니다.

비록 여러분들이 만약 여기까지만 살펴보고 관둔다 하더라도... (그러지 않기를 바랍니다만) 이 초급 강좌가 무의미한 것이 아닙니다. 이 초급이라는 단계는 단지 제가 나누었을 뿐이지, 실제로 HTML 마크 업을 하면서 주로 사용되는 요소들은 거의 다 배웠습니다.

또한 초급과정에서 배운 마크 업을 통한, 문서의 개요와 의미는 여러분이 블로그를 포스팅 하더라도 좀 더 의미 있게 작성할 수 있습니다. 그만큼 검색엔진에 최적화 될 수 있다는 것이고요. 국내 네이버나 다음의 에디터 같은 경우는 그런 옵션이 없지만, 워드프레스 같은 외국 블로그 에디터 같은 경우는 제목으로 문서 개요를 잡아 줄 수 있습니다. 국내의 에디터라도 HTML 편집으로 얼마든 의미 있게 넣어줄 수 있습니다.

워드프레스의 글쓰기 페이지 모습
워드프레스에서 글쓰기를 할 때 요소를 선택할 수 있습니다.

그리고 꼭 웹 페이지가 아니더라도, 대부분의 워드프로세스 프로그램에서 문서를 작성 할 때에 문서구조를 나타낼 수 있습니다. 이러한 문서 구조가 헤드라인 요소와 같은 방식입니다. 문서구조를 염두해주면서 글을 쓰시면, 문서를 더 체계적으로 글을 작성하실 수 있으실 겁니다.

MS워드에서 제목형식을 준 모습
MS워드에서 제목형식을 이용해서 문서개요를 나타낼 수 있습니다.

그럼 마지막으로 여태까지 본 내용을 토대로 아래 글을 마크 업 해보도록 하겠습니다. 맛집 기행 포스트입니다.

30년의 맛 그대로, 웨버 순대국밥

글쓴이 : 맛집킬러


서론

오늘은 보슬보슬 비가오는 날씨입니다. 이런 날이면 이상하게 진한 순대 국물이 생각이 납니다.

마침 친구가 근처 유명한 국밥집이 있다하여 오늘의 맛집, 웨버 순대국밥을 찾아가 보았습니다.


식당 내부

이 국밥집은 30년 동안 이어온 전통 때문인지, 옛날 시골집 같은 느낌을 줍니다. 노란 방바닥이 시골집의 향수를 자극합니다.


메뉴

  • 순대국밥
  • 순대

이 곳의 메뉴는 오직 두 가지입니다. 역시 주인장의 자부심이 느껴지는 메뉴입니다.

음식 평가

외형

팔팔 끓는 순대국밥

먼가 담백하게 담긴 순대의 모습이 아주 보기 좋습니다.

머라 표현해야 할까요......

마치... 걸레 같습니다. 이런 맛은 난생 처음입니다. 먹으면서 몇 번이고 헛구역질을 했습니다.

결론

기가 막힙니다. 다신 안온다. 퉷.

물론 실제로 포스팅을 할 때는 위에처럼 매번 일일히 태그를 써가면서 작성하기는 힘들 것입니다. 이런 제목이나 문단 같은 경우는 보통 에디터에서 자동으로 넣어주기 때문에, 여러분들은 에디터에서 사용하는 것이 어떠한 요소인지만 알고 포스팅을 하면 될 것입니다. 이런 실질적인 소스 제작은 직접 홈페이지를 제작하거나, 설치형 서비스의 테마를 만들 때 작업하시면 됩니다.

그럼 다음 CSS 강좌부터 본격적으로 웹 페이지를 꾸며보도록 하겠습니다.

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