HTML의 기본
웹문서를 만든다는 것은 HTML(Hypertext Markup Language)이라는 프로그래밍 언어를 사용하여 문서를 제작하는 것으로 프로그래밍 언어라고는 하지만 C 언어와 같이 까다롭지도 않고 단순히 정해진 기능을 하는 코드들을 나열하고 원하 는 텍스트를 입력하는 것에 불과합니다. HTML은 다음 4가지 종류의 코드들의 집합체입니다.
요소(Elements)
요소란 HTML 명령이다. 시작태그와 끝내기 태그를 가질 수 있으며 컨테이너(시작태그와 더불어 끝내기 태그를 갖는 요소)라면 시작태그와 끝내기 태그 사이에 텍스트나 다른 요소 를 가질 수 있습니다. 예를 들어 <TITLE0></TITLE0>이라는 요소는 웹브라우저에게 제작된 웹문서의 제목을 웹브라우저가 제목 표시창에 표시하도록하는 명령하는 것입니다. 시작태그 와 끝내기 태그 사이에 제목을 써 주기 때문에 컨테이너라고 부릅니다. <IMG> 처럼 시작 태그만 있는 요소도 있습니다.
태그(Tags)
태그는 요소의 일부로서 시작태그와 끝내기 태그 두 종류가 있습니다. 시작태그는 요소를 시작하며 끝내기 태그는 요소를 끝냅니다. 물론 모든 요소들이 끝내기 태그로 끝나는 것은 아닙니다. 예를 들어 <TITLE>로 시작한 제목요소는 </TITLE>라는 끝내기 태그를 갖지만 이미지요소인 <IMG>는 끝내기 태그를 갖지 않습니다.
속성(Attributes)
속성은 요소의 시작 태그내에 사용하는 것으로 명령을 구체화시키는 것입니다. 예를들어 텍 스트의 폰트 지정을 위해 사용하는 <FONT></FONT> 요소는 SIZE, COLOR, FACE 등의 속성을 갖는데 <FONT SIZE=5>처럼 시작태그 내에 사용되며 속성과 변수 사이에는 = 이 라는 부호를 사용하여 연결합니다. 속성은 보통 변수를 갖지만 NOSHADE등 일부 속성은 변수를 갖지 않습니다.
변수(Arguments)
변수는 속성과 관련된 값을 말합니다. <BR CLEAR="left">에서 " "내에는 right나 all도 사 용될 수 있는데 이들은 속성 CLEAR의 변수이며 속성과 변수는 등호 '='에 의해 구분됩니 다. 변수 중에는 변수를 " " 내에 넣는 것과 넣지 SIZE=5 처럼 넣지 않는 것이 있으므로 속성마다 사용여부를 잘 알아 두어야 합니다.
HTML 문서의 구조
이 세상 모든 것들이 그러하듯이 홈페이지에도 머리와 몸체로 구성되어 있습니다. 따라서 HTML로 작성된 홈페이지의 기본구조는 다음과 같습니다.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
홈페이지는 언제나 <HTML>로 시작하여 </HTML>로 끝납니다. 반드시 사용해야하는 것 은 아니지만 일반적으로 사용하는 것이 좋습니다.나중에 다른 언어가 나타나서 그 언어로 홈페이지를 만들게 된다면 그 때는 구분을위해 반드시 써 주어야할지도 모르겠지만.
Head 요소
문서의 머릿부분은 <HEAD>로 시작하여 </HEAD>로 끝나고 제목은 반드시 <HEAD> </HEAD> 요소 내에 사용하여야 합니다. 제목은 웹브라우저 최상단의 제목표시창에 나타나는데 문서 의 특징을 가장 적절히 표현할 수 있는 요약되고 함축된 제목을 사용하는 것이 좋습니다. 문서의 내용을 담으로 홈페이지의 몸통에 해당하는 <BODY> </BODY>요소 내에 표현된 모든 것들은 웹브라우저 화면에 나타나게 됩니다.
Body 요소
<BODY> </BODY> 요소 내에는 문서의 모든 내용이 들어가게 된다고 앞에서 말씀드렸습 니다. 그리고 <BODY> 태그내에는 다음과같이 몇가지 속성을 사용하여 웹브라우저 화면에 나타날 텍스트의 색상과 배경그림을 정의할 수 있습니다.
<BODY BGCOLOR="#FFFF80" TEXT="#FF00FF" LINK="#000000" VLINK="#808080" ALINK="#00FF00">
</BODY> 여기서 각 속성이 나타내는 것은 다음과 같습 니다.
▷ BGCOLOR : 웹브라우저 화면의 바탕색을 정 의합니다.
▷ TEXT : 웹브라우저 화면에 나타날 텍스트의 색상을 정의합니다.
▷ LINK : 링크로 연결된 하이퍼텍스트의 색상을 정의합니다.
▷ VLINK : 한번 방문한 링크의 색상을 정의합니다.
▷ ALINK : 링크를 마우스로 한번 선택했을 때의 색상을 정의합니다.
이 속성들과 변수는 = 부호로 연결되며 " " 내에 사용하는 변수는 RGB값이며 반드시 기 억해야하는 것은 RGB값 앞에 # 기호를 넣어준다는 것입니다. TEXT의 기본값은 000000 즉 검정색이며 LINK의 기본 색상은 0000FF 즉 청색입, VLINK의 기본값은 800080입니다. 즉 이 속성들을 사용하지 않았다면 웹브라우저 상에 텍스트는 검정색으로 링크는 파란색으로, 한번 방문했던 링크는 보라색으로 나타나게 되는 것입니다. 보다 정확하게 말한다면 웹브라 우저의 설정값을 기본값으로 합니다.
색상 및 이미지넣기
RGB 색상 코드 색상표
RGB값이란 RED(빨강), GREEN(녹색), BLUE(청색) 세가지 색상을 16진수로 표현한 값을 나타내는데 16진수는 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F로 각각의 색상을 00에서 FF까지 256색상 을 표현할 수 있고 이들을 조합함으로써 나타내지는 색상코드를 말합니다.
검정색 : 000000
흰 색 : FFFFFF
적 색 : FF0000
녹 색 : 00FF00
청 색 : 0000FF
모든 색상들에 대한 RGB값을 갖고 있을 수는 없으므로 색상표를 갖고 계시거나 인터넷 상 에서 나와있는 색상표들을 참조하시면됩니다. 화면상단에 보이는 색상표에서 원하는 색상의 RGB값을 구할 수 있도록 되어 있으며 화면에 실제로 적용되어 자신이 선택한 색상이 원하던 것인지를 직접 확인해 볼 수 있도록 되어 있습니다.
BACKGROUND 속성
이 속성을 <BODY> 태그 내에 다음과 같이 사용하여 바탕화면으로 사용할 이미지를 지정 할 수 있습니다.
<BODY BACKGROUND="http://parangsaekr.com.ne.kr/images/back01.gif">
여기서 " "내에는 바탕화면으로 사용할 이미지(jpg 또는 gif) 파일명을 적어주시면 됩니다.
위와같은 이미지를 바탕화면으로 사용하면 이 이미지들이 다음 그림에 보는 바와같이 연속 적으로 배열되어 나타나게 됩니다.
적용된 배경이미지
다음 그림과같이 화면보다 더 큰 그림을 사용하여 한 개의 그림이 화면전체에 나타나도록 할 수 있습니다.
단락만들기
Line Break 태그, Paragraph 태그, 수평선 긋기(Horizonal Rule),
Line Break 태그
HTML 문서에서 는 한칸의 공란의 의미밖에 없으며 줄바꿈의 기능을 하지 않습니다. 다음 그림의 예1을 보면 HTML 문서에는
단락만들기
목록만들기
표만들기
양식만들기
창만들기
와같이 줄을 바꾸어 작성되었지만 웹브라우저 상에서는 단순히 한칸의 공란이 띄어졌을 뿐 입니다. HTML 문서에서 줄을 바꾸기 위해서는 <BR>태그를 사용하여야합니다. 그림에 <BR> 태그를 사용한 예를 참조하시기 바랍니다. 즉 웹브라우저가 HTML 코드를 읽다가 <BR> 이란 태그를 만나면 그 후의 내용을 웹브라우저상에서 줄을 바꾸어 표현하게된다는 의미입니다.
Paragraph 태그
<BR> 태그는 줄을 바꾸어 주는 기능을 한다면 <P> 태그는 다음 그림에서 보시는 바와같 이 한칸의 빈줄을 만들어주는 역할을 합니다. 오직 한 개의 빈줄만을 만듭니다. <P> 태그 를 여러개 사용하여도 오직 한 개의 빈줄만을 만들어 줍니다. 최신의 HTML 버전에서는 <P> 태그도 컨테이너로 되어 있습니다. 즉 끝내기 태그를 갖고 있지만 끝내기 태그를 사용 하든 안하든 기능에 차이는 없습니다. 여러개의 빈줄을 만들고 싶을 때 <P> 태그는 오직 한 개의 빈줄을 만들어 줍니다. 웹문서를 만들다보면 때론 여러개의 빈 공락 즉 여백을 만들고 싶을 때가 있습니다. 방법은 여러 가지가 있습니다. 뒤에서 배우시게 될 <PRE></PRE> 요소를 사용할 수도 있고 지금 설명드리고자하는 것처럼 공란을 의미하 는 특수문자를 사용하는 방법이 있습니다. 키보드로 를 쳐서 줄을 바꾸는 것은 의미가 없다고 말씀드렸습니다. 그런 경우는 다음 앞 그림에서 공란을 의미하는 특수문자 를 여러개 사용하여 공란을 여러개 만들 수도 있고 특수문자 ( )와 <BR>태그를 여러본 반복 사용하여 여러개의 빈줄을 만들 수 있습니다.
수평선 긋기(Horizonal Rule)
단란을 구분하는 방법은 빈줄을 만들어 놓는 것도 좋은 방법이지만 내용이 달라질 때는 확 실한 구분선을 그어줄 필요가 있는 경우도 있습니다. 그런 경우에 사용하는 것이
태 그입니다. 즉 <HR> 태그는 수평선을 그어주는 기능을 하게 되며 이 태그는 Align, Size, Width, Noshade 네 개의 속성을 가질 수 있습니다.
Size 속성
Size 속성은 수평선의 굵기를 표현해 주는 속성으로 다음 그림을 보면 첫 번째 수평선에는 이 속성을 사용하지 않았고 나머지 수평선들은 각각 5, 10, 50이라는 값을 사용하였습니다. 여기서 이 속성의 값으로 사용한 숫자는 픽셀값이며 이 속성을 사용하지 않았을 경우 선의 굵기는 2 픽셀입니다.
Width 속성
수평선의 가로 크기를 지정할 때 사용하는 속성입니다. 값을 표현하는 방법에는 두가지 방 법이 있는데 픽셀값으로 나타내는 방법과 화면에 대한 비율로 나타내는 방법이 그것입니다. 다음 그림에는 이 속성을 사용하지 않은 경우와 수평선의 폭을 80 픽셀과 80%를 각각 사용 한 수평선을 볼 수 있습니다. 픽셀을 지정할 경우 어떤 웹브라우저에서든 동일한 폭으로 수 평선이 그어지지만 %값을 사용한 경우는 웹브라우저 화면의 해상도에 따라 수평선의 크기 가 변화될 수 있습니다.
Align 속성
수평선도 역시 Align 속성을 사용하여 원하는 위치에 배열할 수 있는데 값으로 left, right, center, justify 등을 가질 수 있으며 이들은 각각 수평선을 화면의 왼쪽, 오른쪽, 중앙 및 앞 의 배열방식에 따라 위치시키게 됩니다. 다음 그림에 이 속성을 사용하지 않은 경우 및 이 속성값으로 left, right, center값을 사용한 예를 볼 수 있습니다. 여기서 눈여겨 볼 것은 이 속성을 사용하지 않은 경우 수평선이 가운데 위치된 것을 볼 수 있습니다. 이것은 앞은 Align 속성이라는 텍스트가 가운데 정렬되어 있기 때문에 가운데 정렬된 것으로 이 속성의 값으로 justify를 사용한 경우와 같은 효과입니다.
Noshade 속성
이 속성은 웹브라우저 화면에 그어진 수평선이 먹선이 되게 하는 기능이며 이 속성은 변수 를 갖지 않습니다.
이미지 삽입하기
오늘날의 소리, 동영상 등의 각종 멀티미디어를 담은 월드와이드웹의 세계는 웹문서에 이미 지를 실음으로써 시작되었습니다. 이미지는 정보를 효과적이고 빠르게 전달하는 수단으로서 의 역할을 하였습니다. 이번에는 웹문서에 각종 이미지를 삽입하는 방법을 설명드리겠습니다.
이미지 삽입 요소 <IMG>
웹문서에 이미지를 삽입할 때 사용하는 태그는 <IMG>이며 끝내기 태그는 없습니다. SRC 를 사용하여 다음과 같이 웹문서에 삽입할 이미지의 위치와 파일명을 지정하게 됩니다.
<IMG SRC="images/benner1.gif">
여기서 SRC=" "을 통해 이미지 파일의 위치를 나타내는 방법에는 상대적 URL 표기법과 절대적 URL 표시방법이 있습니다. 상대적 URL 표시방법이란 이미지 파일을 삽입할 웹문서 파일과의 상대적 위치로 표시하는 방법으로 이미지 파일이 웹문서 파일과 같은 디렉토리에 있는 경우, 하위디렉토리에 있는 경우, 상위디렉토리에 있는 경우 각각 다음과 같이 표현합 니다.
<IMG SRC="benner1.gif">
<IMG SRC="images/benner1.gif">
<IMG SRC="../benner1.gif">
절대적 URL 표시방법이란 다음과 같이 이미지 파일이 있는 절대적 주소를 적어 주는 방법 입니다.
<IMG SRC="http://parangsaekr.com.ne.kr/images/benner1.gif">
링크태그
월드와이드웹의 진정한 힘은 정보들을 거미줄처럼 연결해 주는 하이퍼링크 기능으로부터 나 옵니다. 이 때 연결되는 정보는 웹문서일 수도 있고 그래픽, 사운드, 동영상과 같은 멀티미 디어 파일은 물론 애미메이션, 소프트웨어, 고퍼서버의 내용물, 원격컴퓨터의 로그인 세션, 아키, FTP 사이트 등 한마디로 컴퓨터로 만들어진 대부분의 것들이 하이퍼 링크라는 기능 에 의해 웹문서에 열결될 수 있습니다.
하이퍼링크기능의 강력한 힘에 비해 링크를 만드는 방법은 너무나 간단합니다. 정보원들을 연결하기위해 <A></A>라는 요소를 사용하고 각 정보들의 위치와 접근방법을 나타내기 위 해 URL(Uniform Resources Location 또는 Universed Resources Locators)을 사용합니다. 시작 태그와 끝내기 태그 사이에는 웹브라우저에 나타날 하이퍼 텍스트를 적어 주거나 웹브 라우저에 나타날 이미지 파일을 삽입하고 HREF=" "의 " " 내에 링크될 정보의 URL을 적어주면 됩니다.
1. HTML 문서의 링크
<A HTML=" ">의 " " 내에는 링크될 HTML 문서의 파일명을 적어주고 <A HTML=" ">와 </A> 사이 에 웹브라우저에 나타날 하이퍼 텍스트를 적어주면 됩니다. 그러면 다음에서 보시는 바와 같이 웹브라우저 상에는 파란색 글씨로 하이퍼텍스트가 나타나고 이 하이퍼 텍스트를 마우 스로 클릭하면 연결된 문서가 나타나게 됩니다.
<A HREF="main1.html">링크 만들기 예</A>
링크 만들기 예
2. 이미지 파일의 링크
홈페이지에 이미지 파일을 링크하는 방법도 HTML 문서를 링크하는 방법과 동일합니다. 단지 HTML 문서 파일명 대신 다음 예와같이 이미지 파일명을 적어 주면됩니다.
<A HREF="images/sidny.jpg"> 시드니 풍경</A>
시드니 풍경
이 때 주의할 점은 이미지 파일이 이미지를 삽입할 HTML 문서와 다른 디렉토리에 있는 경우 이미지 파일이 있는 경로를 지정해 주어야한다는 것과 웹브라우저가 출력할 수 없는 이미지가 있다는 것입니다. 위의 예에서 GIF 확장자를 가진 이미지는 웹브라우저가 출력할 수 있지만 PNG나 CGM과 같은 확장자를 가진 이미지 파일은 웹브라우저를 통해 직접 볼 수 없는 경우가 있습니다. 이 경우는 해당 플러그인(넷스케이프의 경우)이나 액트브엑스(익스플로러의 경우)를 설치하거나 어플리케이션 프로그램을 설치해야한다는 것입니다.
3. 웹사이트 링크
자신의 홈페이지가 저장되어 있는 서버의 홈페이지는 물론 다른 서버에 저장되어 있는 홈페이지도 링크할 수 있습니다. 비로서 이것에서 세계적인 거미줄인 월드와이드웹이 탄생하게 되는데 링크시키는 방법은 앞에서 배운것과 동일합니다. 단 파일명을 적어 주던 곳에 다음 과 같이 웹사이트의 주소를 적어 주면되지요.
<A HREF="http://prs.netian.com">파랑새의 시마을</A>
<A HREF="http://parangsaekr.com.ne.kr">파랑새 태그창고</A>
<A HREF="http://kr.yahoo.com">야후</A>
파랑새의 시마을
파랑새 태그창고
야후
이 때 주의할 점은 위와같이 링크시킨 경우 홈페이지 주인이 이 파일을 다른 이름으로 바꾸 거나 파일을 없앤 경우 링크되지 않을 수 있으므로 그 페이지의 주인페이지(진짜 홈페이지) 를 링크하는 것이 좋습니다. URL을 쉽게 링크 시키는 방법 때론 웹문서에 웹사이트를 링크하다보면 http://kr.rd.yahoo.com/srst.kr/2060559686/%c6%c4%b6%fb%bb%f5/8/12/*http://my.netian.com/~parangsaekr/과 같이 URL이 아주 긴경우를 종종 발견하게 됩니다. 이 긴 URL을 일일이 키보드로 입력하다보면 틀리는 경우도 웹브라우저는 그 사이트를 찾지 못하게됩니다. 그런 일을 없애고 일일이 치는 수고를 줄이기 위해서는 복사-붙여넣기 기능을 이용하면 쉽고 간편하게 URL을 링크시킬 수 있습니다.
- URL 복사
웹브라우저의 URL 창(넷스케이프의 경우 Location 창) 내의 URL을 마우스로 선택한 후 편집메뉴의 복사(Copy) 기능을 선택하거나 단축키(Cntl +C)를 이용하여 복사합니다.
- HTML 문서 열기
URL을 복사해 넣을 HTML 문서를 엽니다. 웹편집기를 이용한다면 URL을 넣는 창을 열 면 더욱 간단해 집니다.
- URL 붙여넣기
HTML 문서에 <A HREF=" "></A>를 입력하고 " " 내에 마우스 포인트를 위치시킨 후 편집(Edit) 메뉴의 붙여넣기(Paste)나 단축키(Cntl +V)를 사용하여 URL을 넣습니다.
4. 같은 페이지 내의 특정부분 링크
인터넷 문서의 경우 한 페이지의 크기는 정해져 있지 않아 때론 아주 긴 페이지들을 종종 방문하게됩니다. 페이지가 웹브라우저 화면을 넘는 경우 스크롤바가 나타나긴하지만 페이지 가 무척 길다면 스크롤하는데 많은 시간이 소요되고 필요한 부분이 단지 특정부분이라면 그 렇게할 필요없이 직접 그 부분을 링크할 수 있습니다.
이렇게 하기 위해서는 Named Anchor라고 부르는 표시가 필요하게 되는데 이것이 하는 기 능은 <A NAME="#NAME>과 같이 사용하여 연결될 부분을 표시하는데 사용하게 됩니다. 그리고 그 표시한 부분을 다음과 같이 앵커태그를 사용하여 연결할 수 있습니다.
<A HREF="#i@age">이미지 파일 링크
<A HREF="#ftp">FTP 사이트 링크
즉 위와같이 링크를 만들어 놓으면 웹브라우저상에 나타난 하이퍼텍스트 '이미지 파일 링크' 를 클릭하게되면 <A NAME="#image">라고 되어 있는 부분이 웹브라우저의 상단에 나타 나게 되는데 이 Named Anchor는 웹브라우저에 나타나지 않기 때문에 hidden reference maker라고 부릅니다. CD롬에 저장된 link.html이라는 파일을 보면 이 링크기능이 어떻게 사 용되었는지 살펴볼 수 있습니다.
5. 웹사이트의 특정부분 링크
Named Anchor가 반드시 자신이 만든 문서에 있을 필요는 없습니다. 전세계 어느 홈페이지 에 있는 Named Anchor이든 참조하여 링크시킬 수 있습니다. 이 경우도 앞의 경우와 동일 한데 다음에 보시는 바와같이 <A HREF="URL#NamedAnchor"></A> 형식을 이용합니다.
6. 하이퍼 그래픽스
지금까지는 웹브라우저 상에 나타난 텍스트를 클릭하여 원하는 문서나 이미지등을 연결하는 방법을 설명드렸습니다. 반드시 텍스트에만 연결할 수 있는 것은 아닙니다. 웹페이지내에 이 미지를 삽입하고 이 이미지에 다른 웹사이트나 각종 자료를 연결할 수 있는데 이렇게 이미 지에 링크 기능을 부여하는 것을 하이퍼 그래픽이라고 합니다.
사용하는 방법은 다음과같이 앵커요소의 시작태그와 끝내기 태그 사이에 앞에서 배운 <IMG> 태그를 이용하여 이미지를 삽입해 주면됩니다.
<A HREF="../index.html"><IMG SRC="images/benner1.gif"></A>
<A HREF="../index.html"><IMG SRC="images/benner1.gif" BORDER=0></A>
이렇게 하면 웹브라우저상에는 images/benner1.gif 파일명의 이미지가 나타나고 이 이미지를 마우스로 클릭하였을 때 index.html이라는 문서를 웹브라우저로 불러오게 되는 것입니다. 이 때 눈여겨 볼 것은 그림의 주변에 파란색 테두리가 나타나는 것입니다. 이 파란선이 때로는 페 이지를 보기싫게하는 경우가 있고 이것을 없애는 방법은 투명이미지 만들기란에서 설명드린 것과 같이 border=0 이라는 속성코드를 <IMG> 태그 내에 삽입해 주면됩니다.
7. FTP 사이트 링크
월드와이드웹은 인터넷의 강력한 도구로 성장을 계속하고 있습니다. 그것은 각종 멀티미디 어 기술을 이용할 수 있는 것과 더불어 하이퍼링크 기능을 이용하여 다양한 기존의 인터넷 서비스들을 연결하고 웹브라우저상에서 직접 그러한 서비스들을 이용할 수 있도록 해 주기 때문입니다. 월드와이드웹이 나오기 전부터 컴퓨터로 제작된 각종 파일을 송수신하는데 사 용되었던 FTP도 그 중에 하나입니다.
TIP !
HTML은 "Hyper Text Markup Language"의 약자로서 쉽게 말한다면 하이퍼 텍스트 형식의 파일을 브라우저 에서 볼수있도록 하기 위한 언어라고 보면 됩니다.HTML의 표현은 <로 시작해서>로 끝나는데 우리가 초등학교때 수학시간에 괄호를 배우셨을겁니다. 그때 괄호로 시작하면 끝날때는 괄호로 닫아주던것과 같은 원리입니다.이것을 여기서는 태그(TAG)라고 합니다.태그를 사용하여 작성한 문서가 HTML 문서가 되며 확장자를 .html또는 htm으로 지정합니다.그러면 브라우저는 HTML문서로 인식하고 우리에게 보여주는 것입니다.
절대 URL(절대경로)
우리가 웹 브라우져를 이용하여 어떤 사이트를 찿아가려면 주소 입력창에 http:// 로 시작하는 도메인 주소를 입력하게 됩니다. 절대 URL은 이 도메인 주소를 사용하여 지정하는 것으로 이 방법을 사용하면 문서의 전송 방식이나 인터넷 상의 웹 서버 위치 그리고 HTML 문서가 있는 경로까지 정확하게 지정 됩니다. 절대 URL은 일반적으로 다른 사이트에 있는 문서나 그림을 링크 시킬 때 사용하게 됩니다.
상대 URL(상대경로)
상대 URL은 같은 사이트 안에 있는 문서나 그림을 링크 시킬 때 사용하는 방법입니다. 이 방법을 사용하면 처음 시작하는 홈페이지를 기준으로 상대적인 경로와 문서 이름만을 사용하기 때문에 표현이 간략해지고 쉬워지는 장점이 있습니다. 상대 URL을 사용하면 자신의 컴퓨터에 있는 홈페이지를 오프라인 상태에서도 볼 수 있으며 한 사이트내의 모든 홈페이지를 다른 사이트로 옮겨도 문제가 발생하지 않습니다. 상대 URL을 지정할 때는 시작 홈페이지를 기준으로 상대적인 경로와 파일명을 기재하게 되며 예를 들어 'images' 디렉토리에 있는 Sample.gif 파일을 삽입 하려면 <Img src="/Sample.gif"> 라고 기재 하면 됩니다.
한글로 된 글자가 깨져 나올때
가끔 열면 인코딩 부분이 자동으로 영문쪽으로가는 황당한 경우가 있습니다. 이럴때는 소스 <head>와 </head> 사이에 다음의 소스를 입력합니다.
<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
이렇게 해주면 자동으로 한글로 인식해주기 때문에 깨저서 나오거나 하는 일이 없어집니다.
body에서 문서 여백 없애기
보통 플래시를 사용할때도 풀화면으로 만들어 쓸때 주로 프레임으로 해서 프레임에서 여백을 없애고는 하죠? 하지만 body 에서도 여백을 없애는 소스가 있습니다.
<body leftmargin = 0 marginheight = 0 marginwidth = 0 topmargin = 0 bottommargin = 0>
이부분을 참고해서 복사해서 쓰세요.
HTML로 드래그블록지정, 복사, 마우스클릭 등을 막는 소스
<body [안내]태그제한으로등록되지않습니다-oncontextmenu = "return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ondragstart = "return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xxonselectstart = "return false">
html소스중 이런게 있을줄을 잘 모르셨죠? 하지만 이런거만 자꾸 쓴다면 공유라는 말이 무의미 하겠죠? 정 중요한것 외에는 사용하지 맙시다.
소스보는 방법
주소 입력창에 보고자하는곳의 주소를 입력한 후, 소스 훔쳐보기버튼을 클릭하세요.
HTML의 기본
웹문서를 만든다는 것은 HTML(Hypertext Markup Language)이라는 프로그래밍 언어를 사용하여 문서를 제작하는 것으로 프로그래밍 언어라고는 하지만 C 언어와 같이 까다롭지도 않고 단순히 정해진 기능을 하는 코드들을 나열하고 원하 는 텍스트를 입력하는 것에 불과합니다. HTML은 다음 코드들의 집합체입니다.
HEAD에 들어가는 태그 |
<!DOCTYPE> |
HTML 문서의 버전을 표시한다. |
<!--> |
홈페이지 중간 중간의 주석 표시 | |
<TITLE> |
홈페이지의 제목 표시 | |
<META> |
홈페이지의 일반적이 정보를 표시 | |
<SCRIPT> |
자바스크립트와 같은 언어를 삽입하고자 할때 | |
<[안내]태그제한으로등록되지않습니다-BGSOUND> |
배경음악 지정 | |
<BASE> |
홈페이지의 절대경로 지정 | |
<LINK> |
현재 홈페이지와 다른 홈폐이지와의 관계 설정 | |
본문과 관련있는 태그 |
<ADDRESS> |
제작자와 연락할수 있는 방법을 표시 |
<BDO> |
오른쪽에서 왼쪽으로 글자 나열 | |
<BLOCKQUOTE> |
다른 사람의 말을 인용했다는 것을 표시 | |
<COMMENT> |
홈페이지의 주석 표시 | |
<DFN> |
홈페이지내에서 특정한 용어를 정의 | |
<DIV> |
문단정렬 태그 | |
<KBD> |
홈페이지내에서 키보드의 특정 키입력을 설명할때 | |
<LAYER> |
홈페이지내에서 레어어 설정 | |
<MARQUEE> |
한방향에서 다른방향으로 흘러가는 동작을 연출 | |
<P> |
단락을 구분짓는 태그 | |
<PRE> |
내용 그대로를 보여주는 태그 | |
<Q> |
짧은 인용문을 사용할 때 | |
<SPAN> |
한줄에 서식을 적용할 때 쓰는 태그 | |
글자와 관련있는 태그 |
<B> |
글씨를 진하게 |
<BASEFONT> |
본문에 적용시킬 글꼴 설정 | |
<BLINK> |
텍스트가 일정 간격으로 깜박인다. | |
<BR> |
텍스트의 줄을 바꾼다 | |
<CENTER> |
홈페이지의 중앙에 정렬 시킨다 | |
<CITE> |
짧은 인용구 및 문구를 표시 | |
<DEL> |
본문 텍스트중 삭제 표시를 해야할 경우 | |
<EM> |
일부분을 강조할 때 사용 | |
<FONT> |
홈페이지의 글꼴설정 | |
<I> |
이태리체로 표시 | |
<INS> |
본문중 삽입표시를 해야할 경우 사용 | |
<S> |
본문중 일부분에 가운데 선을 긋는다 | |
<SMALL> |
설정된 글꼴 크기보다 2포인트 작게 | |
<STRIKE> |
글자의 가운데에 선을 긋는다 | |
<STRONG> |
글꼴을 진하고 굵게 | |
<SUB> |
아래첨자를 만든다. | |
<SUP> |
윗천자를 만든다. | |
<TT> |
일부분을 고정 비례목체로 표시 | |
<U> |
밑줄을 긋는다. | |
<VAR> |
변수의 이름을 설정 | |
목록과 관련있는 태그 |
<DD> |
설명형 목록의 항목을 추가할 때 사용 |
<DIR> |
디렉토리 목록 설정 | |
<DL> |
설명형 목록을 설정한다. | |
<DT> |
목록에대한 제목이나 설명을 기재할 때 사용 | |
<LI> |
모든 목록들의 항목을 추가 | |
<MENU> |
메뉴형 목록을 설정 | |
<OL> |
순서형 목록을 설정 | |
<UL> |
비순서형 목록을 설정 | |
표와 관련있는 태그 |
<CAPTION> |
테이블에 대한 설명이나 제목 등을 기재 |
<COL> |
각열의 속성을 설정 | |
<COLGROUP> |
테이블의 열 그룹에 대한 속성을 설정 | |
<TABLE> |
문서내에 표를 만든다 | |
<TBODY> |
본문에 해당하는 내용을 기재 | |
<TD> |
표내에 셀을 삽입 | |
<TFOOT> |
꼬리표에 해당하는 내용을 기재 | |
<TH> |
각 열의 제목들을 표시 | |
<THEAD> |
머리말에 해당하는 내용을 기재 | |
<TR> |
표내에 행을 삽입 | |
링크와 관련있는 태그 |
<A HREF= |
하이퍼링크되는 홈페이지를 지정 |
그림과 관련있는 태그 |
<AREA> |
하나의 이미지에서 링크시킬 영역을 지정 |
<IMG> |
홈페이지에 그림을 삽입할대 사용 | |
<MAP> |
홈페이지내에서 이미지 맵을 설정 | |
개체와 관련있은 태그 |
<APPLET> |
자바 애플릿을 삽입한다. |
<EMBED> |
플러그인 개체를 삽입한다. | |
<OBJECT> |
홈페이지 내에 개체를 삽입한다. | |
<PARAM> |
삽입된 자바 개체에 필요한 파라미터를 설정 | |
가로선과 관련있는 태그 |
<HR> |
홈페이지 내에 가로선을 삽입한다. |
프레임과 관련있는 태그 |
<FRAME> |
FRAMESET 내에서 프래임을 만든다 |
<FRAMESET> |
홈폐페이지에 여러 가지 프레임을 만든다 | |
<IFRAME> |
홈페이지내에서 다른 홈페이지를 보는창을 만든다. | |
양식과 관련있는 태그 |
<BOTTON> |
홈페이지에 단추를 삽입 |
<FIELDSET> |
홈페이지 내 양식들을 그룹으로 묶는다 | |
<FORM> |
홈페이지 내 양식들을 설정 | |
<INPUT> |
양식폼에 양식을 삽입한다. | |
<ISINDEX> |
입력란을 만들어 검색쿼리를 만든다. | |
<LABLE> |
양식의 한부분에 자세한 설명을 주고자 할때 | |
<LEGEND> |
같은 성격의 양식들을 구분할 때 사용 | |
<SELECT> |
드풉다운 박스에 의한 선택형 메뉴를 만든다. | |
<TEXTAREA> |
여러 줄을 입력할수 있는 글상자를 만든다 |
BODY 태그 부명령 |
ALINK="색이름" |
홈페이지의 링크색을 지정 |
BGCOLOR="색" |
홈페이지의 배경색을 지정 | |
BACKGROUND |
배경그림 지정 | |
BGPROPERTIES |
배경이미지를 고정시킨다. | |
CLASS |
스타일시트에 의해 정의된 서식 적용 | |
LINK="색" |
링크되어 있는 곳의 색 지정 | |
TEXT ="색" |
기본 문자색을 지정 | |
VLINK="색" |
열어본 홈페이지의 링크색 지정 | |
SCROLL |
스크롤가능여부 지정 (YES,NO> | |
STYLE= |
적용할 스타일 시트 적용 | |
TABLE 태그 부명령 |
ALIGN= |
정렬방법 (LEFT, CENTER, RIGHT, JUSTIFY) |
BACKGROUND |
표의 배경이미지 지정 | |
BORDER= |
표의 외곽선 두께 지정 | |
BORDERCOLOR= |
표 외곽선의 색상을 지정 | |
BORDERCOLORDARK |
외곽선을 3차원으로 만들 때 (어두운색) | |
BORDERCOLORLIGHT |
외곽선을 3차원으로 만들 때 (밝은색) | |
CELLSPACING |
내용사이의 간격 지정 | |
HEIGHT |
표의 높이 지정 | |
WIDTH |
표의 너비 설정 | |
MARQUEE 태그 부명령 |
BEHAVIOR= |
텍스트의 흘러가는 형식 지정 |
= scroll (텍스트가 흘러가다 사라짐) | ||
= slide (흘러가다 마직막에 멈춤) | ||
= alternate (양쪽방향으로 반복) | ||
BGCOLOR= |
흘러가는 텍스트의 배경색 지정 | |
DIRECTION= |
흘러갈 방향 지정 <UP, DOWN, LEFT, RIGHT) | |
HEIGHT= |
흘러가는 텍스트의 높이 지정 | |
LOOP= |
반복횟수를 지정 | |
SCROLLMOUNT= |
텍스트가 흘러가는 속도를 설정 | |
SCROLLDELAY= |
흘러가는 텍스트의 나타나는 간격 설정 | |
VSPACE= |
흘러가는 텍스트의 수직 간격 설정 | |
WIDTH= |
흘러가는 텍스트의 너비 설정 |