♧강의목록1♧/중독-인터넷.스마트폰.게임

[스크랩] 만화로 배우는 태그

花受紛-동아줄 2009. 1. 30. 00:15






▒ 요약

HTML(HyperText Markup Language)

월드와이드웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 언어입니다.
쉽게말해 인터넷을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어, 규칙입니다.
즉, 인터넷으로 보는 모든 웹 페이지는 HTML 문서로 만들어지고 표현됩니다.








▒요약

메모장

html은 문서로 만들어 구현시킵니다.
이런 html문서를 만드는 도구로 여러가지 소프트웨어(S/W)가 있습니다만
가장 기본적으로 메모장으로 만들어 활용합니다. 메모장은
시작>프로그램>보조프로그램>메모장
에 있습니다. 

(http://cafe.daum.net/herjaherja)



 






▒요약

HTML 문서 만들기

HTML은 메모장을 이용해 문서로 만들고 웹브라우저가 구현시킵니다.
태그(괄호 영어로된 문자들)는 대소문자 구분이 없구요,
HTML 문서는 저장 할 때 파일 이름은 영문 소문자로 해주는 것이 좋습니다.
문서를 만들고 저장 할 때

①제목.html 로 저장
②형식은 모든파일로






▒요약

HTML 들여다보기


HTML은 < > </ > 괄호규칙이 있습니다. 열었으면 반듯이 닫기!
<2> <1> </1> </2> ←이렇게 되어있으면 1번은, 2번에 포함됩니다. { ( ) }
<2> <1> </2> </1> ←이렇게 되면 안되지요. { ( } ) 이렇게 된경우지요 ^^;;



■ 소스 ■

<html>
<head>
<title>문서제목</title>
</head>
<body>
↑
이 곳이 본문의 내용을 꾸미는 곳입니다.
↓
</body>
</html> 










▒요약

태그의 이해

태그는 html을 다양하게 꾸미는 각 각의 기능 문자들입니다.
<br> 태그를 통해 간단한 태그효과를 보셨습니다.
<br> 태그는 "한줄바꿈"이며, 한줄 아래로 바꾸고 싶을 때 사용합니다.
두줄을 바꾸고 싶으면 <br> <br> 두번, 세줄 띄고 싶으면<br> <br> <br> 세번 쓰면 됩니다.
<br> 태그는 닫기가 필요없는 태그입니다. </br>가 필요없습니다.










▒요약

<font> <size> <color> 태그

글자의 속성을 조절하는 태그입니다.
<font> 태그로 글자를 감싸줍니다.
<font> 태그안에 size color를 넣어 속성을 조절합니다. <font size='숫자' color='색상'>
size='숫자'로 글자 크기가 바뀝니다.
color='색깔영문 (혹은 색상 코드)' 를 입력하여 색깔을 바꿉니다.
색상표는 따로 올려드립니다. ^__^)
color=red 라고 입력하여도 되고
color=#CD1039 이렇게,
색상표에 있는 색상코드를 입력하여도 됩니다.
 
