Skip to content

GuitarMania

Home ›새내기방 ›즐거운 컴퓨터
✔ 뷰어로 보기
2001.07.30 23:44

HTML 알짜 TIP

고정석
(*.55.91.246) 조회 수 5120 댓글 1
+ - Up Down Comment Print

tips















































이미지를 원하는 곳에 위치시킬수 있습니다.

홈피 대문이나 intro화면을 만들때 작은 이미지를
브라우저의 원하는 곳에 넣기가 쉽지않죠? 이럴때 레이어를 만들어 배치하면 작은 이미지라도
원하는 곳에 배치할수 있습니다. 익스플로러에서 레이어를 만들기 위해선 <div>태그나
<span>태그가 쓰입니다. 이미지의 크기가 높이가 100px이고 넓이가 100px라면,<br>
<div style="position:absolute; width:100px; height:100px; top:400px; left:300px;"><br>
   <img src="이미지 이름" width="100" height="100"><br>
</div>
이 소스를 문서에 삽입하면 위에서 400픽셀, 왼쪽에서 300펙셀되는 곳에 이미지가 놓이게 됩니다.
이미지뿐만아니라 문단도 이런식으로 배치할수 있습니다.
 

줄간격을 조절할수 있습니다.

웹문서에서 일반태그로는 줄간격을
조절할수가 없습니다. 줄간격이 조밀해서 문단이 답답해 보인다면
스타일 시트를 써서 아래아 한글에서 하는것 처럼 간단하게 문단의 줄간격을
조절할수 있습니다.
예를 들면, 문단내용을 <p style="line-height: 130%;">문단내용</p>
로 묶어주면 줄간격이 130%가
됩니다.
 

입체적으로 보이는 테이블을 만들수 있습니다.

테이블을 입체적으로 보이기 위해서는 테이블 관련태그 안에
bordercolorlight속성과 bordercolordark
속성을 사용하여 만들수 있습니다.
흔히 쓰이는 속성은 아니지만, 이런 속성도 있다는걸 알아두세요.
아래 소스를 복사해서 연습장에 해보세요.<br>
<table border="2" bgcolor="#9933ff" cellspacing="5"><br /> <tr><td bordercolordark="#9999ff" bordercolorlight="#330099"><br /> <font color="white">입체적으로 보이는 테이블입니다.</font><br /> </td></tr><br /> </table>
 

배경 이미지를 고정 시킬수 있습니다.

웹문서를 작성할때 보통 배경이미지를 넣게 되는데,
문서의 내용이 길어져 스크롤할때 당연히 배경 이미지가 같이 움직이죠?
썩 보기 좋지는 않은것 같습니다. 이때 배경이미지를 고정 시키고
내용만 스크롤 되게 할수 있습니다. 바로 <body>
태그안에 <body background="이미지위치" bgproperties="fixed"> 를 삽입하면 됩니다.
이미지의 위치를 지정할때에는 절대경로와 상대경로가 있습니다.
 

색깔있는 선을 그릴수 있습니다.

선을 그리는 태그는 <hr>태그인데,
그냥 <hr>만을 쓰면 흰 바탕엔 검은색 선을, 검은 바탕엔 흰색선을 그리게 되어 있습니다.
그러나, 스타일 시트라는 것을 쓰면 여러가지 색의 선을 그릴수 있습니다. 기본형식은
<hr style="color: red;"> 입니다. 간단하죠? 빨간색 선이 그려집니다.
 

배경에 음악을 삽입할수 있습니다.

웹 서핑을 하다가 어떤 사이트에 들어가면
음악이 나오는걸 들을수 있죠? 아주 간단합니다. <bgsound src="파일명"> 을 문서의 아무데에나 삽입하면 됩니다.
bgsound로 대부분의 음악파일포멧 형식을 삽입할수 있습니다.
 

배경음악으로 asf 파일도 쓸수 있습니다.

