|
[5] 링크 태그 (연결하기)
[ ☞☎ 주의 : 저작권이 있는 곳을 링크 하거나 복제 하여 인터넷에 올리는 것은 저작권 보호에 관한 법률에 저촉 될 수 있습니다. ]
1. 링크태그의 기본
링크태그의 기본은 <a> 와 </a> 태그이다. 그러나<a> 만을 사용하면 아무것도 나타나지 않는다. 어느 곳으로 연결시켜줄 것인가를 지정해주는 속성이 href="주소" 속성이다.
즉, <a href="링크 시킬 주소"> 여기를 누르세요.</a> 이것이 링크를 시켜주는 명령어다. 그러나, 이것은 지금하고 있는 이 화면이 다른 화면으로 바뀌어 버린다. 다른 새로운 창을 띄우려면 아래의 명령어로 해야 새로운 창이 뜬다.
target="_blank" 이것이 새 창을 뜨게 하는 속성이다. 새로운 창을 띄우게 하려면 아래와 같이 하면 된다.
☞ <a href="링크 시킬 주소"target="_blank"> 여기를 누르세요.</a>
만약,이미지를 삽입하여 링크를 원하면 아래 명령어처럼 해본다.
2. 이미지를 삽입한 링크방법
☞ <a href="링크 시킬 주소"> <img src="그림 주소"></a> 이렇게 하면 된다.
☞ <a href="링크 시킬 주소" target="_blank"> <img src="그림 주소"></a> 이렇게 이미지를 삽입하여 새 창을 뜨게 하는 법도 위에 있는 예제와 같다. 이미지를 삽입한 예가 바로 배너 광고다. 이미지를 삽입하여 새 창을 띄우는 링크 태그에는 이미지에 테두리가 없다. 그리고 이미지에 마우스 커서를 갖다 대면 글씨가 뜬다.
테두리를 없애려면 border라는 속성을 써야 한다. border="0"이렇게 하면 테두리가 없어지고 숫자가 클수록 테두리의 두께가 증가한다. 마우스 커서를 갖다 대면 글씨가 뜨는 속성은 아래와 같다.
alt 라는 속성을 쓰면 된다. alt="설명" 이런 식으로 쓰면 글씨가 나온다. 이 속성들은 이미지태그 뒤에 연결해서 쓰면 된다.
예제) <img src="이미지 주소" border="0" alt="설명">
1) 삽입 방법
html 파일에 이미지 삽입하는 방법은 <IMG SRC="그림파일">이라고 사용합니다. IMG는 image의 약자라고 보면 되죠.
<IMG SRC="그림파일" border="n" width="n" height="n">
- src - 보여줄 그림 파일이 있는 위치 정보입니다. source의 약자라고 보면 되겠죠?
- border - 그림의 테두리 선의 두께를 나타납니다. Default는 1이고 테두리 선이 나타나지 않도록 하려면 border="0"를 주면 됩니다.
- width - 그림의 폭을 조절합니다.
- height - 그림의 높이를 조절합니다.
- Alt
Alt 속성은 윈도우 95나 윈도우 98에서 보면 마우스를 아이콘이나 메뉴에 갖다 대었을 때 나타나는 풍선 비슷한 도움말 있죠? 바로그런 효과를 나타냅니다.
- Hspace, Vspace
Image를 Html 파일 내에서 원하는 곳으로 이동시키는 옵션입니다.
Hspace는 "Horizontal Space"의 약자로 가로 방향으로 원하는 위치까지 그림을 이동시킬 수 있죠.
Vspace는 "Vertical Space"의 약자로 세로 방향으로 원하는 위치까지 그림을 이동시킬 수 있구요.
이동 단위는 픽셀(Pixel) 이랍니다.
html 파일과 이미지가 같은 디렉토리에 있을 경우에는 src 부분에 그냥 이미지 명만 적으면 됩니다. 이미지의 파일 이름이 flower.gif 라면 <img src="flower.gif"> 와 같이 나타내 주면 되죠.
그런데 다른 디렉토리에 있다면 디렉토리 정보도 함께 보여줘야 합니다. 만약 index.html 이라는 파일에 이미지를 삽입하려고 하는데, image라는 디렉토리를 만들고 그 안에 flower.gif 라는 파일이 존재한다면 <img src="image/flower.gif"> 라고 사용하면 되죠. flower.gif 라는 파일은 image 라는 디렉토리 밑에 있고 index.html 이라는 파일과 image라는 디렉토리는 같은 위치에 존재한다는 가정에서 가능하죠.
만약 내 홈페이지가두 개가 있는데, 하나는 http://asanak.com.ne.kr/asanak.htm 이고 다른 하나는 http://ahansan.com.ne.kr이라고 가정을 해봅시다. com.ne.kr라는 계정에 image라는 디렉토리를 만들고 flower.gif 라는 파일을 올려놓았어요. 그런데 clipartworld라는 계정에서 사용하고 싶어요.
<img src="http://asanak.com.ne.kr/image/flower.gif"> 라고 사용을 하면 됩니다. 메일을 보낼 때 html 형태로 보내려면 이미지를 먼저 서버로 올린 후에 이런 식으로 링크를 시켜서 보내면 예쁜 메일을 보낼 수 있겠죠?
<!-- Image의 width와 height를 임의로 조절하는 것은 바람직하지 않습니다. 포토샵이나 페인트샵 프로 등의 툴을 이용해서 사이즈를 조절하는 것이 좋습니다. 그래야 보기가 더 좋거든요. -->
2) 삽입시 주의사항
별로 주의사항이라고 할 수도 없는데, 만약 제대로 연결을 한 것 같은데, PC에서는 제대로 이미지가 보였는데 서버에 올린 후 이미지가 보이지 않으면 다음 사항을 의심해보세요.
-
이미지가 서버에 있는가?
자신의 PC에서 작업을 한 후, html 파일만 올리고 이미지 파일을 올리지 않아 보이지 않는 경우가 있어요.
-
대소문자가 확실한가?
이미지 파일이름의 대소문자와 <img src="..."> 의 src 부분에 들어간 이름의 대소문자가 동일한지 확인해 봐야 합니다.
window 시리즈는 대소문자를 구별하지 않습니다. 이미지 이름이 FLOWER.GIF 인데 <img src="flower.gif"> 라고 해놓고 window가 install 되어 있는 컴퓨터에서 테스트를 하면 잘 보입니다.
웹서버는 크게 유닉스 계열과 NT 계열로 볼 수 있는데, NT 같은 경우는 대소문자를 구별하지 않지만 유닉스 계열은 대소문자를 구별한답니다. aaa, Aaa, AAa, AAA 가 모두 다르게 인식이 되지요.
-
링크가 제대로 되어있나?
<img src="...">의 src 부분에 file:///C:/home/nanumi/logo.gif와 같이 링크가 걸려있지는 않은지 확인해 보세요.
주의사항이라고 할 수도 없는데, 처음에 많이 실수하는 부분이니까 참고하세요.
2. 메일보내기 링크에 대해서 간단한 설명
다른 홈페이지에 가보면 운영자에게 메일보내기를 누르시면 메일보내기 박스가 나오죠? 그것도 간단하게 할 수 있다. 아래의 명령어대로 하면 간단하게 메일 보내기 박스를 만들 수 있다.
☞ <a href="mailto:메일주소">운영자에게 메일보내기</a>
3. 음악 링크
뮤직사이트에 가면 노래제목을 클릭하면 음악이 나고 그 것 역시 링크태그를 사용해서 음악을 들을 수 있게 한 것이다.
☞ <a href="음악주소">제목</a> 이렇게 하면 클릭했을 때 음악이 나오게 할 수 있다.
4. 내부링크와 외부링크
Html 문서를 하나하나 만들면 이들 문서를 링크시켜 주어야 합니다. 링크를 시킨다는 것은 어떤 이미지나 글을 마우스로 클릭했을 때 연결된 다른 문서로 이동하는 기능을 말합니다.
이것이 Html 문서의 가장 큰 특징이자 장점이라고 할 수 있습니다. 이러한 기능을 하이퍼텍스트(HyperText)라고 하며, 문서와 문서를 서로 이동이 가능하도록 하는 기능을 링크(Link)라고 합니다.
링크에는 내부링크와 외부링크 두 가지가 있습니다. 내부링크와 외부링크의 차이점은 링크시키려는 것이 내부 문서의 일부분이냐 아니면 다른 문서냐에 따라서 구분을 한다고 보면 됩니다.
1) 내부링크
원하는 정보가 있는 부분으로 빠르게 이동할 수 있도록 한 동일 문서상의 링크입니다. 일명 책갈피 기능이라고도 합니다. 물론 다른 문서의 책갈피를 지정해서 링크를 클릭했을 때 다른 문서의 원하는 부분으로 이동하게도 할 수 있습니다.
<A HREF="#책갈피 이름">...</A>
...
<A NAME="#책갈피 이름">...</A>
예를 들면 아래와 같습니다.
<A HREF="#story1">이야기 하나</A>
<A HREF="#story2">이야기 둘</A>
<A HREF="#story3">이야기 셋</A>
...
<A NAME="story1">이야기 하나</A>
<A NAME="story2">이야기 둘</A>
<A NAME="story3">이야기 셋</A>
<!-- 특히 내부링크를 적절히 이용하면 사용자가 쉽게 정보를 찾을 수 있도록 Html 문서를 꾸밀 수 있습니다. -->
2) 외부링크
Html 문서의 외부에 있는 사이트 주소(URL), Html 문서, 이미지, 파일 등을 연결하여 링크를 만들 때 사용하면 됩니다.
<A HREF="파일 이름 또는 사이트 주소">...</A>
예를 들어볼까요?
<A HREF="story.htm">이야기</A>
<A HREF="http://nanumi.pe.kr">나누미 홈</A>
<A HREF="home.htm"><IMG SRC="home.gif"></A>
<A HREF="http://clipartworld.com" target="_blank">
<IMG SRC="http://clipartworld.com/image/banner.gif"></A>
"A" 는 "Anchor", "HREF"는 "Hyper REFerence"의 약자입니다. 그리고 위의 예에서 보면 "이야기"나 "나누미 홈"에 파랗게 밑줄이 생기는데, 그 밑줄부분을 클릭하면 링크시킨 페이지로 이동할 수 있습니다. 그리고 target 이라는 것을 줄 수가 있어요. target이란 하이퍼 링크를 클릭했을 때 링크시킨 페이지가 나타날 대상을 말하는데, 위에서와 같이 target="_blank" 라고 하면 새로운 창에 링크시킨 내용이 나타나죠. 생략을 하면 현재 html이 있는 곳에 페이지가 나타나게 됩니다.
그럼 몇 개 알아볼까요?
-
_blank : 새 창에 html 문서를 나타낸다.
-
_top : 프레임으로 나눈 페이지라 하더라도 브라우저 전체 화면에 해당 페이지를 나타낸다.
-
_parent : parent란 부모라는 뜻이죠? 이건 자바 스크립트를 공부하면 이해하게 됩니다.
-
_self : 자기자신을 나타내죠. 이것도 자바 스크립트를 공부하면 개념이 서게 될 겁니다.
위에서 많이 사용하는 것은 "_blank"와 "_top"이 많이 사용되고 이 둘만 알아도 전혀 불편한 점은 없습니다.
<!-- 브라우저에서 지원하는 파일들(Html, Url, txt, jpg, gif...) 등의 파일은 링크로 이동하여 브라우저에 나타나지만 exe와 같은 실행파일이나 zip 같은 압축파일을 링크시키면 자동으로 다운로드 Dialogue Box가 나타납니다. -->
<!-- 링크시킨 부분이 처음에는 파란색으로 링크를 클릭하는 순간에는 빨간색, 링크를 클릭하고 나면 보라색으로 바뀌는데 이것은 CSS(나중에 설명해요)나 BODY Tag에 옵션을 주어 변경할 수 있어요. Default는 다음과 같아요.
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> -->
<!-- CSS는 캐스캐이딩 스타일 쉬트라고 하는데 Dynamic Html을 보면 맨 첨에 나와요. CSS를 이용해서 링크부분의 밑줄도 없앨 수 있답니다. -->
[6] 표 만들기
1. 기본형 표 만들기
<table border="숫자"> : 표시작, 표테두리, <caption>(표제목)</caption> : 표제목 지정,
<th>(헤더내용)</th> : 헤더 내용 지정(굵은 글꼴), <tr> : 줄 시작 지정,
<td>(셀내용)</td> : 셀내용 지정, </tr> : 줄 끝남 지정, </table> : 표의 끝
예를들면)
<table border="1">
<caption>(표제목)</caption>
<th>(헤더내용)</th>
<tr><td>(셀내용)</td>
</tr>
</table>
이라고 소스를 쓰면, 다음과 같이 출력 됩니다.
2. 표 크기 조정
<TABLE BORDER=(숫자) WIDTH=(픽셀 수)>.....</TABLE> : 표 테두리 굵기, 넓이 조정
<TABLE BORDER=(숫자) HEIGHT=(픽셀 수)>.....</TABLE> : 표 테두리 굵기, 높이 조정
<TABLE BORDER=(숫자) WIDTH=(픽셀 수) HEIGHT=(픽셀 수)>.....</TABLE> : 표 테두리 굵기, 넓이, 높이 조정
3. 표 정렬
<TH ALIGN=LEFT>.....</TH> : 헤더 내용을 셀 왼쪽으로 정렬
<TH ALIGN=CENTER>.....</TH> : 헤더 내용을 셀 가운데로 정렬
<TH ALIGN=RIGHT>.....</TH> : 헤더 내용을 셀 오른쪽으로 정렬
<TD ALIGN=LEFT>.....</TD> : 셀 내용을 셀 왼쪽으로 정렬
<TD ALIGN=CENTER>.....</TD> : 셀 내용을 셀 가운데로 정렬
<TD ALIGN=RIGHT>.....</TD> : 셀 내용을 셀 오른쪽으로 정렬
4. 기본 테이블 태그
<table border=1><tr><td> 태그소스 결 과</td></tr></table>
<table border=1><tr><td> 태그소스 결 과</td> <td>본문 내용</td></tr></table>
<table border=1> <tr><td>글씨 넣고</td> <td>그림 넣고</td> </tr> <tr> <td>음악넣고</td> <td>여러가지</td></tr></table>
5. 테이블 태그 예제
예제 - 1행2열 표
<table border="1" bordercolor="red" width="200">
<tr><td>1</td><td>2</td></tr></table>
예제 - 2행3열 표
<table border="1" bordercolor="blue" width="200">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr></table>
예제 - 3행4열 표
<table border="1" bordercolor="ff00ff" width="200">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
6. 합쳐진 셀의 표 만들기
<TH ROWSPAN=(셀갯수)>.....</TH> : 헤더에서 셀 갯수의 줄을 합친다.
<TH COLSPAN=(셀갯수)>.....</TH> : 헤더에서 셀 갯수의 칼럼(열)을 합친다.
<TD ROWSPAN=(셀갯수)>.....</TD> : 셀 내용에서 셀 갯수의 줄을 합친다.
<TD COLSPAN=(셀갯수)>.....</TD> : 셀 내용에서 셀 갯수의 칼럼(열)을 합친다.
<table border="1" bordercolor="ff00ff" width="200"><caption>(표제목)</caption>
<th>(헤더내용)</th>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr></table>
(표제목)
| (헤더내용) |
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
<table border="1" bordercolor="ff00ff" width="200"><caption>(표제목)</caption>
<th ROWSPAN=4>(헤더내용)</th>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr></table>
(표제목)
| (헤더내용) |
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
<table border="1" bordercolor="ff00ff" width="200"><caption>(표제목)</caption>
<th COLSPAN=4>(헤더내용)</th>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr></table>
(표제목)
| (헤더내용) |
| 1 |
2 |
3 |
4 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
<table border="1" bordercolor="ff00ff" width="200"><caption>(표제목)</caption>
<th COLSPAN=4>(헤더내용)</th>
<tr><td ROWSPAN=3>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td></tr></table>
(표제목)
| (헤더내용) |
| 1 |
2 |
3 |
4 |
| 6 |
7 |
8 |
| 9 |
10 |
11 |
<table border="1" bordercolor="ff00ff" width="200"><caption>(표제목)</caption>
<th COLSPAN=4>(헤더내용)</th>
<tr><td COLSPAN=4>1</td></tr>
<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr></table>
(표제목)
| (헤더내용) |
| 1 |
| 5 |
6 |
7 |
8 |
| 9 |
10 |
11 |
12 |
7. 테이블의 부가적인 속성
border="수치" 표의 테두리 두께를 조정해준다.
bordercolor="색상" , "색상코드" 표의 테두리의 색을 지정한다. 위의 예제에 보면 테두리의 색이 각자 틀리다는 것을 알 수 있다.
WIDTH="수치" , "수치%" 표의 가로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용 가능하다.
HEIGHT="수치" , "수치%" 표의 세로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용 가능하다.
CELLSPACING="수치" 셀의 구분 선 굵기를 조정.
CELLPADDING="수치" 셀의 안쪽여백의 간격을 조정.
bgcolor="색상" , "색상코드" 표의 배경색을 지정.
8. Table Tag에서 사용되는 옵션
1) Table Tag의 옵션
- border="n"
표(Table)의 외곽 선의 두께를 결정합니다. n은 물론 숫자겠죠. n은 픽셀(Pixel) 단위랍니다. n 값을 입력하지 않거나 border 옵션을 주지 않으면 기본 값으로 1이 들어가게 됩니다.
- cellspacing="n"
표 안에 위치하는 각 셀의 간격을 조절할 수 있게 하는 Tag입니다. 단위는 물론 픽셀입니다. 위에 있는 border="0"을 주고 cellspacing="0이 아닌 숫자"를 주면 각 셀간의 간격을 조절할 수 있습니다.
- cellpadding="n"
표 안에 위치하는 셀의 외곽선과 셀 안에 위치한 글자나 이미지 사이의 간격을 조절하는 옵션입니다. 쉽게 이야기해서 표의 안쪽 여백을 조절하는 것입니다. 여기서도 n은 픽셀 단위입니다.
- width="n" heignt="n"
표의 폭과 높이 그리고 각 셀의 폭과 높이를 조절하게 해주는 옵션입니다. 여기서의 n은 픽셀 단위가 될 수도 있고 퍼센트(%)가 될 수도 있습니다. 여기서 주의해야 할 것은 width와 height를 너무 작게 주면 그 값이 무시됩니다. 예를 들어 셀 안의 글자 크기를 <h1>...</h1>으로 표현한 후 width="1" height="1"로 주면 그 값이 무시됩니다.
위의 옵션에서 ""는 생략해도 됩니다. 만약 ""를 넣을 때는 border="0 과 같이 되면 큰일 납니다. " 하나를 빼먹었는데, 어떤 일이 벌어질까요? 아마도 그 이후의 화면이 나타나지 않을지도 모릅니다.
width와 height에서 n이 픽셀 단위일 경우에는 그냥 숫자만 적으면 됩니다. %일 경우는 100%가 전체화면이므로 적당하게 표현하면 됩니다. 화면의 절반을 나타내고 싶으면 width="50%" 와 같은 식으로 나타내 주면 됩니다.
2) TD 또는 TH Tag의 옵션
- align="left" or "center" or "right"
표(Table)의 셀 안에 위치하는 +글자나 이미지 등의 내용의 수평 위치를 조절할 수 있습니다.
- valign="top" or "middle" or "bottom"
align은 수평 위치를 조절하지만 valign을 이용하면 수직 위치도 조절할 수 있습니다. valign은 "middle"이 기본 옵션입니다.
- width="n" heignt="n"
각 셀의 폭과 높이를 조절하게 해주는 옵션입니다. 나머지는 표(Table)에 있는 설명과 동일합니다.
- colspan="n"
표의 열을 n개의 수만큼 하나로 합치는 옵션입니다. 그러니까 여기서 n은 셀의 수를 의미합니다.
- rowspan="n"
표의 행을 원하는 수만큼 하나로 합치는 옵션입니다. 여기서 n은 열의 수를 의미합니다. <
[7] 프레임 만들기
1. 프레임(Frame)이란 무엇일까?
하나의 윈도우 안에 또 하나의 윈도우를 만들 수 있는 기능을 프레임 기능이라고 한다. 이 기능은 독립된 윈도우 처럼 프레임마다 각각 제어할 수 있다. 프레임 기능은 잘 사용하면 좋지만 너무 많이 사용하면 복잡하고 화면이 좁아 보여서 좋지 않다. 프레임을 구현하는 방법은 다양하다. 일단 프레임을 사용하면 한 브라우저에서 여러 개의 html 파일을 화면에 보여줄 수 있다는 장점이 있지만, 너무 많이 사용하면 보기 흉할 수도 있습니다.
1) 프레임(Frame)
위에서 간략히 설명한 것과 같이 한 브라우저에 여러 개의 html 파일을 보여주기 위해서 사용됩니다. 프레임으로 된 페이지를 보려면 프레임을 지원하는 브라우저를 사용해야 하는데, 요새 많이 사용하고 있는 netscape4.0 이상 버전이나 explore 4.0 이상 버전은 물론 프레임을 지원합니다.
웹 서핑을 하다보면 알 수 있듯이 프레임은 주로 메뉴를 구성하는데 주로 사용합니다. 상하로 나누거나 좌우로 나누어서 대부분 사용하죠.
2) 프레임(Frame)의 기본 구조
<html>
<head>
<title> 홈페이지 만들기 </title>
</head>
<frameset cols="n, n, n..." or(and) rows="n, n, n...">
<frame src="html 파일 이름">
<frame src="html 파일 이름">
.
.
.
</frameset>
<body>
<p align="center">이 페이지를 보려면 , 프레임을 볼 수 있는 브라우저가 필요합니다.</center>
</body>
</html>
<!-- 프레임 Tag는 <head> Closing Tag와 <body> Opening Tag 사이에 삽입되어야 합니다. <body> Tag 안에는 주로 "이 페이지를 보려면 , 프레임을 볼 수 있는 브라우저가 필요합니다." 라는 메시지를 주로 사용했었습니다. 왜냐하면 그래야 프레임을 지원하지 않는 브라우저에서 뭔가가 화면에 디스플레이 되니까요.. -->
3) 프레임셋 태그(FrameSet Tag)
<frameset cols="n, n, n... or n%, n%, n%..., or *, *, *..." or(and) rows="n, n, n.... or n%, n%, n%..., or *, *, *..." frameborder="0(no) or 1(yes)" border="n">
.
.
.
</frameset>
-
cols="n, n, n..."은 표(table)에서 <td> tag 안에 사용한 colspan의 속성과 같이 열을 의미하며, 브라우저에서 화면을 세로 방향으로 나누어 보이게 할 경우에 사용합니다.
-
여기서 n은 숫자를 말합니다. 처음의 n, n, n...을 사용할 경우는 픽셀 단위를 나타내게 됩니다. 그리고 두번째 경우의 n%, n%, n%...의 경우는 브라우저 전체 화면을 100%로 보았을 경우를 기준으로 비율로 나타내게 됩니다. n을 모두 합치면 100이 되어야겠죠. 그리고 마지막 *, *, *... 는 화면을 동일한 폭이나 길이로 나누겠다는 것을 뜻합니다.
-
frameborder는 그 값이 0일 경우는 no를 뜻하며 프레임 경계를 나타내지 않겠다는 이야기이고, 1일 경우는 yes를 뜻하며 프레임 사이에 있는 경계선을 표시하겠다는 이야기입니다.
frameborder="0" 과 frameborder="no", frameborder="1"과 frameborder="yes"는 서로 같은 뜻이라는 이야기입니다.
-
border="n"에서 n은 픽셀 단위의 숫자이며, 프레임과 프레임의 간격을 조절할 경우에 사용합니다. border="0"으로 사용하면 프레임이 서로 여백이 없이 붙는 현상을 볼 수 있습니다.
2. 프레임(Frame) tag
1) 프레임(Frame) tag의 기본
<FRAME src="html 파일 이름">
<FRAME> Tag는 <FRAMESET> Tag와 달리 closing tag가 없이 opening tag 만으로 이루어 집니다.br> <FRAMESET> Tag로 프레임을 나누었다면 <FRAME> Tag에는 <FRAMESET> Tag로 나눈 곳에 들어갈 html 파일을 지정하게 됩니다. <FRAMESET> Tag에서 화면을 나눈 만큼 <FRAME> Tag를 사용하면 됩니다.
2) 프레임(Frame) tag 예제
아래에 있는 내용은 프레임 태그입니다. 프레임을 위와 아래 두 개로 나누었습니다. target은 프레임 Tag 안에 삽입할 수도 있고 base target으로 설정해서 사용할 수도 있습니다.
<frame src="menu.htm" name="header" noresize scrolling="no" marginwidth="10" marginheight="8" target="main">
<frame src="main.htm" name="main" noresize scrolling="auto" marginwidth="10" marginheight="14">
- src - <img src="image file name"> 처럼 사용하면 됩니다. src는 source의 약자입니다. html 소스가 어디에 있는지 정보를 나타내고 거기서부터 파일을 불러오는 것입니다. 절대경로나 상대경로를 사용하면 됩니다.
- name - 프레임의 이름을 정의합니다. 자바 스크립트를 이용해서 프로그래밍할 때 유용합니다. 그리고 target을 줄 경우에는 정말 필요합니다.
- noresize - noresize를 주게 되면 임의대로 프레임의 크기를 늘이거나 줄일 수 없습니다. default는 resize니까 생략하면 프레임의 크기 조절이 가능합니다.
- marginwidth="n"- 프레임에 표시될 본문 내용(html 파일 내용)의 좌우 여백을 정의합니다. 물론 n은 픽셀을 나타냅니다.
- marginheight="n" - 프레임에 표시될 본문 내용(html 파일 내용)의 상하 여백을 정의합니다. 여기서도 n은 픽셀을 나타냅니다.
- netscape와 explore는 브라우저의 기본 margin이 서로 다릅니다. 따라서 marginwidth와 marginheight를 사용했을 경우, 두 브라우저에서 이미지나 텍스트가 나타나는 위치가 서로 다르니 이상하게 생각하지 마세요.
- target- target을 지정해 놓으면 위의 경우에는 menu.htm 파일에 있는 하이퍼 링크를 클릭하면 main.htm 파일이 있는 프레임에 그 내용이 나타납니다. 대개 target 지정은 menu에서 많이 사용하고 target이 되는 곳은 본문이 나타나는 곳입니다.
메뉴를 클릭했는데 새로운 창이 뜰 경우는 대부분 target을 target="_blank" 과 같이 지정한 경우입니다.
메뉴를 클릭했을 때 메뉴가 있는 프레임에 내용이 나타날 경우는 target을 지정하지 않았을 경우가 대부분입니다.br> 참고로 프레임을 나눌 때 사용하는 분할 방법의 종류를 소개하면
다음의 4가지 중에서 어떤 것을 사용해도 좋다.
<Frameset cols="250, 150"> : 250픽셀, 150픽셀로 분할
<Frameset cols="30%, 70%"> : 전체의 30%, 70%로 분할
<Frameset cols="5*, 3*, 2*"> : 전체 10분의 5, 10분의 3, 10분의 2로 분할
<Frameset cols="250, 50%,*"> : 250픽셀, 전체의 30%, 나머지 전부 할당
프레임에 스크롤바를 보이거나 보이지 않게 할 수 있는 태그에는 3종류가 있다.
scrolling="yes" : 보이게 한다.
scrolling="no" : 보이지 않게 한다.
scrolling="auto" : 자동으로 처리한다.
특수한 프레임의 명령에는 Target옵션 이라는 것이 있다. 이 부분에는 4종류의 태그를 사용할 수 있다.
Target="_blank" : 새로운 창을 하나 연다.
Target="_self" : self라고 지정한 내용을 창에 표시한다.
Target="_Parent" : 링크태그가 있던 프레임의 새로운 프레임에 파일을 표시
Target="_Topf" : 모든 프레임을 없애고 창을 새로 연다.
3. iFrame이란 무엇인가?
1) iFrame은 iFrame은 한 html 문서 내에서 또 다른 html을 불러올 수 있는 기능을 갖고 있습니다.
|
<iframe width="n" height="n" frameborder="yes or no" scrolling="yes, no or auto" src="불러올 html 문서" marginwidth="n" marginheight="n" name="이름"></iframe> |
- iframe은 <iframe>로 시작해서 </iframe>로 끝납니다. 단, 다른 태그와 다른 점이 있다면 opening 태그와 closing 태그 사이에 내용을 넣어줄 필요가 없다는 것입니다.
- width - iframe의 폭을 지정합니다. n은 픽셀 단위입니다.
- height - iframe의 높이를 지정합니다.
- frameborder - iframe의 경계선을 나타나게 할 것인지를 결정합니다. yes로 하면 프레임 경계가 나타나고 no로 하면 프레임 경계가 나타나지 않습니다.
- scrolling - yes로 하면 스크롤 바가 항상 나타나고 no로 하면 내용이 잘리더라도 스크롤 바가 나타나지 않습니다. 물론 auto는 iframe의 크기보다 불러온 문서의 내용이 많으면 저절로 생기게 되겠죠.
- src - 이곳에 iframe에서 불러올 문서의 위치와 문서의 이름을 지정합니다.
- marginwidth - 좌우 여백을 지정합니다.
- marginheight - 상하 여백을 지정합니다.
- name - iframe의 이름을 지정합니다. name을 이용하면 iframe을 포함하고 있는 문서에서 하이퍼링크를 클릭하면 iframe에 내용이 나타나도록 target을 지정할 수 있습니다.
- iframe은 internet explore 4.0 이상 버전에서는 text만 포함한 html 문서이건 상관없이 display가 잘 됩니다. 그러나 netscape에서는 image가 아닌 순수한 문장만 있는 html을 iframe을 사용하여 불러왔을 경우 화면에 display가 되질 않습니다.
4. 2단 프레임 만들기
화면을 좌우로 분할하여 왼쪽에는 메뉴를 오른쪽에는 본문을 보이도록 하는 경우입니다.
▒< 1. mainframe.html파일 만들기 >
<html>
<head>
<title>프레임 나누기</title>
</head>
<!-- <Body>태그가 없는점에 주의할 것-->
<frameset cols="20%,80%">
<!-- cols는 수직,rows수평 나누기를 지정할 수 있음-->
<frame src="left.html"name="left" scrolling="auto">
<!- 왼쪽에 나타날 문서파일의 이름과 임의 사용 할 문서명-->
<frame src="right.html"name="right" scrolling="auto"> <!- 오른쪽에 나타날 문서파일의 이름과 임의 사용 할 문서명-->
</frameset>
<!-- </Body>태그가 없는점에 주의할 것-->
<!--프레임이 지원되지 않는 구형버전 사용자 안내 메시지-->
<noframe> 현재 귀하의 브라우저는 버전이 낮아 프레임기능을 사용할 수 없습니다.
<br> 웹여행을 즐겁게 하려면 최신형 브라우저에서 보실것을 제안합니다.
<base target="right">
</noframe>
</html>
▒< 2. Left.html파일 만들기 >
<html>
<head>
<title>왼쪽 프레임 만들기</title>
</head>
<body bgcolor="#cccccc">
<p align="center"><font size="4">목차입니다.</font></p>
<p><a href="문서의기본골격.html" target="right">1. 문서의 기본 골격</a></p>
<p><a href="글자속성지정.html" target="right">2. 글자 속성 지정</a></p>
<p><a href="문단의정렬방법.html" target="right">3. 문단의 정렬 방법/a></p>
<p><a href="이미지삽입.html" target="right">4. 이미지 삽입</a></p>
</body>
</html>
▒< 3. right.html파일 만들기 >
<html>
<head>
<title>오른쪽 기본 프레임 만들기</title>
</head>
<body color="#ffffff">
<p align="center">홈페이지 제작 html소스입니다.</p>
</body>
</html>
5. 프레임 나누기 기본형식
프레임을 나눌 때는 프레임을 나누는 역할을 하는 최초의HTML 문서가 있어야 한다. 이 때 최초의 HTML 문서의 파일명이 보통 메인 파일이 "index.html(htm)"로 된다. 만약 A.HTML이라는 것을 메뉴 파일이라 하고 B.HTML를 가운데(오른쪽)에 뜨는 파일이라 한다면, 최초 메인 파일인 INDEX.HTML에 FRAMESET태그를 넣으면 된다.
프레임을 나누는 태그는 일반 HTML 문서의 <BODY>~</BODY>태그 대신 사용된다. 프레임은
<FRAMESET COLS=~>, <FRAMESET ROWS=~> 등의 태그를 사용하여 나누는데
<FRAMESET COLS=~>는 좌우로 나누는 태그이고
<FRAMSET ROWS=~>는 상하로 나누는 태그이다. 이 태그들은 혼합되어 사용될 수 있다.
▒< 1. 좌우 나누기 >
<FRAMESET COLS="X%,Y% border="0"> (X, Y=숫자)
<FRAME SRC="A.HTML">
<FRAME SRC="B.HTML">
</FRAMESET>
index.html(메인파일)에 이 소스만 넣는다.
★중요★
border="0"을 넣지 않으면 프레임이제대로 안 나눠짐.
① <FRAMESET COLS="X%,Y%">
창을 좌우로 나눈다. 「창1」이 X% 만큼, 「창2」가 Y% 만큼의 크기가 된다.
★ 항상 X%+Y%=100%가 되게한다.
② < FRAMESET SRC="A.HTML>,<FRAME SRC="B.HTML">
「창1」,「창2」에 A.HTML, B.HTML 문서가 나타난다.
태그가 나타나는 순서에 의해 문서의 위치가 「창1」인지 「창2」인지가 결정된다.
③ </FRAMESET>
프레임 끝을 표시한다.
▒< 2. 상하 나누기 >
<FRAMESET ROWS="X%,Y% border="0"> (X, Y=숫자)
<FRAME SRC="A.HTML">
<FRAME SRC="B.HTML">
</FRAMESET>
★중요★
역시 border="0"을 써야 한다. 중요하다 안쓰면 안된다 이것 역시 좌우나누기와 비슷하다 <FRAMESET COLS 에서 <FRAMESET ROWS로 바뀌는 것밖에 없어 설명이 없다.
▒< 3. 프레임나누기 용어 >
① frameset 태그 속성
( <frameset rows="30%,70%" /cols="20%, * "frameborder="0/1"> )
rows="가로 화면비율%" 화면을 가로로 나누는 명령어
cols="세로화면비율%" 화면을 세로로 나누는 명령어
frameborder= 0 혹은 1 프레임 구분 선을 나타낼 땐 1, 그렇지 않을 땐 0 을 설정
framespacing="수치" 프레임 간의 간격을 조정
② frame태그 속성
( <frame src="웹페이지주소" scrolling="auto/yes/no" marginwidth="수치" arginwidth="수치"> )
name="문자열" 프레임 이름을 지정, target 링크할 경우 필요함
noresize 프레임 경계를 마우스로 조절을 못하게 함
scrolling="auto/yes/no" 스크롤바를 생기게 할지 정하는 명령어.
( auto : 자동, yes : 스크롤 생김, no : 스크롤 안 생김 )
marginwidth="수치" 프레임 좌우경계선과 그 안에 내용과의 여백조정
arginwidth="수치" 프레임 상하경계선과 그 안에 내용과의 여백조정
<frame src="불러올 웹페이지"> 나누어진 화면에 불러올 웹페이지 지정
6. 프레임 나누기 응용 하기
▒< 1. 프레임 상하좌우 나누기 >
<frameset rows="17%,*" border="0"><frame src="c1.html" scrolling="no" noresize>
<frameset rows="1*" cols="25%, 75%" border="0">
<frame src="c2.html" name="left" scrolling="yes" marginwidth="10" marginheight="14" noresize>
<frame src="c3.html" name="right" scrolling="yes" marginwidth="10" marginheight="14" noresize>
</frameset>
역시 가장 메인 html문서에 작성한다. 링크를 시켰는데 새로 창이 뜨거나 아니면 그 속안에 바로 링크가 생기는 그러한 경우들이 있을 것이다. 이것에 필요한 태그에는 name 과 target 이 두 가지를 사용 해야 한다.
하나를 예로 들어보면
<frame src="main.html" name="main" scrolling="yes" marginwidth="10" marginheight="14" noresize>
여기서 name을 "main"으로 해주었습니다. 이 main 을 name 으로 해준 곳이 main.html 입니다.
그래서 링크 시킬 때 <a href="링크주소" target="main"> 이렇게 하면 main 에 링크가 나오게 된다.
7. 프레임(Frame) 좌우 나누기
간단히 프레임을 두 개로 나누는 것을 예제로 다뤄보겠습니다.
그러면 우선 html 파일을 두 개 만듭니다. 아래의 예와 같이 첫번째 것은 빨간색 배경에 내용이 "첫번째 프레임 페이지입니다."가 나타나게 하고 두번째 파일은 파란색 배경에 "두번째 프레임 페이지입니다."가 나타나도록 하겠습니다. 그리고 각각 파일이름을 red.htm과 blue.htm으로 저장해 봅시다.
|
1) red.htm
<html>
<head>
<title> 프레임 페이지 하나. </title>
</head>
<body bgcolor="red">
첫번째 프레임 페이지 입니다.
</body>
</html>
2) blue.htm
<html>
<head>
<title> 프레임 페이지 하나. </title>
</head>
<body bgcolor="blue">
두번째 프레임 페이지 입니다.
</body>
</html> |
우선 화면을 좌우 두 개의 화면으로 나누어 보겠습니다.
|
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset cols="*,*">
<frame src="red.htm">
<frame src="blue.htm">
</frameset>
<body>
</body>
</html> |
* 소스를 카피해서 html 파일을 만들어서 실행해 보세요.
* 브라우저를 수직으로 정확하게 반으로 쪼갰습니다.
* 화면을 위와 아래로 나누려면 cols 대신 rows를 사용하면 됩니다.
* 여러 개의 화면으로 쪼개려면 cols="*,*, ... ,*"와 같이 사용하세요.
* 화면을 쪼갠 만큼 html 파일이 필요합니다. |
대부분 프레임을 이용해서 메뉴를 구성하게 됩니다. 만약 왼편에 메뉴를 구성한다면 왼쪽에 나타나는 프레임이 오른쪽에 나타나는 프레임보다 작아야겠죠? 그럼 다음과 같이 해볼까요?
|
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset cols="150,*">
<frame src="red.htm">
<frame src="blue.htm">
</frameset>
<body>
</body>
</html> |
* 왼쪽 프레임을 150 픽셀로 고정시켰습니다.
* 오른쪽 프레임은 브라우저의 크기에 따라 그 크기가 변합니다.
* 오른쪽에 메뉴를 주고 싶으면 cols="*,150"과 같이 사용하면 됩니다.
* 메뉴를 브라우저 상단에 두고 싶으면 rows="50,*" 과 같이 합니다.
* </frameset> Tag는 생략해도 무방합니다. |
여기에 프레임에 대한 옵션을 주면 됩니다. 위의 예는 프레임의 크기를 마우스로 조절할 수 있습니다. 그것이 싫으면 <frame> tag에 noresize 옵션을 주면 됩니다. 그리고 프레임 경계를 보이지 않게 하려면 <frameset> tag에 frameborder="no" 옵션을 주면 됩니다. 그리고 프레임 안에 있는 html 내용이 길어서 scroll이 가능하게 하거나 혹은 scroll이 불가능하게 하려면 스크롤 기능을 나타내거나 없애고 싶은 frame의 frame tag에 scrolling="yes or no"를 삽입하면 됩니다.
아래에 있는 것은 메뉴를 구성한 하나의 예입니다. 참조하세요.
|
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset cols="170, 80%" border="0" frameborder="no">
<frame src="menu.htm" noresize scrolling="yes" marginwidth="4" marginheight="4" target="main">
<frame src="main.htm" name="main" noresize scrolling="yes" marginwidth="10" marginheight="14">
</frameset>
<body>
</body>
</html> |
위의 예제는 menu.htm과 main.htm 파일이 없으면 404 NOT FOUND 에러가 날겁니다.
8. 프레임(Frame) 여러개 나누기
프레임을 좀 더 여러 개로 나누는 예를 들어보도록 하겠습니다. 지난 번에 이어 간단한 html 파일을 두 개만 더 추가해 보도록 할께요. 1)과 2)는 앞에서 사용한 예이고, 3)과 4)는 추가되는 예입니다.
|
1) red.htm
<html>
<head>
<title> 프레임 페이지 하나. </title>
</head>
<body bgcolor="red">
첫번째 프레임 페이지 입니다.
</body>
</html>
2) blue.htm
<html>
<head>
<title> 프레임 페이지 하나. </title>
</head>
<body bgcolor="blue">
두번째 프레임 페이지 입니다.
</body>
</html> |
3) yellow.htm
<html>
<head>
<title> 프레임 페이지 하나. </title>
</head>
<body bgcolor="yellow">
세번째 프레임 페이지 입니다.
</body>
</html>
4) cyan.htm
<html>
<head>
<title> 프레임 페이지 하나. </title>
</head>
<body bgcolor="cyan">
네번째 프레임 페이지 입니다.
</body>
</html> |
우선 화면을 수직으로 세 개, 네 개의 화면으로 나누어 볼까요? 왼쪽의 예는 세 개 그리고 오른쪽의 예는 4개로 나눈 예입니다. 그 이상 나누는 것은 유추하면 쉽게 할 수 있겠죠?
|
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset cols="*,*,*">
<frame src="red.htm">
<frame src="blue.htm">
<frame src="yellow.htm">
</frameset>
<body>
</body>
</html>
결과를 보려면 여기를 클릭하세요^^ |
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset cols="*,*,*,*">
<frame src="red.htm">
<frame src="blue.htm">
<frame src="yellow.htm">
<frame src="cyan.htm">
</frameset>
<body>
</body>
</html>
결과를 보려면 여기를 클릭하세요. |
다음에는 수평으로 세 개와 네 개의 화면으로 나누어 보도록 할까요?
|
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset rows="*,*,*">
<frame src="red.htm">
<frame src="blue.htm">
<frame src="yellow.htm">
</frameset>
<body>
</body>
</html>
결과를 보려면 여기를 클릭하세요. |
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset rows="*,*,*,*">
<frame src="red.htm">
<frame src="blue.htm">
<frame src="yellow.htm">
<frame src="cyan.htm">
</frameset>
<body>
</body>
</html>
결과를 보려면 여기를 클릭하세요. |
프레임이 생각 보다 쉽죠? 그럼 프레임을 네 개로 나누는데 수평이나 수직으로만 나누지 않고 수평 둘, 수직 둘.. 그래서 밭전(田)자 모양으로 나누는 예를 보도록 할께요.
|
<html>
<head>
<title> 프레임 페이지</title>
</head>
<frameset cols="*,*" rows="*,*">
<frame src="red.htm">
<frame src="blue.htm">
<frame src="yellow.htm">
<frame src="cyan.htm">
</frameset>
<body>
</body>
</html> |
* cols 과 rows 옵션을 동시에 사용했습니다.
* 나타나는 순서를 보시려면 여기를 클릭하세요.
* "*" 대신 숫자를 입력하면 프레임의 크기를 조정할 수 있죠.
* 숫자를 입력하면 픽셀 단위가 됩니다.
* "숫자 + %"를 사용할 수 있습니다. |
[8] P 의 사용에 대하여
1. 글자의 스타일
P 의 사용을 줄 띄움에만 사용 하시지만, P 의 스타일 지정에는 아주 많은 것들이 있습니다.
꼭 P 가 아니더라도 style 의 사용은 여러곳에서 응용 됩니다.
font-style:
이것은 기울여 쓰기 입니다
normal, italic, oblique 이렇게 3가지의 명령어가 있습니다.
[ 사용 예시 ]
<p style="font-style:italic;">이순신</p>
이순신
<p style="font-style:oblique;">김삿갓</p>
김삿갓
참고로 normal은 보통이라는뜻이니깐 예를 모두 생략 합니다.
2. 글자의 굵기
font-weight:
이것은 글자의 굵기 입니다.
bold, bolder, lighter, 100, 200, 300 ~ 900 이렇게 여러가지 명령어가 있습니다. 모두 알필요는 없고 (하나씩 각자 실험) bold만 알면 됩니다. 이것이 가장 많이 쓰이니깐요.
[ 사용 예시 ]
<p style="font-style:italic; font-weight:bold;">한마음 산악회</p>
한마음 산악회
3. 글자의 크기
font-size:
이것이 글자의 크기입니다.
smaller, x-small, x-large, em, ex, 값%, 값pt 의명령어가 있습니다. 사용 방법만 알면 되니 우리가 흔히 사용하는 pt를 사용하여 예를 보겠습니다
[ 사용 예시 ]
<p style="font-style:italic; font-weight:bold; font-size:57pt;">한마음 산악회</p>
한마음 산악회
4. 글자의 줄 간격
line-height:
이것은 줄 간격 입니다.
normal, number, length, 값% 로 사용 하는데 %를 사용 하여 예를 작성 합니다.
[ 사용 예시 → line-height:100%; ]
<p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:100%;"> 약할 때 자기를 분별할 수 있는 힘과 두려울 때 자신을 잃지 않는 용기를 주시고 정직한 패배에 부끄러워하지 않고 태연하며 패한 자를 감싸 안을 줄 알게 하시고 승리에 겸손하고 온유할 수 있는 사람이 되게 하소서</p>
약할 때 자기를 분별할 수 있는 힘과 두려울 때 자신을 잃지 않는 용기를 주시고 정직한 패배에 부끄러워하지 않고 태연하며 패한 자를 감싸 안을 줄 알게 하시고 승리에 겸손하고 온유할 수 있는 사람이 되게 하소서
[ 사용 예시 → line-height:150%; ]
<p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:150%;"> 그를 요행과 안락의 길로 인도하지 마시고 곤란과 고통의 길에서 항거할 줄 알게 하시고 폭풍우 속에서도 일어설 줄 알며 약할 때에 자기를 돌아 볼 줄 아는 여유와 두려울 때 자신을 잃지 않는 담대성을 가지고. 생각해야 할 때에 고집하지 말게 하시고 자신을 아는 것이 지식의 기초임을 말게 하소서</p>
그를 요행과 안락의 길로 인도하지 마시고 곤란과 고통의 길에서 항거할 줄 알게 하시고 폭풍우 속에서도 일어설 줄 알며 약할 때에 자기를 돌아 볼 줄 아는 여유와 두려울 때 자신을 잃지 않는 담대성을 가지고. 생각해야 할 때에 고집하지 말게 하시고 자신을 아는 것이 지식의 기초임을 말게 하소서
5. 글자의 글꼴
font-family:
이건 글꼴 입니다. 마음에 드는 글꼴로 넣으면 됩니다만 보는 사람의 컴퓨터에 해당 글꼴이 없으면 보이지 않고 기본 글꼴만 보입니다.
기본글꼴과 궁서체, 바탕, 굴림 등 여러 글꼴이 있습니다.
[ 사용 예시 ]
<p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:200%; font-family:궁서;"> 그의 마음을 깨끗이 하고 높은 이상을 갖게 하시어 남을 다스리기 전에 자신을 먼저 다스리게 하시며 내일을 내다보는 동시에 과거를 잊지 않게 하소서. </p>
그의 마음을 깨끗이 하고 높은 이상을 갖게 하시어 남을 다스리기 전에 자신을 먼저 다스리게 하시며 내일을 내다보는 동시에 과거를 잊지 않게 하소서.
6. 글자의 색깔
color:
이것은 글색 입니다. 색상은 '색상표'에 나와 있는 문자를 입력 합니다.
[ 사용 예시 ]
<p style="font-style:italic; font-weight:bold; font-size:12pt; line-height:200%; font-family:궁서; color:green;"> 그 위에 생활의 여유를 갖고 유머를 알게 하시어 인생을 엄숙히 살아가면서도 삶을 즐길 줄 아는 마음과 자신에게 지나치게 집착하지 말게 하시어 자신을 뽐내지 않고 겸손한 마음을 갖게 하소서.</p>
그 위에 생활의 여유를 갖고 유머를 알게 하시어 인생을 엄숙히 살아가면서도 삶을 즐길 줄 아는 마음과 자신에게 지나치게 집착하지 말게 하시어 자신을 뽐내지 않고 겸손한 마음을 갖게 하소서.
※ 앞의 명령어 생략하고 본명령만 사용
|
[ 사용 예시 ]
<p style="font:italic bold 12pt/200% 궁서; color:green;">
이렇게 사용하니까 소스가 넘 길고 복잡하지요.
그래서 이걸 줄여 앞의 명령어 생략하고 본명령만 사용하면 됩니다.
외우셔야 할겁니다. 1 2 3 4 5 6 순서대로 넣으셔야 합니다.
필요 없는 명령어는 넣지 않아도 됩니다.</p>
이렇게 사용하니까 소스가 넘 길고 복잡하지요.
그래서 이걸 줄여 앞의 명령어 생략하고 본명령만 사용하면 됩니다.
외우셔야 할겁니다. 1 2 3 4 5 6 순서대로 넣으셔야 합니다.
필요 없는 명령어는 넣지 않아도 됩니다.
글자크기와 줄 간격 소스 사이에 / 넣는것에 유의 해야 됩니다.
|
7. 문장에 줄 긋기
text-decoration:
이건 문장에 줄 넣는 것 입니다. 보통 링크된 문장은 밑줄이 그어지지만 일반 텍스트에도 줄을 넣을 수 있습니다.
이명령어로, 밑줄을 넣을수도, 뺄수도, 위에 줄 넣을수도, 위아래 모두 넣을수도 있습니다. 명령은
none,overline,underline,line-through, 등이 있습니다.
[ 사용 예시 ]
<p style="font:italic bold 12pt/120% 궁서; color:green;
text-decoration:underline;">그리고, 참된 지혜는 열린 마음에 있으며</p>
그리고, 참된 지혜는 열린 마음에 있으며
<p style="font:italic bold 12pt/120% 궁서; color:green;
text-decoration:overline;">참으로 위대한 것은 소박한 데 있다는 것과 </p>
참으로 위대한 것은 소박한 데 있다는 것과
<p style="font:italic bold 12pt/120% 궁서; color:green;
text-decoration:line-through;">참된 힘은 너그러움과 온유함에 있다는 것을 명심하도록 하소서. </p>
참된 힘은 너그러움과 온유함에 있다는 것을 명심하도록 하소서.
underline과 overline을 함께 넣어도 됩니다.
text-decoration:underline overline;">
8. 글자의 간격
letter-spacing:
이건 글자의 간격을 조정합니다. 일반적으로는 필요 없겠지만 보통 홈페이지 만드실때 큰 제목 같은것은 글자와 글자 사이에 특수문자 사용하여 띄웁니다만 이걸 사용하면 편하지요.
단위는 em을 사용 합니다.
[ 사용 예시 → 0.5em을 적용 ]
<p style="font:italic bold 12pt/120% 궁서; color:green; text-decoration:underline; letter-spacing:0.5em;"> 한마음산악회홈페이지</p>
한마음산악회홈페이지
9. 문장의 좌.우 정렬
text-align:
문장의 좌.우 정렬입니다. left, right, center, justify 가 있습니다.
[ 사용 예시 ]
<p style="text-align:center;">가슴을 펴고 당당히 걸어라.</p>
가슴을 펴고 당당히 걸어라.
<p style="text-align:left;">사촌이 땅을 사면 기뻐하라.</p>
사촌이 땅을 사면 기뻐하라.
<p style="text-align:right;">얼굴 밝은 사람에게 밝은 운이 따라온다. </p>
얼굴 밝은 사람에게 밝은 운이 따라온다.
10. 문장의 바깥여백
margin: 바깥여백
top, right, bottom, left 모두 사용할 수 있습니다.
상 하 좌 우 모두를 설정하실려면 위의 순서를 외우셔야 합니다. top,right,bottom,left 순서대로 컴이 기억 합니다.
주의 : 순서 틀리면 안되요.
단독으로 사용할 때는
margin-left:적용 수치
margin-right:적용 수치 로하여 띄우고자 하는 방향과 수치만 적어주면 됩니다. 물론 복수의 사용이 가능 합니다.
[ 사용 예시 ]
<table border=1 bordercolor=green cellpadding=0 cellspacing=0 width=100%><tr><td>
<p style="font:italic bold 12pt/120% 궁서; color:green;
text-decoration:underline; letter-spacing:0.3em; text-align:justify;
margin:20 100 20 100;">
1. 아침에 일어나면 '오늘은 좋은날' 하고 큰 소리로 외쳐라.<br>
2. 거울을 보며 활짝 웃어라. 거울 속의 사람도 나를 보고 웃는다.<br>
3. 가슴을 펴고 당당히 걸어라. 비실비실 걷지 말라. </p>
</td></tr></table>
|
1. 아침에 일어나면 '오늘은 좋은날' 하고 큰 소리로 외쳐라.
2. 거울을 보며 활짝 웃어라. 거울 속의 사람도 나를 보고 웃는다.
3. 가슴을 펴고 당당히 걸어라. 비실비실 걷지 말라. |
11. background-color: 배경 색상
글자의 배경 색상을 넣을 수 있습니다. 영어이름으로 색상을 넣을 수 있으며, 색상코드로 넣어도 됩니다.
[ 사용 예시 ]
예문의 문장 정열은 중앙으로 하고, 배경색 코드는 #ccccff, text-align:center로 바꿔 봅니다.
<p style="font:bold 12pt/120% 궁서; color:green;
text-decoration:underline; letter-spacing:0.3em; text-align:center;
margin:20 100 20 100; background-color:#ccccff;">
벌거숭이가 되지 말라, 남들이 모두 옷을 입고 있을 때는.<br>
옷을 입지 말라, 남들이 모두 벌거숭이일 때는.<br>
서지 말라, 남들이 모두 앉아 있을 때는.<br>
앉지 말라, 남들이 모두 서 있을 때는.<br>
웃지 말라, 남들이 모두 울고 있을 때는.<br>
울지 말라, 남들이 모두 웃고 있을 때는. </p>
결과보기
벌거숭이가 되지 말라, 남들이 모두 옷을 입고 있을 때는.
옷을 입지 말라, 남들이 모두 벌거숭이일 때는.
서지 말라, 남들이 모두 앉아 있을 때는.
앉지 말라, 남들이 모두 서 있을 때는.
웃지 말라, 남들이 모두 울고 있을 때는.
울지 말라, 남들이 모두 웃고 있을 때는.
12. background-image: 배경 이미지
글의 배경 이미지를 넣을 수 있습니다.
background-color 와 background-image 중 하나만 선택 해야 됩니다.
[ 사용 예시 ]
그림에 어울리게 글색을 흰색 으로 바꾸어 봅니다.
<p style="font:12pt/120% 궁서; color:ffffff;
text-align:center; margin:20 100 20 100; background-image:url
(http://asanak.com.ne.kr/logo.jpg);"><br>
히말라야 산 이름들을 <br>
중얼 거리다 보면<br>
내게도 아직 사랑할 힘이<br>
남아 있을것이라는 생각이 든다. </p>
결과보기
히말라야 산 이름들을
중얼 거리다 보면
내게도 아직 사랑할 힘이
남아 있을것이라는 생각이 든다
12. p의 사용법 Tip (마우스 모양)
이 p의 사용법은 p뿐만 아니라 모든 스타일에 적용 됩니다.
<p style="font:10pt; color:teal; CURSOR:move;">
이글에 마우스를 가져가 보세요.</p>
이글에 마우스를 가져가 보세요.
<p style="font:10pt; color:teal; CURSOR:help;">
여기도 한번 가져가 보세요.</p>
여기도 한번 가져가 보세요.
<p style="font:10pt; color:teal; CURSOR:wait;">
이건 wait 이구요</p>
이건 wait 이구요
<p style="font:10pt; color:teal; CURSOR:hand;">
이건 hand 손이지요</p>
이건 hand 손이지요
<p style="font:10pt; color:teal; CURSOR:e-resize;">
요건 e-resize 라고 하구</p>
요건 e-resize 라고 하구
<p style="font:10pt; color:teal; CURSOR:nw-resize;">
이런 것은 nw-resize 라고 해요</p>
이런 것은 nw-resize 라고 해요
<p style="font:10pt; color:teal; CURSOR:n-resize;">
여기는 n-resize라고 합니다.</p>
여기는 n-resize라고 합니다.
<p style="font:10pt; color:teal; CURSOR:se-resize;">
이것은 se-resize 입니다.^^</p>
이것은 se-resize 입니다.^^
|