컴퓨터 상식 2009.10.17 08:01

[Html] 티스토리 꾸미기위한 Html 명령어 배우기


◈ 가장 기본적인 태그들
 
HTML의 태그에 대해 살펴보기 전에 HTML 문서의 구조를 알아볼
 필요가 있습니다. HTML 문서의 구조는 헤더(Header)와 본문(Body)의
 두 개 부분으로 구분할 수 있습니다. 물론 이 두 개의 부분을 구분하는
 것도 역시 태그의 역할입니다. 아래의 HTML 문서는 가장 단순한
문서를 예로 보여주고 있습니다.


<HTML>
<HEAD>
<TITLE>홈페이지 제목</TITLE>
</HEAD>
<BODY>홈페이지 본문</BODY>
</HTML>


▶ <HTML> </HTML> : 현재 파일이 HTML 문서임을 브라우저에
알려주는 Tag로 HTML 문서 안에서 가장 처음과 끝에 써주어야
합니다. 그러나 대부분의 브라우저에서는 이 태그가 없어도 제대로
인식을 합니다. 그러나 표준을 지키는 의미에서 가급적 사용하도록
합시다.

▶ <HEAD> </HEAD> : HTML 문서에 대한 일반적인 정보를
표시하는 일종의 머리말로서 실제 브라우저 화면에는 출력되지
않습니다. (이 부분에 자바스크립트, 스타일시트 등의 소스를
넣을 수도 있다.)

▶ <TITLE> </TITLE> : HTML 문서의 제목을 정의하는 곳으로
여기서 쓴 제목은 브라우저의 제목 표시줄에 출력됩니다.
(head 속에 포함된다.)
 
▶ <BODY> </BODY> :
HTML 문서의 실제적인 내용이 들어가는
곳으로, 브라우저 화면에 곧바로 나타나게 됩니다. 이 태그에는 6개의
속성이 있습니다. (아래의 표를 참조하세요.)
 

속성

설명

예제

BACKGROUND

 배경 이미지 지정

 <body background="back.gif">

BGCOLOR

 배경색 지정

 <body bgcolor="white">

TEXT

 글자 색 지정

 <body text="black">

LINK

 링크된 글자의
색 지정

 <body link="blue">

VLINK

 방문한 링크
색지정

 <body vlink="purple">

ALINK

 클릭했을 때 링크 색 지정

 <body alink="red">

 

 <body background="back.gif" text="black" link="blue" vlink="purple" alink="red">


※ 주의사항 : 배경색을 지정할 때에는 위처럼 색의 이름으로 설정
할 수도 있지만 그렇게 할 경우 몇 가지 색밖에 지정할 수 없습니다.
그래서 나온 것이 RGB 코드입니다.
RGB 코드란 RED-GREEN-BLUE 형식으로 색상을 조합한 것으로
16진수의 숫자로 표현되며 RRGGBB 형태로 표시됩니다.
예) RED = FF0000 , GREEN = 00FF00 , BLUE = 0000FF
RGB 코드 변환 프로그램은 자료실에 올려 놓았습니다.

▶ <Hn> </Hn> : 문서의 제목을 위해 사용되는 것으로 n은
1에서 6까지 총 6가지의 종류가 있습니다.

예제

<H1> 문서의 제목 </H1>

문서의 제목

<H2> 문서의 제목 </H2>

문서의 제목

<H3> 문서의 제목 </H3>

문서의 제목

<H4> 문서의 제목 </H4>

문서의 제목

<H5> 문서의 제목 </H5>

문서의 제목

<H6> 문서의 제목 </H6>

문서의 제목


속성

LEFT : <Hn align="left">제목<Hn> : 제목을 왼쪽으로 정열합니다.
CENTER : <Hn align="center">제목<Hn> : 제목을 가운데 정열합니다.
RIGHT : <Hn align="right">제목<Hn> : 제목을 오른쪽으로 정열합니다.

 

▶ <P> </P>

: 단락이 시작하는 곳이나 단락이 끝나는 곳에 넣어서 단락을
구분하는 역할을 합니다. <P>태그는 </P>태그를 사용하지
않아도 상관 없다.

예제

<HTML>
<HEAD>
<TITLE> HTML 단락 테스트</TITLE>
</HEAD>
<BODY>
<H2>단락</H2>
<P>첫번째 단락
<P>두번째 단락
</BODY>
</HTML>


 <예제 실행화면>


속성 :

LEFT : <p align="left">단락</p> : 단락을 왼쪽으로 정열한다.
CENTER : <p align="center">단락</p> : 단락을 가운데 정열한다.
RIGHT : <p align="right">단락</p> : 단락을 오른쪽으로 정열한다.

▶ <BR> : 문서의 줄을 바꿀 때 이용하는 태그입니다..
(한 줄을 바꿀 때 사용합니다. 두 줄 이상 바꿀 때는
<p>태그를 사용하도록 하세요.)

