▒ 요약
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>
|