#FAEB78 #FAF082 #FAF58C #FAFA96 #FAFAA0 #FAFAAA #FAFAB4 #FAFABE #FAFAD2 #FAFAD2
#FFDC3C #FFE146 #FFE650 #FFEB5A #FFF064 #FFF56E #FFFA78 #FFFA82 #FFFF8C #FFFF96
#FFC81E #FFD228 #FFD732 #FFDC3C #FFE146 #FFE650 #FFEB5A #FFF064 #FFF56E #FFF978
#FFB400 #FFBE0A #FFC314 #FFC81E #FFCD28 #FFD232 #FFD73C #FFDC46 #FFE150 #FFE65A
#FDCD8C #FDD296 #FDD7A0 #FDDCAA #FDE1B4 #FDE6BE #FDEBC8 #FDF5D2 #FDF5DC #FDF5E6
#FAC87D #FACD87 #FAD291 #FAD79B #FADCA5 #FAE1AF #FAE6B9 #FAEBC3 #FAEBCD #FAEBD7
#FFA500 #FFAF0A #FFB914 #FFC31E #FFCD28 #FFD732 #FFDC37 #FFE13C #FFE641 #FFEB46
#FF9100 #FF9B00 #FFA500 #FFAF00 #FFB900 #FFC300 #FFC800 #FFCD00 #FFD200 #FFD700
#FF8200 #FF8C0A #FF9614 #FFA01E #FFAA28 #FFB432 #FFB937 #FFBE3C #FFC341 #FFC846
#FFA98F #FFB399 #FFBDA3 #FFC7AD #FFD1B7 #FFDBC1 #FFE0C6 #FFE5CB #FFEAD0 #FFEFD5
#FFA374 #FFAD7E #FFB788 #FFC192 #FFCB9C #FFD0A1 #FFD5A6 #FFDAAB #FFDFB0 #FFE4B5
#FF9473 #FF9E7D #FFA887 #FFB291 #FFBC9B #FFC6A5 #FFD0AF #FFD0AF #FFD5B4 #FFDAB9
#FF7F50 #FF895A #FF9364 #FF9D6E #FFA778 #FFB182 #FFBB8C #FFC091 #FFC596 #FFCA9B
#CD853F #CD8F49 #D29953 #D7A35D #DCAD67 #E1B771 #E6C17B #EBC680 #F0CB85 #F5D08A
#D2691E #D27328 #D27D32 #D7873C #DC9146 #E19B50 #E6A55A #EBAA5F #EBAF64 #F0B469
#AE5E1A #B86824 #C2722E #CC7C38 #D68642 #E0904C #E59551 #EA9A56 #EF9F5B #F4A460
#8B4513 #8B4F1D #8B5927 #8B6331 #906D3B #957745 #9F814F #A48654 #A98B59 #AE905E


#FFB6C1 #FFBBC6 #FFC0CB #FFC5D0 #FFCAD5 #FFCFDA #FFD4DF #FFD9E4 #FFDEE9 #FFE3EE
#FFAAAF #FFB4B9 #FFBEC3 #FFC8CD #FFD2D7 #FFDCE1 #FFE1E6 #FFE6EB #FFEBF0 #FFF0F5
#FF9E9B #FFA8A5 #FFB2AF #FFBCB9 #FFC6C3 #FFD0CD #FFD5D2 #FFDAD7 #FFDFDC #FFE4E1
#FF7A85 #FF848F #FF8E99 #FF98A3 #FFA2AD #FFACB7 #FFB1BC #FFB6C1 #FFBBC6 #FFC0CB
#FF5675 #FF607F #FF6A89 #FF7493 #FF7E9D #FF88A7 #FF92B1 #FF9CBB #FFA6C5 #FFB0CF
#FF82FF #FF8CFF #FF96FF #FFA0FF #FFAAFF #FFB4FF #FFBEFF #FFC8FF #FFD2FF #FFDCFF
#FF7DB4 #FF87BE #FF91C8 #FF9BD2 #FFA5DC #FFAFE6 #FFB4EB #FFB9F0 #FFBEF5 #FFC3FA
#FF69B4 #FF73BE #FF7DC8 #FF87D2 #FF91DC #FF9BE6 #FFA5F0 #FFAAF5 #FFAFFA #FFB4FF
#FF1493 #FF1E9D #FF28A7 #FF32B1 #FF3CBB #FF46C5 #FF50CF #FF5AD9 #FF64E3 #FF6EED
#DB7093 #DB7A9D #DB84A7 #E08EB1 #E598BB #EAA2C5 #EAB1D4 #EFACCF #F4BBDE #F4B6D9
#D7567F #DC6089 #E16A93 #E6749D #EB7EA7 #F088B1 #F592BB #FA9CC5 #FFA6CF #FFB0D9
#C71585 #C71F8F #C73399 #C73DA3 #CC47AD #D151B7 #D65BC1 #E065CB #EA6FD5 #F479DF
#CD1039 #CD1F48 #CD2E57 #CD3861 #CD426B #D24C75 #D7567F #DC6089 #E16A93 #E6749D
#B9062F #B91A4D #BE2457 #C32E61 #C8386B #CD4275 #D24C7F #D75689 #DC6093 #E16A9D