▶ <CENTER> </CENTER> : 문단을 가운데로 정렬시키는 기능을
 합니다. </CENTER>태그를 만날 때까지 모두 가운데로 정렬됩니다.

▶ <HR> : 수평선을 만들어 줍니다.

속성 : SIZE, WIDTH, ALIGN=LEFT, CENTER, RIGHT
 

SIZE 속성의 변화

<HR SIZE=1>


<HR SIZE=3>


<HR SIZE=5>



NOSHADE : 속이 찬 수평선을 그려준다.

<HR SIZE=3>


<HR NOSHADE SIZE=3>


◈ 표 만들기
 

앞서 설명한 리스트를 잘 활용하면 순서대로 표시해야 할 자료들을
깔끔하고 보기 좋게 출력할 수 있습니다. 하지만 때로는 도표나
목록의 형태로 자료들을 보여 줄 필요가 있습니다.
이럴 때 사용하는 것이 바로 테이블입니다. 테이블을 이용하는 것이
 정보를 훨씬 효과적으로 강조하여 표현할 수 있습니다.
또한 테이블로 레이아웃을 잡는다 던지 여러 가지 용도로 사용할 수
 있습니다. 웹페이지를 만드는데 가장 중요한 요소는 테이블입니다.
테이블에 대한 내용을 배우기 전에 이 사실을 명심하시길 바랍니다.

<TABLE></TABLE>

이 태그들은 테이블의 영역을 선언하는 태그로서 테이블의 처음과
끝을 지정합니다. 실제로 테이블의 모양을 만드는 태그들은
이 블록의 내부에 포함되어야 합니다.
 

<TABLE > 태그의 속성

BORDER

표의 테두리를 결정한다. 숫자를 할당하면 해당 숫자의 테두리가 그려진다.

CELLSPACING

셀과 셀 사이의 간격을 바꾸고 싶을 때 사용한다.

CELLPADDING

셀 내부에서의 간격을 바꾸고 싶을 때 사용한다.

WIDTH

가로 넓이를 지정한다.

HEIGHT

세로 높이를 지정한다.

ALIGN

표의 정렬 방식을 지정한다.

<TD></TD> : 테이블의 열을 만듭니다.
 

<TD>태그의 속성

ALIGN

헤더의 셀에 들어가는 제목의 정렬방식.
디폴트값은 CENTER이다.
속성: LEFT, RIGHT, CENTER

VALIGN

헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다.
디폴트값은 TOP 이다.
속성: TOP, MIDDLE, BOTTOM, BASELINE

ROWSPAN

헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳
디폴트값은 1이다.

COLSPAN

헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳
디폴트값은 1이다.

WIDTH

셀의 가로 넓이를 지정한다.

HEIGHT

셀의 세로 높이를 지정한다.

NOWRAP

셀 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

<TR></TR> : 테이블의 열을 만듭니다.
이 태그가 나오지 않으면 모든 셀이 한 줄로 나타나게 됩니다.
 

예제

<HTML>
<HEAD>
<TITLE>복잡한 표 작성 </TITLE>
</HEAD>
<BODY>
<table border bordercolor="#78B0D0">
<tr>
<td width="486" colspan="5"><p>&nbsp;</td>
</tr>
<tr>
<td width="71" rowspan="4"><p>&nbsp;</td>
<td width="101" rowspan="2"><p>&nbsp;</td>
<td width="199" colspan="2"><p>&nbsp;</td>
<td width="97" rowspan="2"><p>&nbsp;</td>
</tr>
<tr>
<td width="99"><p>&nbsp;</td>
<td width="94"><p>&nbsp;</td>
</tr>
<tr>
<td width="101"><p>&nbsp;</td>
<td width="99" rowspan="2"><p>&nbsp;</td>
<td width="94" rowspan="2"><p>&nbsp;</td>
<td width="97"><p>&nbsp;</td>
</tr>
<tr>
<td width="101"><p>&nbsp;</td>
<td width="97"><p>&nbsp;</td>
</tr>
</table>
</body>
</html>


<예제 실행 화면>

※ 표의 빈칸 처리방법 :
<p>&nbsp;을 셀의 빈칸에 넣어주면 됩니다.

<TH></TH> : 거의 모든 면에서 <TD></TD> 태그와 동일하지만
 이 태그로 만들어진 셀은 텍스트가 볼드체로,
중앙 정렬해서 보여준다는 것이 다릅니다..
 

<TH>태그의 속성

ALIGN

헤더의 셀에 들어가는 제목의 정렬방식.
디폴트값은 CENTER이다.
속성: LEFT, RIGHT, CENTER

VALIGN

헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다.
디폴트값은 TOP 이다.
속성: TOP, MIDDLE, BOTTOM, BASELINE

ROWSPAN

헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳
디폴트값은 1이다.

COLSPAN

헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳
디폴트값은 1이다.

