나의 첫번째 웹사이트 만들기 #4
HTML 문서 만들기
이제 실제 내가 전달하고자 하는 정보를 담은 웹문서를 html언어로 만들어서 웹서버에 올려보는 것을 해보겠습니다.
[시리즈 목차]
#4 HTML 문서 만들기
앞서 말씀드린 것처럼 우리가 크롬이나 익스플로러와 같은 브라우저로 보는 모든 인터넷 페이지는 HTML로 만들어진 문서입니다. 우리가 나만의 웹 문서, 웹사이트를 만든다고 할 때 역시 HTML로 만들어야 합니다.
이 글의 목적이 HTML 언어를 배우는 것이 아니므로 아주 간단한 구조의 웹 페이지를 만들어 보겠습니다.
먼저 HTML 문서의 구조를 알아야 합니다. 웹 문서는 웹 표준을 준수해서 만드는 것이 아주 중요합니다. HTML의 기본 구조는 다음과 같습니다.
HTML 문서의 구조가장 기본이 되는 구조입니다. 먼저 <!Doctype html>로 이 문서가 HTML로 만들어졌다는 것을 선언하고 <html></html> 태그 안에 <head></head>와 <body></body>가 들어가는 구조입니다.
HTML은 태그로 이루어져 있습니다. 태그는 ‘<’ 와 ’>’ 와 같은 꺾쇠로 사용되며 여는 태그와 닫는 태그가 있으며 일부 태그는 닫는 태그가 없을 수도 있습니다.
여는 태그는 <p> 이것과 같은 것이고 닫는 태그는 </p> 이렇게 /가 붙습니다. <head>와 </head>는 각각 여는 태그와 닫는 태그로 한쌍임을 알 수 있습니다.
백문이 불여일견이고 백견이 불여일행. 이제 직접 만들어 보겠습니다. 간단한 자기소개 페이지를 만들어볼 건데요. 내용은 다음과 같은 것을 써볼 겁니다.
(예시)
자기소개서
안녕하세요. 저는 수원대학교에 재학중인 학생입니다. 내년이면 졸업을 하게 되는데요. 졸업 후에는 봉사활동을 좀 더 해볼 생각입니다. 제가 지금 하고 있거나 해보고 싶은 봉사활동을 아래에 정리해 보았습니다.
해비타트 봉사
국제난민 관련 봉사
기아 아동 후원
혹시 저와 같은 뜻이 있는 분들과 소통하고 싶어요. 제 인스타그램 팔로우 해주세요.(인스타그램 주소 : instagram.com/♡♣♩◁)
이런 글을 만들어보겠습니다.
일단 먼저 파일을 새로 만들겠습니다. 파일 이름은 index.html입니다. index 파일은 웹사이트에 접속할 때 맨 처음 보여주는 파일입니다. 이전에 1.html 문서를 볼 때 도메인 주소 끝에 1.html을 붙여서 웹 문서를 불러왔습니다. 그런데 index 파일을 쓰면 끝에 index 파일명을 붙이지 않아도 됩니다. 자동으로 이 파일이 맨 처음 보여지는 파일이라고 설정이 되어 있기 때문이에요. NppFTP에서 html 폴더에 index.html 파일을 만들어 주세요. 이 파일에다 코드를 작성하겠습니다.
먼저 head에 들어갈 내용은 title과 언어에 대한 설정입니다.
<meta charset=”utf-8”>을 넣어서 한글 콘텐츠를 uft-8 방식으로 인코딩 되게 해 줍니다. 한글 기반 사이트를 만들 때 필수적으로 넣어주세요. 그다음,
<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width,initial-scale=1">
이 두 줄은 화면 크기 제어에 대한 부분으로 당장 이해할 필요는 없습니다. charset부터 여기까지 필수적으로 넣어주세요.
다음이 <title> 태그인데 웹 문서의 제목을 설정해주는 것입니다. <title>과 </title> 사이에 이 문서의 제목을 넣어주세요. 여기에 넣은 내용은 브라우저 탭에 표시됩니다.
<title></title> 태그 내용의 반영다음은 실제 보일 내용을 작성하겠습니다. <body></body> 사이에 작성합니다. 몇 가지 태그를 알아둘 필요가 있습니다.
h태그는 헤딩 태그라 하여 제목 태그입니다. h1부터 h6까지 있습니다. 가장 순위가 높은 것이 h1이고 숫자가 낮을수록 하위에 속합니다.
p태그는 문단 태그입니다. p태그 안에 쓰이는 내용은 문단으로 인식합니다.
ul태그는 목록을 만드는 태그입니다. 단, 숫자로 표시되지 않는 목록입니다. 숫자가 표시되는 목록은 ol을 사용합니다.
목록 태그의 종류에 따른 표현ul 태그나 ol 태그는 <li> 태그로 항목을 리스트화 합니다.
a태그는 하이퍼링크를 만들어주는 태그입니다. 흔히 링크 태그라고 하죠. a태그를 사용함으로써 클릭 시 설정한 url로 이동을 시켜주게 됩니다.
이 태그들을 이용해 예시 글을 html문서로 만들어 보겠습니다.
<body></body> 내부에 <h1> 태그로 큰 제목을 만들고 <p> 태그로 내용을 문단으로 만들었습니다. <ul> 태그와 <li> 태그를 이용하여 목록을 만들고 <a> 태그를 포함하여 href 속성에 있는 주소로 이동할 수 있게 만들었습니다.(전체 코드는 아래에 있습니다.) 각 태그에 대한 것은 구글 검색을 통해 좀 더 자세히 알아보실 수 있습니다.
이렇게 작성 후 저장한 뒤 다시 사이트에 접속해 봅시다.
원하던 대로 웹 문서가 잘 만들어졌습니다. 나의 첫 웹사이트 이렇게 만들어졌네요. 이제 누구든 언제 어디서든 내 주소로 인터넷 접속을 하게 되면 내가 만든 문서를 볼 수 있게 된 것입니다.
[전체 코드]
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>자기 소개서</title>
</head>
<body>
<h1>자기소개서</h1>
<p>안녕하세요. 저는 수원대학교에 재학중인 학생입니다. 내년이면 졸업을 하게 되는데요. 졸업 후에는 봉사활동을 좀 더 해볼 생각입니다. 제가 지금 하고 있거나 해보고 싶은 봉사활동을 아래에 정리해 보았습니다.</p>
<ul>
<li>해비타트 봉사</li>
<li>국제난민 관련 봉사</li>
<li>기아 아동 후원</li>
</ul>
<p>혹시 저와 같은 뜻이 있는 분들과 소통하고 싶어요. 제 인스타그램 팔로우 해주세요.(인스타그램 주소 : <a href="www.instagram.com/♡♣♩◁">instagram.com/♡♣♩◁)</a></p>
</body>
</html>
여기까지 따라 해 보면서 본인만의 웹사이트 만들기 성공하셨나요? 축하드립니다. 저도 이렇게 시작했습니다.
그러다 HTML언어와 CSS에 대해 좀 더 공부를 하고 나니 인터넷에서 자주 보던 그럴싸한 사이트도 만들 수 있게 되더라고요.
인터넷에 나만의 공간을 갖게 된다는 것은 지금도 느끼지만 참 매력적인 일이라고 생각합니다. 이 글을 읽게 된다고 해서 멋들어진 웹 페이지를 만드는 것은 아니지만 인터넷에 나만의 공간을 만드는 것만으로도 이미 반은 성공하셨다고 볼 수 있습니다. 빠른 시간 안에 여러분들도 HTML을 통해 멋진 사이트를 세상에 선보이게 되실 겁니다.
그때도 이 글에서 소개한 웹 서버와 FTP, 코드 편집기는 꼭 사용하시게 될 겁니다. 그때를 위해 이 글에서 설명한 내용을 꼭 완수해 보셨으면 좋겠습니다.
혹여 내용 중 부족한 것이 있거나 궁금한 점이 있다면 언제든 브런치 댓글이나 메일로 연락 주시면 아는 한도 내에서 말씀을 드리도록 하겠습니다.
이메일 : tisword@daum.net
감사합니다.