#3DFF92 #47FF9C #51FFA6 #5BFFB0 #65FFBA #6FFFC4 #79FFCE #75FFCA #7AFFCF #7FFFD4
#55EE94 #5FEE9E #69EEA8 #73EEB2 #7DEEBC #87EEC6 #91F8D0 #9BFFDA #A5FFE4 #AFFFEE
#66CDAA #70D2B4 #7AD7BE #84DCC8 #8EE1D2 #98EBDC #9DF0E1 #A2F5E6 #A7FAEB #ACFFEF
#AAEBAA #B4F0B4 #BEF5BE #C8FAC8 #D2FFD2 #DCFFDC #E1FFE1 #E6FFE6 #EBFFEB #F0FFF0
#80E12A #8AE634 #94EB3E #9EF048 #A8F552 #B2FA5C #BCFF66 #C1FF6B #C6FF70 #CBFF75
#52E252 #5CE75C #66EC66 #70F170 #7AF67A #84FB84 #89FB89 #8EFB8E #93FB93 #98FB98
#64CD3C #6ED746 #78E150 #82EB5A #8CF064 #96F56E #9BFA73 #A0FA78 #A5FA7D #AAFA82
#13C7A3 #18CCA8 #1DD1AD #22D6B2 #27DBB7 #2CE0BC #31E0C1 #36E0C6 #3BE0CB #40E0D0
#46B4B4 #50BEBE #5AC8C8 #64D2D2 #6EDCDC #73E1E1 #78E6E6 #7DEBEB #82F0F0 #87F5F5
#20B2AA #2ABCB4 #34C6BE #3ED0C8 #48DAD2 #52E4DC #57E9E1 #5CEEE6 #61F3EB #66F8F0
#5F9EA0 #69A8AA #73B2B4 #7DBCBE #87C6C8 #91D0D2 #96D5D7 #9BDADC #A0DFE1 #A5E3E6
#3CB371 #46BD7B #50C785 #5AD18F #64DB99 #6EE5A3 #73EAA8 #78EFAD #7DF4B2 #82F9B7
#2E8B57 #389561 #429F6B #4CA975 #56B37F #60BD89 #65C28E #6AC793 #6FCC98 #74D19D
#228B22 #2C952C #369F36 #40A940 #4AB34A #54BD54 #5EC75E #63CC63 #68D168 #6DD66D
#497649 #538053 #5D8A5D #679467 #719E71 #7BA87B #80AD80 #85B285 #8AB78A #8FBC8F
#006400 #0A6E0A #147814 #1E821E #288C28 #329632 #3CA03C #41A541 #46AA46 #4BAF4B
#008C8C #0A9696 #14A0A0 #1EAAAA #28B4B4 #32BEBE #37C3C3 #3CC8C8 #41CDCD #46D2D2
#008080 #0A8A8A #149494 #1E9E9E #28A8A8 #32B2B2 #37B7B7 #3CBCBC #41C1C1 #46C6C6


