컴퓨터 상식

[스크랩] 쉽게 태그 한번 배워봅시다

정신똑띠챙기! 2011. 10. 12. 19:49
 
안녕하세요
산골아쟈씨 입니다
잘허지는 못허나 조금 흉내는 낸다고 생각합니다
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
우리한번 해볼까요 
쉽게 기초부터 배울수있도록 
나열해보았습니다. 
항시 첫단추를 잘키워야만 다음단추를 
키울수 있지않을까 
1단계 기초 태그에서~~ 마퀴태그 까지만나름대로 
만들수만 있다면 얼마나 좋을까
저는 쉽게 나열해놓았으니까 
연습많이 하세요 가끔 연습방을 방문하여 문재점을 답글로 지적하면서
쉽게 나영해줄태니 많이 연습 또 연습만이 
나만의 태그를 사용할수있어요
그리고 항상 남의것을 모방해보세요 
봄인이 직점 촬영한 이미지 사진으로 올렸을때.....
항상 연습허시다가 의문난 점이있으면 언제든지.... 
도우미가 항상 대기해있습니다 
자세히 설명식으로 답해드릴게요 
넘 서두가 길었나요 지루허죠 
ㅎㅎㅎㅎㅎㅎㅎㅎㅎ 
시.........작 
 

★ 1단계 = 영상 {img src="그림 소스"} 이미지 소스만들기
 
 
1. 원하는 그림이나 사진이미지 위에 마우스를 놓고 오른쪽 클릭하세요. 
2. 창이 하나 뜨는데 맨 아래에 등록정보나 속성(R)를 클릭 합니다. 
3. 또하나의 창이 뜹니다. 그러면 주소(URL)옆에 영어로 되었는데 
그 부분이 그림이미지소스(http ~ jpg)까지 블럭을 잡아서 복사를 합니다. 
※참고=그리고 바로밑에있는 그림크기를 매모해 두십시요 
4. 주소창을 확인하여 닫고 그림을 넣고 싶은 곳에 와서 
   {img src=" 주소 붙여 넣기 "} 합니다.
★참고 
  그림이미지에 크기와 태두리액자를 삽입하고자할때 아래 명령어를
 사용해서 조정합니다
width="500" height="375" 
그림크기 매모해둔것 가로,세로 " ★ "에 붇치기하고 
※여기서 {img src=" 0 "} 그림을 불러오는 
명령어이기 때문에 외워야 합니다. 
그리고 태그의 모든 명령어는 시작과 끝은 ( < )와( > )로 마무리 하시는거 알아 두셔야 합니다. 
★ 예 : 영상{img src="그림 소스"}이미지 소스만들기 (완성소스).. (항시 명령어 앞,뒤에 ( < )와( > )꼭 붙칠것)  
{img src="https://t1.daumcdn.net/cafefile/pds46/13_cafe_2007_08_08_18_54_46b992d754443" 
width="634" height="484"}
완성한 그림이미지 

이때( " 영상이미지 주소 " )를 붙치면 영상이미지 주소가 보호됩니다 
이미지 불러오기 하셨나요? 
힘들죠 알고보면 쉬워요 첫단추부터 플어보면 
다음단추는 자연히 채워지지요 
※쉽게 연습할수 있는방법은 창하나 더만들어서 연습하면 좋아요 함 해보세요 ㅎㅎ
  만드는 방법은 컴퓨터 밑에 컨트롤(Ctrl)+(N)을 클릭하면 창이하나 뜹니다
  뜨면 연습방을 찾아서 왔다 같다 하면서 연습하면 좋아요 
2단계 넘어가기전에 그림이미지 주소 불러오기 를 할줄알아야
2단계로 넘어갈수 있어요 연습많이하세요 
연습했다고요? 할줄안다고요? ????? 대답이없내 ㅎㅎㅎ 
 

★★ 2단계로 넘어가볼까유 
 

2단계에서는 직접 기본 태그구조를 알아봅시다.
table background="이미지 주소"=태이블 백그라운드 즉 말그대로 태이블위에 
                  그라운드를 만들어서 여러가지 치장을 하는겁니다
