Talk Talk

이슈토론: 아내가 사전 동의 없이 식기세척기를 구입하여 분노한 남편 사건을 보며 이 부부를 어떻게 생각하시는지 말씀해 주세요

친구끼리도 말 못하는 이야기

웃자! 웃자!

조회 : 269

HTML

BY 뮤직포유 2003-08-29

MASTER OF HTML 4.0

20여개의 홈페이지를 참고하여 만들었으며 임의 대로 내용을 변경하였다.

강좌 내용이 지루 하더라도 인내를 가지고 바 주길 바란다.

특히 이 강좌는 홈페이지 제작에 매우 취약한 CCS-Style에 관하여 중점을 두어서 설명하였다.

CCS에 관한 내용은 Special에서 다루도록 하겠다. (CCS는 HTML 4.0 버전에서 추가된 내용)

CCS는 요즘에 많이 사용되고 있는 Dynamic HTML을 사용하는 기본 TAG들이다.

이 강좌가 홈페이지 만드는데 많은 도움이 되었으면 한다.

그리고 이 TAG에 관한 것은 궂이 다 알려고 하기보다는 “이런 것이 있다”는 정도로 알고 있으면 된다.

실제로 홈페이지를 만들땐 웹 에디터를 사용하기 때문에 절대적으로 필요하지는 않다.

MASTER OF HTML 4.0에 들어가기에 앞서서... (HTML과 TAG란?)

-HTML이란?

"HyperText Markup Language"의 약자이다. 이는 단순한 텍스트에 기반을 둔 언어로 워드프로세서를 사용해본 사람이라면 HTML을 쉽게 배울 수 있을 것이다. 모든 웹을 구성하고 있는 문서들은 HTML로 구성되어있다. HTML은 노트패드나 워드패드 같은 텍스트 에디터를 이용하여 작성할 수 있으며 문서를 저장할 때 .html 혹은 .htm 이란 확장자를 사용하면 된다. HTML 문서는 여러 개의 Tag들로 구성되어 있다. 이러한 Tag들을 이용하여 원하는 문서의 형태를 만들면 되는 것이다.

# HTML4는 새롭게 많은 태그들이 추가되고 또 효과적인 속성들도 많이 생겨났다. 하지만 경쟁관계에 있는 익스플로와 넷스케잎은 서로 다른 태그들을 받아들였고 속성들도 또한 그렇다. 여기서는 일반적으로 익스플로와 넷스케잎에서 모두 사용되어지는 것들을 주로 다루었는데 그래서 실제 HTML에서는 여기서 설명하는 내용 이상의 더 많은 것들을 사용할 수 있고 또 사용하고 있다. DHTML 사용되는 Cascading Style Sheet에 가서는 그 정도가 더 심해지고 있다. 어째든 여기서는 양대 브라우저에서 모두 별다른 차이 없이 보여지는 내용들에 대해서만 중점적으로 설명하고 있음을 밝혀둔다.

Tag란?

Tag란 꺽쇠괄호 사이에 쓰여지는 명령어로써 브라우저상에 출력될 내용들이 어떤 것인가를 지정하는 것이다. 하지만 이것은 화면상에 나타나진 않는다. Tag의 종류에는 Empty Tag와 Container Tag가 있다 Empty Tag는 시작하는 Tag만 존재하는 것이고 Container Tag는 시작하는 Tag와 끝나는 Tag가 동시에 존재하여야만 하는 것이다. 끝나는 Tag에는 /가 꺽쇠괄호 사이에 들어가게 된다. 또한 Tag에는 속성과 그 속성에 대한 값이 존재한다. 속성은 Tag내용을 꾸며주는 것으로 하나의 Tag안에 여러 개의 속성을 사용할 수 있으며 속성 값들은 정해져있고 사용 시 속성 값들은 그 정해진 것들 중에서 정확하게 입력하여 주어야 한다. 이러한 속성들은 반드시 사용해야 하는 것이 있는데 이는 생략할 수 없고 원하지 않을 경우 사용하지 않을 수 있는 것들도 있는데 그럴 경우에는 본래의 태그만을 사용하여 주면 된다. 속성 값에는 따옴표가 붙는데 일반적으로 알파벳과 숫자만을 사용하는 경우는 생략할 수 있다. 여러 가지 태그들을 조화 있고 효과적으로 사용하면 더욱 멋진 홈페이지를 만들 수 있을 것이다.

사용예: Container Tag

쓰고 싶은 내용

위에서는 font라는 Tag에 face와 size라는 두 가지 속성이 사용되어졌다. FONT와 FACE속성은 대문자를 사용하였고 SIZE속성은 소문자를 사용하였는데 Tag는 대문자와 소문자 두 가지 모두 사용 할 수 있고 속성 값은 정해진 양식에 따라 사용해야한다. 속성 값의 따옴표는 생략할 수 있다. 여기서는 편의상 모든 태그들을 대문자로 사용하려고 하였다.