#93DAFF #98DFFF #9DE4FF #A2E9FF #A7EEFF #ACF3FF #B0F7FF #B4FBFF #B9FFFF #C0FFFF
#87CEFA #91D8FA #A5D8FA #AFDDFA #B9E2FA #C3E7FA #CDECFA #D7F1FA #E1F6FA #EBFBFF
#00BFFF #0AC9FF #14D3FF #1EDDFF #28E7FF #32F1FF #3CFBFF #46FFFF #96FFFF #C8FFFF
#00A5FF #00AFFF #00B9FF #00C3FF #00CDFF #00D7FF #00E1FF #00EBFF #00F5FF #00FFFF
#1EA4FF #28AEFF #32B8FF #3CC2FF #46CCFF #50D6FF #5AE0FF #6EE0FF #6EEAFF #78F3FF
#1E90FF #289AFF #32A4FF #3CAEFF #46B8FF #50C2FF #5ACCFF #64D6FF #6EE0FF #78EAFF
#96A5FF #A0AFFF #AAB9FF #B4C3FF #BECDFF #C8D7FF #D2E1FF #DCEBFF #E8F5FF #F4FFFF
#86A5FF #90AFFF #9AB9FF #A4C3FF #AECDFF #B8D7FF #CCE1FF #E0EBFF #EBF5FF #F9FFFF
#6495ED #6E9FED #78A9ED #82B3ED #8CBDED #96C7ED #A0D1F7 #AADBFF #B4E5FF #BEEFFF
#0078FF #0A82FF #148CFF #1E96FF #28A0FF #32AAFF #3CB4FF #46BEFF #50C8FF #5AD2FF
#0064FF #0A6EFF #1478FF #1E82FF #288CFF #3296FF #3CA0FF #46AAFF #50B4FF #5ABEFF
#0000FF #3232FF #5050FF #646EFF #6478FF #6482FF #648CFF #6496FF #64A0FF #64AAFF
#4169E1 #4B73E1 #557DE1 #5F87E1 #6991E1 #739BE1 #7DA5E1 #87AFEB #91B9F5 #9BC3FF
#0064CD #0A6ECD #1478CD #1E82CD #288CD2 #3296D7 #3CA0E1 #46AAEB #50B4F5 #5ABEF5
#5A5AFF #6464FF #6E6EFF #7878FF #8282FF #8C8CFF #A0A0FF #B4B4FF #C8C8FF #D2D2FF
#7B68EE #8572EE #8F7CEE #9986EE #A390EE #AD9AEE #B7A4EE #C1AEEE #CBB8EE #D5C2EE
#6A5ACD #7E6ECD #8878CD #9282CD #9C8CCD #A696CD #B0A0CD #BAAAD7 #C4B4E1 #CEBEE1
#0000CD #2828CD #4646CD #6464CD #6E6ED7 #7878E1 #8282EB #8C8CF5 #9696FF #A0A0FF
#00008C #14148C #28288C #3C3C8C #50508C #646496 #7878AA #8C8CBE #A0A0C8 #B4B4DC
#483D8B #52478B #5C518B #665B8B #70658B #7A6F95 #84799F #8E83A9 #988DB3 #A297BD
#000069 #1E3269 #323C73 #3C467D #3C5087 #3C5A91 #46649B #506EA5 #5A78AF #6482B9


#CD853F #CD8B45 #CD904A #D2954F #D29A54 #D79F59 #D7A45E #E1A963 #E1AE68 #E6B36D
#DB631F #E56D29 #E57733 #EA813D #EF8B47 #EF904C #F49551 #F49A56 #F49F5B #F4A460
#D2691E #D27328 #D77D32 #D7873C #DC9146 #E19B50 #E6A055 #EBA55A #F0AA5F #F5AF64
#A0522D #A05C37 #A06641 #A5704B #AA7A55 #B4845F #B98E69 #C39873 #CDA27D #D7AC87
#8B4513 #8B4F1D #8B5927 #8B6331 #906D3B #9A7745 #A4814F #AE8B59 #B89563 #C29F6D
#DA70D6 #DF75DB #E47AE0 #E97FE5 #EE84EA #F389EF #F88EF4 #FD93F9 #FF98FE #FF9DFF
#BA55D3 #BF5AD8 #C45FDD #C964E2 #CE69E7 #D36EEC #D873F1 #DD78F6 #E27DFB #E782FF
#9932CC #9E37D1 #A33CD6 #A841DB #AD46E0 #B24BE5 #B750EA #BC55EF #C15AF4 #C65FF9
#9400D3 #9905D8 #9E0ADD #A30FE2 #A814E7 #AD19EC #B21EF1 #B723F6 #BC28FB #C12DFF
#942894 #9E329E #A83CA8 #B246B2 #BC50BC #C65AC6 #D064D0 #DA6EDA #E478E4 #EE82EE
#8C008C #960A96 #A014A0 #AA1EAA #B428B4 #BE32BE #C83CC8 #D246D2 #DC50DC #E65AE6
#800080 #8A0A8A #941494 #9E1E9E #A828A8 #B232B2 #BC3CBC #C646C6 #D050D0 #DA5ADA
#834683 #8D508D #975A97 #A164A1 #AB6EAB #B578B5 #BF82BF #C98CC9 #D396D3 #DDA0DD
#828282 #8C8C8C #969696 #A0A0A0 #AAAAAA #B4B4B4 #BEBEBE #C8C8C8 #D2D2D2 #DCDCDC
#000000 #282828 #323232 #3C3C3C #464646 #505050 #5A5A5A #646464 #6E6E6E #787878


