|
|
|
|
그럼 자주 이용되는 몇 가지 태그에 대해서 말씀 드리겠습니다.
(1) 글자를 꾸밀 때
▶ 글자 색깔을 바꿀 때에는 font 태그의 color를 이용하면 됩니다.
컬러는 영어로 색상명을 쓰거나 #16진수(RGB)값을 쓰실 수 있습니다.
ex)
< font color='red' > 빨간색 < /font >
< font color='#ff0000' > 빨간색 < /font >
< font color='white' > 흰색 < /font >
< font color='#ffffff' > 흰색 < /font >
< font color='black' > 검정색 < /font >
< font color='#000000' > 검정색 < /font >
< font color='blue' > 파란색 < /font >
< font color='#0000ff' > 파란색 < /font >
▶ 글자 크기를 바꿀 때에는 font 태그의 size를 이용하면 됩니다.
사이즈는 1 - 7 까지 있으며 7이 제일 큽니다. 8, 9 등을 넣어도 7으로 인식합니다.
사이즈 값이 없으면 3이 디폴트값입니다. 그래서 상대적인 값으로 +1, -1을 넣기도 합니다.
이때는 기준값 3에서 +1, -1을 하신다고 보면 됩니다.
ex)
< font size=2 > 크기 2 < /font >
< font size=-1 > 크기 2 < /font >
< font size=+1 > 크기 4 < /font >
< font size=1 > 크기 1 < /font >
[ 참고 ]
보통 게시판에서 크기 조정하는 경우 스타일 시트를 이용하게 되는데 이 경우에는 기준이 좀 다릅니다.
우리 게시판을 예로 들면 글을 쓰게 될 때 기본 값이 9로 되어 있는 것을 보셨을 겁니다.
스타일 시트(CSS)에서는 포인트(pt)를 기본 값으로 사용하는 것으로 font size=값(일종의 레벨) 과는 단위가 다릅니다.
▶ 글자를 굵게 보이게 할 때 b 태그를 이용하면 됩니다. 또는 strong 태그를 이용하셔도 됩니다.
ex)
< b > 굵은 글씨 < /b >
(2) 이미지를 삽입하고 싶을 때
이미지를 삽입할 때에는 img 태그를 이용하면 됩니다. 가로길이는 width로, 세로길이는 height로 지정하면 됩니다.
가로, 세로 사이즈를 지정한 것과 안 한 것의 차이는 브라우저가 미리 영역을 잡느냐의 문제입니다.
예를 들어 사이즈 지정을 하지 않으면 화면에서 이미지가 없는 듯 보이다가 갑자기 보이는 경우가 발생합니다.
그래서 미리 브라우저에서 이 이미지의 사이즈가 이러이러하니까 영역 할당을 하라고 하는 것이 보기가 좋습니다.
ex)
< img src='http://www.coupleneeds.com/kssa/board/banner.jpg' width='100' height='100' border='0' >
보통 다른 곳에서 글과 그림을 퍼올 때 그림이 간혹 안 나오는 경우가 있습니다.
이 때 소스에서 확인을 해보셔야 하는 것이 src=''에서 http:// 로 시작하지 않는 경우가 많습니다.
그 경우 보시고 있는 웹 페이지의 주소를 카피해서 앞에다 붙이시면 됩니다.
[ 참고 ]
소스를 적을 때 상대 경로와 절대 경로가 있는데
상대 경로는 현재 페이지 기준으로 생각하는 것이고
절대 경로는 홈페이지 기본 폴더를 기준으로 생각하는 것입니다.
현재 보고 있는 웹페이지가 http://www.coupleneeds.com/kssa/board/test.htm 이라고 했을 때
이미지 소스에서 src='img/banner.jpg'로 되어 있으면 상대경로로서 http://www.coupleneeds.com/kssa/board/img/banner.jpg 를 의미하며
또 이미지 소스에서 src='/img/banner.jpg'로 되어 있으면 절대경로로서 http://www.coupleneeds.com/img/banner.jpg 를 의미합니다.
또 한가지 외부에 있는 그림을 그대로 링크시키는 경우 원본이 되는 그림이 사라지거나 삭제된 경우는 안 보이게 되므로 믿을 수 있는 서버에다 복사를 해서 링크시키는 것이 좋습니다.
만약 이미지 파일이 서버에 있지 않고 개인 컴퓨터에 있는 경우이고 이미지 갯수가 1개라면 내용을 쓰실 때 문서 첨부 부분에다 이미지를 첨부하시고 글을 다 쓰신 후에 수정 버튼을 눌러 이미 올라간 이미지의 주소를 img 태그 안에다 쓰셔도 됩니다.
(3) 글이나 그림에 링크를 걸고 싶을 때
글이나 그림에 링크를 걸고 싶을 때에는 a 태그를 이용하시면 됩니다.
현재 페이지를 링크된 주소로 바꿀 것인지 아님 다른 페이지를 하나 더 띄워 보이게 할 것인지만 조심하시면 됩니다.
타겟(대상 프레임)을 지정하지 않으면 현재 보고 있는 페이지를 바꾸게 되어있습니다.
그래서 일반적으로 새 창으로 링크를 열게 하고 싶을 때에는 target='_blank' 을 쓰시면 됩니다.
[ 참고 ]
새 창으로 열리게 하기 위해서는 그 밖에도 target='new' 라고 쓰셔도 되고 심지어 target='1234' 또는 target='아무거나' 등으로 사용하셔도 됩니다.
단 프레임 이름이 겹치는 경우 전혀 예상치 못한 페이지에서 내용이 바뀔 수 있습니다.target 의 공식적인 속성으로는 '_blank', 'new', '_self'(보고 있는 화면), '_top'(여러 프레임으로 구성된 경우 전체 하나의 화면), '_parent'(창을 열게 한 곳의 화면) 등이 있습니다.
ex)
< a href='http://www.coupleneeds.com' target='_blank' > 새 창을 띄워 커플니즈로 가기 < /a >
그리고 이미지에 링크를 거는 경우에는 border=0 을 적지 않은 경우 파란 색 테두리가 보이는 경우가 있습니다. 그 경우 img 태그 안에다 border=0 를 추가하시면 됩니다. 그렇게 보이는 이유는 border의 디폴트 값이 1이기 때문입니다.
(4) 음악을 삽입하고 싶을 때
내용을 클릭했을 때 자동으로 배경음악이 나오게 하려면 여러가지 방법이 가능합니다만 다음과 같이 태그를 쓰시면 됩니다.
< bgsound src="http://음악파일 주소" loop="-1" >
일단 음악 파일을 모두 내려 받은 다음 재생하기 때문에 용량이 큰 mp3나 wav 음악은 한참 기다려야 합니다.
뒤의 loop 옵션(반복 여부)을 쓰지 않으셔도 됩니다.
< embed src="http://음악파일 주소" >< /embed >
이 방식은 동영상 파일이나 플래시 파일을 화면에 삽입할 때 쓰지만 음악파일에도 사용하셔도 됩니다.
embed 태그를 이용하는 경우 음악 파일을 모두 다운 받지 않은 상태여도 바로 스트리밍을 시작하기 때문에 음악이 좀 빨리 나오기 시작합니다. 음악을 듣는 도중에도 계속 파일을 다운받게 되니까요.
그리고 embed 태그를 단독으로 쓰셔도 됩니다.
[ 참고 ]
< embed src=" " autostart=" " hidden=" " height=" " width=" " loop=" " volume=" " >< /EMBED >
이렇게만 쓰셔도 훌륭합니다.
embed 태그의 속성으로 사용할 수 있는 것으로는
src="음악파일의 URL(주소)"
name="이 객체의 이름"
width="화면에 출력되는 객체의 폭"
height="화면에 출력되는 객체의 높이"
vspace="이 객체의 아래, 위 공간"
hspace="이 객체의 양 옆 공간"
autostart=[true|false] (자동 실행 여부)
loop=[true|false|루프회수] (반복 실행 여부 또는 반복 실행 회수)
startTime=min:sec (시작 시간)
endTime=min:sec (끝 시간)
hidden=[true|false] (이 객체가 화면에 보일지 안 보일지 여부)
controls=[console, smallconsole, volumelevel, playbutton, pausebutton, stopbutton] (컨트롤 버튼의 여부)
showcontrols=[true|false] (재생, 정지, 볼륨 제어 등 컨트롤 버튼 표현 여부)
AutoRestart=[true|false] (자동 재시작 여부)
ShowStatusBar=[true|false] (버퍼링 표시 또는 재생중이라는 글씨가 나오는 상태바
|
|
|