width= "이미지 가로" 
height= "세로" 
border= "테두리두께" 
bordercolor= "태두리 색상" 
(tr>(td>= 백그라운드이미지속에 글이나 이미지 삽입하게 도와주는 명령어 
(font color="white" size="3" face="바탕체">= 글씨 색과,크기,글꼴를지정하는소스 
(pre>글씨 문단간격 자동조절, 
(b>글씨굵기 
     아름다운 시나 글을쓴다 
     ' 
     ' 
     ' 
     '좋아하는 음악 삽입하고요 
(EMBED pluginspage=http://www.microsoft.com/windows/mediaplayer/download/default.
asp src=http://61.109.255.55/p2p_ms/0/low_wma/264/264335.asf width=300 height=250 
hidden=true type=application/x-mplayer2 autostart="true" loop="true" SHOWCONTROLS="1" SHOWSTATUSBAR="1">
마지막에 끝남응 표시해주어야합니다(여기서 /은 명령어가 끝남을명령 
(/font>(/td>(/tr>
(/pre>(/b>(/table> 
★대충 이해가 갑니까 정리해보면소스는 이렇게 되겠죠~~ 
(항시 명령어 앞,뒤에 ( < )와( > )꼭 붙칠것)  
(table background="https://t1.daumcdn.net/cafefile/pds46/13_cafe_2007_08_08_18_54_46b992d754443" 
width="634" height="484" border=5 bordercolor="001100"> 
(tr>(td> 
(font color=white size=3 face="바탕체"> (pre> 
      아름다운 시나 글을쓴다 
     ' 
     ' 
     ' 
     '좋아하는 음악 삽입하고요 
(EMBED pluginspage=http://www.microsoft.com/windows/mediaplayer/download/
default.asp src=http://61.109.255.55/p2p_ms/0/low_wma/264/264335.asf 
width=300 height=250 hidden=true type=application/x-mplayer2 autostart="true" 
loop="true" SHOWCONTROLS="1" SHOWSTATUSBAR="1">
(/font>(/td>(/tr>
(/pre>(/b>(/table>
 

★ 태그완성 결과보기(글씨가 고정되는 태그) 
 


     아름다운 시나 글을쓴다 
     ' 
     ' 
     ' 
     '좋아하는 음악 삽입하고요 


 글이 고정태그는 짤은 글를 올릴때 사용하고요 
 

★★ 2단계 태그 만드는방법(글씨가 움직이는태그)
 

위에 글꼴를 지정해주는 소스 위에다가아래 마퀴소스 
(marquee direction="up" scrollamount="1" loop="0"> 
   이소스를 넣어주면 됩니다 
marquee= 영상이나, 글 ,이미지등을 움직이게하는 명령어입니다 
direction="up" 위로 올라감.. (글이나 아이콘을 움직이는방향)
scrollamount="1" 숫자가 커지면 속도도 빨라짐 
loop="0" 얼마만큼 반복해 줄것인가를 결정케함 
(0)무한대 (1~...4)수자만큼 반복 
(center>글씨를 가운데로 정렬시킴 
(pre> 자동으로 글씨문단 정렬
(b> 씨 두껍게 함 

★ 소스를 정리하면 이렇게.. (항시 명령어 앞,뒤에 ( < )와( > )꼭 붙칠것)  
(table background="https://t1.daumcdn.net/cafefile/pds46/13_cafe_2007_08_08_18_54_46b992d754443" 
width="634" height="484" border=5 bordercolor="001100"> 
(tr>(td> 
(marquee direction=up scrollamount=1 loop="0"> 
(font color=white size=4 face="바탕체">(pre>(b> 
여기서 글씨칼라는 (color=white) (색상표)를참조 
바꾸면됩니다 
아름다운 글이나 시를 씁니다.. 
어때요~~ 
글씨가 위로 올라가죠 
태그 기초만 알면 
누구나 쉽게 따라 할수 있어요 
(EMBED pluginspage=http://www.microsoft.com/windows/mediaplayer/download/
default.asp src=http://61.109.255.55/p2p_ms/0/low_wma/264/264335.asf 
width=300 height=250 hidden=true type=application/x-mplayer2 autostart="true" 
loop="true" SHOWCONTROLS="1" SHOWSTATUSBAR="1">
(/font>(/td>(/tr>
(/pre>(/b>(/table>
(/marquee>(/center>(/table>
 

★ 결과보기..(항시 명령어 양옆에( < )와( > )꼭 붙칠것) 
 

 
     아름다운 글이나 시를 씁니다.. 
     어때요~~ 
     글씨가 위로 올라가죠 
     태그 기초만 알면 
     누구나 쉽게 따라 할수 있어요 


수고허셨어유 함 해보니께 알겠서요 
이해가 감니까 가꾸 해봐야 되요 항시 
기본태그명령어는 될수있으면 외워두던가 
매모해 주는것도 좋지유 
그럼 처음 부터 넘 많은것을 알여고 허면 잘않되니까 
첫단추부터 차근 차근 플어보세요 
그럼 태그 명령어보고 나름대로 영상태그를 만들수 있어요.
 

★★★ 3단계 태그 만드는방법(그림자글씨 태그)
 

그림자글씨 태그는 그림이미지 가 밝을때 
글씨가 잘안보여서 황당한 일이 있을때 사용한다  
밑에있는소스가 그림자효과를주는 명령어소스
(span style="color:00ffff; filter:shadow(color=000000); height:12px;">
를 밑에있는 미퀴소스와 글꼴지정해주는 소스사이에
붙치기하면 됨니다
(marquee direction=up scrollamount=1 loop="0"> 
(FONT face=지명이체 size=3>(pre>(b>
**결과보기 소스**(항시 명령어 앞,뒤에 ( < )와( > )꼭 붙칠것)  
(marquee direction=up scrollamount=1 loop="0"> 
(span style="color:00ffff; filter:shadow(color=000000); height:12px;">
(FONT face=지명이체 size=3>(pre>(b>
그럼 1,2단계에서 기본태그에 사용하면 됩니다
**그럼 최종 정리해보면(항시 명령어 앞,뒤에 ( < )와( > )꼭 붙칠것)  
(table background="http://bbs.nate.com/files/bbs/images/general/adult07/45/v4[20031007204037].jpg" width="600" height="400" border=5 bordercolor="001100"> 
(tr>(td> 
(marquee direction=up scrollamount=1 loop="0"> 
(span style="color:00ffff; filter:shadow(color=000000); height:12px;">
(FONT face=지명이체 size=3>(pre>(b>(ul> 
아름다운 글이나 시를 씁니다.. 
어때요~~ 
글씨에 그림자가 생겼지요 
그럼 늘 발전잇는 회원님되세요
(EMBED pluginspage=http://www.microsoft.com/windows/mediaplayer/
download/default.asp src=http://61.109.255.55/p2p_ms/0/low_wma/264/264335.asf 
width=300 height=250 hidden=true type=application/x-mplayer2 autostart="true" 
loop="true" SHOWCONTROLS="1" SHOWSTATUSBAR="1">
(/font>(/td>(/tr>(/ul>
(/pre>(/b>(/table>
(/marquee>(/center>(/table> 
*** 결과 보기 완성
    아름다운 글이나 시를 씁니다.. 어때요~~ 글씨에 그림자가 생겼지요 그럼 늘 발전잇는 회원님되세요
     
                         ★★★★ 4단계 배경에 사진 삽입방법
                         
    
    
          {table background=" 풍경 이미지사진" width="634" height="476"}tr) ※ 이때 시진이미지는 자르기를해서 이미지크기보다 작아야합니다 (예를들어서 width="634" height="476" 이라면 사진이미지는 width="200" height="220") 배경에 사진 및 아이콘 삽입
                                  
           
          배경에 사진 삽입방법 연습용소스
          아래소스가 기본소스인(항시 명령어 앞,뒤에 ( < )와( > )꼭 붙칠것)  
          (table background="http://pds20.cafe.daum.net/download.php?
          grpid=yseh&fldid=G3sV&dataid=5&fileid=1®dt=20050908111511&disk=
          9&grpcode=haha0479&dncnt=N&.jpg" 
          width=460 height=345 cellpadding="5" cellspacing="3" border=10 bordercolor="ffffff">
          (tr>(td>(pre>
                   (img src="http://pds20.cafe.daum.net/download.php?
          grpid=yseh&fldid=G3sV&dataid=3&fileid=1®dt=20050908111023&disk=
          16&grpcode=haha0479&dncnt=N&.jpg" 
          width="220" height="170" style="filter:alpha(opacity=100,style=2, finishopacity=10)">(br>
          (/td>(/tr>(/br>
          (/font>(/pre>(/b>(/ul>
          (/table> 
          






그럼 늘!~~~~ 발전있는 회원님 되시길 ,늘~ 좋은하루 되세요.
ㅡㅡ산골아쟈씨ㅡㅡ 
 

★★★★★★★★★ 태그에 필요한 명령어들 ★★★★★★★★
 

.. **[☆태그자료☆] 태그에서 꼭 필요한 명령어**
▶marquee: 왼쪽으로 움직이게 하는 명령어 
▶direction: 움직임의 방향을 결정 
▶scrollamount: 움직임의 속도결정(스크롤의 보폭) 
▶loop: 얼마만큼 반복해 줄것인가를 결정케함 
▶@: 글씨를 눕혀보이고자 할때 
▶behavior=alternate: 움직이다 멈춤을 결정케함 
▶width: 가로폭결정 
▶height: 세로폭결정 
▶font: 글꼴지정 
▶font size: 글씨 크기결정 
▶font color: 글씨 색 결정 
▶font face: 글씨체 결정 
▶background: 배경 그림 결정 
▶bgcolor: 바탕색 결정 
▶src: 경로/주소 
▶img: 그림삽입 
▶embed: 동영상,사운드 삽입 
▶align=top: 정렬 위로 
▶align=center: 정렬 중앙 
▶align=bottom: 정렬 아래 
▶br: 엔터 한번 효과 
▶p: 엔터 두번 효과 
▶hr../hr: 수평선 그리기 
▶u../u: 밑줄 긋기 
▶b../b: 굵은 글씨체 만들기 
▶o>../ol: 목록 태그 
▶sub../sub: 아래 첨자 
▶sup../sup: 윗 첨자 
▶pre../pre: 실제 그대로 브라우저 화면에 반응케함 
▶ul.../ul : 글이나 아니콘이미지 우로이동
▶alt: 그림설명 
▶table.../table: 표를 만들기 위한 태그 
▶border: 테두리 두께 결정 
▶td../td: 셀의 내용지정 
▶tr../tr: td를 사용할때 시작과 끝남 결정 
▶bordercolor: 테두리 색결정 
▶cellspacing: 셀과 테두리와의 간격 결정 
▶cellpadding: 셀과 셀에 입력된 데이터의 사이간결 결정 
▶rowspan: 세로줄을 합치게 함 
▶colspan: 가로줄을 합치게 함 
▶html: html문서의 시작 
▶head: html문서의 머리 
▶title../title: html문서의 제목과 끝 
▶body../body: html문서의 본문과 끝 
▶/html: html문서의 끝 
▶a../a: 하이퍼 텍스트 연결(링크) 
▶glow: 필터속성중의 하나 
▶shadow: 필터속성중의 하나 
▶alpha: 필터속성중의 하나 
▶glow: 필터속성중의 하나 
▶blur: 필터속성중의 하나 
▶wave: 필터속성중의 하나 
▶xray: 필터속성중의 하나 
▶invert: 필터속성중의 하나 
▶gray: 필터속성중의 하나 
▶style=filter:fliph().. /span: 그림의 좌우바꾸기 
▶span style=filter:fliph ();height:1px;.../span: 글씨의 좌우바꾸기 
▶span style=filter:flipv();height:1px;: 글이나 그림 상하바꾸기 
▶bordercolorlight: 테두리의 위쪽모서리색 지정 
▶bordercolordark: 테두리의 아래쪽모서리색 지정 
▶frameset..frameset: 프레임을 어떻게 나눌지 결정 
▶frameset cols: 창을 좌우로 나눔 결정 
▶frameset rows: 창을 상하로 나눔 결정 
▶applet../applet: 자바 애플릿 삽입 
▶script../script: 자바 스크립트 삽입 

휴~휴~ 힌들다  
출처 : 아름다운수도권산악회
글쓴이 : 산골아쟈씨 원글보기
메모 :