(http://cafe.daum.net/herjaherja)






▒요약

글자 태그 정리


<font size=숫자 color=색상값> </font> 글자 크기, 색깔

<B>굵은 글씨</B>

<I>기울인 글씨</I>

<TT>타자 친 것처럼</TT>

<U>글자에 밑줄</U>

<BIG>큰 글씨</BIG>

<SMALL>작은 글씨</SMALL>

<SUB>아래첨자</SUB>

<SUP>윗첨자</SUP>








▒요약

<marquee> 태그

글자를 움직여 보자!! '마퀴' 태그는 글자를 이리저리 다양하게 움직이게합니다.
다양한 활요은 다음장에 하나하나 차례로 배워봅니다.
일단, 기본 '마퀴' 태그를 이용해 움직임을 알아보세요. ^___^


■ 소스 ■

<html>
<head>
<title>움직이는 글자</title>
</head>
<body>

<marquee> 사랑해 </marquee>

</body>
</html>






▒요약

<marquee> 태그 활용

글자를 맘데로 움직여 보자!!
'마퀴' 태그에 아래 두 명령을 삽입시켜, 글자를 자유롭게 움직이게합니다.
direction
behavior!!=alternate
다양한 활용입니다. 실습을 통해 움직임을 알아보세요. ^___^


■ 소스 ■

<marquee direction="left">왼쪽으로</marquee>

<marquee direction="right">오른쪽으로</marquee>

<marquee direction="up">위로</marquee>

<marquee direction="down">아래로</marquee>

<marquee behavior!!=alternate>좌우로 왕복</marquee>

<marquee behavior!!=alternate direction=up>상하로 왕복</marquee>

<marquee direction=up behavior!!=alternate><marquee behavior!!=alternate>지그재그</marquee></marquee>
 
 






▒요약

<marquee> 태그 활용 2

이리저리 움직이는 글자를 빠르게, 느리게, 짧게 넓게....맘데로 움직여 보자!!
'마퀴' 태그에 아래 4개 명령을 삽입시켜, 글자를 자유롭게 움직이게합니다.
scrollamount
loop
width
height
다양한 활용입니다. 실습을 통해 움직임을 알아보세요. ^___^


■ 소스 ■

<marquee scrollamount="3"> 3 속도로 움직이기 </marquee>

<marquee loop=2> 2번만 움직이기 </marquee>

<marquee width=20> 가로 20안에서 움직이기</marquee>

<marquee direction='up' height=90> 세로 90안에서 움직이기</marquee>







▒요약

<marquee> 태그 다양한 실전 응용

앞서 배운 각종 명령 속성을 합하면??? 다양복잡현란!!!
'마퀴' 태그에 앞서배운 명령을 합쳐 사용하면, 글자에 다양한 효과와 표현을 줄 수 있습니다.
direction
behavior!!=alternate + width + loop
scrollamount + loop
width + scrollamount
height + behavior!!=alternate
.
.
.
다양한 활용입니다. 실습을 통해 움직임을 알아보세요. ^___^


■ 소스 ■

<marquee behavior!!=alternate width=35>(*^.^*)</marquee>

<marquee direction="right" scrollamount="1"> (ㅠㅠ)</marquee>

<marquee width=500 scrollamount=300>(^___^)/</marquee>

<marquee direction=up>컴<ul>으<ul>로<ul>허<ul>자<ul>허<ul>자<ul></marquee>

<marquee>허<br>자<br>허<br>자</marquee>

<marquee bgcolor=black><font color=ffffff size=7>허자허자</font></marquee>







▒요약

문장, 문서 태그 입문

글자에 대해 배울 때 글자를 크게, 작게, 예쁜 색깔, 움직이기 등
여러가지 글자 관련 태그가 있었던것 처럼 문서만들 때에도
문서 만들기 관련 하여 다양한 태그가있습니다.
아래 소스 가지고 우선 감만 잡아보세요. 그 다음에 하나씩 하나씩
문장, 문단을 배워서 예쁜 문서를 만들어 보아요. ^___^)



■ 소스 ■

<html>

<body bgcolor=pink>

<center>

<hr width=400>

<font size=2>

