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

HTML 시작하기

최초 작성일
최종 수정일
이번 시간에는...
HTML을 처음 접하는 초보자들을 위해, 처음으로 직접 따라하며 만들어보는 HTML 페이지. html, head, body 태그에 대해 알아보고, HTML 코드의 들여쓰기와 줄 바꿈에 대해 알아 봅니다.

HTML 만들어 보기

마크 업의 기본 어법을 알게 되었으니, 이제 짧게 맛보는 차원에서 HTML파일을 실제로 한번 제작해보도록 하겠습니다. 여러분들의 텍스트 에디터를 실행해 주세요.

에디터를 실행하고 처음 쓸 준비가 되어있다면 첫 줄에 아래의 코드를 입력합니다.

이것은 브라우저에게 이 문서의 타입이 HTML 웹 페이지라고 선언하는 문장입니다. 일단은 그냥 그대로 쓰고 넘어 가도록 합니다.

그 다음, 아래의 내용을 추가시킵니다.

방금 작성하신 것은 html태그로 모든 내용은 html태그 안에 작성이 됩니다. 이제 그 다음 내용을 추가해주세요.

이번엔 html태그 안에 head와 body태그를 넣었습니다.

일단 여기서 한가지 태그의 기본 어법을 하나 알 수 있는데요, 바로 이와 같이 태그 안에 태그를 넣을 수 있습니다.

head태그는 웹 페이지에서 보이지 않는 정보들을 담는 영역입니다.

body태그는 웹 페이지에 직접적으로 보이는 내용들이 들어갑니다. 웹 페이지의 내용은 모두 이 body태그안에 들어갑니다.

자 이제 안에 내용을 더 추가해보겠습니다.

축하합니다. 방금 여러분은 가장 기본적인 웹 페이지를 만드는데 성공했습니다. 이제 저장하기를 눌러서 first.html으로 저장해봅시다. (파일 명은 아무거나 하셔도 상관없습니다. 확장자 ‘.html’은 지켜주세요.)

이제 저장에 성공하셨다면 해당 파일을 웹 브라우저에서 열어보세요. (파일을 더블클릭 하거나, 파일을 웹 브라우저로 끌면 확인하실 수 있습니다.)

확인해 보시면, title태그에 넣었던 '나의 첫 홈페이지'라는 글은 브라우저의 탭에 나타나고, body태그에 넣었던 내용들이 웹 페이지에서 보여지는 것을 알 수 있습니다.

만약 작성 후 글씨가 깨져보인다면, 문자셋 오류 관련 포스트를 확인해보세요.

나의 첫 홈페이지
/attach/demo/intro-first.html
모바일의 경우 새창열기로 확인 가능합니다.
새창열기

줄 바꿈, 들여쓰기

하지만 웹 페이지에 보여지는 모습이 뭔가 이상합니다.

분명 소스상에서 'Hello World!' 다음 줄에 '나의 첫 홈페이지...'가 들어가 있는데, 웹 페이지상에선 줄 바꿈이 일어나지 않습니다. 여러분이 소스상에서 아무리 많은 엔터키(Enter)를 입력하더라도, 웹 페이지에서는 그저 한 줄입니다. 또한 여러분이 단어 사이에 스페이스를 무한히 눌러도, 웹 페이지에서는 그저 한 칸만 벌어집니다. 대체 왜 이럴까요?

이 부분에 대한 설명을 위해서, 먼저 소스의 들여쓰기부터 살펴보도록 하겠습니다.

앞서 말씀 드렸던 것처럼 태그 안에는 또 다른 태그가 들어갈 수 있습니다. 그리고 여러분이 앞으로 소스를 작성 하다 보면 많은 태그들을 중첩시키게 될 것입니다. 그런데 여러분이 만약 소스를 정리 안하고 작성을 하다 보면 어떤 일이 일어나게 될까요? 아래를 확인해보도록 하죠.

위의 소스는 전혀 잘못된 소스가 아닙니다. 또한 아까의 코드 내용과 똑같이 화면에 출력됩니다. 하지만, 그 사실을 떠나서 일단 여러분부터가 이 소스를 읽기가 힘듭니다. 대체 저 태그가 어느 태그 안에 있는지, 저 태그가 제대로 닫히긴 한 건지 확인하기가 매우 힘들어집니다.

그래서 HTML을 작성할 때에 강제하진 않지만, 관습적으로 들여쓰기를 사용합니다. 안에 들어간 태그는 바깥태그보다 한 단계씩 더 들여쓰기를 합니다. 이 들여쓰기 공간은 탭(tab) 또는 스페이스(space)로 공백을 주며, 그 공백을 얼마나 줄지는 여러분 마음입니다. 다만, 읽기 편하고, 일관성 있게 주세요. 또한 아래와 같이 짧은 내용의 경우는 한 줄 안에 써도 상관없습니다.

자 이제, 왜 아까 줄 바꿈이 일어나지 않았는지를 살펴보도록 하겠습니다. 아래 소스를 보시죠. 이해를 돕기 위해 태그와 내용을 좀 더 추가했습니다.

일단 여러분이 처음 보는 태그들이 약간 있는데요, 일단 태그들의 의미는 일단 넘어가시고 태그들이 중첩되었다는 것만 이해하세요. 이 코드는 아래와 같은 형태로 보이는 것이 정상입니다.

내 첫 홈페이지
나의 첫 홈페이지를 소개합니다.
이 홈페이지는 아직은 아무것도 없습니다만, 앞으로 더 많은 것을 배우면서 멋진 홈페이지로 새로 태어나겠습니다. 감사합니다.

하지만, 만약 줄 바꿈과 공백 등을 그대로 보여준다면 아마 아래와 같이 출력될 것입니다.

내 첫 홈페이지 나의 첫 홈페이지를 소개합니다.
이 홈페이지는 아직은 아무것도 없습니다만, 앞으로 더 많은 것을 배우면서 멋진 홈페이지로 새로 태어나겠습니다. 감사합니다.

여러분이 원하는 결과는 이게 아니었으리라 생각됩니다. 그래도 이를 통해서 궁금증이 좀 해결됐기를 바랍니다.

그렇다면, 본문에서 줄 바꿈을 하기 위해서는 어떻게 해야 할까요? 이럴 때 사용하는 태그를 한가지 소개합니다. 바로 br태그입니다.

이 태그는 다른 태그들과 조금 다른 모습을 띄고 있습니다. 태그가 열리고 닫음이 없이 스스로 /로 끝이 납니다. 왜냐하면 이런 태그는 감싸야 할 내용이 없기 때문입니다. 이러한 태그를 '스스로 닫는 태그 (Self Closing Tag)'라고 합니다. 이런 종류의 태그가 몇 개 더 있지만, 일단 HTML을 맛보는 일은 여기까지 하겠습니다.

이제 CSS를 살짝 살펴보도록 하죠.

요점 정리
  • 태그와 태그는 중첩될 수 있음.
  • !doctype을 첫번째 줄에 선언.
  • html 태그는 페이지 전체를 감싸안음
  • head 태그 안에는 해당 페이지의 보이지 않는 정보들 위치
  • body 태그 안에는 웹 브라우저 페이지에 보여지는 정보들 위치
  • 소스 내 줄바꿈과 들여쓰기로 태그의 중첩 등을 보기 쉽게 표현
  • 대신 보여지는 페이지 내의 줄바꿈과 들여쓰기는 다른 방식으로 표현

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