2. HTML 기초 문법(1)

(1) 기본 태그

① 주석 태그

HTML 소스 코드에서 주석은 다음과 같은 기호 사이에 삽입하여 표현합니다.

 

 

<!--        -->

 

 

위의 특수문자 두 개 사이에 삽입할 내용을 작성하면 됩니다.

 

 

 

② 제목(Header) 태그

문서에서 제목에 해당하는 문자열을 표시하는 태그로 웹에 표시될 때 기본적으로 한 줄을 차지합니다.

형식은 다음과 같습니다.

 

 

<Hn> .... </Hn>                  

<Hn ALIGN = "LEFT" or "RIGHT" or "CENTER"> .... </Hn> 

 

 

<Hn>태그는 <H1> ~ <H6> 6단계로 표기 가능하며 숫자가 작을 수록 글씨 크기가 큽니다.

ALIGN 속성은 <Hn> 태그 안에 있는 문자들을 정렬할 때 사용합니다.

결과에서 Title은 창의 이름을 설정한다는 것을 확인할 수 있고 <hr> 은 긴 줄을 형성합니다.

 

 

③ 문자 속성 지정

(1) 문자의 크기와 색상 지정

 

문자의 크기와 색상 지정은 다음과 같은 형식으로 사용할 수 있습니다.

 

 

<FONT SIZE ="크기"   COLOR="색 번호"> ... </FONT>

 

 

SIZE의 "크기" 는 1~7까지 사용되고 1일 때가 가장 작고 7일 때가 가장 큽니다.

COLOR의 "색번호"는 RGB 형식으로 16진수로 표현하거나 색상명 자체를 사용하면 됩니다.

 

<br> : 줄바꿈

 

 

 

(2) 문자 모양의 지정

문자의 모양을 바꿔주는 형식은 다음과 같습니다.

<B>   </B>	문자를 굵은 글씨로 보여줌
<STRONG>   </STRONG>	강조, 문자를 굵은 글씨로 보여줌
<EM>   </EM>	강조, 문자를 이탤릭체로 보여줌
<I>   </I>	이탤릭체로 보여줌
<CITE>   </CITE>	자료의 인용, 문자를 이탤릭체로 보여줌
<SUP>   </SUP>	위 첨자
<SUB>   </SUB>	아래 첨자
<TT>   </TT>	타자체로 보여줌
<CODE>   </CODE>	프로그램 코드를 보여줄 때 쓰이며 타자체로 보여줌
<U>   </U>	밑줄을 그어줌

<B>와 <STRONG>는 둘 다 글씨를 굵게 만들어주어 외관상 차이는 없지만 <STRONG> 은 '매우 강조'라는 저자의 의도가 포함되어 있기 때문에 음성 등과 같은 형태로 표현될 때 매우 강하게 읽어 주게 됩니다.

마찬가지로 <I>와 <EM>의 차이도 그러합니다.

 

 

(3) 특수 문자 출력

HTML에서 다른 태그와 혼동될 수 있는 특수 문자들은 다음과 같이 사용합니다.

특수문자	HTML에서 표현 방법
&	&
<	&lt;
>	&gt;
"	&quot;
공백	&nbsp;

 

 

 

④ 단락 서식

<br> : 줄 바꿈

<p> : 줄 바꿈

<p> ... </P> : 줄 바꿈 + 다음에 한 줄의 공백을 만듦

<PRE> ... </PRE> : 태그 안의 문장에서 공백이나 줄 바꿈을 그대로 유지.  자동 줄 바꿈 기능 포함되어 있음

                         브라우저에서 태그 안에 표시한 내용을 그대로 볼 수 있음

<BLOCKQUOTE> ... </BLOCKQUOTE> : 태그 안의 문장은 인용구로 표시됨

 

 

<div> ... </div> : 어떤 의미도 없으며 태그를 구분해주고 싶을 때 사용함. 기본적으로 줄바꿈이 됨.

(블록 레벨 엘리먼트)

 

<span> : <div>와 똑같은 목적으로 고안된 태그며 줄바꿈이 되지 않은 인라인 엘리먼트

 

<br>과 <p>의 차이 -> 정보적 가치의 차이

<br>과 <p>의 화면상 보이는 결과는 차이가 없습니다.

하지만 차이가 없는 기능을 구지 두개나 만들 이유는 없습니다.

두 태그의 차이는 정보적 가치의 차이입니다.

정보적 가치는 말 그대로 정보적으로 더 가치가 있다고 판단되는 기준입니다.

검색엔진은 전 세계의 웹페이지를 내려받아 웹페이지에 담긴 HTML 코드를 분석합니다.

