우리가 사용하는 웹페이지는 html, css, javascript 기타 등등으로 이루어져 있습니다. 홈페이지 사이트를 만들기 위해서는 그에 맞는 언어를 익히게 됩니다.
만약, 이런 언어들을 익히기 싫다면 대안이 될 수 있는 방법은 플랫폼을 이용하는 것입니다. 대표적으로 티스토리(tistory.com), 블로거(blogger.com)가 있을 수 있습니다.
누군가는 앞에서 언급한 것은 블로그(blog)를 이용하는 방법이라고 말할 수 있습니다. 틀린이야기는 아닙니다.
제가 언급한 기준은 html, css를 적용할 수 있다는 부분에서 단순 종속된 플랫폼 양식의 활용이 아니라는 부분입니다.
우리가 말하는 홈페이지 사이트는 결국, 필요로 하는 여러 웹사이트를 하나의 홈이라는 집단으로 묶은 것이라 할 수 있습니다. 각각의 페이지는 html로 구성되어 있습니다.
따라서, 여러 페이지를 html로 구성하고 묶을 수 있다면 도메인을 가지고 있는 하나의 홈 사이트를 구성한 것과 다르지 않을 것입니다.
그 밖에도 다양한 형태의 서비스를 찾아 볼 수 있습니다. 외국에서 지원하는 서비스도 있으니 검색을 통해 확인해보시고 접근하기 좋은 곳에서 시작하는 것도 좋습니다.
반면, 기본적인 html, css등을 익혀 자신만의 웹사이트를 구성할 수도 있습니다. 당연히 프로그래밍 언어를 익혀 코딩을 진행해야만 합니다.
이런 방법에는 추가적으로 더 필요한 것이 있습니다. 웹서버를 구성해야만 한다는 것입니다.
24시간 인터넷 공간에서 자신의 웹사이트가 동작하기 위해서는 24시간 쉬지 않고 돌아가는 컴퓨터를 필요로 합니다. 개인이 사용하는 컴퓨터로도 웹서버를 구성할 수 있지만 비효율적입니다.
호스팅을 통해 웹서버를 대여하여 사용하는 경우가 가장 일반적이며, 효율적이라 할 수 있습니다.
그렇다면, 직접 홈페이지를 만들기 위해서는 어떻게 하면 좋을까요. 우선은 html과 css를 익히는 것입니다.
자신이 원하는 웹사이트 모습을 보여주기 위해서는 그 모습을 구성하는 언어를 익혀야 합니다. 그 언어가 바로 html, css입니다.
웹사이트 만들기 html의 가장 기본은 무엇일까.
html은 Hypertext Markup language의 약자 입니다. 사실 이것까지 알 필요는 없습니다. 단순히 html tag라는 개념만 가지고 있으면 학습을 진행하는데 아무 지장도 없습니다.
모든 것을 줄여서 단순히 태그(tag)라 지칭하기도 합니다. 결과적으로 의사소통이 가능하기만 하면 그만이지 않을까 생각합니다.
어쨌든, 중요한 것은 html을 가장 먼저 익혀야 한다는 것입니다. 어떤 것이든 새롭게 시작할 때는 학습하는 순서가 중요합니다.
이 순서가 뒤죽박죽 섞이게 되면, 그만큼 많은 시간을 소비하게 될지도 모릅니다. 물론, 조금씩 찾아가는데 재미를 느끼는 경우라면 굳이 순서를 따질 필요는 없습니다.
단지, 큰 틀에서 정해진 순서를 따라가는 것이 시행착오와 쓸데없는 시간 낭비를 줄이는 최선의 방법일 것이라 생각합니다.
HTML의 시작 어디서부터 접근하는 것이 좋을까.
html은 웹사이트를 구성하는 하나의 골격이라 할 수 있습니다. 축구, 야구 등의 스포츠 게임으로 따지면 기본적인 규칙이라 할 수 있습니다.
만약, 선수들이 기본적인 규칙을 무시한다면 그 경기는 이루어질 수 없습니다. 프로그램 언어를 익히는 방법의 가장 기본이 되는 것은 그 언어가 가지고 있는 규칙을 숙지하는 것입니다.
html의 가장 근 역할이자 기본은 웹사이트의 틀을 마련하는 것이라 할 수 있습니다. 이 틀은 크게 두가지로 나뉠 수 있습니다.
1️⃣ 첫번째로 <head></head>입니다.
2️⃣ 두번째로 <body></body>입니다.
아마도, 가장 많이 들어본 것이 <body></body>일 수 있습니다. html, css 수정을 할 수 있는 플랫폼에서 운영을 해본 경험이 있다면 기본적으로 body tag의 수정 경험이 있을 것입니다.
앞에서 언급한 tistory, blogger 중 tistory 블로그의 본문에 해당되는 내용이 바로 웹페이지의 body부분입니다.
그 많은 tistory페이지를 도메인과 연결하고, 사용자의 요청(도메인 호출)에 맞춰 정해진 양식으로 빠르게 보여주는 것은 서버에서 이용되는 프로그램의 역할이자 힘 입니다.
어쨌든 우리가 주로 보고, 흔히 편집하게 되는 부분은 body 태그 부분이라는 것입니다. 이 body부분이 사용자에게 보여지는 내용을 담당하게 됩니다.
그렇다면 head는 어떤 일을 할까요. head의 경우 웹상에서 발생되는 호출에서 특정 인식표 역할을 합니다.
head에 있는 내용을 통해 호출하는 사용자 쪽 프로그램에게 의사를 표시할 수 있습니다.
예를 들어, ‘당신은 접속할 수 없습니다.’, ‘특정한 표시를 보여주세요.’, ‘해당 웹페이지는 어떤 사양으로 어떤 버전을 사용합니다.’등의 다양한 의사를 표현할 수 있습니다.
또한, <body></body>에서 정해진 태그들에게 style 속성값을 부여할 수도 있습니다. 이렇게 부여되는 속성값들을 우리는 css라고 부르게 됩니다.
만약 css style 속성 값 내용이 너무 많다면 어떻게 처리하면 좋을까요. 바로 외부 스타일 시트를 사용하는 방법으로 해결 할 수 있습니다.
<head></head> 태그 내부에 모든 내용을 넣어도 웹페이지가 작동하는데 오류는 없습니다. 다만, 유지 보수를 위해 다시 코딩 된 내용을 살핀다면 끔찍하다는 생각을 할 수 있습니다.
너무 장황하고 정리되지 않은 내용들은 다시 살피기 어려운 법이며, 관리하기 쉽지 않기 때문입니다. 외부 파일을 이용해 별도로 저장하고 관리하면 보다 쉽게 사용할 수 있습니다.
외부 파일을 해당 웹페이지에 적용하기 위해서는 불러와야 합니다. 이렇게 사용할 파일을 불러오는 내용을 head에서 처리할 수 있습니다.
<body></body>에서는 크게 두가지의 역할을 하게 됩니다. 첫번째로 페이지의 레이아웃, 다시 말해 페이지 영역을 정리하게 됩니다. 두번째로, 각각의 영역에 맞는 태그를 적용하게 됩니다.
이 부분들이 흔히 사용자들이 보게 되는 웹페이지의 모습이며, 그 모습의 뼈대 역할을 하게 됩니다.
html을 익힌다는 것은 결국, head에서의 속성값과 그 속성값들이 보여질 수 있는 body 태그들을 익히는 것이라 할 수 있습니다.
직접 코딩을 한다는 것은 결코 쉽다고 이야기할 수는 없습니다. 새롭게 어떤 것을 익힌다는 행위는 결코 만만한 일이 아니기 때문입니다.
물론, 그 과정에서 즐거움과 보람을 느낄 수도 있습니다. 하지만, 그 보람과 즐거움보다는 문제점을 해결하고, 해결책을 모색하는 과정에서 얻는 괴로움이 클 수도 있습니다.
이런 부분 때문에 많은 사람들이 도전하고 쉽게 포기할지도 모릅니다. 하지만, 이 과정은 어떤 것을 배우든 피할 수 없는 부분입니다.
가장 현명하게 이 어려움에 대처하는 방법은 조금씩 나아가는 방법 밖에는 없을 것입니다.
무리하지 않고, 쉬어가며 작은 것 부터 하나씩 배우고 익혀간다면 어느 순간 자신이 원하는 결과를 얻을 수 있을 것입니다.