배경음악을 미디로 넣는것도 괜찮지만 더 좋은 음질을
원한다면 asf 파일도 가능합니다. 바로 객체를 삽입할수 있는 <embed>태그를 쓰는거죠.
기본형식은 <embed src="000.asf" autostart="true" loop="true" hidden="true" volume="50">이며, 문서의
아무데나 삽입하면 됩니다. 속성들을 해설하자면 src는 음악파일 경로, autostart는 문서가 열릴때 자동실행하기, loop는 반복횟수(숫자), hidden은 플레이어 숨기기, volume은 음량이
되겠습니다. <bgsound>와 거의 비슷하지만 로딩방식에서 약간 다릅니다.
 

간단한 태그로 글자를 날릴수 있습니다.

바로 <marquee>라는 태그로 글자를 움직이게 할수 있습니다.
그러나, <marquee> 태그는 익스플로러 전용테그라서 넷스케이프나 그외 브라우저에서는 실행되지 않습니다.
기본 형식은 <marquee direction="right" scrollamount="5" width="100" height="100">문자열</marquee> 입니다.
여기서 direction은 방향(left, right, up, down), scrollamount는 이동속도이며, width는 폭, height는 높이겠죠?
html 연습장으로 지금 해보세요.
 

문단을 양쪽정렬을 할수 있습니다.

웹 문서를 작성하다보면 한문단이 몇줄씩이나 되죠? 그런데
문단을 보면 왼쪽은 똑바로 정렬되는데 오른쪽은 삐뚤삐뚤 해진것을 볼수 있습니다. 신경 안쓰면
상관없겠지만, 그래도 눈에 거슬릴수 있습니다. 이때 문단을 <p align="justify">문단</p>로 묶어 보세요.
깨끗하게 좌우정렬이 됩니다.









