홈페이지 소스 알아보기

 

참으로 오랜만에 글을 올리는것 같은데, 요번 올릴글은 홈페이지 관리?

라고해야하나.. 아무튼 홈페이지 관리에 있어서 기초적이라 할 수 있는 html(hypertext markup language) 즉, 풀어서 쓰면 " 문서의 활자・조판 지정 표시를 이용하여, 문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일로 정리하여 놓은 (하나의 표기언어?)

것 입니다.

이번 포스팅도 기존과 마찬가지로 저 개인의 언젠가 옛기억을 되살려 홈페이지에 대한 의문이 있을때, 초기의 배우는 마음으로 다시 읽어 보기위함이지, 결코 이 분야에 정통해서가 아님을 알려드립니다. 다소 틀린것이 있을지라도, 그러려니.. 하는 생각으로 봐주시면 고맙겠습니다.

블로그나, 카페,홈페이지를 만들면서 습득한 기초를 바탕으로 기술할 것이며, 저 개인이 이해하기 힘들었던 부분이 아마도 누군가에겐 비슷한 의문이 있었을 수 있다는 마음에 이글을 써봅니다.

 

그럼 먼저 위에서 말한 html의 기초에 대해서 간단하게 진행해보겠습니다.

흔히들 컴퓨터를 조금이라도 다루어 보신 분은 한글 또는 엑셀 또는 메모장 등을 사용해본 경험이 있을것입니다. 여기서 인터넷과 같이 문서와 문서를 연결해주고, 문장에서 이미지또는 동영상등을 열어볼수 있으며,또한

문서중 원하는 문장으로 드레그 또는 클릭 없이 바로 이동할수 있는 이러한 기능들을 추가한것이 쉽게 말해 html로 볼 수 있지 않을까 합니다.

가장 많이 이용하는 메모장을 이용하여서 간단한 html 문서를 만들어보면, 그냥 메모장에서 다음과 같이 "안녕하세요. 반갑습니다.

HTML의 기초에 대해 알아보겠습니다." 란 글을 입력한후 "다른이름으로저장 - 임의이름.html(메모장의 기본 확장자형식은 " .txt" 입니다. 확장자 선택 부분을 반드시 "모든파일"로  바꾸어 주시고, 위와 같이 임의이름뒤에 ".html"을 넣어줍니다.

기본적인 html문서가 만들어 졌습니다.

다음은 메뉴바에서 "파일 - 다른이름으로저장 - 누른후 저장파일 확장자 형식을 그림의 동그라미 부분의 조그만 역삼각형을 눌러 모든파일로 바꾼후 저장 파일이름 뒤에 (    .html   )을 입력한후 저장을 합니다.

그러면 아래와 같은 파일이 생성 되는데요..

 

이것이 본인이 처음으로 만든 html파일 입니다.

그러면 더블클릭해서 실행을 해보면..

 

위와 같은 인터넷 익스플로러 창이 생성됩니다.

여기서 잠시 위 주소 링크를 보면, 무엇인가 다른점이 관찰될것입니다.

 

자 여기서 첫번째, 1번의 주소줄을 보면, 일반적으로 알고있는 "http:// 나 https://  또는 www.어쩌고저쩌고.머쩌고" 와 같은 형식이 보이지 않고,

c:\users\........ 과 같이 표기가 되었습니다.

이것은 현재 이 파일이 웹기반(인터넷 네트워크)에 등록이된 어플?이 아니고,(잘은 모르나 앞으로의 모든 윈도우 기반은 어플[application 즉, 컴퓨터 상에서 실행가능한 모든 "응용 프로그램"과 뜻을 동일하게 생각해도 됩니다.- 모바일에서는 흔히 "앱"이라고들 하죠.] 즉, 써버 또는 호스트, 라우터와 같은 장치와의 관계에서 이루어지는 html이냐,(예시 - http://www.어쩌고.com 또는 net 또는 co.kr 등등등등등.....)

아니면, 현재 사용자의 컴퓨터상에서 만의 html이냐의 차이에 있는 것입니다.(예시 - c:\어쩌고\저쩌고\머쩌고\머시라.html)

만약 본인이 만든 html파일이라고 해도, 웹상에 다른 타인과의 소통,또는 관계 연락등에 초첨을 둔다면, 반드시, 본인이 만든 html파일을 웹상의 특정 장소(주소)에 등록하여야 합니다.

여기서, 호스팅이니, 도메인이니 하는 개념의 중간 매개 하드웨어 또는 소프트 웨어가 필요한것입니다.

(개인이 개인용도로 이용하기에 하드웨어는 비교적 고가이며, 개인적으로 웹상의 운영을위해선, 서버,또는 라우터와 같은 하드웨어와 php,자바스크립팅과 데이터베이스 관리와 같은 좀더 복잡한 형태의 소프트웨어에 대한 지식을 갖추어야합니다.)

본인도 php와 자바스크립팅등을 공부해야하는데, 시간이 여의치 않아서 미루고 있습니다. 언제가 될지 모르나, 개념이 확립되면, 그글또한 포스팅하겠습니다.

두번째로 2번의 내용을 보면, " 난 분명히 문서에서는 줄을 바꾸어서, 글을 썻는데, 왜! 같은 줄에 표기된것일까?" 와 같은 의문이 들수 있을것입니다.

여기서, html언어의 가장 중요한 부분인 태그라는 기교?도구? 아무튼.. 쉽게 말해 표현을 꾸민다? 정도로 생각할수 있는 tag라는 일종에 규칙화된 문장이 들어 갑니다. 만약, 안녕하세요. 반갑습니다. 다음에 "</br>"

을 넣어 저장한후 다시 실행시켜 본다면,

 

위와 같이 줄바꿈이 되어서 출력되는 되는것을 보실수 있을것입니다.

이것이 바로, 태그의 기초중의 하나인 줄바꿈 태그입니다.

이 태그들은 저마다 각각의 입력 규칙을 가지고 있습니다.

위와 같이 줄바꿈 태그인 </br>같은 경우는 혼자 단독으로 사용이 가능하지만, 제목표시줄을 알려주는 <title>과 같은 태그는 반드시 선언부와 종언부인
<title>타이틀제목</title> 과 같이 내용의 시작점과 끝점을 나태내 주어야 합니다.

 

글이 길어지니 일단 여기서 맺고 다음포스팅에선 html의 구조를 좀더 알아보도록 하겠습니다.