컴.태그공부

태그 이해하기

영지니 2012. 1. 4. 21:10

 

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 이렇게 해도 됩니다. 

색상표는 태그연습장 참조. 

 
▒요약

글자 태그 정리


<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>