WIDTH

셀의 가로 넓이를 지정한다.

HEIGHT

셀의 세로 높이를 지정한다.

NOWRAP

셀 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

◈ 이미지 넣기
 

여러분들은 이제 텍스트로 이루어진 웹 페이지는 별 어려움 없이
만들 수가 있을 것입니다. 저는 이쯤에서 여러분이 알고 싶은 것이
무엇인지를 쉽게 짐작할 수 있습니다.여러분들도 아마도 단조로운
텍스트만으로 이루어진 웹 페이지가 아니라 깔끔한 이미지와
텍스트가 적절히 조화된 웹 페이지를 만들고 싶을 것입니다.
여러분들은 <img> 태그를 이용하여 웹 페이지에 이미지를
넣을 수 있습니다.

▶ <IMG> : 이미지를 넣기 위한 태그입니다.
 

<IMG>의 속성

SRC

이미지 파일이 위치한 곳에 관한 URL 정보가 들어간다

ALIGN

이미지와 텍스트를 같이 사용 했을 때 텍스트의 위치를 정렬시킨다.
ALIGN 속성에는
TOP, CENTER, BOTTOM, LEFT, RIGHT가 있다.

ALT

이것은 텍스트 브라우저를 위한 속성으로 이미지의 위치에 이미지의 내용을 전달해 주는 것이다.
풍선 도움말)

ISMAP

이미지 맵을 위해 사용하는 속성으로 ISMAP으로 설정된 이미지 위의 임의의 위치를 마우스로 클릭하면 해당영역으로 연결시켜준다.

BORDER

이미지의 테두리를 그려주기 위한 속성이다

HEIGHT

이미지의 높이를 픽셀단위로 지정하기 위한 속성이다

WIDTH

이미지의 넓이를 픽셀단위로 지정하기 위한 속성이다

HSPACE

이미지의 좌우에 얼마만큼의 여백을 줄지 지정한다

VSPACE

이미지의 상하에 얼마만큼의 여백을 줄지 지정한다

USEMAP

이미지 맵을 지정할 때 사용한다


예제

<HTML>
<HEAD>
<TITLE> HTML 문서에 이미지 넣기 </TITLE>
</HEAD>
<BODY>
<H3>HTML 문서에 이미지 넣기</H3>
 
<P>
<IMG SRC="img/lycos.gif" ALIGN=TOP WIDTH=57 HEIGHT=55 ALT="라이코스 마스코트"> 텍스트의 위치<br>
<IMG SRC="img/lycos.gif" ALIGN=CENTER ALT="라이코스 마스코트" BORDER=0 HSPACE=20> 텍스트의 위치와 이미지의 좌우 여백<br>
<IMG SRC="img/lycos.gif" ALIGN=BOTTOM BORDER=3 ALT="라이코스 마스코트"> 텍스트의 위치와 이미지의 테두리 넓이<br>
 
</BODY>
</HTML>


<예제 실행 화면>

 

<IMG> 태그의 ALIGN 속성

TOP

이미지와 같은라인에있는 텍스트를 상단에 정렬한다.

CENTER

이미지와 같은라인에있는 텍스트를 중앙에 정렬한다.

BOTTOM

이미지와 같은라인에있는 텍스트를 하단에 정렬한다.

LEFT

 이미지는 왼쪽에 텍스트는 오른쪽에 정렬한다.

RIGHT

 이미지는 오른쪽에 텍스트는 왼쪽에 정렬한다.


예제

<html>
<head>
<title>고싸움놀이</title>
</head>
<body>
<h2>고싸움 놀이</h2>
<p align="justify"><font face="돋움" size="2"><img src="img/1-1.jpg" align="left" width="150" height="113" border="0" hspace="5">전남 광산군 대조면 칠석리 윷돌 마을에서 매해 음력 정월 10경부터 2월 초하루에 걸쳐서 벌이던 놀이다.</font></p>
<p align="justify"><font face="돋움" size="2">큰 줄을 꼬아 앞쪽에 고를 짓고 이것을 양쪽에서 밀어서 부딪게 한 다음 상대방의 고를 땅에 내려뜨린 쪽이 이기게 된다.</font></p>
<p align="justify"><font face="돋움" size="2">이 놀이의 유래에 대해 마을 주민들은 윷돌 마을이 황소가 쭈그리고 앉은 와우상이라 터가 거세기 때문에 이를 풀어주기 위해 시작하였다고들 한다.</font></p>
</body>
</html>


<예제 실행 화면>

 




  • Favicon of http://doqlrpdlf.tistory.com BlogIcon 난소녀다 2015.01.29 23:22 신고

    저.. 저도 이 블로그 스킨을 사용하는데요, 타이틀 부분 book review 부분을 어떻게 바꾸셨나요??
    아무리 html을 건들여봐도 어떻게 해야될지 막막하네요 ㅜㅜ



티스토리 툴바