Me2day Yozm
Up Down Print 수정 삭제
Comment '1'
●? 에디터 선택하기
?
●? 에디터 사용하기 닫기

  1. Microsoft Windows Media Player 한글판 7.1

    Date2002.06.14 By고정석 Views5467
    Read More

  2. Winamp 2.80a Full + WitchBlade

    Date2002.06.14 By고정석 Views4992
    Read More

  3. Adobe Acrobat Reader 한글판 5.05 (PDF 화일 볼때 필수)

    Date2002.06.14 By고정석 Views6448
    Read More

  4. V3+Neo 로 만든 V3SOS 로 바이러스 치료법

    Date2002.06.12 By고정석 Views6221
    Read More

  5. SONY MZ N1 한글 사용설명서

    Date2002.06.08 By고정석 Views6203
    Read More

  6. 컴터로 녹음을 하려면 어떻게 해야 하는지?

    Date2002.01.21 By박진우 Views5819
    Read More

  7. [re] 자신의 연주를 mp3 파일로 만드는 방법

    Date2002.01.22 By고정석 Views5909
    Read More

  8. 윈앰프 환경설정

    Date2002.06.01 By고정석 Views10067
    Read More

  9. CD Recording

    Date2002.05.28 By고정석 Views6164
    Read More

  10. 인터넷 방송하기

    Date2002.05.28 By고정석 Views5477
    Read More

  11. win xp에서는 encore를 어떻게 사용하는지...

    Date2002.05.23 By지나가면서.. Views5121
    Read More

  12. 강력한 사운드 편집 툴 &quot;GoldWave&quot; v4.26

    Date2002.05.22 By고정석 Views5211
    Read More

  13. 즐거운 컴퓨터 게시판에 파일 첨부 어떻게 하죠?(냉무)

    Date2002.04.25 By소소 Views5000
    Read More

  14. 사진등이 들어간 문서를 그대로 복사하여 게시판에 올리는 방법

    Date2002.02.21 By고정석 Views4539
    Read More

  15. [질문!!]컴퓨터 두대를 공유시켰는데 메신저 파일전송이나 방송같은게 전혀 안되네요!!

    Date2002.02.20 By견이~☆ Views4546
    Read More

  16. 친구한테 음악 씨디를 구워 주고 싶은데요...^^;

    Date2002.01.25 By김현준 Views5340
    Read More

  17. 자신의 연주를 mp3 화일로 만드는 방법

    Date2002.01.22 By고정석 Views6419
    Read More

  18. 비디오 동영상변환에 관하여......싸게 하는법.

    Date2002.01.18 By수 Views5086
    Read More

  19. 궁금해요(앙코르질문)

    Date2002.01.12 By궁금 Views4824
    Read More

  20. 컴퓨터작곡은..

    Date2001.11.23 By수 Views5781
    Read More

  21. 파일사이즈 작고 성능 좋은 메트로놈

    Date2001.08.24 By고정석 Views5384
    Read More

  22. ram파일 배경음악 실행시키기

    Date2001.08.05 By고정석 Views5552
    Read More

  23. HTML 연습장

    Date2001.08.05 By고정석 Views6215
    Read More

  24. HTML 알짜 TIP

    Date2001.07.30 By고정석 Views5120
    Read More

  25. 음악듣기 악보보기 인쇄하기등에 유용한 유틸리티모음

    Date2001.07.23 By고정석 Views5887
    Read More

  26. !![강충]real 파일들을 Winamp 에서 돌아가게 해주는 프로그램!!

    Date2001.07.19 By아따보이 Views5314
    Read More

  27. 무료 계정 ,CGI 정보

    Date2001.07.01 By고정석 Views5298
    Read More

  28. 긴 주소 짧게해주는 무료 도메인 제공 사이트

    Date2001.06.30 By고정석 Views4953
    Read More

  29. 리얼로 올릴때...

    Date2001.06.29 By수 Views5539
    Read More

  30. 음반도서실에 음악올릴때 주의할점.

    Date2001.06.20 By수 Views6237
    Read More

  31. 호수에 비친 꽃 그림(Java Applet 응용)

    Date2001.06.04 By고정석 Views10962
    Read More

  32. gohip 제거 프로그램

    Date2001.05.11 By고정석 Views8899
    Read More

  33. 컴퓨터 고장 유형과 대응책

    Date2001.05.11 By고정석 Views9924
    Read More

  34. 그림올리는법 배우기.(실습)

    Date2001.04.28 By수 Views8029
    Read More

  35. 태그강좌 사이트

    Date2001.04.26 By고정석 Views14854
    Read More

  36. 디지탈 카메라 강좌

    Date2001.04.16 By고정석 Views14053
    Read More

  37. 국내외 인터넷 저장공간 제공 사이트

    Date2001.04.15 By고정석 Views7126
    Read More

  38. mpg 화일을 mp3로??

    Date2001.04.02 By지우압바 Views9991
    Read More

  39. 질문... 웨이브 파일을 mp3파일로 바꾸려면...???

    Date2001.04.01 By정성민 Views13846
    Read More

  40. NexENCODE Studio 3.02 : Wav 파일을 MP3 로 바꾸는 프로그램

    Date2001.03.31 By고정석 Views10116
    Read More

  41. Real Player 8.0 한글판입니다.

    Date2001.03.28 By고정석 Views8965
    Read More

  42. [무료계정 싸이트] 국내.국외 무료계정 싸이트 총망라

    Date2001.03.26 By고정석 Views8342
    Read More

  43. 리얼 오디오 화일(RA)만드는 법--- CNC에서 퍼옴

    Date2001.03.26 By고정석 Views13560
    Read More

  44. 태그 예제 모음

    Date2001.03.19 By고정석 Views9072
    Read More

  45. 글자 계속 바꿔보자~!

    Date2001.03.19 By고정석 Views8288
    Read More

  46. 멋진 텍스트 효과(5)

    Date2001.03.19 By고정석 Views7844
    Read More

  47. 멋진 텍스트 효과(4)

    Date2001.03.19 By고정석 Views8362
    Read More

  48. 멋진 텍스트 효과(3)

    Date2001.03.19 By고정석 Views12438
    Read More

  49. 멋진 텍스트 효과(2)

    Date2001.03.19 By고정석 Views9799
    Read More

  50. ☞ class파일 다운

    Date2001.03.19 By고정석 Views6672
    Read More
쓰기
Board Pagination ‹ Prev 1 2 3 4 5 6 Next ›
/ 6

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

✔ 설치 취소

Designed by sketchbooks.co.kr / sketchbook5 board skin

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Sketchbook5, 스케치북5

Powered by Xpress Engine / Designed by hikaru100

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234