2. 문단을 나눕시다. ^^

3. 문단이 나누어 집니다.

<hr width="500" size="50" align="right" noshade>

</html>

☞ 글꼴 태그 &첨자 &밑줄 태그
☜ 이 방식을 사용하지 않고 특정 글꼴을 나타내주거나 글자에 특정효과를 나타내어 주는 방법입니다.

이탤릭체  <i></i> , <em></em> , <cite></cite>보통글자 이탤릭체　
굵은 글자   , <strong></strong>보통글자 굵은 글자　
윗첨자  보통글자윗첨자　
아래첨자  보통글자아래첨자　
밑줄 글자  <u></u>글자 밑에 줄　
가운데 밑줄  <s></s>글자가운데 줄
사운드(sound) 태그란 말 그대로 음악이나 소리가 나오게 하는 태그입니다. 요즘은 홈페이지, 카페, 동호회방에 배경음악을 많이들 삽입하고 있는데요....그냥 맹맹한 웹페이지보다 감미로운 선율이 나오는 웹페이지가 더 방문객들에게 기억에 남겼져^^ 사운드 태그는 재생시킬 사운드가 뭐냐에 따라, 브라우져를 뭐를 쓰는냐에 따라 , 방문객을 고려하느냐 안 하느냐, 어느 곳에서 사용하느냐에 따라 나누어 집니다. 그럼 여기서부터 사운드 태그에 대해서 알아보도록 하져^^
먼저 사운드 태그를 배우기 전에 사운드 파일의 종류가 뭐가 있는지 알아보도록 하겠습니다. 최소한 자기가 듣고 있는 음악이 어떠한 파일인지는 알고는 있어야 나중에 자기가 직접 사용할 때 많은 시행착오를 줄일 수 있져^^
※ 재생시킬 사운드파일의 종류

① asf / wma 파일 (윈도우미디어 파일)
  1~2년 전까지만 하더라도 홈페이지 배경음악용으로는 인터넷접속 여건상 mid 파일을 많이 사용하였습니다. 하지만 요즘은 vdsl 이나 엔토피아 등등 통신여건이 좋아져서 예전처럼 mid 파일을 배경음악으로 사용하시는 분들은 별로 없을 겁니다. 대신 asf 나 wma 파일을 많이 사용합니다. asf 는 오디오 스트리밍 파일의 약자로서 홈페이지 배경음악용으로 용량대비 음질이 괜찮다고 평가 할 수 있습니다. mp3파일에 비해 용량은 1/4 이고 음질은 그냥 듣기에 큰차이가 없기때문이죠. 실제로 여러분들이 잘 아시는 벅스뮤직 같은 인터넷음악사이트에서 대부분 asf 형식의 음악파일로 서비스를 하고 있습니다.


  ▶ 을 클릭하시고 잠시만 기다리시면 asf 파일이 재생됩니다. asf 파일과 wma 파일은 확장자 이름만 틀릴 뿐이지 같은 형식의 파일입니다. wma 를 asf 로 바꿔서 재생해도 똑같이 재생되는 것을 보면 알 수 있습니다. 간단하게 asf 파일의 업데이트버젼을 wma 파일로 보시면 되겠습니다.

② mid 파일 (미디파일)
예전에 홈페이지 배경음악으로 가장 많이 사용했던 음악파일 형식입니다. 여러분들이 웹서핑이나 채팅할 때 가수의 목소리는 나오지 않고 멜로디만 나오는 음악을 들어본 적이 있을 겁니다. 그게 바로 mid 파일 음악입니다. mid 파일은 파일용량이 적은 대신 음질이 상대방의 컴퓨터의 사운드 카드의 성능에 따라 달라집니다.  

☜여기에 있는 음악을 실행시켜보세요. ▶ 을 클릭하시면 mid 음악이 나오게 됩니다. 소리가 작게 나올 수도 있으니 여러분들의 컴퓨터의 볼륨을 약간 높혀 주세요  

  mid 파일의 최대의 장점은 방문객들에게 무리를 주지 않는 적은 용량으로도 멋진 음악을 들려 줄 수 있다는 거죠. 하지만 위에서도 언급했다시피 각각의 방문객들의 컴퓨터의 사운드카드에 따라 음질이 좌우되기 때문에 사운드카드를 좋은 걸 쓰시는 분들한테는 원래의 음질을 들려줄 수 있으나 그렇지 못한 분들에게는 조금 떨어지는 음질이 들려지게 되는거죠.    
