|
<BR>
|
<BR>태그는 문장에서 줄바꿈을 적용할 때 사용하는 태그입니다. 이
<BR>태그는 HTML 문서의 어느 곳에서든 강제로 줄바꿈을 할 수
있습니다. 하지만 메모장 같은 에디터에서 엔터를 친다고 해서 문장에서
줄을 바꿀 수 없습니다. 줄을 바꾸고자 하는 위치에 <BR>이라는
태그를 넣으면 일반 워드문서에서 엔터로 줄바꿈을 하는 것과 같은 효과를
얻을 수 있습니다. 기본적으로 닫는 태그</BR>은 사용하지 않습니다.
|
하나 더 알려줄께
|
|
BR은 Line Break 라는 말의 약자입니다. Break 라는 말은 사전적
의미에서 나타나듯이 "끊김", "중단" 이라는 말이며,
한 줄 한 줄 텍스트들이 사용되고 있는 곳에 line break 라고 하면 어떤
의미인지 이해되죠?
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
|
![img2.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg2.gif)
|
![artnouveau_new.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fartnouveau_new.gif) White space란
일반적으로 "여백"이라고 부르며, 좀 더 구체적으로 설명한다면
본문의 줄과 줄 사이의 간격, 즉 행간과 글자와 글자까지의 거리를 말합니다.
|
|
<Hn>...</Hn>
(n=1...6)
|
- Hn에서 n은
1부터 6까지의 숫자를 의미합니다.
- H는 Heading의
약자로 주로 문장의 타이틀 제목으로 사용됩니다.
- H가 적용된
글자는 두꺼운
글자로
표현됩니다.
- H 글자의
크기는 H1>H2>H3>H4>H5>H6 순으로 나타납니다.
- <H>...</H>를
적용하면 <BR>을
적용하지 않아도 자동 줄 바꿈이
됩니다.
|
하나 더 알려줄께
|
|
<H>태그의
숨겨진 비밀>
<H>태그는
기능상 제목으로 사용한다고 알려져 있을 뿐 실제로 홈페이지를 사용할
때는 거의 사용하지 않는 태그라고 할 수 있습니다. 특히 그래픽 이미지가
유용하게 이용되고 있는 지금의 시점에서는 더욱 그러합니다. 그래서
그간 잘 알려지지 않은 내용을 하나 소개할까 합니다. 앞에서 배운 META-TAG의
내용처럼 <H>또한 검색엔진에서 사용할 수 있는 방안이 있습니다.
검색엔진은 웹 사이트를 돌아 다니면서 META-TAG를 검색하여 정보를
수집하기도 하지만, 페이지 내부에 적용된 <H> 태그 또한 검색의
대상이 됩니다. 검색 엔진의 로봇들은 검색 결과를 만들 때 <H>(=제목)의
크기에 따라 중요도를 결정하기도 합니다. 즉 <H1>이 가장 크게
나오므로 <H1>이나 <H2>가 적힌 사이트의 제목<H>들을
수집하고 다시 정리하여 그 내용을 검색 결과에 보여주기도 합니다. 그리고
<H>태그는 일종의 시각 장애인을 위한다는 의도에서 발전되었다고
합니다. 시각 장애인이 사용하는 컴퓨터는 일반 컴퓨터에서 볼 수 없는
특별한 장치가 부착되어 있어 모니터에 나타나는 텍스트를 음성으로
읽어줍니다. 이 장치는 시각 장애인들이 웹 서핑을 할 때 웹상에 있는
텍스트를 음성으로 읽어주게 되는데 <FONT> 태그로 폰트 크기를
설정했을 경우에는 크기와 상관없이 일반 텍스트로 읽는 반면, <H>
태그를 사용한 문장은 그것을 제목으로 인식하여 좀 더 강하게 읽어주게
됩니다. 제목으로 사용할 때 <H>태그는 의미없이 사용되는 것
같지만, 시각 장애인에게는 아주 요긴한 태그 중 하나입니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
![img3.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg3.gif)
|
![img4.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg4.gif)
|
|
<FONT
size="지정할 폰트의 크기">...</FONT>
|
- <FONT>
태그는 글자의 크기를 조절할 때 사용하는 태그로 절대크기와 상대크기가
있습니다.
- <FONT>의
속성에는 size, face, color가 있습니다.
|
①
절대크기
|
- 폰트의
크기는 1부터 7까지 있으며 1이 가장 작고, 7이 가장 큽니다. (<H>태그와
반대)
- HTML
문서의 글자 크기의 기본값은 3으로 되어 있으므로 예외적인 경우를
제외하고는 소스내부에 굳이 폰트 크기를 FONT size=3으로 지정할
필요가 없습니다.
|
② 상대크기
|
- HTML 문서의 절대크기의 기본값을 기준으로 상대크기를
적용합니다. 즉, <FONT size="+2">의 경우는 기본
글자크기가 3이므로 여기서 +2를 추가하여 <FONT size="5">와
동일하며 <FONT size="-1">은 <FONT size="2">와
동일합니다. 상대크기의 가장 큰 값은 +4이며, 가장 작은 값은 -2입니다.
상대크기는 절대크기의 값을 벗어나지 않는 범위에서 상대크기가
적용됩니다.
|
하나 더 알려줄께
|
|
<가독성>
홈페이지를 제작하는 웹 디자이너의 경우 잡지나 책에
대한 편집 경험이 거의 없는 관계로 가독성의 심각성을 경험해 보지
못한 경우가 많습니다. 웹 브라우저의 경우는 일반 편집물과는 달리
디스플레이 방식이 다른 관계로 한 행의 철자수는 60자가 넘어가지 않는
것이 좋습니다. 또한 일반적으로 웹상에서 사용하는 CSS의 경우 9pt를
많이 사용하는데, 이럴 경우 행간(line spacing)은 16pt로 제작하는
것이 가장 무난합니다. HTML의 경우 이런 편집적인 문제를 해결할 수
있는 방법이 전혀 없는 관계로 폰트 적용은 반드시 CSS를 사용할 것을
권합니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
|
![img6.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg6.gif)
|
|
<H>
|
<FONT>
|
적용범위
|
페이지에 타이틀로 이용
|
페이지 내 글자들에 이용
|
크기
|
H1~H6 (H1이 가장 큼)
|
1~7 (7이 가장 큼)
|
특징
|
자동 줄바꿈/글자가 굵게 표시
|
크기, 글자, 서체 등을 바꿀 수 있음
|
|
4
|
글자의
기본 크기를 설정할 때 <BASEFONT>
|
|
<BASEFONT size="지정할 폰트
크기">...</FONT>
|
HTML 문서의 기본글자 크기는 3입니다. <BASEFONT>
태그는 <BODY> 태그 다음에 놓이며 이 BASEFONT를 사용하면 문서
전반에 적용될 기본글자의 크기를 변경할 수 있습니다. 또한 FONT 태그와
같이 글자나 색상도 변경이 가능합니다. <BASEFONT> 태그는
종료태그 </BASEFONT>가 없습니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
![img7.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg7.gif) ![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg8.gif)
|
<FONT>태그와 <BASEFONT>태그의 비애?!
|
HTML 초기 버전에서부터 지금까지 아주 많은 사랑을
받아 왔던 태그 중 하나가 FONT 태그입니다. 하지만, 폰트에 서체 지정이
불가능하여 OS와 브라우저 사이에 에러가 발생하는 문제는 이루 말할
수 없을 만큼 골칫거리였습니다. 웹 브라우저마다 기본서체를 달리하면
제작자의 의도와는 달리 원치 않는 결과들이 웹 브라우저에 나타났으며,
또한 OS마다 기본서체가 다르므로 보여지는 결과도 달랐습니다. 이에
HTML 4.0부터 face 속성을 도입하여 하나 또는 여러 개의 서체를 지정할
수 있게 하여 OS 또는 웹 브라우저에서 지원하지 않는 서체일 경우 여러
개의 서체들을 순차적으로 적용할 수 있게 하였습니다. 하지만, HTML
4.0을 도입할 때 face속성과 함께 도입된 CSS는 한 번의 적용으로 여러
개의 서체를 한 번에 적용할 수 있고, 폰트의 색상과 크기까지 중앙에서
한꺼번에 제어가 가능하게 해 줌으로서 <BASEFONT> 태그와 <FONT>
태그가 가지는 특성을 한꺼번에 적용한다는 면에서 초기부터 상당히
센세이션을 불러 일으켰습니다. 현재 많은 웹 디자이너들은 <FONT>
태그로 인해 복잡해지는 HTML 문서를 대폭 간소화할 수 있다는 이유와
한번의 수정으로 전체를 수정할 수 있는 중앙 통제식이라는 이유로 CSS를
즐겨 사용하고 있습니다. W3C에서는 FONT와 BASEFONT의 사용을 자제하라고
권하고 있으며, 향후 버전에서는 이 FONT 태그와 BASEFONT 태그는 사라질지
모르는 위기에 처해 있습니다.
![square06_blue_4.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fsquare06_blue.gif) <BASEFON>라는
것은 HTML 문서 내에 있는 글자의 기본크기 <FONT size=3>의 크기를
다른 값이 기본값이 되게 설정할 수 있다는 것이지, 다른 글자들의 크기를
설정하지 못한다는 것은 아닙니다. 크기를 변경하려면 <BASEFONT>와는
무관하게 글자에 <FONT> or <H>를 적용하면 바꿀 수 있습니다.
|
기타 사라질지도 모를 태그들
|
HTML 4.0 기준에 따르면 다음의 태그는
스타일 시트로 기능이 흡수되어 향후 사용되지 않을 수도
있다고 합니다.
|
<BASEFONT>
|
size color face
|
기준이 되는 글자모양과 그 속성을 지정하여
페이지 전체에 적용
|
<BODY>
|
bgcolor text link alink vlink background
|
페이지의 바탕색을 지정 페이지 전체의
글자모양, 색상 지정 링크된 텍스트 색상을 지정 링크된
부분 선택했을 때 색상지정 이미 방문했던 링크의 색상을
지정 페이지 전체에 적용될 이미지 패턴 지정
|
<CENTER>
|
|
페이지의 세로 정렬 기준을 가운데로 설정
|
<DIV>
|
align
|
지정된 행을 정렬
|
<FONT>
|
size color face
|
폰트의 크기 지정 폰트의 색상 지정 폰트의
종류 지정
|
<IMG>
|
align vspace hspace border
|
이미지가 정렬될 위치 지정 이미지를
기준선에서 수직으로 이동 이미지를 기준선에서 수평으로
이동 이미지의 테두리 속성을 지정
|
<P>
|
align
|
문단 정렬방식을 지정
|
<TABLE>
|
align bgcolor
|
테이블의 배열 위치를 지정 테이블의
배경색을 지정
|
<TD>
|
nowrap
|
테이블의 셀 내부에서 줄바꿈을 하지 않음
|
|
|
<HR>
|
- 텍스트 사이에 선을 그려 넣을 수 있습니다.
- 길이조절(width) : 길이는 숫자나 퍼센트 중 원하는
것을 선택하여 삽입하면 됩니다.
(예) <HR width="90">라고
적으면 브라우저의 크기와 상관없이 90픽셀로 적용되며, <HR
width="90%">라고 적으면 브라우저의 크기에 따라
hr은 90%로 보여줍니다.
- 두께조절(size) : size 속성은 선의 두께를 조절합니다.
두께는 픽셀로만 입력이 가능합니다.
(예) <HR size="픽셀">
- 세로 선은 그을 수 없습니다.
- 자동줄바꿈 기능이 있어 <BR>태그가 필요없습니다.
- 정렬방식 : <HR align="center or right">
(기본값은 center)
- 입체감 없애기 : <HR noshade>
|
HR은
Horizontal Rule의 약자입니다.
|
하나 더 알려줄께
|
|
|
텍스트를 강조할 때 밑줄은 자제하길...
|
일반적으로 편집물에서 텍스트를 강조할 때 이탤릭체,
밑줄, 볼드체 등을 많이 사용하는데 웹 페이지에서 주의해야 할 부분은
밑줄입니다. 웹 페이지에서 적용되는 텍스트 중 다른 곳으로 이동 할
수 있는 링크로 간주되기 때문에 자칫 강조를 위해 사용한 밑줄은 사용자들에게
링크로 오해를 받기 싶습니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
|
![img10.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg10.gif)
|
|
<P>...</P>
|
<P> 태그는 HTML 1.0부터 지원하기 시작한 태그로서,
그 당시는 닫기 태그 </P> 없이 사용되었던 태그입니다. <P>...</P>
태그는 문단을 나눌 때 사용하는 태그로서 전체 텍스트에서 독립된 문단을
만들고자 할 때 <P>...</P> 태그를 적용하면 적용된 위치의
위와 아래로 문단을 나눌 수 있습니다. <P> 태그는 <BR>
태그를 두 번 적용한 것과 같은 효과를 얻을 수 있고, <P>...</P>
태그의 정렬(align)방식은 left, center, right가 있으며, 기본값은
left가 적용됩니다.
|
P는
paragraph의 약자입니다. Paragraph는 문단, 단락이라는 뜻입니다.
|
<P>태그의
문단 정렬 속성은 <P>...</P>태그에서만 적용됩니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
|
![img13.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg12.gif)
|
<P> 태그와 <P>...</P> 태그의 차이점
|
<P> 태그는 HTML 1.0 시절부터 사용된
태그이고, <P>...</P> 태그는 HTML 3.0부터
적용된 태그입니다. <P>와 <P>...</P>는
큰 차이점은 없지만, 자칫 잘못 적용하면 뜻하지 않게 페이지가
구성되므로, 꼼꼼히 따져보고 적용할 필요가 있습니다. <P>
태그는 다음에 적용될 문장을 단락지어 줍니다. 이에 비해
<P>...</P> 태그로 둘러싸인 문장들은 하나의
독립된 섬처럼 앞뒤의 문장들과 구분됩니다. 일종의 인용구처럼
앞뒤가 나뉘어짐을 의미합니다. 아래의 예제를 비교해 보세요.
|
<P>를 사용한 예제
|
<P>...</P>를 사용한 예제
|
<html> <head> <title><p>를 사용한
예제</title> </head> <body> 큰 차이점은 없지만, 자칫 잘못 적용하면
뜻하지 않게 페이지가 구성되므로, 꼼꼼히 따져보고 이해할
필요가 있습니다. <p> <p>태그는 다음에
적용될 문장을 단락 지어줍니다. <br> 이에반해 <p>...</p>
태그로 둘러싸인 문장들은 하나의 독립된 섬처럼 앞뒤의
문장들과 구분이 나누어 집니다. <br> 아래의 예제를 비교해 보세요. </body> </html>
|
<html> <head> <title><p>...</p>를
사용한 예제</title> </head> <body> 큰 차이점은 없지만, 자칫 잘못 적용하면
뜻하지 않게 페이지가 구성되므로, 꼼꼼히 따져보고 이해할
필요가 있습니다. <p> <p>태그는 다음에
적용될 문장을 단락 지어줍니다. <br> 이에반해 <p>...</p>
태그로 둘러싸인 문장들은 하나의 독립된 섬처럼 앞뒤의
문장들과 구분이 나누어 집니다.</p> 아래의 예제를 비교해 보세요. </body> </html>
|
![img14.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg13.gif)
|
![img15.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg14.gif)
|
|
7
|
글자/이미지/표
등을 중앙에 정렬할 때 <CENTER>
|
|
<CENTER>
|
<CENTER>...</CENTER>태그는 글자/ 이미지/
표 등을 중아에 정렬하는 태그입니다. <CENTER>...</CENTER>
태그는 Netscape 2.0 확장기능으로 소개되면서 많은 사람들ㅇ이 널리
사용해 오는 태그로 HTML 3.2에서 추간된 <DIV align="center">...</DIV>
태그와 동일한 기능을 합니다. <DIV>태그의 기능은 다음 장을
참고해 주세요.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head> <title>글자
/ 이미지 / 표 등을 중앙에 정렬할 때</title> </head> <body> <center>텍스트와
이미지 표를 마음대로 배치합니다.</center> </body> </html>
|
![img15.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg15.gif)
|
|
<DIV>...</DIV>
|
<DIV>태그는 Netscape 2.0에서 확장시킨 문장에
적용하는 단락 태그입니다. 이 태그는 HTML 3.2에서 처음으로 적용되었다가
HTML 4.0에 이르러 CSS 분야까지 확장하여 두루 적용되고 있습니다. <DIV>...</DIV>태그는
단락을 나누고 단락 정렬 속성을 적용하는 점에서 <P>...</P>태그의
기능과 유사하며, 글자/이미지/표 등을 중앙정렬 한다는 의미에서는
<CENTER>...</CENTER>태그와 유사합니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head> <title>단락을
정렬할 때</title> </head> <body> <div
align="right">텍스트와 이미지 표를 마음대로 배치합니다.</div>
</body> </html>
|
![img16.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg16.gif)
|
<DIV>...</DIV>태그와 <P>...</P>태그의 차이점
비교
|
<DIV>...</DIV>태그가 문장의 단락을 나누고,
속성의 정렬방식을 적용한다는 점에서 <P>...</P>태그와
동일하다고 했는데, 그렇다면 과연 두 태그는 어떻게 다를까?...<P>...</P>태그는
문단을 나누는 태그로 <P>...</P>가 적용된 부분의 위쪽과
아래쪽에 한 줄씩의 공백이 들어갑니다. 하지만, 전체 문장에서 <DIV>...</DIV>
태그가 적용된 부분은 단순히 줄바꿈<BR> 기능이 들어간 것과
같이 상하 구분이 되지 않습니다.
|
|
<P>...</P>
|
<DIV>...</DIV>
|
중점 기능
|
문장의 단락을 구분
|
문장의 단락을 정렬
|
효과
|
다른 문장과의 구분에 공백이 생김
|
다른 문장과의 구분이 없음
|
|
<P>...</P>
사용한 예제
|
<DIV>...</DIV>사용한
예제
|
<html> <head> <title><p>…</p>적용
예제</title> </head> <body> <div>…</div>태그가
문장의 단락을 나누고, 속성의 정렬방식을 적용한다는 점에서
<br><p>…</p>태그와
동일하다고 했는데, 그렇다면 과연 두 태그는 어떻게 다를까.. <p
align="center"><p>…</p>
태그는 문단을 나누는 태그로 <p>…</p>가
적용된 부분의 위쪽과 아래쪽에 <br> 한 줄 씩의
공백이 들어갑니다.</p> 하지만, 전체 문장에서
<div>…</div> 태그가 적용된
부분은 단순히 줄바꿈<br> 기능이 들어간
것과 같이 상하 구분이 되지 않습니다. </body> </html>
|
<html> <head> <title><div>…</div>적용
예제</title> </head> <body> <div>…</div>태그가
문장의 단락을 나누고, 속성의 정렬방식을 적용한다는 점에서
<br><p>…</p>태그와
동일하다고 했는데, 그렇다면 과연 두 태그는 어떻게 다를까..
<div align="center"><p>…</p>
태그는 문단을 나누는 태그로 <p>…</p>가
적용된 부분의 위쪽과 아래쪽에 <br> 한 줄 씩의
공백이 들어갑니다. </div> 하지만, 전체 문장에서
<div>…</div> 태그가 적용된
부분은 단순히 줄바꿈<br> 기능이 들어간
것과 같이 상하 구분이 되지 않습니다. </body> </html>
|
![img17.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg17.gif)
|
![img18.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg18.gif)
|
|
위의 화면에서 처럼 <DIV>...</DIV> 태그가
들어간 곳은 <BR>태그를 적지 않아도 줄바꿈만 되지만, <P>...</P>
태그가 들어간 곳에는 그림처럼 위와 아래에 공백이 생깁니다.
|
|
HTML 문서는 기본적으로 문서에 포함된 공백,
탭, 들여쓰기, 띄워쓰기, 줄바꿈 등이 무시되어 표현되기 때문에 처음
HTML을 접하는 경우 텍스트나 이미지의 배치가 상당히 어렵습니다. 하지만,
이 <PRE>...</PRE>(preformatted text) 태그를 이용하면
아스키 문자로 만든 모양들이나 인터넷 또는 pc 통신 게시판에서 잘
쓰는 많은 별들과 원들로 적은 예쁜 시 등을 그대로 표현할 수 있습니다.
|
- <PRE>는 preformatted text의 약자입니다.
- 고정폭(Fixed Width Font)로 나타납니다.
(고정폭이란
모든 글자의 폭이 동일한 글꼴, 영문의 경우 Courier 서체)
- 공백, 탭, 들여쓰기, 띄워쓰기, 줄바꿈 등을 그대로
표현할 수 있습니다.
|
<PRE>태그를 사용할 때 주의할 점
|
- <PRE>...</PRE>태그 내부에 글자나
문자는 자유형식으로 표현할 수 있습니다.
이런 이유로 띄어쓰기를
할 때, 되도록 탭(TAB) 키를 이용하기 보다는 향후 수정 작업이
있을 수 있으므로 스페이스바(spacebar)를 이용하기 바랍니다. 아울러,
브라우저마다 탭의 길이가 다르므로 적용되는 위치가 예상보다 다르게
나타날 수도 있습니다. 각별히 신경 쓰도록 하세요.
- <PRE>...</PRE>태그를 사용할 때
[Enter]를 치지 않고 계속 글자를 입력하게 되면, 가로로 스크롤
바가 길게 생겨 웹 브라우저에 표현됩니다. 이처럼 <PRE>태그는
자동 줄바꿈을 해주지 않는 태그입니다. 아울러 사용자들은 가로
스크롤 바에 익숙하지 않으므로 <PRE>태그를 적용할 때는
반드시 이런 부분에 주의해야 합니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head> <title>글자의
위치를 자유롭게</title> </head> <body> <pre> -
preformatted text 의 약자 입니다. - 고정폭(Fixed
Width Font)로 나타납니다. (고정폭이란
: 모든 글자의 폭이 동일한 글꼴, 영문의 경우 Courier 서체) -
공백, 탭 , 들여쓰기 , 띄워 쓰기, 줄바꿈 등을 그대로 표현할 수 있습니다. </pre> </body> </html>
|
![img4.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg19.gif)
|
|
|
HTML 문서는 스페이스바가 기본적으로 적용되지 않습니다.
일반 워드 문서처럼 띄어쓰기를 하기 위해 스페이스바를 아무리 눌러도
한 번 적용된 것처럼 웹 브라우저에 표시됩니다. 이때 이 를
적용하면 띄어쓰기를 할 수 있습니다. 참고로 이 는 대소문자를
식별하므로 항상 소문자로 적용하기 바랍니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head> <title>띄워
쓰기 할 때</title> </head> <body> HTML
문서는 스페이스바가 기본적으로 적용 되지 않습니다.<br>
이란 워드 문서처럼 띄워 쓰기를 하기 위해 스페이스바를 아무리 눌러도<br> 한
번 적용된 것처럼 웹 브라우저에 표시 됩니다.<br>
이때 &nbsp;를 적용하시면 띄워 쓰기를 할 수 있습니다.<br>
쉽죠? ^^ </body> </html>
|
![img3.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg20.gif)
|
를 사용하지 않고 빈칸을 삽입하는 방법
|
홈페이지를 만들다 보면 경우에 따라서 스페이스바를
적용하여 만들어야 할 문서들이 의외로 많습니다. 전체 레이아웃
구조상 아니 꼭 그렇게 적용해야 할 경우가 발생하곤 하는데, 그럴 때마다
수 십번의 를 적용한다는 것은 거의 중노동에 가까운 일입니다.
또한 는 얼마만큼 띄어쓰기가 됐는지는 웹 브라우저를 실행하여
확인하지 않으면 알 길이 없습니다. 이럴 경우에 다음과 같은 방법을
적용하면 간단하게 처리할 수 있습니다.
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
|
<html> <head> <title>친구에게
보내는 편지</title> </head> <body> <p>별을
다듬어<br> 보석보다 값진 양심을 만드는<br> 빛나는
역동</p> ...
|
<p>내어줌으로만 얻게하시고<br> 비움으로
더욱 채우신 후<br> 참 나를 일으켜 세워<br> 기도하게
하신 이</p> <font color="#ffffff">.....................................</font>친구
성욱이가.. </body> </html>
|
![img5.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg21.gif)
|
- 위의 마지막 부분에서 "친구 성욱이가"라는
부분을 로 적어준다면 몇 번을 적용해야 할까요?
- 이럴 경우 배경이 흰색이라면 긴 공간들을 모두
점으로 사용하여 색상을 흰색으로 바꾸면 간단히 해결됩니다.
<FONT
color="white">....................</FONT>친구
성욱이가..
이처럼 빈공간을 만들 자리를 점으로서 해결한다면
브라우저를 일일이 열어가면서 간격을 조절할 필요는 전혀 없습니다. 어때요?
간단하죠? ^*^ ^*^
|
|
<BLOCKQOUOTE>...</BLOCKQUOTE>
|
BLOCKQUOTE 태그는 한 줄 또는 여러 줄로 된 인용문을
만들 때 사용합니다. 형식은 일반 텍스트보다 안쪽으로 들여쓰기가
되어 표시됩니다.
|
- <BLOCKQUOTE> 태그를 사용하면 <P>태그를
적용한 것처럼 문단을 나누어 줍니다.
- 탭을 사용한 것처럼 들여쓰기가 됩니다.
- 들여쓰기의 간격은 인위적으로 늘이거나 줄이기가
불가능합니다.(정해진 틀이 있음)
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
<html> <head> <title>문장의
들여쓰기</title> </head> <body> 다음은
18세기 서정시인 로버트 번즈의 "red red rose"의 시를 소개
합니다. <blockquote> 오 나의 님은 6월에 새로이 피어난
새빨간 장미,<br> 오 나의 님은 곡조 맞춰 감미로이 연주된
멜로디<p> 이처럼 너는 예뻐, 사랑스런 소녀야, 이처럼 깊이
나는 사랑해<br> 언제까지나 나는 사랑하리, 내 님이여,<br> 온
바다가 말라 버릴 때 까지 </blockquote> </body> </html>
|
![img6.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg22.gif)
|
12
|
스크롤되는
문자를 만들 때 <MARQUEE>
|
|
<MARQUEE>...</MARQUEE>
|
MARQUEE 란 윈도우 바탕화면 스크린 세이버에서 볼
수 있는 단어이며, "차양" 이라는 뜻입니다. HTML에서는
어떤 특정 지역을 움직이며 지나가는 문자열을 MARQUEE 라고 합니다.
MARQUEE 태그를 이용하면 자바를 이용하지 앟고도 화면에 스크롤되어
지나가는 문자를 만들 수 있습니다. 최근 홍보를 하기 위해 게시판에서
글을 올릴 때 MARQUEE를 적용하는 경우가 많습니다. 활용도에 따라서
상당히 재미를 부여할 수도 있습니다. 하지만, 아쉽게도 <MARQUEE>태그는
인터넷 익스플로러에서만 지원되는 한계가 있는 태그입니다. 꼭 기억했다가
필요할 때 사용하세요. <MARQUEE> 태그의 속성은 height, width,
bgcolor, behavior, direction, loop, scrollamount, scrolldelay 등이
있습니다.
|
① height / width
글자가 지나갈 배경의 높이와 폭을 지정합니다.
단위는 픽셀이나 퍼센트를 이용합니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>marquee의
높이와 폭 지정</title></head> <body> <marquee
height="50" width="500">글자가 지나갑니다.
</marquee> </body> </html>
|
![img7.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg23.gif)
|
② bgcolor
글자가
지나갈 배경의 색상을 지정합니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>marquee의
배경색 지정</title></head> <body text="white"> <marquee
bgcolor="red">글자가 지나갑니다. </marquee> </body> </html>
|
![img8.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg24.gif)
|
③ behavior
글자들이
MARQUEE 위에서 어떻게 움직일지를 결정하는 것입니다.
- Alternate : 글자들이 MARQUEE 위에서 반복적으로
좌우로 왔다 갔다 합니다.
- Scroll(기본값) : 글자들이 오른쪽에서 왼쪽으로
스크롤되어 사라진 후 다시 시작합니다.
- Slide : 글자들이 오른쪽에서 왼쪽으로 스크롤된
후 멈춰 버립니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>글자의
움직임을 결정</title></head> <body> <marquee
behavior="alternate">behavior 적용</marquee><p> <marquee
behavior="scroll">behavior 적용</marquee><p> <marquee
behavior="slide">behavior 적용</marquee><p> </body> </html>
|
![img10.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg25.gif)
|
④ direction
글자들이 움직일 방향을 결정합니다.
옵션은 왼편(left)과 오른편(right)이 있으며 기본값은 left로 되어
있습니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>글자의
방향 지정</title></head> <body> <marquee>
글자의 방향</marquee><p> <marquee direction="right">
글자의 방향</marquee> </body> </html>
|
![img11.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg26.gif)
|
⑤ loop
<MARQUEE>
태그 위에서 글자들이 되풀이하며 움직일 횟수를 결정합니다. infinite
나 -1을 지정하면 무한하게 반복합니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>글자의
반복횟수 조절</title></head> <body> <marquee
loop="5">글자의 반복횟수 조절</marquee> </body> </html>
|
![img12.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg27.gif)
|
⑥ scrollamount
<MARQUEE> 태그 위에서 글자들이 움직일
때 한 번에 얼마만큼 움직이는지를 결정합니다. 단위는
픽셀 값으로 결정하며 픽셀 값이 크면 클수록 글자들의 움직임이 부자연스럽습니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>글자의
한 번에 움직이는 속도</title></head> <body> <marquee
scrollamount="50">글자의 움직이는 속도</marquee> </body> </html>
|
![img13.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg28.gif)
|
⑦ scrolldelay
MARQUEE 위에서 글자들이 움직이는 속도를
결정하며 단위는 밀리초(1/1000초)입니다. 시간이
길면 그만큼 글자의 이동속도가 느려집니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head><title>글자의
움직이는 속도</title></head> <body> <marquee
scrolldelay="5">글자의 움직이는 속도</marquee> </body> </html>
|
![img14.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg29.gif)
|
|
|
<B>...</B> 글자를
굵은 글자(boldface)로 만들어 줍니다.
<I>...</I>
글자의 형태를 이탤릭체로 만들어
줍니다.
<TT>...</TT>
일명 타자체라고 하며, 도스화면에서 표현되는
글자처럼 글자의 넓이가 동일한 고정폭 글자를 말합니다.
<SUP>...</SUP>
HTML 3.0에서 지원하기 시작한 위첨자입니다.
<SUB>...</SUB>
위첨자와 반대인 아래첨자입니다.
<U>...</U> 글자에
밑줄을 그어 줍니다.
<S>...</S>
취소 또는 삭제의 의미를 나타낼 때 사용하는
태그로 글자의 중앙으로 선을 그을 때 사용합니다.
<BIG>...</BIG>
기존의 문장에서 사용하는 글자보다 큰 크기로
표현합니다.
<SMALL>...</SMALL>
문장에서 사용되는 글자보다 작은 크기로 표현합니다.
<BLINK>...</BLINK> 깜박임이란
말로 HTML 문서에서 강조하고 싶은 글자를 깜박이게 하여 쉽게 눈에
띄게 할 때 사용합니다. 단, 이 태그는
넷스케이프에서 적용되는 태그로 익스플로러에서는 지원하지 않습니다.
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif)
<html> <head> <title>문자를
장식할 때</title> </head> <body> <basefont
size=2> <H3> 다음은 문자를 장식할 때 사용하는 태그입니다</H3> <hr
width="80%" align="left"> <p> 문자
장식 태그는 참고로 아래 10가지 만 아시면 이용에 전혀 문제가 없습니다.
<p><br> <b>글자를 굵게 적고 싶을 때는 B태그를
이용 하시구요.</b><p> <I>이탤릭체로 적고 싶은
때는 I태그를 이용하시면 됩니다.</I><p> <TT>고정폭
글자를 이용하고 싶을 때는 TT태그를 이용하세요.</TT><p> 위첨자의
효과는 이런거에요. <sup>위첨자</sup><p> 아래첨자
효과도 보실래요? <sub>아래첨자</sub><p> <u>글자에
밑줄을 그으실 때는 U태그를 이용하세요.</u><br> U태그는
사용자들이 링크가 걸렸다는 표시와 혼돈할 수 있으므로 조심해서 사용하세요.<p> <s>아
실수</s>, 실수를 했을때는 S태그 입니다. ^^<p> 기존의
글자보다 크게 보이죠? <big>이 태그는 Big 태그 입니다.</big><p> 이번에는
기존의 글자보다 작죠? <small>이 태그는 Small 태그 입니다.</small><p> <blink>반짝
반짝…</blink> 이 태그는 반짝 반짝하게 만들 때 사용하는 태그입니다.<br> 근데..
반짝거리지 않죠? 아쉽게도 넷스케이프에서만 적용될 뿐 익스플로러에서는
적용이 않된다는 군요. </body> </html>
|
![img15.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg30.gif)
|
|
< → < >
→ >
& → & "
→ &quo
|
![](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Ftmp22429.gif) <html> <head> <title>특수문자
표기법</title> </head> <body> <basefont
size=2> HTML 상에서는 표기하기 어려운 특수 문자가 있습니다.<p> 그
특수 문자들은 <b><</b> 와 <b>></b>
, <b>&</b> , <b>"</b> 등이
있습니다.<br> 이런 특수 문자들을 <b>'특수문자 엔티티(Special
Character Entity)'</b>라고 부릅니다. </body> </html>
|
![img16.gif](https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyyoung7.netian.com%2Fwebstudy%2F05%2Fimages%2Fimg31.gif)
|
하나 더 알려줄께
|
|
|
자주 사용하는 특수문자
|
ㅁ + 한자키 →
☆, ★, ○, ●, ◇, →, ↓, ♣, ◈ 등 ㄴ + 한자키 → 《, 》,
【, 『, , 』, 등 ㅇ + 한자키 → ⓐ, ⓑ, ①, ②, ⒜, ⒝, ⑴,
⑵ 등 ㅈ + 한자키 → ⅰ, ⅱ, Ⅳ,Ⅶ, 등
|
ㄷ + 한자키 →
±, ÷, ∴, ♂, ♀, ≒, √ 등 ㅌ + 한자키 → ㅨ,
ㅽ, ㅰ등 ㅊ + 한자키 → ⅓, ⅛, ⅞ 등 ㅎ + 한자키 → Σ,
Π, α, β, λ 등 ㅅ + 한자키 → ㉠, ㉡, ㉮, ㉯ 등
|
이상으로 텍스트에 대해서 알아 보았습니다. 따라서 학습하시기 바랍니다.
|