쓰고 싶은 내용

속성을 사용하지 않은 일반태그

HTML에서 텍스트, 이미지를 다루는 것은 힘든 일이다. 사용자들은 그들의 브라우저상에서 선호하는 개인적인 텍스트형태를 셋팅하기 때문에, 어떻게 자신이 원하는 대로 웹 페이지에 텍스트가 나타나게 할 수 있을 것인가?

이것이 이 강좌에서 다루고자 하는 것이다.

<BODY> 태그 내에서 많은 정보들을 특화 시킬 수 있다. 예를 들면, 기본적인 텍스트와 링크색깔과 같은 것을 내에서 많이 조정할 수 있다. - 크기, 색깔, 심지어는 개별적인 글자의 서체까지도. 우리의 팁들은 여러분이 어떻게 할 지를 보여줄 것이다.

1. Html 강좌 순서

1>Html의 기본골격

2>글자에 관하여

3>이미지 삽입

4>Html만의 특수기능

HTML 기본형식

<BASE> 태그의 구성요소

<BODY> 태그의 구성요소

문단을 바꾸는 태그

줄을 바꾸는 태그

CENTER

선그리기

글자크기 지정

글자색상/글자체 지정

글자모양 지정

문자 고정시키기

글자사이에 공백만들기

이미지 삽입하기

이미지 크기 조절

이미지와 텍스트 정렬

이미지를 다른문서에 연결

이미지 여백 및 테두리 조정

링크시키기

Mail보내기

특수문자

주석문 달기

1>Html의 기본골격

HTML 기본형식

HTML문서에서 일반적인 문자이외에 문자에 기능을 넣어주는 명령어를 태그라고 한다. 태그는 시작하는 태그와 끝나는 태그를 갖고 있는데 같은 모양이지만 끝나는 태그는 앞에 '/'가 붙는다. 태그는 대/소문자 구분 없이 사용된다.

HTML 기본 구성요소는 아래와 같다.

위의 요소들에 대해 아래에서 다시 자세히 설명하겠지만 잠깐 알아보면, <HTML>태그는 이 범위 안의 문서가 HTML형식으로 작성되었다는 것을 선언해 주고, <HEAD> 태그는 Heading의 준말로, 글의 머릿말에 해당하는 부분이다.<BODY> 태그는 본문에 해당한다. HTML 문서의 HEAD부분에는 문서의 제목을 나타내는 <TITLE>과 </TITLE>이 온다. 그 사이에 문서의 제목이 오게 된다. 그런데 이 문서의 제목은 브라우져의 맨 위 머리부분에만 나타난다. 넷스케이프의 북마크(BookMark)에 저장할 때 그 타이틀의 목록을 의미한다. 타이틀은 가능하면 한글이 아닌 영어로 표현하는 것이 좋다. 한글에는 UNIX의 금지문자들이 들어 있기 때문이다. 또한 외국인이 북마크를 생성할 경우 도저히 알아볼 수 없는 글자의 조합이 되기 때문이며, 짧거나 너무 긴 타이틀은 좋지 않다.

위에서 보여준 태그는 아주 기본적인 골격이고, HTML을 구성하는 기본 골격 태그를 좀더 자세히 예를 들어 알아보겠다. 기본 골격의 태그는 홈페이지의 내용과는 상관이 없고 단지 홈페이지의 형식만을 지정해 주는 태그이다.

< !DOCTYPE>

Browser에게 HTML Document Type에 대한 정보를 제공하기 위한 Tag로 HTML의 어떤 Version을 사용하고 있는가에 대해 알려줌으로해서 Browser가 문서의 내용을 올바르고 빠르게 출력하도록 도와주게 된다. !DOCTYPE는 문서의 가장 처음에 위치하게 되며 생략할 수 있다. 그래도 쓰는 게 좋겠죠? Empty Tag이고 속성은 없다.

사용예:

< !DOCTYPE HTML PUBLIC"-//W3C//DTD HTML> : 기본형

그 외에 마지막 'HTML' 뒤에 Version따라 알맞게 사용한다.

< HTML>

HTML문서의 처음 시작과 끝을 알려주는 신호와 같은 의미의 Tag로 그 안에는 HEAD와 BODY 혹은 FRAMESET Tag가 들어가게 된다. 이 태그도 역시 생략이 가능하나 문서마다 항상 시작하는 부분으로서 !DOCTYPE Tag와 함께 항상 사용하는 것이 좋다. Container Tag이고 속성은 역시 없다.

사용예:

< !DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.0>

< HTML>