③ ra, ram 파일
   이건 리얼플레이어(realplayer)를 이용해서 음악을 듣는 파일입니다. 쉽게 말해서 리얼플레이어 없이는 재생이 되질 않습니다. 예전에 채팅방에서 많이 쓰였던 건데요....음악을 불러오면 여러분들의 컴퓨터에 설치되어 있는 리얼플레이어가 작동되면서 음악이 나오게 됩니다. ra, ram 파일은 mid 파일과는 달리 가수의 목소리를 직접 들을 수 있고 용량도 mp3 파일보다 적답니다.(약 1/4 수준) 하지만 음질이 상당히 떨어지고 전용선 사용자들에게는 전혀 무리가 가지 않는 대신 모뎀사용자들은 어느정도 무리가 가기 때문에 배경음악으로는 잘 사용되지 않습니다.  혹시 리얼플레이어가 자기 컴에 설치되있지 않으신 분들은 http://www.freepia.co.kr 로 가면 공개소프트웨어를 찾아보면 무료로 다운 받을 수 있습니다.

④ wav 파일
   웨이브 파일의 경우 음질은 좋은 대신 파일의 용량이 크기 때문에 홈페이지에서는 그렇게 많이 사용되질 않습니다. 간단하게 자신의 목소리나 인사말을 녹음시켜 홈페이지에 삽입시킬때 많이 사용되죠^^

☜여기를 실행시켜보세요. 간단한 실로폰 소리가 나올텐데요.....웨이브의 경우 파일의 용량이 적은 것을 홈페이지에서 사용하져...노래를 웹상에서 직접 듣는 것은 용량이 크기 때문에 힘들어요.  


※ 대략적인 파일형식별 크기비교 : wav (30M) > mp3 (4M) > asf (1M) > mid (10k)

⑤ 기타
  기타 mp3 파일, au 파일, aiff 파일 등이 있는데 이것들은 홈페이지나 채팅방 등에서는 거의 사용되지 않습니다. 나중에 인터넷 사용자들 전부가 전용선을 사용한다면은 많이 사용하겠져^^
음악 파일에 대해선 이 정도만 알아두셔도 충분합니다. 다음 페이지부터는 본격적으로 사운드 태그에 대해서 알아보도록 하겠습니다. ^^ 다음 페이지로 가시져^^

사운드(sound) 태그란 말 그대로 음악이나 소리가 나오게 하는 태그입니다. 요즘은 홈페이지, 카페, 동호회방에 배경음악을 많이들 삽입하고 있는데요....그냥 맹맹한 웹페이지보다 감미로운 선율이 나오는 웹페이지가 더 방문객들에게 기억에 남겼져^^ 사운드 태그는 재생시킬 사운드가 뭐냐에 따라, 브라우져를 뭐를 쓰는냐에 따라 , 방문객을 고려하느냐 안 하느냐, 어느 곳에서 사용하느냐에 따라 나누어 집니다. 그럼 여기서부터 사운드 태그에 대해서 알아보도록 하져^^
먼저 사운드 태그를 배우기 전에 사운드 파일의 종류가 뭐가 있는지 알아보도록 하겠습니다. 최소한 자기가 듣고 있는 음악이 어떠한 파일인지는 알고는 있어야 나중에 자기가 직접 사용할 때 많은 시행착오를 줄일 수 있져^^
※ 재생시킬 사운드파일의 종류

① asf / wma 파일 (윈도우미디어 파일)
  1~2년 전까지만 하더라도 홈페이지 배경음악용으로는 인터넷접속 여건상 mid 파일을 많이 사용하였습니다. 하지만 요즘은 vdsl 이나 엔토피아 등등 통신여건이 좋아져서 예전처럼 mid 파일을 배경음악으로 사용하시는 분들은 별로 없을 겁니다. 대신 asf 나 wma 파일을 많이 사용합니다. asf 는 오디오 스트리밍 파일의 약자로서 홈페이지 배경음악용으로 용량대비 음질이 괜찮다고 평가 할 수 있습니다. mp3파일에 비해 용량은 1/4 이고 음질은 그냥 듣기에 큰차이가 없기때문이죠. 실제로 여러분들이 잘 아시는 벅스뮤직 같은 인터넷음악사이트에서 대부분 asf 형식의 음악파일로 서비스를 하고 있습니다.


  ▶ 을 클릭하시고 잠시만 기다리시면 asf 파일이 재생됩니다. asf 파일과 wma 파일은 확장자 이름만 틀릴 뿐이지 같은 형식의 파일입니다. wma 를 asf 로 바꿔서 재생해도 똑같이 재생되는 것을 보면 알 수 있습니다. 간단하게 asf 파일의 업데이트버젼을 wma 파일로 보시면 되겠습니다.

