웹 페이지를 만들려면

우리가 흔히 홈페이지(웹페이지, 웹문서라고도 합니다)라고 하는 것은 내부적으로는 수많은 다양한 언어와 기술로 이루어져 있지만, 피상적인것만 보자면 HTML과 CSS로 이루어져있고, 한단계 더 들어가자면 Javascript, jQuery 정도가 있습니다.

HTML은 웹페이지의 뼈대를 이루는 구조를, CSS는 용도에 맞는 외양을, Javascript나 jQuery는 편리한 작동이나 화려한 동작을 나타낸다고 할 수 있습니다.

따라서 가장 기본적인 웹페이지의 뼈대(HTML)는 어떻게 구성되고 어떤 법칙에 의해 이루어지는지 알 필요가 있습니다.

기본적으로 웹페이지는 여기서부터 시작됩니다. ↓↓↓
(온라인상의 거의 모든 웹페이지는 다음과 같은 구조입니다.)

<!DOCTYPE html>
<html>
    <head>
        <title>웹페이지의 제목</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        웹페이지의 내용이 들어가는 부분.
    </body>
</html>

<!DOCTYPE html>

이 부분은 html5를 문서타입으로 하겠다고 선언한 부분인데 입문자들은 이 정도만 알고 그냥 넘어가셔도 될 것 같습니다. 혹시 자세하게 알고 싶다면 이고잉님의 DTD강의를 보세요.

<head> ...</head>

문서의 타이틀이나 메타태그, 캐릭터셋, CSS링크등을 선언하는 영역입니다. 이 영역은 사용자들에게 직접 보여지는 부분은 아니지만, 문서에 대한 정보를 설명하는 메타정보를 담고 있습니다.

간단하게 꼭 중요한 몇가지만 살펴보겠습니다.

<title> ...</title> 안에 텍스트를 작성하게 되면 브라우저 창의 상단이나 탭에 출력이 됩니다. 검색 결과에도 노출되는 부분이므로 신경써서 작성하는 것이 좋습니다.

<link rel="stylesheet" href="../css/style.css" /> 이 부분은...
문서에 어떤 옷을 입힐지를 연결시켜줍니다. rel은 어떤 성격의 파일인지를 나타내며 href는 연결시킬 파일의 경로를 나타냅니다.

<body>...</body>

사용자에게 보여지는 웹페이지의 내용 자체를 담아내는 태그입니다.
앞으로는 주로 이 태그 안에 사용되는 앨리먼트를 위주로 설명할 것입니다.

<!DOCTYPE html>

<head> ...</head>

<body>...</body>

댓글