happy cat image

everdevel

우리 모두의 웹 입문, 에버디벨

UI 변경

HTML 시작하기

HTML은 웹개발에 있어 기본으로 알아야 할 언어 입니다.
웹페이지를 구성하는데 기본이자 가장 중요한 역할을 합니다.
웹페이지는 하나의 문서로 볼 수 있습니다.
일반적인 책을 보면 글과 이미지 등으로 구성이되며, 글에는 제목이 있고 문장이 있습니다.
HTML을 사용하면 글의 제목을 구성하고 문장을 구성할 수 있으며, 리스트와 이미지 등도 구성가능 합니다. 웹에서 보는 문서인만큼 비디오 또한 재생이 가능합니다.
그리고 링크를 사용해서 다른 페이지로 훌쩍 이동도 가능합니다.
다음은 HTML의 기본 구조 입니다.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

각 태그는 <태그명>으로 시작하여 </태그명>으로 끝나며 모두 다 그런것은 아닙니다.

<img />나 <br /> 태그등과 같은 단독 태그를 제외 하고는 거의 대부분의 태그들은 위와같은 법칙을 같습니다.

단독 태그는 끝에 /를 붙이고 닫아야 합니다. 예를 들어 <img src="url" /> 와 같이 사용 합니다.

지금은 무슨말인지 잘 모르실수 있습니다. 그냥 넘어 갑니다. ^^

<!DOCTYPE html>

이것은 HTML의 문서 타입을 의미합니다. 그리고 의미는 HTML5를 사용한다는 의미입니다. 5는 버젼을 의미합니다.
지금은 HTML5의 시대이므로 위와 같이 문서타입을 작성합니다.
그리고 title태그는 웹페이지의 제목을 의미합니다. 예를 들어 규동을 만드는 요리에 관한 페이지를 작성한다면 제목을 규동만들기와 같이 작성하면 됩니다.

<title>규동만들기</title>

네이버를 접속해 보시면 브라우저 탭에 NAVER 라는 글씨가 보일것입니다. 이것은 네이버의 웹페이지를 구성하는 프론트엔드 개발자가 다음과 같이 head태그안에 있는 title태그의 내용을 다음과 같이 작성했기 때문입니다.

<title>NAVER</title>

그외에도 문자 인코딩 이라든지 자바스크립트,스타일시트등을 넣는데요 나중에 차차 알아갑시다.
처음부터 이것저것 하면 머리 아파서 금방 포기하게 됩니다. body 태그에는 실질적인 홈페이지에 출력될 내용을 넣습니다.
웹브라우저에 안녕하세요를 출력하고 싶다면 저 body문안에 안녕하세요를 적으면 되는것이죠.^^

<!DOCTYPE html>
<html>
<head>
<title>에버디벨</title>
</head>
<body>
안녕하세요.
</body>
</html>

그럼 이것으로 html소개는 마치고 강좌로 넘어 가도록 하겠습니다.

강좌로 돌아가기