② mid 파일 (미디파일)
예전에 홈페이지 배경음악으로 가장 많이 사용했던 음악파일 형식입니다. 여러분들이 웹서핑이나 채팅할 때 가수의 목소리는 나오지 않고 멜로디만 나오는 음악을 들어본 적이 있을 겁니다. 그게 바로 mid 파일 음악입니다. mid 파일은 파일용량이 적은 대신 음질이 상대방의 컴퓨터의 사운드 카드의 성능에 따라 달라집니다.  

☜여기에 있는 음악을 실행시켜보세요. ▶ 을 클릭하시면 mid 음악이 나오게 됩니다. 소리가 작게 나올 수도 있으니 여러분들의 컴퓨터의 볼륨을 약간 높혀 주세요  

  mid 파일의 최대의 장점은 방문객들에게 무리를 주지 않는 적은 용량으로도 멋진 음악을 들려 줄 수 있다는 거죠. 하지만 위에서도 언급했다시피 각각의 방문객들의 컴퓨터의 사운드카드에 따라 음질이 좌우되기 때문에 사운드카드를 좋은 걸 쓰시는 분들한테는 원래의 음질을 들려줄 수 있으나 그렇지 못한 분들에게는 조금 떨어지는 음질이 들려지게 되는거죠.    
③ ra, ram 파일
   이건 리얼플레이어(realplayer)를 이용해서 음악을 듣는 파일입니다. 쉽게 말해서 리얼플레이어 없이는 재생이 되질 않습니다. 예전에 채팅방에서 많이 쓰였던 건데요....음악을 불러오면 여러분들의 컴퓨터에 설치되어 있는 리얼플레이어가 작동되면서 음악이 나오게 됩니다. ra, ram 파일은 mid 파일과는 달리 가수의 목소리를 직접 들을 수 있고 용량도 mp3 파일보다 적답니다.(약 1/4 수준) 하지만 음질이 상당히 떨어지고 전용선 사용자들에게는 전혀 무리가 가지 않는 대신 모뎀사용자들은 어느정도 무리가 가기 때문에 배경음악으로는 잘 사용되지 않습니다.  혹시 리얼플레이어가 자기 컴에 설치되있지 않으신 분들은 http://www.freepia.co.kr 로 가면 공개소프트웨어를 찾아보면 무료로 다운 받을 수 있습니다.

④ wav 파일
   웨이브 파일의 경우 음질은 좋은 대신 파일의 용량이 크기 때문에 홈페이지에서는 그렇게 많이 사용되질 않습니다. 간단하게 자신의 목소리나 인사말을 녹음시켜 홈페이지에 삽입시킬때 많이 사용되죠^^

☜여기를 실행시켜보세요. 간단한 실로폰 소리가 나올텐데요.....웨이브의 경우 파일의 용량이 적은 것을 홈페이지에서 사용하져...노래를 웹상에서 직접 듣는 것은 용량이 크기 때문에 힘들어요.  


※ 대략적인 파일형식별 크기비교 : wav (30M) > mp3 (4M) > asf (1M) > mid (10k)

⑤ 기타
  기타 mp3 파일, au 파일, aiff 파일 등이 있는데 이것들은 홈페이지나 채팅방 등에서는 거의 사용되지 않습니다. 나중에 인터넷 사용자들 전부가 전용선을 사용한다면은 많이 사용하겠져^^
음악 파일에 대해선 이 정도만 알아두셔도 충분합니다. 다음 페이지부터는 본격적으로 사운드 태그에 대해서 알아보도록 하겠습니다. ^^ 다음 페이지로 가시져^^

이미지 태그는 웹 제작에 있어서 가장 기본적인 태그입니다. 물론 채팅을 할때나 카페, 동호회를 만들 때도 이미지 태그는 기본이져^^ 요즘은 펫게임(ID : tagmania)하는데도 태그가 많이 쓰이던데....거기서도 가장 기본적인 태그가 이미지 태그입니다. 흠.....제가 지금까지 기본이라는 소리를 무려 3번씩이나 할 정도면 얼마나 중요한 기본태그인지 아시겠져^^ 배우기도 아주 쉽습니다. 이미지 불러오는 태그명령어와 배경그림 넣는 태그명령어 2개만 배우면 이미지 태그는 다 배웠다고 할 수 있습니다. 그럼 이제부터 배워볼까요? ^^

※ 그림 나타나게 하는 태그( )
  위에 보라색으로 나타나있는 것이 이미지 태그입니다. 간단하죠?^^ 자....그럼 직접 해볼까요? ^^ 태그연습장에 아래 소스를 넣고 실행시켜 보세요....


  짠~! 하구 철도원 아저씨가 나타날겁니다.^^ 흠....그럼 이제 그림 나타나게 하는 태그는 다 배운 것입니다. 여기서 약간 몇 가지 속성만 알고 있으면 이미지 태그를 더 잘 할 수 있습니다.  바로 이미지의 가로세로 길이, 간격 및 테두리 두께 등을 조절 할 수 있는데요......아래 표를 보시죠^^