이 때 정보적 가치가 높다고 기준을 세우는데 그 기준이 태그에 근거하여 정리 정돈을 합니다.

예시로 제목을 단순히 font-size만 키우고 <strong> 태그로 굵게 해서 시각적으로만 제목을 표기한 시각적 제목과, <h3> 태그를 이용한 제목중에서 검색엔진은 <h3> 태그를 이용한 제목을 더 정보적 가치가 있다고 판단할 것입니다.

정보적 가치가 높으면 검색 키워드간의 경쟁에서 가치있게 평가받아 웹페이지의 검색 결과에서 더 먼저 나올 것입니다.

 

이러한 맥락으로 <p>는 <br> 보다 정보적 가치가 더 높습니다.

 

 

 

 

⑤ 괘선 태그

<HR> : 문서 중간의 입체감 있는 수평선을 그려주는 태그며 종료 태그 없이 단독으로 사용됨

           자동으로 줄 바꿈이 실행됨

형식은 다음과 같습니다.

 

 

<HR SIZE=n WIDTH=n(%) COLOR="#색상코드" ALIGN="Left, Center, Right" NOSHADE>

 

 

SIZE : 수평선의 굵기 (픽셀 단위)

WIDTH : 수평선의 길이 (픽셀단위 또는 % 단위 사용)