< HEAD>타이틀, 메타 태그와 그밖에 스크립트가 들어감< /HEAD>

< BODY>문서의 내용은 이곳에 들어감< /BODY>

</ HTML>

< HEAD>

모든 문서는 위에서 설명한 것처럼 맨 먼저 문서가 어떤 종류인가를 알려주는 DOCTYPE 태그가 오고 그 다음에 HTML 태그가 오게된다. HTML문서는 크게 HEAD와 BODY 부분으로 나뉘어 지게된다.

문서의 머릿글 부분에 해당하는 HEAD 태그에는 타이틀과 메타태그 그리고 스타일 쉬트를 사용하거나 자바 애플릿 스크립트 등을 사용할 경우 그것에 대한 정의가 오게된다. BODY부터 본격적인 문서의 내용이 시작되는 것이다. Container Tag이고 속성은 없다.

< TITLE>

TITLE태그는 문서의 제목에 해당하게 된다. 즉, 브라우저의 상단부분 타이틀 바에 나타나게 되는데 문서의 내용에 따라서 원하는 제목을 붙일 수가 있게된다. 각각의 HTML 문서마다 타이틀을 붙여줄 수 있는데 그 페이지에 대한 간단한 설명이 될 수 도 있다. 이는 또 북 마크시 그 리스트에도 나타나게 되는데 Backslash나 Colon은 사용하지 않는 것이 좋다. HEAD 태그자체를 생략할 수 있기 때문에 이도 자연 생략될 수 있고 또 HEAD부분이 존재하더라도 TITLE을 생략할 수 있다. Container Tag이고 속성은 없다.

사용예:

< HEAD>

< TITLE> 차한잔의 홈< /TITLE>

< /HEAD>

< META>

필수적이 HTML태그라고 할수 없지만 매우 유용한 태그중의 하나로 볼수 있다. 이는 문서를 로딩할때 자동적으로 다른 페이지로 이동하게 하거나 검색엔진에게 문서의 내용에 대한 정보를 줌으로 해서 자동적으로 적절한 리스트에 올릴수 있도록 하여주기도 한다. Empty Tag이고 속성에는 HTTP-EQUIV과, NAME, CONTENT, 그리고 URL이 있다.

사용예:

< META HTTP-EQUIV="REFRESH" CONTENT="seconds" URL="new url">

HTTP-EQUIV="REFRESH" 는 화면을 REFRESH한다는 의미로 "seconds"에는 몇 초후에 재 로딩할 것인가를 결정하는 값이고 "new url"은 이동할 페이지의 url을 적어주면 된다.

< META NAME="keywords" CONTENT="페이지의 토픽" >

검색엔진 찾는 주제에 해당하는 단어를 적는 곳으로 비슷하게 사용되어지는 모든 단어를 적는 것이 좋다.

< META NAME="decirption" CONTENT="간결한 문장" >

문서에 대한 설명을 적는 곳으로 너무 길지 않은 간결한 문장형태로 적는다.

< META NAME="author" CONTENT="문서를 만든 사람" >

용어 그대로 문서를 만든 사람의 이름을 적어 넣는 곳

< META NAME="generator" CONTENT="이용 프로그램" >

만약 프로그램툴을 이용했다면 그 프로그램의 이름을 적어 넣는다.

< META NAME="copy-right" CONTENT="& copy; year 소유자" >

프로그램의 소유권에 대한 내용을 적는 곳으로 & copy; 는 고정 값이고 나머지는 알아서.. 위의 모든 것을 다 적어야할 필요는 없다. 원하는 내용이 있으면 그것만 골라서 적어 넣어주면 된다. 하나도 사용하고 싶지 않다면 괜한 설명?

<BASE>태그의 구성요소

사용법:

<BASE>태그는 문서 안에 있는 상대적인 주소를 분석하는데 어떤 패스를 사용할 것인지를 정의한다.

문서 내에 있는 링크 참조에 패스 명을 전부 넣지 않을 때 유용한 기능을 한다.

사용예:

<HTML>

<HEAD>

<TITLE>Netscape3.0 Download</TITLE>

</HEAD>

<BODY>

다운로드 넷스케이프5.0</A>

</BODY>

</HTML>

위의 예제에서 보면 클릭된 URL(/comprod/mirror/index.html)이 <BASE>태그에 지정된