속 성 기 능
width="수치"  넣은 수치만큼 이미지의 가로 너비를 조정해주는 속성입니다.  
height="수치"  넣은 수치만큼 이미지의 세로 높이를 조정해주는 속성입니다.
hspace="수치"  이미지의 가로 간격(공간)을 주는 속성입니다. 여기서 간격이란 하나의 이미지와 글자 사이의 공간의 너비를 말하는 겁니다. 이해 되실런지.....^^>  
vspace="수치"  이미지의 세로 간격(공간)을 주는 속성입니다. 가로간격이란 마찬가지져...^^ 이건 세로간격..^^
border="수치"  이미지의 테두리 두께를 나타내줍니다. border="0" 일 경우에는 테두리가 나타나지 않고 1부터 테두리가 나타나져...^^

위의 속성은 잘 알아두셔야 만히 나중에 이미지 태그를 사용할 때 편하니깐 왠만하면 외워버리세요^^ 안되면 말구^^
☜ 여기 아저씨는 조금 전에 그 철도원 아저씨네요...^^ 근뎅 조금 전이랑은 약간 다르다고 느껴지지 않나요? 그져....조금 전에 태그연습장에서 했을 땐 그림 주위에 검은 테두리가 없었는데 지금껀 있져...^^ 바로 위에서 배웠던 border 속성을 이용한 것입니다. 또 다른 속성도 사용했는데....아마 관찰력이 뛰어나신 분은 아셨을 겁니다. 바로 hspace과 vspace 속성도 사용했답니다.  
※ 특강 - 이미지 주소 알아내기
여기서 잠시 특강이 있겠습니다. 태그 초보분들이 맨날 질문하는 건데요...이미지 주소를 알아내는 방법에 대해서 알아보겠습니다. 먼저 위에 철도원 아저씨를 가지고 설명드리져^^ ① 마우스 커서(화살표)를 철도원아저씨 그림위에 놓는다. ② 그림 위에 마우스 커서를 올려 놓은 상태에서 오른쪽 마우스 버턴을 살포시 한번만 누른다. ③ 마우스 오른족 버턴을 누름과 동시에 메뉴표가 쫘악~ 나올 것이다. 거기서 "등록정보" 를 선택한다. ④  그러면 바로 여러분들이 찾아 헤메던 이미지의 "주소(URL)" 이 나올 것이다. ⑤ 주소를 마우스로 블록설정해서 복사한다...그런 다음 이미지 태그에 넣는다.... ⑥ 그러면 실행가 동시에 이미지가 나올 것이다...이미지가 큰거면 조금 오래 걸릴 수도 있다....

이미지 주소보는 법은 이제 알았으니 이미지 태그 속성에 관한  아주 중요한 틱을 하나 가르켜 드리져.....우리가 보통 이미지와 글자를 같은 줄에 넣을 땐 글자와 이미지가 한줄에 같이 들어가기 때문에 이미지 옆으로 한줄 밖에 쓸 수가 없습니다. 이해가 되실런지...안되면 아래 예제를 각각 실행시켜보세요..^^
이미지 주소보는 법은 이제 알았으니 이미지 태그 속성에 관한  아주 중요한 틱을 하나 가르켜 드리져.....우리가 보통 이미지와 글자를 같은 줄에 넣을 땐 글자와 이미지가 한줄에 같이 들어가기 때문에 이미지 옆으로 한줄 밖에 쓸 수가 없습니다. 이해가 되실런지...안되면 아래 예제를 각각 실행시켜보세요..^^



<html>
<head></head>
<body>
여기에서는 이미지 옆으로 한 줄밖에 들어갈 수 없져...그래서 보기도 않좋고....웹페이지 만들때도 차지하는 공간도 많아지겠죠^^

</html><html>
<head></head>
<body>
그러나 여기를 보면  이미지 옆으로 여러 줄이 들어갈 수 있져...그리고 이미지와 글자사이에 간격도 일정하게 있구요..그래서 보기좋게 쓰여지는 거져^^ 또한 이미지에 테두리도 있네용^^ 어때요? 방금 전보다 훨씬 낮죠?^^

</html>

어때요? 이해 되시죠?^^ 만약 속성을 모른다면 이와 같은 것 나타낼 수 없겠죠?^^  알려줄때 외우세용^^ 다 여러분 잘 되라고 하는 거니깐.....하라고 할때 잘 따라하시길......^^  헉... 이건 우리 엄마가 나보고 맨날 하는 소리인데...^^


http://www.interiorbank.ne.kr http://www.eduitbank.or.kr