해용씨, 저 허자에요...
<p>사실은 제가 예전부터 쭉~ 욱
<br>해용씨를 지켜보며 혼자 짝사랑했어요
<p>제 마음을 받아주세요.
<br>
<br>넹?          -_-;;;
<br>
</font>

<hr width=400>


<xmp>
<br>태그 <p>태그 <center>태그   <xmp>태그 <hr>태그 bgcolor
</xmp>

</center>


</body>

</html>







▒요약

<body> 속성 태그

문서모양을 예쁘게 만들기 위한 문장,문단을 조절하는 태그들을 배워봅니다.
첫번째로 본문전체를 조절하는 body 관련 속성 태그입니다.
아래 소스 3가지에 대해 모두 실습해보세요.



■ 소스 ■

<body bgcolor=yellow> < /body>

<body text=green> </body>

<body background="http://www.herjaherja.com/image/etc/a04.gif"> </body>

http://www.herjaherja.com/image/etc/a01.gif
http://www.herjaherja.com/image/etc/a02.gif
http://www.herjaherja.com/image/etc/a03.gif








▒요약

<br> <p>   태그

문서를 작성하다보면 다음줄로 줄바꿈해야겠죠?
<br> 과 <p> 태그를 이용하여 줄바꿈을해보고 두개의 차이점을 비교해 보아요.
htnl에서는 글자간격을 많이 띄어도 한칸 띈걸로 인식합니다.
  태그를 사용하여 빈칸 숫자를 조절합니다.


■ 소스 ■

<html>
<body>

글자만들기는 이러쿵 저러쿵하여<br>
글자는 이러 저러 만듭니다.<p>
그림만들기는 이러쿵 저러쿵하여<br>
그림을 만들 때는 어쩌구 저쩌구....


</body>
</html>






▒요약

선긋기 <hr> 태그

문서를 작성하다보면 선을 긋는 경우가 많습니다.
<hr> 태그를 이용하여 선을 그어보고 <hr> 에 끼어넣는

size="숫자"
width="숫자"
noshade
style="color:색상값;"

태그들을 이용하여 다양한 선의 변화를 줄수있습니다.



■ 소스 ■

<html>
<body>

1<hr>

2<hr size=5>

3<hr width=20>

4<hr width=20%>

5<hr noshade>

6<hr style="color:red;">

7<hr size=1 width=60% noshade style="color:#000000;" >

</body>
</html>







▒요약

정렬 <p align> 태그, 소스보기 <xmp> 태그

문서를 왼쪽 정렬할까? 오른쪽 정렬할까? 가운데로 맞출까?
<p align="위치"> 태그를 이용하여 문서의 모양을 왼쪽으로 오른쪽으로, 가운데로...정렬해 보세요.

<p align="left">
<p align="right">
<p align="center">


소스보기 할 때 태그소스까지 다 보여주고 싶으면 <xmp> 를 사용하면 됩니다.
<xmp> 내용 </xmp>
사이의 내용들은 태그 소스까지 모두 보여집니다.



■ 소스 ■

<html>
<body background="http://www.herjaherja.com/image/etc/bgimage.jpg">

<p align="left">5천만 프로젝트 컴으로 허자! 허자!

<p align="right">5천만 프로젝트 컴으로 허자! 허자!

<p align="center">5천만 프로젝트 컴으로 허자! 허자!

</body>
</html>

출처 : 얼추하르방 鏡潭 秘望錄
글쓴이 : 얼추하르방 鏡潭 원글보기
메모 :

'♧강의목록1♧ > 중독-인터넷.스마트폰.게임' 카테고리의 다른 글

[스크랩] 컴퓨터 노래방 기능ㅋ  (0) 2009.07.18
[스크랩] 포토샵 강좌  (0) 2009.01.30
1000 GB는 1TB (테라바이트)...  (0) 2009.01.22
[스크랩] 저작권 시비에 대해서...음악을 올리실때 꼭 보세요  (0) 2009.01.04
<HTML><HEAD><TITLE>아! 멋있는 바로 당신!</TITLE>  (0) 2008.12.08

'♧강의목록1♧/중독-인터넷.스마트폰.게임'의 다른글

  • 현재글[스크랩] 만화로 배우는 태그

관련글

티스토리툴바