...........홈페이지와 HTML 3 ............
7. 문단(paragraph) - < P >
< P ALIGN="LEFT | RIGHT | CENTER" > ... < /P >
문단(paragraph)을 지정한다.
지정된 문단은 align 속성을 사용하여 왼쪽, 가운데, 오른쪽 정렬이 가능하다
< html >
< head >
< title >주일이의 홈페이지< /title >
< /head >
< body bgcolor="orange" text="#000000" link="#8B4513" vlink="red" >
< center >< h2 >양주일 홈페이지< /h2 >< /center >
안녕하세요? < br >
< p align="right" >만나서 반갑습니다.< /p >
< /body >
< /html >
[화면출력]
양주일 홈페이지
안녕하세요?
만나서 반갑습니다.
※ 대부분의 워드 프로세서와는 달리, HTML 문서에서 행바꿈(Enter키를 누른 곳) 문자는 무시된다.
따라서 일반 텍스트를 HTML tag 없이 사용하게 되면, 화면에 행바뀜이 없이 글자들이
빽빽하게 나타난다. 또한 계속 연결된 공백(space) 문자나 행바꿈 문자들은 단지 하나의
공백문자로만 처리된다. HTML문서에서는 줄바꿈이나 줄간격 두기를 하기 위해서는 해당하는
tag을 사용하여야 한다.
※ 행바꿈을 할 때 < br >을 사용했던 것처럼, < p >를 단독으로 사용하면 행바꿈을 할 수 있다.
이때, < p >는 < br >을 두 번 사용한 것과 같은 효과가 나타나지만, < p >< p >와 같이
두 번 사용하면 효과가 없다.
왜냐하면, < p >는 문단을 구별하기 위한 표시이므로, 앞문단과 뒤문단을 띄워쓰기 하게되지만,
여러번 사용했다고 문단이 여러개가 생기는 것은 아니다.(직접 눈으로 확인!!!)
결과적으로 < p >< p >< p >.... 하는 것은 < p >한번 사용한 것과 같다!!!
8. 문서연결 - < A > ... < /A >
< A HREF="url" > ......< /A >
; HTML의 커다란 장점은 다른 문서의 텍스트나 혹은 이미지와 연결할 수 있다는 것이다.
링크는 문서 중에 색깔이나 밑줄로 강조된 부분을 통하여 다른 문서로 연결된다.
이러한 링크에 관련된 tag가 < A >(anchor)이다.
▶ 파일의 연결 < a href="파일이름" > ... < /a >
href는 연결할 문서를 지정한다(Hypertext REFerence).
이경우 파일이름이나 URL을 연결할 수 있다.
- index.html
< html >
< head >
< title >주일이의 홈페이지< /title >
< /head >
< body bgcolor="orange" text"#000000" link="#8B4513" vlink="red" >
< center >< h2 >양주일 홈페이지< /h2 >< /center >
안녕하세요?< br >
< p align="right" >만나서 반갑습니다.< /p >
< a href="./first.html" >첫번째 파일연결< /a >
< /body >
< /html >
- first.html
< html >
< head >
< title >첫번째 파일< /title >
< /head >
< body >
이것은 첫 번째 파일입니다.< br >
< a href="./index.html" >시작 페이지로< /a >
< /body >
< /html >
파일 이름앞에 ./ 를 붙이는 것은 자신의 디렉토리임을 나타낸다. (다음장에 자세히 설명)
다음과 같이 파일이름 대신에 URL을 이용하여 다른 홈페이지로 이동할 수 있다.
< html >
< head >
< title >주일이의 홈페이지< /title >
< /head >
< body bgcolor="orange" text"#000000" link="#8B4513" vlink="red" >
< center >< h2 >양주일 홈페이지< /h2 >< /center >
안녕하세요?< br >
< p align="right" >만나서 반갑습니다.< /p >
< a href="./first.html" >첫번째 파일연결< /a >< br >
< a href="http://phya.yonsei.ac.kr/~zooil" >선생님 꺼!< /a >
< /body >
< /html >
▶ 파일위치와 문서연결
문서를 서로 연결할 때 중요하게 고려해야 할 것은 문서의 위치이다. 다음을 보자.
zooil/public_html/ index.html - 사용자의 홈 디렉토리
/intro/ 1.html
/favorite/ 2.html
/images/ 3.html
/gallery/ 4.html
홈 디렉토리의 index.html 파일에서 하위 디렉토리인 intro 안에 있는 1.html을 연결하려면
→ < a href="./intro/1.html" >첫번째 문서< /a >
. 은 자신의 디렉토리를 의미하며, 그 아래 intro디렉토리, 그 안에 1.html
홈 디렉토리의 index.html 파일에서 하위 디렉토리인 gallery의 4.html을 연결하려면
→ < a href="./images/gallery/4.html" >네번째 문서< /a >
favorite 디렉토리의 2.html에서 홈 디렉토리의 index.html로 연결하려면
→ < a href="../index.html" >홈으로 연결< /a >
../ 은 상위 디렉토리를 의미함. 쩜쩜은 바로 위의 디렉토리!!
favorite의 2.html에서 images의 3.html로 연결하려면
→ < a href="../images/3.html" >세번째 문서< /a >
.. 하여 바로 위로 갔다가 images로 내려가면 된다!!
gallery의 4.html에서 홈 디렉토리의 index.html로 가려면
→ < a href="../../index.html" >홈으로 연결< /a >
쩜쩜이 위의 디렉토리니까 두 번하면 되죠~ 쩜쩜/쩜쩜 (어쩜조아 ^^;)
▶편지보내기 항목 연결 - mailto:e-mail주소
< a href="mailto:zooil@phya.yonsei.ac.kr" >주일이에게 편지쓰기< /a >
< a href="mailto:zooil@phya.yonsei.ac.kr" >zooil@phya.yonsei.ac.kr< /a >
9. 수평선 - < HR >
< HR SIZE="n" WIDTH="n" ALIGN="LEFT | CENTER | RIGHT" NOSHADE >
< hr > tag는 브라우저 폭에 맞는 수평선을 그려준다.
▷ SIZE - pixel 단위로 수평선의 두께를 조절한다.
▷ WIDTH - pixel 단위로 수평선의ㅣ 길이를 결정한다. 뒤에 %가 붙으면 현재 윈도우 크기에 대한
상대적인 크기로 결정된다. (100%, 50% 등)
▷ ALIGN - 위치 정렬
▷ NOSHADE - 볼록한 수평선이 아닌 평범한 직선으로 그려진다.
[사용예]
< hr >
< hr noshade >
< hr size="8" width="100" >
< hr width="50%" align="right" >
※ 픽셀(pixel)이란?
- 픽셀은 모니터의 한 점(또 쩜이네)을 표현한다. 모니터를 가까이 들여다 보면, 빨강, 초록,
파랑의 조그만 점들이 화면을 구성하고 있는 것이 보인다. 이것을 하나의 픽셀이라고 한다.
10. 그림넣기 - < IMG >
< IMG SRC="그림파일" ALIGN="LEFT | CENTER | RIGHT" VALIGN="TOP | MIDDLE | BOTTOM" ALT="설명"
WIDTH="n" HEIGHT="n" HSPACE="n" VSPACE="n" BORDER="n" >
▷ ALIGN - 그림 위치 정렬(가로)
▷ VALIGN - 그림 위치 정렬(세로)
▷ ALT - 그림설명, 홈페이지가 전송될 때 그림이 전송안되거나 늦게 뜨는 경우가 있다.
이때 그림설명이 있으면, 그림이 있어야 할 곳에 글씨로 설명이 나타난다.
▷ WIDTH, HEIGHT - 그림의 가로와 세로의 크기를 지정할 수 있다. pixel 또는 퍼센트
▷ BORDER - 그림 주위에 경계선이 나타나게 할 수 있다. 특히, < a href="" >< img src="" >< /a >
와 같이 그림을 다른 문서와 연결시킬때는 경계선이 자동으로 나타난다.
(왜? 글자도 연결되면 밑줄이 나오는데 그림이라고 버틸수 있나?)
이때, BORDER="0" 으로 설정하면 경계선이 깜쪽같이 사라진다.
▷ HSPACE, VSPACE - 그림 좌우, 상하에 여백을 준다.
[사용예]
< img src="poto.jpg" >
※ 파일이 그림이어야 한다는 것을 제외하면 < a > tag에서 사용된 HREF와 사용법이 동일하다.
그림파일은 일반적으로 한 곳(대부분 image 또는 images라는 하위 디렉토리)에 모아두며
관리하므로 다음과 같이 표시할 수 있다.
< img src="./images/poto.jpg" >
※ 이미지도 다른 문자와 마찬가지로 링크로 사용될 수 있다.
< a href="first.html" >< img src="arrow.gif" border="0" >< /a >
※ 그림파일은 텍스트보다 전송이 늦게 된다. 혹은 잘못전송되어 화면에 나타나지 않는 경우가
생긴다. 이때 ALT 옵션을 사용하면 그림을 보여줄 수 없는 경우 그것을 설명해 주는 문구가
그림대신 나타난다. 예를 들면 아래와 같이 사용한다.
< img src="poto.jpg" alt="지난 여름 해변에서 찰칵!" >
※ 지나치게 크거나 많은 그림을 사용하는 것은 전송받는 시간이 길어지므로 가급적 피하는 것이 좋다.
큰 그림을 제공할 필요가 있으면, 문서에서 바로 제공하지 않고, 작은 그림을 준비하여 그것을 클릭하면
큰 그림이 보여질 수 있도록 한다
※ 일반적으로 사진은 JPG 포맷으로, 색상 수가 적은 그래픽은 GIF 포맷으로 제공하는 것이
효율적이다. JPG 파일은 압축률이 좋으며 모든 색상을 표현할 수 있다.
반면에, GIF 파일은 256가지 색상제한이 있지만 그림이 256가지 이하의 색상만을 가질 때
JPG보다 압축률이 좋다. 특히, GIF는 움직이는 그림(Animated GIF)이나 투명한 그림도 만들 수
있다.
11. 글자 모양
각각의 단어나 문장을 특별한 글자모양을 갖게 HTML 문서 작성을 할 수 있다.
글자 모양을 변경하는 모든 tag는 지정하고자 하는 문자열을 < tag >과 < /tag >으로 둘러싸면
된다.
< BIG >큰 글자< /BIG > 큰 글자
< SMALL >작은 글자< /SMALL > 작은 글자
< B > 굵은 글자 < /B > 굵은 글자
< I > 이탤릭체 < /I > 이탤릭체
< U > 밑줄긋기 < /U > 밑줄긋기
아래< SUB >첨자< /SUB > 아래첨자
윗< SUP >첨자< /SUP > 윗첨자
< FONT SIZE="n" COLOR="color" > ... < /FONT >
글자크기와 색을 변경한다.
SIZE - 숫자값을 지정하며 숫자 앞에 +/-를 사용하여 상대적인 크기를 지정할 수 있다.
COLOR - 색상을 지정한다. (RGB 값 또는 색상이름)
[사용예]
< font size="5" color="red" >빨강< /font >
< font size="-2" color="blue" >작은 파란 글씨< /font >
< font size="+7" color="white" >큰 흰색 글씨< /font >
※ 특수문자
< , >, & 등의 문자들은 HTML 문서 내에서 특수문자의 역할을 하므로 이들 문자를 사용하기 위해서는
다음과 같은 형식을 사용하여야 한다.
< < less-than symbol
> > greater-than symbol
& & ampersand
" " unidirectional typewriter-style "double quote"
non-breaking space; 강제로 빈 공간을 넣음
ⓒ ⓒ copy right
R registered
12. 리스트(LIST)
리스트는 목차 따위의 목록을 나열할 때 사용된다.
< UL > Unnumbered Lists
< OL > Ordered Lists
< LI > List
▶ < UL > - Unnumbered Lists
< UL > < LI > .. < LI > ..< LI > .. < /UL >
unnumbered list를 만드는 법은 다음과 같다.
리스트를 열어주는 < ul > tag로 시작한다. 그리고 개별 항목 앞마다 < li > tag를 넣어준다.
목록을 다 적은 후에 리스트를 닫아주는 < /ul > tag로 끝낸다. 목록 안에 또 다른 목록(< ul >의
두번사용)을 만들 수 있다.
[사용예]
< UL >
< LI > 첫번째 항목
< LI > 두번째 항목
< UL >
< LI > 2.1 세부항목
< LI > 2.2 세부항목
< /UL >
< LI > 세번째 항목
< /UL >
[출력보기]
첫번째 항목
두번째 항목
2.1 세부항목
2.2 세부항목
세번째 항목
▶
- Ordered Lists
< OL > < LI >..< LI >..< LI >.. < OL >
Ordered list는 < UL > 대신에 < OL > tag를 사용하는 것을 제외하고는
사용법이 같다. 그리고 출력에는 숫자가 순서대로 자동으로 표시된다.
< OL >
< LI > 첫번째 항목
< LI > 두번째 항목
< OL >
< LI > 2.1 세부항목
< LI > 2.2 세부항목
< /OL >
< LI > 세번째 항목
< /OL >
출력
첫번째 항목
두번째 항목
2.1 세부항목
2.2 세부항목
세번째 항목