URL(http://home.netscape.com/index.html)의 하부디렉토리를 연결하게 된다. 최종결과로 URL은

(http://home.netscape.com/comprod/mirror/index.html)으로 바뀐 것을 알 수 있을 것이다. <BASE>의 기능은 HTML문서를 만들 때 자체 디렉토리 관리를 쉽게 한다.

<BODY>태그의 구성요소

위에서 말한바와 같이 본격적인 문서내용이 시작되는 부분이다. 사실상 위의 모든 부분을 생략하고 이 부분부터 문서를 시작할 수도 있다. 단 최초로 링크 되는 페이지를 제외. 그러나 좋은 습관은 아니다..

Container Tag이고 속성으로는 BACKGROUND, BGCOLOR, TEXT, LINK, ALINK, VLINK과 익스플로에서만 사용가능한 LEFTMARGIN과 TOPMARGIN이 있다.

BGCOLOR="색깔이름"으로 배경색을 정하는 곳이고 BACKGROUND="url"은 이미지를 배경화면으로 넣고 싶을경우 사용하는데 그래픽 파일이 있는곳을 적어준다. TEXT="색깔이름"은 현재문서의 텍스트의 색상을 정하는것이다. 따로 FONT 태그를 이용 할 수도 있다. LINK="색깔이름"으로 만약 링크시키는 곳이 있고 그곳을 다른 색상으로 표현하고자 할 경우 사용되고 VLINK="색깔이름"B 은 이미 방문했던 곳임을 다른 색상으로 표시해주고자 할 경우 사용되며 ALINK="색깔이름"은 현재 클릭하고 있는 곳의 색상을 변화시키고 싶을 경우 사용한다. 그러나 이러한 것들은 지정하지 않으면 브라우저 상에서 지정된 색상으로 표현된다.

사용예:

< BODY BGCOLOR="#ffffff" TEXT="#ff0000" LINK="#00ff00" ALINK="#0000ff" VLINK="#000000" LEFTMARGIN="10" TOPMARGIN="10">

BGCOLOR="#ffffff" 라는 색상표의 표기법으로 표현하거나 또는 "white" 라고 색상의 영문 명으로도 표현할 수 있으며 BACKGROUND="header.img"는 사용하고자하는 그림이 있는 파일명을 표기해 주는 것으로 조글만 그림의 조각들이 벽지처럼 좌우로 붙여지면서 커다란 배경색이 된다. 화일의 크기가 클 경우 다운로드 하는 속도가 늦어지므로 background화일은 작고 빨리 읽히는 사이즈로 저장하는 것이 문서를 빨리 읽게 해 준다. background에 들어가는 화일은 JPG,GIF외 넷스케이프가 지원하는 화일을 모두 사용할 수 있다.

TEXT="#ff0000" 또는 "red"로 LINK="#00ff00" 또는 "green" 으로 ALINK="#0000ff" 또는 "blue"로 VLINK="#000000" 또는 "black"으로 배경색과 같은 방법으로 표현할 수 있다.

LEFTMARGIN="10" 과 TOPMARGIN="10"은 익스플로에서만 실행되는 것으로 문서의 윗쪽 여백과 왼쪽여백을 표현하고자 할 경우 사용하며 픽셀단위로 표현하다. 즉 10이란 10픽셀을 의미함. 위의 표현들을 나누어 다음과 같이 나타낼 수 도 있다.

사용예:

<BODY background="aaa.gif">태그는 배경이미지를 선언한다.

<BODY bgcolor="#000000">--Main윈도우 배경색 지정

<BODY text="#ffffff">--표준텍스트 색 지정

<BODY link="#00ffff">--링크부분의 색 지정

<BODY vlink="#ff00ff">--검색한 링크부분의 색 지정

<BODY alink="#4169e1">--검색중인 링크의 색 지정

# 색상표에 의거한 색상번호를 알고 싶을 경우 홈에 링크 되어있는 색상번호표에서 알 수 있고 만약 그래픽 툴이 있다면 그것을 이용할 수 있다.

# 픽셀이란 모니터에 보여지는 단위이다. 이것은 얼마의 크기라고 정확히 설명할 수 없으므로 여러번 수치에 변화를 주며 실행 해보면 감을 잡을 수 있을 것이다. 결국 몸으로 때우라??

# 같은 바탕색을 표현하는데 어떤 때는 BGCOLOR 라고 표현하고 어떤 때는 BACKGROUND라고 쓰여져 다소 혼돈을 일으킬 수도 있겠지만 BGCOLOR는 직접 색상을 이용할 경우 즉, 색상표의 번호나 색상명을 사용할 경우 이용되며 BACKGROUND는 이미지파일을 이용할 경우에 사용된다. 만약 이것을 잘못 사용하면 아무런 실행이 일어나지 않으므로 주의하기 바람...

#4169e1=41은 적색16진수, 69는 녹색16진수, e1는 청색16진수

#<BODY background="aaa.gif">태그와 <BODY bgcolor="#000000">태그는 같이 쓰지 않는 편이 좋다.

둘 다 background에 관한 태그이므로 충돌을 일으킬 수 있다.

사용예:

<HTML>

#유머 #실수