이번 강좌에서는 HTML문서의 기본 구조와 문서 내 에서 자주쓰이는 태그에 대해서 알아보겠습니다. 이번 강좌는 단순 개인 웹페이지 뿐만 아니라 업무에서도 자주 사용되므로 잘 외어두거나 북마크, 혹은 필기해두는걸 추천합니다.

HTML 문서의 구조

저번까지는 HTML요소에 대해서 봐왔습니다. 이제부터는, 지금까지 배워온 요소들을 조합해서, HTML전체를 만들어가도록 하겠습니다.일단, 본문으로 들어가기전에 HTML문서의 기본구성에서 다루었던 소스를 한번더 보도록 하죠.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
   Hello World!
  </body>
</html>

아마, 저번장까지 제대로 공부를 하셨던 분이라면개시태그,종료태그,컨텐츠,속성으로 이 소스가 구성되어 있음을 알수 있을것입니다.
일단, 위의 소스를 업로드 해놓겠습니다만, 가능하면 자신의 손으로 위의 소스를 타이핑 해가면서 개시태그, 종료태그, 컨텐츠, 속성에 대하여 복습하는것을 추천드립니다.
본격적인 설명을 위해 위의소스의 각 요소마다의 역할을 설명하겠습니다.

  • <!DOCTYPE html> – 문서의 선언문 입니다. 옛날에 HTML이 아직 만들어진 직후에는 문서이 타입을 확인을 하기위한 목적이었지만, 지금은 움직이기 위한 옛날의 위산이 되어버렸습니다.
  • <html></html> – 이 요소는 페이지에서 모든 컨텐츠를 감싸며, 루트 요소라 불립니다.
  • <head></head> – 이 요소는 검색엔진을 위한 키워드나 설명서, 페이지의 모습이나 기능을 변경하기 위해 CSS, JavaScript, 문자 코드 정보를 입력하는 곳입니다.
  • <title></title> – 페이지의 타이틀을 지정합니다. 이 태그안의 문자열컨텐츠는 탭에 표시되며 북마크에 등록했을때의 이름이 됩니다.(현재 위의소스 에서는「My test page」라 표시되고 있지만, 자신의 이름을 입력하거나 갑자기 떠오른 문장을 입력하며 변화를 관찰하는것으로 배우는것도 좋은 방법이라 생각합니다.)
  • <body></body> – 페이지를 관람하는 사람에게 보여주는 내용이 포함되어 있습니다. 문자, 이미지, 동영상, 게임, 음악등 어떤것이든지 표현할수 있습니다.

자주 쓰이는 태그

HTML사전등 태그를 설명하고 있는 페이지를 보면 대략의 요소에 대하여 설명하고 있습니다. 다만, 실제로 사용하는 소스는 적음으로 여기서는 대표적인 몇가지 태그에 대해서만 설명 하겠습니다.

태그명용도
h1강조1 (heading 1)

h2

강조2 (heading 2)
h3강조3 (heading 3)
p단락 (paragraph)
div그룹화
span텍스트의 일부
ul리스트 (unordered list)
ol번호 지정 리스트(ordered list)
li 리스트 항목(listitem)
img이미지 (image)
br개행 (break)
button버튼
input입력란
a문서간의 링크 기술(anchor)
table테이블
tr테이블의 행
td테이블의 열

옛날에는 여러가지 태그를 구사하여, 페이지를 맵시있게 꾸미는게 유행이었지만, 최근에는 CSS파일을 사용하여 조정하는 방법이 주류가 되었습니다.
참고로, 태그는 사용하고 있는 와중에 자연히 외우는 것입니다. 그러므로 다음장부터 각 태그를 사용해 예문을 하나하나 만들어 가면서 습득해 가도록 합시다.

Web개발 – 처음하는 HTML

프로그래밍 강좌 메인