태그 소스 자료
[스크랩] HTML(태그) 의 기본구조 기초
다사랑해
2007. 2. 10. 23:48
HTML(태그) 의 기본구조
요약: 월드 와이드 웹에서 하이퍼텍스트 문서를 만들기 위하여 사용되는 기본언어.
인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 모든 웹 페이지들은 HTML로 작성된다.
HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서
홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어를 태그(tag)라고 하는데 태그는 반드시 시작과 끝을
표시하는 2개의 쌍으로 이루어져 있다. 또한 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를
웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한
하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.
HTML은 전자 문서의 서식을 정의하기 위해 만들어졌으며, 국제표준 SGML의 부분 집합으로 정의되었다.
HTML은 SGML에서 특히 하이퍼텍스트를 강조하여 만들어진 언어이며, ASCII 문자로 구성된 일반적인 텍스트로 구성되었다.
이 언어는 별도 컴파일러가 필요치 않으며, 웹 브라우저에서 해석이 가능한 사용하기 쉬운 언어로 각광을 받고 있다.
*html 기본툴
기본 구조는
< HTML >
< HEAD >
< TITLE >제목 < /TITLE >
< /HEAD >
< BODY >
본문
< /BODY >
< /HTML >
이것입니다.
< HTML > < /HTML >
위의 것은 HTML 문서의 시작과 끝을 나타냅니다. 브라우저에게 HTML 문서임을 지시하는 태그들이죠. 여기서 태그란
HTML 문서의 모양과 행동양식을 정해주는 하나의 명령어입니다. 이것은 시작태그;< > 와 종료태그;< / >가
짝을 이뤄 사용되는 것이 일반적이지만 모든 태그가 < / >(종료태그)를 필요로 하는 것은 아닙니다. 이에 대해서는
필요할 때마다 설명하기로 하죠. ~세상에 절대란 없다~
< HEAD > < /HEAD >
HTML 문서에 대한 일반적인 정보를 표시하는 부분으로 실제 브라우저에 출력되지는 않습니다. 이 태그 안에 사용될 수
있는 것으로는 < TITLE > < /TITLE >, < SCRIPT > < /SCRIPT >, < META > < /META >, < STYLE > < /STYLE >가 있는데
지금 당장 우리가 신경을 써야 할 것은 TITLE 태그입니다. 나머지는 잠시 잊어버립시다.
< TITLE > < /TITLE >
HTML 문서의 제목을 정의하는 부분입니다. 이것은 위 그림에서 보듯이 브라우저 창의 맨위쪽에 나타납니다.
< BODY > < /BODY >
HTML 문서의 대부분을 차지하는 몸통부분으로 실제적인 내용이 들어가는 부분입니다. BODY 태그 안에 쓰인 내용들이
브라우저 화면에 출력되는 것이죠.
HTML의 기본형식을 간단히 살펴보았습니다. 이것은 HTML문서가 가져야 할 최소한의 골격입니다. 자나깨나 이 형식은
머리속에 넣어둡시다. 알겠죠?내용이 들어가는 부분입니다. BODY 태그 안에 쓰인 내용들이 브라우저 화면에 출력되는 것이죠.
*글꼴 속성변형시키기
논리적 형태
< DFN > < /DFN > 단어를 정의할 때 사용합니다. 일반적인 경우에 이탤릭체로(기울어져서) 표현됩니다.
< EM > < /EM > 강조하기 위하여 사용합니다. 일반적인 경우에 이탤릭체로 표현됩니다.
< CITE > < /CITE > 책이나 필름 등의 제목을 나타내기 위하여 사용합니다. 일반적인 경우에 이탤릭체로 표현됩니다.
< CODE > < /CODE > 컴퓨터의 코드를 나타내기 위하여 사용되며 보통모양보다 약간 작게 표시됩니다.
< KBD > < /KBD > 키보드의 입력을 표현할 때에 사용되며 보통모양보다 약간 작게 표시됩니다.
< SAMP > < /SAMP > 샘플을 삽입할 때 사용되며 보통모양보다 약간 작게 표시됩니다.
< STRIKE > < /STRIKE > 문자 중간에 줄을 그리는 것으로 주로 강조하기 위해 사용됩니다.
< STRONG > < /STRONG > 강세를 주어 강조하기 위한 경우에 사용합니다. 일반적인 경우에 굵은 글자꼴로(bold) 표현됩니다.
< VAR > < /VAR > 특정 정보에 대하여 대체할 수 있는 변수를 나타낼 경우에 사용합니다. 일반적인 경우에 이탤릭체로 표현됩니다.
물리적 형태
< B > < /B > 굵은 글자꼴을 나타냅니다
< I > < /I > 이탤릭 글자꼴을 나타냅니다
< U > < /U > 밑줄친 형태로 나타냅니다
< TT > < /TT > 타자친 것과 같은 효과를 나타내며 보통 모양보다 조금 작게 표현됩니다.
< BIG > < /BIG > 현재 지정된 폰트보다 좀더 큰 크기를 만들 때 사용합니다
< SMALL > < /SMALL > 현재 지정된 폰트보다 좀더 작은 크기를 만들 때 사용합니다
< SUB > < /SUB > 특정부분을아래첨자로 나타내고 싶을 때 사용합니다.
< SUP > < /SUP > 특정부분을윗첨자로 나타내고 싶을 때 사용합니다.
< BLINK > < /BLINK > 특정문자를 깜박입니다. 넷스케잎에만 적용됩니다.
글자크기 조절 < font size="(n)" >< /FONT >
(n)은 숫자 1~7까지
글자 색깔 넣기 < font color="(color)" >< /FONT >
(color)는 색깔의 종류 예 : blue, red, orange, gray 등등
글꼴 모양 바꾸기 < font face="(글꼴모양)" >< /FONT >
(글꼴모양)은 글꼴의 종류 입력 예: 엽서체, 돋움체, 바탕체 등등
글자 크기 조절하는 것과 색깔 넣는 것을 동시에 쓰는것...< font color="(color)" size="(n)" >< /FONT >
글자 속성 바꾸기
< !-- -- > : 주석문 달기.
< B >< /B > : 문자를 굵게 나타냅니다. ( = < strong > < /strong > )
< I >< /I > : 문자를 이탤릭체로 나타냅니다.
< TT >< /TT > : 글자를 보통크기보다 작게 표현하고 타자체로 나타냅니다.
< STRIKE >< /STRIKE > : 문자 가운데 줄이 들어갑니다. 삭제표시
< U >< /U > : 문자에 밑줄을 긋습니다.
< SUB >< /SUB > : 아랫첨자를 만듭니다.
< SUP >< /SUP > : 윗첨자를 만듭니다.
< BIG >< /BIG > : 문자를 크게 만듭니다.
< SMALL >< /SMALL > : 문자를 작게 만듭니다.
< BR > : 다음 줄로 이동하는 태그, < /br >이 안들어갑니다.
< P > < /P > : 다음 문단으로 이동하는 태그
< P ALIGN="" > < /P > : 단락의 정렬 상태를 설정
Ex) < p align="left" >왼쪽 정렬< /p >
< p align="center" >가운데 정렬< /p >
< p align="right" >오른쪽 정렬< /p >
< DIV ALIGN="" > < /DIV > : 단락의 정렬 상태를 설정. 태그와는 다르게 줄이 삽입안됨.
Ex) < DIV align="left" >왼쪽 정렬< /DIV >
< DIV align="center" >가운데 정렬< /DIV >
< DIV align="right" >오른쪽 정렬< /DIV >
< CENTER > < /CENTER > : 내용을 가운데로 정렬
< PRE > < /PRE > : 텍스트를 그대로 표현
< BLOCKQUOTE > < /BLOCKQUOTE > : 들여쓰기 해주는 태그
*움직이는 텍스트
< marquee > 주찬양 홈 페이지 < /marquee >< p > 기본형으로 왼쪽으로 무한 루프입니다.
< marquee behavior="alternate" > 주찬양 홈 페이지< /marquee >오른쪽 왼쪽으로 왔다갔다 합니다.
< marquee behavior="slide" > 주찬양 홈 페이지 < /marquee > 왼쪽에서 와서 멈춤니다
< marquee direction="right" > 주찬양 홈 페이지 < /marquee > 오른쪽으로 계속 흐릅니다.
< marquee scrollamount="1" > 주찬양 홈 페이지 < /marquee > 움직이는 속도를 나타냅니다
< marquee scrollamount="3" > 주찬양 홈 페이지 < /marquee > 움직이는 속도를 나타냅니다< 숫자가 적을수록 느리게 >
< marquee scrollamount="10" > 주찬양 홈 페이지 < /marquee > 움직이는 속도를 나타냅니다. < 숫자가 적을수록 느리게 >
< marquee scrolldelay="500" > 주찬양 홈 페이지 < /marquee >< p > 움직임이 지연되는 속도를 지정합니다.
< marquee loop="3" > 주찬양 홈 페이지 < /marquee >< p > 왼쪽으로 3회 반복합니다. 숫자는 횟수를 나타냅니다.
< marquee bgcolor="yellow" > 주찬양 홈 페이지 < /marquee >< p > 글자에 바탕을 주는 경우입니다.< 노란색 바탕 >
< marquee direction="down" > 주찬양 홈 페이지 < /marquee >< p > 아래로 계속 떨어지는 경우입니다.
< marquee direction="up" > 주찬양 홈 페이지 < /marquee >< p > 위로 올라가는 경우입니다.
움직이는 텍스트 (위에것 순서대로 실예)
|
출처 : HTML(태그) 의 기본구조 기초
글쓴이 : 새독수리 원글보기
메모 :