블로그 이미지
有意事必成 where there,s a will there,s a way 뜻을 품고 있으면 이룰수있다 010-7641-1981 평강이와유자

카테고리

분류 전체보기 (4475)
Buddhism 佛敎 (146)
꿈 소망 사랑 희망 놀이터 (0)
문화공동체 유자의세움 (0)
-------------------- (0)
평강이 (169)
좋은 글귀 (588)
고사성어 이야기 (165)
시행관련 (198)
사업계획서 (34)
컴 배우기 (180)
참고사항 (191)
맛집알고 여행하기 (164)
문서 서식 (74)
임시보관함 (103)
기본카테고리 (176)
가요방 (146)
팝송방 (261)
옛 노래 (153)
뮤직비디오 (190)
보민앨범 (0)
아하 그렇구나 (334)
건축관련 (101)
토목관련 (70)
새로운 카테고리 (122)
물리와화학 (55)
자갈치알리미 (76)
인생이란 (82)
장기표의 시사논평 (371)
한번 배워볼까요 (110)
스크랩 (215)
Total
Today
Yesterday

달력

« » 2025.2
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

공지사항

태그목록

최근에 올라온 글

만화로 배우는 테크

컴 배우기 / 2008. 5. 30. 20:40

우리님들 많이 연습하세요..







▒ 요약

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~24회 완결판(동영상)  (0) 2008.06.11
연속적으로 빠르게 이미지 캡쳐 하는 프로그램 [드리미갈무리 v1.01 ]  (0) 2008.06.08
그림파일이 X표(배꼽)으로 보일 때 보는 요령  (0) 2008.05.30
동영상 제대로 캡쳐하기  (0) 2008.05.27
사진+글올리기+음악 소스  (0) 2008.05.23
Posted by 평강이와유자
, |

최근에 달린 댓글

글 보관함

티스토리툴바