이번 글에서는 드디어 웹사이트를 만들어 보기 시작한다. 놀랍게도 우리가 저번 글에서 배운 지식만으로도 웹사이트를 만들어볼 수 있다.
목차
- 웹사이트와 웹페이지
- 차근차근 웹사이트 만들기
- 내가 만든 웹사이트의 문제점 2가지
1. 웹사이트와 웹페이지
먼저 웹사이트는 무엇인가? 웹페이지와 헷갈릴 수 있지만, 엄격하게는 둘은 다르다. 이 둘의 차이점에 대해서 눈치가 빠르거나, HTML수업을 미리 들은 사람들은 잘 알 것이다.
웹사이트는 웹페이지가 모여 있는 곳이다. 웹페이지는 웹에 올려져 있는 개개의 문서를 의미한다. 우리가 지금까지 시험삼아 만든 HTML파일들이 웹에 올려지게 되면, 그 하나하나의 파일들은 웹페이지가 된다. 웹페이지가 모여서 일종의 책이 만들어지게 되면, 그것은 웹사이트가 된다.
예를 들어 보자. 웹 브라우저 상단에는 주소를 알 수 있는 부분이 있다. 이 블로그의 주소는
“https://cuziam.tistory.com”이다. 반면 내가 쓴 글들은 “https://cuziam.tistory.com/~~”라는 이름으로 되어있다. 즉 내 블로그의 첫번째 화면은 웹사이트가 되고 내가 쓴 글들은 웹사이트를 구성하는 하나의 하위 웹페이지가 된다. (좀 더 전문적으로 알고 싶다면 밑의 링크를 참고하길 바란다.)
웹 페이지와 웹 사이트의 차이점: https://ko.gadget-info.com/difference-between-web-page 참고.
아까 우리는 웹사이트를 만든다고 했다. 그러니까 웹페이지를 여러 개 만들고 어떤 한 페이지에 다른 페이지들을 연결해주어야 한다는 뜻이다. 저번 글 마지막에 배운 <a>태그는 문서를 연결해주는 기능을 한다. 즉 웹사이트를 만들기 위해서는 <a> 태그를 이용하여 웹페이지를 서로 연결해주는 것이 핵심이 된다. 이제 필요한 지식들을 많이 습득했다! 시작하자!
2. 차근차근 웹사이트 만들기
만들고자 하는 웹사이트 그림이다. 필요한 코드들을 차근차근 생각해보자.
먼저 <!doctype html>, <html>, <head>, <body>을 넣어야 한다. 먼저 이것들을 써 놓자.
<head>태그 안에는 웹사이트에는 직접적으로 나타나지 않지만, 문서를 설명하는데 필요한 메타데이터를 넣는 공간이라고 했다. 이곳에는 문서이름(<title>)과 문자 압축 방식(<meta charset=”압축 방식”>을 적는다.
<body>태그 안에는 웹 사이트에 직접적으로 나타나는 것들을 작성한다. 목표로 하는 그림을 보자. 그리고 우리가 지금 가진 지식을 바탕으로 어떤 태그를 사용해야할지 생각해보자. 우리가 아는 선에서 구현할 수 있는 것은 크게 세 부분으로 나누어져 있다.
1.제목
2.순차적 리스트
3.소제목, 이미지, 문단
이것들을 구성하기 위한 태그는 무엇일까? 기억해보자.
1.제목-> <h1~h6>태그
2.순차적 리스트-> <ol>, <ul>태그
3.소제목, 이미지, 문단-> <h1~h6>, <img>, <p></p>
이것들을 생각하여 코드를 작성한 결과는 다음과 같다.
자 여기서 중요한 것이 남았다. 그것은 다른 웹페이지에 링크를 거는 일이다. 여기서는 리스트 목록을 생활코딩 웹페이지들을 연결하는 하이퍼텍스트로 활용했다. 각각의 리스트를 <a>태그를 활용하여 다른 웹페이지에 연결해보자. 나같은 경우 연결된 웹페이지가 새 탭에서 뜨도록 target=”_blank” 속성을 추가했다. 결과 화면은 다음과 같다.
자 다 만들었다. 우리가 보는 웹사이트들에 비해서는 밋밋하고 화려하지 않지만, 엄연히 웹사이트가 될 규격을 갖춘 문서가 되었다. 내 웹사이트를 만든 것이다! 와! 근데 불만족스러운 부분이 있다. 여기서 추가적으로 해야 될 것이 무엇일까? 가장 큰 문제는 이 두가지이다.
3. 내가 만든 웹사이트의 문제점 2가지
문제점
1. 목표로 한 모습과 다르게 생겼다. 내 웹사이트는 디자인이 구리다.
2. 인터넷에서 검색을 아무리 해봤자 내 웹사이트는 나오지 않는다.
HTML은 안타깝게도 문서구조나 서식과 같은 것을 나타내는데 특화되어 있는 마크업 언어이다. 이런 태생적인 한계 때문에 디자인에 관한 부분은 부족하기 그지없다. 이러한 부분을 보완해주는 언어가 바로 CSS(Cascading Style Sheet)라는 언어이다. CSS를 사용함으로써 그럴듯해 보이는 웹페이지들이 만들어진다. 웹페이지에서 HTML이 뼈대라면 CSS는 그 뼈대를 구성하는 살이라고 할 수 있다. 하지만 현재는 HTML과 인터넷에 관해서 다루고 있으므로 이 부분은 다음 번에 다룬다.
인터넷 검색에 내 웹사이트가 나오지 않는 이유는 너무 확실하다. 웹사이트를 온라인 공간에 올리지를 않았기 때문이다. 현재 내 웹사이트는 내 PC안에 저장되어 있을 뿐이다. 인터넷 브라우저에 나온 주소창을 살펴보자. 주소창을 보면 인터넷 브라우저가 온라인 공간이 아니라 내 컴퓨터의 저장공간에 접근하고 있다는 것을 알 수 있다. 이를 어떻게 해결해야 할까?
그것을 해결하기 위해선 이제 인터넷, 웹이 뭔지, 뭐가 다른지에 대해서 알아야 한다. 그리고 내가 html로 만든 웹사이트가 어떻게 해야 온라인 상에 놓이게 되는지 알아본다. 다음 글에서 이것들에 대해서 알아보자. 지금까지 배운 것에 비해서는 더 난이도가 있을 것이다.
*생활코딩 학습일기 카테고리의 글들은 모두 2021년, 제 이전 블로그에서 작성한 글입니다.
*정확한 정보를 전달하기 위해서 일부 내용은 수정하였습니다.
'생활코딩 학습일기(Web 기초)' 카테고리의 다른 글
| 6) 입문자가 알아야 할 CSS의 기본 특징 (0) | 2022.08.12 |
|---|---|
| 5) 웹페이지 탐방하기 (0) | 2022.08.11 |
| 4) 웹의 구조와 웹사이트 올리기 (0) | 2022.08.11 |
| 2) 입문자를 위한 HTML 기초 (0) | 2022.08.09 |
| 1) Intro (0) | 2022.08.09 |
