요약
HTML(HyperText Markup Language)
월드와이드웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 언어입니다.
쉽게말해 인터넷을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어, 규칙입니다.
즉, 인터넷으로 보는 모든 웹 페이지는 HTML 문서로 만들어지고 표현됩니다.
▒요약
<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> |
|
|
'컴자료실' 카테고리의 다른 글
| [스크랩] 컴퓨터 활용팁 모음 (3) (0) | 2012.10.25 |
|---|---|
| [스크랩] 이런 프로그램들은 지워 버리세요. (0) | 2012.10.13 |
| [스크랩] 컴퓨터에서 먼저 익혀야할 사항 (0) | 2012.08.09 |
| [스크랩] 컴퓨터 잘 하는 100가지팁 (0) | 2012.08.02 |
| [스크랩] 알기쉬운 컴퓨터 백과사전 (0) | 2012.08.02 |