COLOR : 수평선의 색상 지정 (색상명 또는 #색상 코드)

ALIGN : 선의 정렬 방법 (CENTER 또는 LEFT 또는 RIGHT)

NOSHADE : 선의 입체감과 음영을 제거하여 평면 느낌으로 적용

 

 

⑥ 연결 태그

웹 브라우저에서 하이퍼 기능을 이용하여 인터넷 상의 다른 컴퓨터에 있는 문서 또는 자기 자신의 디렉터리에 있는 문서를 접근할 수 있습니다.

이러한 링크는 마우스로 링크를 눌러 이동 가능합니다.

 

(1) URL을 이용한 문서 간의 연결

<A> : Anchor의 약자로 다른 문서, 그림 파일, 음악 파일에 연결할 때 사용되며 다른 홈페이지로 이동할 수 있습니다.

         HREF(Hyper REFerence) 속성은 연결하고자 하는 URL이나 FIle 이름 등을 지정함

형식은 다음과 같습니다.

 

 

<A HREF="연결하고자 하는 곳의 URL" > ... </A>

 

 

다음은 <a>를 이용한 예시입니다.

하이퍼링크를 누르면 해당 사이트로 이동합니다.

 

 

(2) HTML 문서 내에서의 연결

문서 내에서 특정 위치로 이동하는 책갈피 기능을 사용합니다.

책갈피 기능은 문서의 내용이 많을 때 스크롤바를 사용하지 않고, 문서의 다른 부분으로 찾아갈 때 유용합니다.

형식은 다음과 같습니다.

 

 

<A HREF= "#문서 내에서 찾아가야 할 단어"> ... </A>

<A NAME="단어"> ... </A>

 

 

책갈피를 사용하려면 <a> 태그의 HREF 속성을 이용하여 하이퍼링크를 설정하고, <a> 태그의 NAME 속성을 이용하여 책갈피의 위치를 설정해야 합니다.

그럼 링크된 단어를 클릭할 시 NAME 속성에서 지정된 부분으로 이동하게 됩니다.

 

 

해당 책갈피(하이퍼링크)를 누르면 설정한 위치로 이동합니다.

 

 

(3) 편지 쓰기 서비스

<ADDRESS> ... </ADDRESS> 태그와 <A> ... </A> 태그를 사용하면 홈페이지에서 e-mail로 편지 쓰기 서비스를 제공할 수 있습니다.

형식은 다음과 같습니다.

 

 

<ADDRESS>

    <A HREF="mailto : E-mail 주소"> E-mail 주소 </a>     

</ADDRESS>

 

 

<A> ... </A> 태그에서 mailto 속성으로 이메일 주소를 작성하게 되면 화면상에 이탤릭체로 주소를 보여주며 주소를 클릭하면 컴퓨터에 등록된 메일 쓰기 프로그램이 작동되어 편지를 쓸 수 있습니다.

 

또한 address 태그는 주소(장소 위치)를 입력할 때 사용됩니다.

주소는 보통 웹페이지의 하단에 제일 많이 나옵니다.

그냥 <p>태그를 사용해도 되지만 address태그를 사용해서 주소를 작성하는 이유는 검색엔진이 address를 참고해서 주소를 찾기 때문에 address를 이용해서 위치를 나타내는 주소를 작성합니다.

 

주소를 작성하면 텍스트가 address 태그의 기본적 특성에 의해 이탤릭체로 출력됩니다.

이탤릭체를 다른 글씨체로 바꾸려면 다음과 같이 작성하면 됩니다.

 

<style>

    address{font-style:normal;}

</style>

 

 

 

 

 

⑦ 이미지 처리

(1) 이미지 삽입

웹 문서에 이미지를 나타나게 할 수 있습니다.

형식은 다음과 같습니다.

 

 

<IMG SRC="이미지의 URL" 속성 = "속성값" . . . . . . >

 

 

<IMG> 태그에서 SRC를 반드시 지정해야 하며, 삽입된 이미지에 대한 다양한 속성은 다음과 같습니다.

속성	형식	의미
src	<img src="abc.gif">	이미지 url
width	<img src="abc.gif" width="100">	너비 지정(픽셀 또는 백분율로 지정) 생략하면 실제 넓이 적용 너비만 주면 높이는 비례적으로 따라옴
height	<img src="abc.gif" height="80">	높이 지정(픽셀 또는 백분율로 지정) 생략하면 실제 높이 적용 높이만 주면 너비는 비례적으로 따라옴
align	<img src="abc.gif" align="right">	문자열과 함께 사용할 때 정렬 방법
hspace	<img src="abc.gif" hspace="3">	이미지 양옆으로 형성되는 여백 픽셀 수로 지정
vspace	<img src="abc.gif" vspace="5">	이미지 아래위에 형성되는 여백 픽셀 수로 지정
border	<img src="abc.gif" border="0">	이미지의 태두리 선의 두께 픽셀 수로 지정

ALIGN - 이미지와 택스트의 정렬

ALIGN=TOP : 텍스트의 첫 줄은 이미지의 위쪽 라인과 맞추고, 그다음 줄은 이미지의 다음 줄로 내려감

ALIGN=MIDDLE : 텍스트의 첫줄은 이미지의 중간과 맞추고, 그 다음 줄은 이미지의 다음 줄로 내려감

ALIGN=BOTTOM : 텍스트의 첫줄은 이미지의 아래쪽 라인과 맞추고, 그 다음 줄은 이미지의 다음 줄로 내려감

( ALIGN의 기본값은 BOTTOM! )

ALIGN=LEFT : 이미지가 글자의 왼쪽에 와서 문단 정렬이 됨

ALIGN=RIGHT : 이미지가 글자의 오른쪽에 와서 문단정렬이 됨

 

 

다음은 예시입니다.

 

 

(2) 이미지 대체하기

HTML에서 이미지가 제대로 전송되지 않았거나 브라우저가 이미지를 받아들일 수 없을 때 대체하는 방법은 ALT 속성을 이용하면 됩니다.

 

 

<HTML>

<HEAD><title> 이미지 대체하기 </title></HEAD>

<BODY>

    <p><img SRC="abc.jpg" ALT="이미지가 나오지 않으면 이 문구가 대신 표시됩니다." > </p>

</BODY>

</HTML>

 

 

코드에 명시된 대로 이미지가 전송되지 않으면 쓴 문구가 대신 나옵니다.

 

 

 

(3) 이미지에 연결 기능 추가하기

이미지에 연결기능 추가해서 하이퍼링크 기능을 갖게 할 수 있습니다.

이미지 태그 바깥쪽에 앵커 태그를 씌워서 사용합니다.

형식은 다음과 같습니다.

 

 

<A HREF="URL"><IMG SRC="이미지 파일" ...></A>

 

 

네트워크가 연결된 상태에서 설정한 그림 아이콘을 클릭하면 설정한 다음 홈페이지로 이동합니다.

 

 

 

 

(4) 이미지를 배경으로 사용

이미지를 배경에 사용하려면 <BODY> 태그에 지정해야 합니다. 

그리고 BGCOLOR를 이용하여 배경색을 지정하고, TEXT를 이용해 글자색을 결정합니다.

형식은 다음과 같습니다.

 

 

<BODY BACKGROUND="이미지 파일명" BGCOLOR="색번호" TEXT="색번호>

 

 

예시는 다음과 같습니다.

 

위의 BGCOLOR을 blue 색상으로 지정했는데 나오지 않는 이유는 이미지 파일을 배경화면으로 사용했기 때문입니다.

배경화면 색상이 blue로 적용되는 것을 확인하려면 3번째 줄 'BACKGROUND "C://~....." ' 이 부분을 지우면 됩니다.