홈페이지 만들기(HTML & JavaScript) 1. 기본 태그 |
|||||
|---|---|---|---|---|---|
| 작성자 | 컴샘 | 등록일 | 19.09.06 | 조회수 | 84 |
|
홈페이지 만들기(HTML & JavaScript)
1.기본태그 설명
HTML은 Hyper Text Markup Language의 약자이다. 즉 하이퍼텍스터를 나타내는 언어라고 간단히 표현할 수 있다. 이는 일반적으로 텍스트 파일에 여러가지 태그(Tag)를 표시함으로써 브라우저(Browser)를 통하여 하이퍼텍스터 형태의 문서로 나타내주는 언어를 말한다. ▶ 태그(Tag) : HTML을 만드는 언어의 문법을 뜻하며 "<" 와 ">"로 둘러싸여져 있다. 브라우저에서는 각 태그를 읽어서 해당 HTML파일을 제대로 모양이 잡힌 형태로 화면에 보여주는 것이다. ▶HTML의 기본형태 : <... > -> 시작 </...> -> 종료 <HTML> -> HTML의 시작 <HEAD> -> 헤드의 시작 <TITLE> -> 현재화면의 타이틀(상단 좌측에 있음) ......... -> 타이틀 내용 </TITLE> -> 타이틀 종료 </HEAD> -> 헤드의 종료 <BODY> -> 내용의 시작 ........-> 내용 </BODY> -> 내용의 종료 </HTML> -> HTML의 종료
(1) 기본문법
1) Paragraph : <P> 본문 중의 문단시작을 알리는 태그이다. 또한 본 문단과 다음 문단사이의 경계를 나타낼 때 쓰인다.(빈칸 한줄이 자동생성 -> 문단구분에는 뛰워쓰는것이 맞지요?) </P>는 생략될 수 있으며, <P>를 만나면 브라우저는 <P>가 있는 바로 앞 문단이 끝났다고 해석을 하게 된다.
2) Break : <BR> <br>은 line break를 의미하며 <br>이 위치한 곳에서 줄 바꾸기가 이루어진다. <질문> <P>와 <br>의 다른점은 무엇인지요.
3) Preformatted Text : <pre> <pre>.....</pre>사이에 위치한 문서의 내용을 공백과 빈줄이 인식되어 있는 문서를 그대로 보여준다. 즉 필요에 의해서 공백과 빈줄을 넣어 줘야 할 경우에는 <pre> 태그를 사용하여 표시하여 준다.그러나 태그 형태로 되어있는 것은 태그로 인식한다는 점이 매우 중요하다. 즉 <pre>...</pre> 사이에 <p>가 있으면 줄바꿈을 한다는 말이다. ▶ 연습 <html> <head><title>홈페이지 작성연습</title></head> <body> 홈페이지<p>작성 연습<br>입니다.<br> <pre> 문서의 내용을 그대로 보여줌. </pre> </body> </html>
(2) 기본문법
1) 큰제목 태그 : <Hn>.....</Hn>
큰제목 태그로 머릿글이라고도 하는데 <H1~H6>까지의 6가지 크기로 구성되어 있습니다. ※ 크기에 아무런 정의가 없으면 브라우저는 <H4>의 크기로 출력합니다. <H1>이가장 크고 <H6>가 가장 작은 글씨로 나타나게 됩니다.
2) 주석 태그 : <!-주석내용-> 문서의 내용을 설명할 때 사용합니다. DOS에서 REM과 같은 역활을 하며 이러한 주석은 브라우저에서는 무시하고 넘어갑니다.
3) Font 태그 : <Font Size=n Color=#ff0000>....</Font> 글자의 크기를 조절하는 태그입니다. <Hn>태그와는 달리 Size=1이 가장 작고 Size=7이 가장 큰 글씨를 나타나게 합니다. 정의가 없으면 브라우저는 Font size=3으로 인식하게 됩니다. ※글자의 크기를 조절할 수 있는 또 다른 방법은 상대적인 크기로 지정하는 방법이 있습니다. Font Size=+2라고 표기하면 3에 2를 더한 값 5와 같은 의미 입니다.(-2~+4)
4) 선 그리기 태그 : <Hr width=50% align=center size=10>...</hr> 선을 그리는 태그로 경계선을 그리거나 문단의 단락을 구분하거나 모양을 낼 때 사용합니다. width는 선의 길이를 나타내는데 50%란 전체화면 크기의 50% 즉 화면의 반 크기의 선을 그린다는 의미이고 Align은 그린 선의 위치를 화면의 중앙에 한다는 명령어입니다. Size는 선의 굵기를 나타냅니다. ※ Width에서 %를 붙이지 않으면 픽셜을 의미합니다.
▶ 연습 <HTML> <HEAD> <TITLE>연습2</TITLE> </HEAD> <BODY> <H1>1번 큰제목의 크기결과</H1> <H2>2번 큰제목의 크기결과</H2> <H3>3번 큰제목의 크기결과</H3> <H4>4번 큰제목의 크기결과</H4> <H5>5번 큰제목의 크기결과</H5> <!-글자크기를 비교합니다.-> <P>크기를 3로 정했을 때 <BR><FONT SIZE=7 color=#ff0000>크기를 7로 정했을 때</FONT> <BR><FONT SIZE=+2>상대적인 크기를 2로 하였을 때</FONT> <P> <HR WIDTH="100%"> <P> <HR ALIGN=LEFT WIDTH="50%"> <BR> <HR SIZE=5 WIDTH="50%"> <BR> </BODY> </HTML>
(3) 기본문법
1) 목록을 정리해 주는 태그 :<LI>
① 순서가 없는 목록 : <UL>....</UL> 순서가 없는 목록을 나타낼 때 사용합니다. 즉 일종의 나열입니다. 굳이 번호를 매기지 않고도 이것저것을 소개할 때 <UL>이란 태그를 사용합니다.(Unordered List의 약자)
② 순서가 있는 목록 : <OL>...</OL> 순서가 있는 목록을 나타낼 때 사용합니다. Ordered List의 줄임 말로 , <UL>태그와는 순서가 있다는 것만 다릅니다. 물론 위에서 아래로 번호가 매겨지게 됩니다.
2) 문서를 가운데 정렬시켜 주는 태그 : <CENTER>...</CENTER> 문장을 가운데로 위치 시키고 싶을 때 사용합니다. 워드에서 가운데 정렬과 같은 역활을 합니다.
3) 글자모양을 정해주는 태그들
① 굵은 글씨 태그 : <b>..</b> 글자를 굵고 진하게 표현합니다.
② 이탤릭체 태그 : <i>...</i> 글자를 약간 기울려서 강조하기 위한 서체입니다.
③ 깜박거리는 태그 : <Blink>....</Blink> 글자를 깜박거리고 싶을 때 사용합니다. 중요 포인터에 자주 사용하시면 효과가 있습니다. ④ 밑줄 쫙 : <U>..</U> 내용을 강조하기 위한 방법으로 글자에 밑줄을 긋는 효과를 나타냅니다.
▶ 연습 <HTML> <HEAD> <TITLE>연습3</TITLE> </HEAD> <BODY> <FONT COLOR="#CC33CC"><FONT SIZE=+2>단양팔경 소개</FONT></FONT> <UL> <LI><B>도담삼봉</B></LI> <LI>석문</LI> <LI>상선암</LI> <LI><BLINK><FONT COLOR="#FF0000">하선암</FONT></BLINK></LI> <LI>중선암</LI> <LI>사인암</LI> </UL> <CENTER> <FONTCOLOR="#00CC00"><FONTSIZE=+2>단양팔경소개</FONT></FONT> </CENTER> <OL> <LI>도담삼봉</LI> <LI><U>석문</U></LI> <LI>하선암</LI> <LI>중선암</LI> <LI>상선암</LI> <LI><I>사인암</I></LI> </OL> </BODY> </HTML>
|
|||||
| 이전글 | 2. 중급태그 설명 |
|---|