Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 글자, 문단, 목록 태그와 링크 태그 본문

Programming/HTML

HTML - 글자, 문단, 목록 태그와 링크 태그

Programmer. 2015. 8. 21. 04:14

글자 태그


글자태그는 글자의 크기나 글꼴, 글자색상 등을 지정하는 태그며 글자태그로는 <Hn>태그와 <FONT>태그 등이 있습니다.

<Hn>태그


    • <Hn>태그는 글자의 크기를 지정하는 태그입니다. Hn에서 n의 자리에 1~6까지의 자연수가 나타나게 되며, 숫자가 작을수록 큰 글씨를 나타냅니다. <Hn>태그는 또한 글자를 볼드체(진하게)로 표시해주며 문단구분의 기능을 동시에 수행하게 됩니다.

    • <Hn>태그에는 align속성과 title 속성을 사용가능합니다. align속성은 글자 좌우 정렬기능을 수행하며 속성값으로는 "left" "center" "right"중에서 하나의 값을 가지게됩니다. 즉 align = " center"로 속성값을 지정하면, 해당 내용을 중앙 정렬하게 됩니다. title 속성은 풍선 도움말을 만들어주는 속성입니다. title 속성이 포함된 HTML 문서를 브라우저에서 실행 한 후, 마우스를 <Hn>태그로 정의된 문자열에 가져가서 정지하면 1~2초 후에 풍선 도움말이 뜨게됩니다.

다음 소스를 통해서 알아보겠습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <title>Hn 태그 예제</title>
    </head>
    <body>
    이것은 기본 글자 크기입니다.
    <!--hn 태그에 사용되는 align 속성은 문장은 좌우 중간으로 정렬-->
    <H1 align=left> 이것은 H1 크기입니다.</H1>
    <H2 align=center> 이것은 H2 크기입니다.</H2>
    <!--속성값은 그냥도 되지만 쌍따움표를 사용이 가능합니다.-->
    <H3 align=right> 이것은 H3 크기입니다.</H3>
    <H4 align=right> 이것은 H4 크기입니다.</H4>
    <H5 align=right> 이것은 H5 크기입니다.</H5>
    <H6 title = "제목크기"> 이것은 H6 크기입니다.</H6>
    </body>
</html>
cs

결과는 다음과 같습니다.




<FONT>태그


    • <FONT>태그는 글자의 크기, 색상, 글꼴을 지정하는데 사용됩니다. <FONT>태그의 size속성은 글자크기를 지정하는 데 사용되며, size속성의 속성값은 1부터 7까지의 자연수로 지정됩니다. <Hn>태그와는 달리 size의 속성값이 클수록 글자의 크기가 커집니다. 또한 size 속성 값은 3을 기준으로 +1, -2 등으로 나타낼 수 있는데, 이는 속성값이 각각 4=(3+1), 1 (3-2)임을 의미합니다.

    • 글자의 생상을 지정하고자 할 떄는 <FONT>태그의 color 속성을 사용합니다. color 속성의 속성값으로 black, silver, maroon, red, greed, lime, olive, yellow, navy, blue, purple, fuchsia, teal, aqua, white 16가지의 기본 생상 지정이 가능합니다.

    • 16가지 기본 생상 이외에 다른 생상을 지정하고자 하는 경우, 생상코드를 사용합니다. 생상코드는 빛의 삼원색인 RED, GREEN, BLUE를 순서대로 혼합하여 구성하는데, 각 색상마다 16진수 두 자리를 사용하여 색상의 농도를 지정합니다. 색상코드를 보면 # 00 00 00 (원래는 띄어쓰기는 없지만) 으로 이루어 지는데 #을 제외한 두자리씩 해서 앞의 2개는 빨간색  그다음 녹색 그다음 파란색으로 하여 3개의 농도를 조합하게 되어 그에 맞는 색상코드에 따라 색이 나오게 됩니다.

    • 글꼴을 지정할 경우, <FONT>태그의 face속성을 사용합니다. face속성의 속성값으로는 궁서체, 고딕체 등 글꼴 이름을 지정할 수 있고 사용할 수 있는 글꼴은 반드시 C:\windows\Font 풀더 안에 있는 글꼴에 한에서 쓸 수 있습니다. 글꼴은 만드는 사람의 입장보다 사용자 입장에서 있는 글씨체를 이용하여야 출력이 정상적으로 됩니다.

    • 문서전체의 글꼴을 디폴트로 지정하는것도 가능합니다. 이때는 <BASEFONT>태그를 사용합니다. <BASEFONT>는 <HEAD>부분에 넣어서 전체를 지정합니다. 디폴트라는것은 직접 설정하지 않고 그냥 쓰기만 한 글자를 의미 합니다.

다음 소스를 통해 자세히 알아보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <title>FONT 태그 예제</title>
        <!--BASEFONT는 여기에다 삽입하세요!!-->
        <basefont face="바탕체">
    </head>
    <body>
    기본 디폴트 글자입니다.<BR>
        <!--폰트대그의 size속성은 글자의 크기를 조정-->
    <FONT size="7">글자크기 7 </FONT><BR>
    <FONT size="3">글자크기 3 </FONT><BR>
    <FONT size="+1">글자크기 +1 </FONT><BR>
    <FONT size="-2">글자크기 -2 </FONT><BR>
    글자 색깔 변경<BR>
    <FONT color="#FF0000">#FF0000색깔의 글자 입니다.  </FONT><BR>
    <FONT color="Yellow">Yellow색깔의 글자 입니다. </FONT><BR>
    <FONT face="궁서">궁서체의 글자입니다.</FONT><BR>    
    </body>
</html>
cs

결과는 다음과 같습니다.




글자모양 태그


    • 다양한 형태의 글자모양을 위한 태그도 존재합니다. <B> 태그는 글자를 진하게 나타내며, <I>태그는 이탤릭체로 줍니다. <U>는 밑줄을 , <SUB>와 <SUP>는 각각 아랫첨자와 윗첨자를 표시해줍니다. 이 글자모양 태그들은 2개이상을 조합해서 쓸 수 있습니다. 하지만 대신 먼저쓴 태그중에 먼저 시작한 태그에 대한 종료태그를 나중에 쓰는 것을 잊지 말하여 하며 이러한 구조를 NEST구조하고 합니다. 이를 소스로 알아보겠습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <html>
          <head>
              <title>글자 모양!</title>
          </head>
          <body>
          <B>진한 글자(볼드체)</B><BR>
          <U>밑줄</U><BR>
          <I>이텔릭체</I><BR>
          <B><I>진한 이탤릭체</I></B><BR>
          Y<SUB>n</SUB>=X<SUP>2</SUP>+2X+5
          </body>
      </html>
      		cs


공백, 개행, 포맷 태그


    • 문서에 공백을 삽입하기 위해서는 &nbsp; 라는 특수태그를 사용합니다. 이 태그는 꺾쇠 기호(< >)없이 사용 가능 하며 한번 삽입할 때 마다 오직 한 개의 공백이 삽입됩니다.(스페이스 한번) 이 특수태그는 반드시 소문자로 써야합니다.

    • 문서가 편집기에서 편집된 상태대로 브라우저에 보이도록 하기 위해 <PRE>태그를 사용할 수 있습니다. <PRE>태그내에 기술된 모든 문자열은 브라우저 실행 시에도 공백이나 개행 등이 편집기의 편집 그대로 표현해 줍니다.

    • 줄바꿈을 위해서는 <BR>태그를 사용합니다. (엔터) <BR>태그는 Breaking의 약자이며 사용횟수만큼 줄바꿈을 수행합니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <html>
          <head>
              <title>문장 포맷!</title>
          </head>
          <body>
          글자의 간격 &nbsp;&nbsp;&nbsp; 조정<BR>
          공백 삽입 하기<BR> 
          <PRE> 입력 한 아아아아안            모양    
              그으으        대 에 로     보여준다!</PRE>
          </body>
      </html>
      		cs
다음 소스의 결과를 보겠습니다


PRE라는 태그는 개행과 들여쓰기도 띄어쓰기도 전부 그대로 적용이 됩니다.

    • HTML문서 내에 <, > , &, "등의 특수문자를 삽입하기 위해서는 다음과 같이 미리 정해진 특수문자 태그를 이용해야만 사용할 수 있습니다.

       특수문자

       특수문자 태그

      <

      &lt;

      >

      &gt;

      &

      &amp;

      "

      &quot;

      ™

      &trade;

      ⓒ

      &copy;

다음 특수문자들을 써보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <title>특수 문자를 출력해보아요!</title>
    </head>
    <body>
    <BR>
    &lt;<BR>
    &gt;<BR>
    &amp;<BR>
    &quot;<BR>
    &trade;<BR>
    </body>
</html>
cs
다음 소스는 다음과 같습니다.



문단 태그

<P> 태그


    • <P>태그는 문단을 구분하는 태그로써 Paragraph의 약어입니다. <P>태그는 종료태그 없이도 사용가능하며 여러 개를 지정해도 동일한 효과가 나타납니다. <P>태그에는 align속성을 사용하여 문단을 정렬도 가능합니다. 속성값은 동일합니다. 소스를 보면서 보겠습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <html>
          <head>
              <title>P태그</title>
          </head>
          <body>
              첫번째 문단<P>
              <P>두번쨰 문단</P>
              <P align="left">세번째 문단</P>
              <P align="center">네번째 문단</P>
              <P align="right">다섯번째 문단</P>
          </body>
      </html>
      		cs





기타 문단 태그

    • 문단 정렬을 위한 태그로 <CENTER> 태그가 있습니다. <CENTER>태그는 문단이나 문자열을 가운데로 정렬합니다. <DIV>태그는 문단이나 문자열을 align속성값에 따라 정렬하며, <BLOCKQUOTE>태그는 인용문 형태의 문자열을 표시해 줍니다.

    • <HR>태그는 문서에 수평선을 삽입함으로써 시작적으로 문단을 뚜렷하게 구분하는데 사용합니다. <HR>태그의 속성으로 align, size, width, color, noshade 등이 있습니다. align은 수평선의 정렬을 위한 속성으로 별도로 지정하지 않으면 center로 정렬됩니다. size는 수평막대의 높이(두께)를 지정하는 것으로 픽셀단위로 지정하며, 별도의 지정이 없다면 2픽셀의 두께로 지정됩니다. width는 수평막대의 길이(너비)를 지정하는 속성으로 픽셀단위로 지정할 수도 있고, 브라우저화면의 폭 대비 퍼센트(%)로 지정할 수도 있습니다. color속성은 수평선의 색상을 지정하며, noshade 속성은 수평선의 음영효과를 제거하기 위한 속성입니다.
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <html>
          <head>
              <title>기타 문단태그</title>
          </head>
          <body>
              <CENTER>센터태그를 사용했으면 이렇게!</CENTER>
              <HR align="center" size="3" width="80%" color="red">
              <DIV align="left">디비전 태그 사용!</DIV>
              <DIV align="center">디비전 태그 사용!</DIV>
              <DIV align="right">디비전 태그 사용!</DIV>
              <BLOCKQUOTE>인용문태크를 사용</BLOCKQUOTE>
          </body>
      </html>
      		cs
위의 소스는 다음과 같은 결과를 줍니다.


목록 태그


    • 목록은 여러 개의 항목을 글머리기호와 함께 나열한 것으로 순서화된 목록과 순서가 없는 목록으로 구분이 됩니다.

    • <OL>태그는 순서가 지정된 목록을 만들 때 사용합니다. 목록의 제목 앞에 <OL>태그를 표시하고 나열되는 각 항목 앞에 <LI>태그를 붙여줍니다. 마지막으로 목록 끝에는 종료태그인 </OL>을 표시합니다.

    • <UL>태그는 순서가 없는 목록을 만들 떄 사용합니다. <OL>태그와 <UL>태그에는 type속성을 사용할 수 있습니다. type속성은 글머리기호의 모양을 지정하는 것으로 <UL>의 경우, "disc", "square", "circle"이 나타날 수 있으며 <OL>의 경우는 "1", "A", "a", "I","i"가 나타날 수 있습니다. 예를 들어 <OL type = "A">라고 지정하면 목록의 번호가 A, B, C등으로 매겨지며, <OL type = "I">라고 지정하면 목록의 번호가 Ⅰ,Ⅱ,Ⅲ등으로 매겨집니다. 한편, <OL>의 경우 start 속성을 사용할 수 있습니다. 속성값으로 임의의 정수를 부여하게 되면 이 숫자부터 시작하여 목록의 글머리기호가 매겨집니다.

    • 한편 자료목록태그로 <DL>태그가 있습니다. <DL>태그는 책 뒤의 Glossary 또는 용어정의 부분에 주로 사용되는 태그로 용어명과 용어설명을 적절히 들여쓰기를 하여 보여둡니다. 용어명 앞에는 <DT>태그를 붙이고 용어 설명 앞에는 <DD>태그를 붙여줍니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      <html>
          <head>
              <title>목록 태그 </title>
          </head>
          <body>
                  <OL type="I" start ="3">과일의 종류
                  <LI>배
                  <LI>사과
                  <LI>포도
                  <LI>오렌지
                  <LI>자두
                  </OL>
       
                  <UL type="square">물건의 종류
                  <LI>연필
                  <LI>가방
                  <LI>휴지
                  <LI>볼펜
                  <LI>노트북
                  </UL>
       
                  <DL>
                  <DT>IP주소
                  <DD>인터넷에 연결된 컴퓨터의 고유한 주소
                  <DT>도메인네임
                  <DD>주소를 기억하ㅣ 쉬운 이름으로 명명한것
                  </DL>
          </body>
      </html>
      		cs

      다음의 소스는 다음과 같은 결과를 내줍니다.




하이퍼링크 태그


    • 브라우저로 웹사이트에 접속하여 웹 문서를 볼 때 밑줄 친 글씨를 클릭하면 다른 문서로 이동하는 것을 종종 볼 수 있습니다. 이와 같이 하이퍼링크는 문서의 특정부분을 클릭하면 다른 문서로 이동하게 해주는 기능입니다. 하이퍼링크는 HTML문서의 매우 중요한 특성으로 HTML문서가 하이퍼텍스트(Hypertext)문서로 이름 붙여진 것도 이러한 특성 떄문입니다.

다른 문서로 이동


    • 하이퍼링크를 구현하기 위해서 <A>태그를 사용합니다. <A>태그는 Anchor태그의 약자로 '닻'이라는 의미를 가집니다. <A>태그는 href 속성을 사용하여 이동해야 할 문서를 지정합니다. 이동해야 할 문서는 문서작성자의 PC에 저장되어 있을 수도 있고, 웹서버에 저장되어 있을 수도 있습니다. 문서작성자의 PC에 이동할 문서가 저장된 경우, 문서가 속한 폴더 경로명과 파일명이 차례대로 지정하여야 하며, 특정 웹서버에 이동할 문서가 위치한 경우, 이 문서의 URL을 지정하여야 합니다.

    • PC의 특정 풀터에 저장된 문서로 이동하는 경우, 해당 풀더에 이르는 경로를 지정하여야 하는데 풀더 경로를 지정하는 방법은 두 가지가 있습니다. 첫 번쨰는 절대경로 방식이며, 두 번째는 상대경로 방식입니다. 일반적으로 윈도우 시스템에서 풀더를 관리하는 구조는 나무 구조(트리 구조)로 되어 있어서 최하위 가지에 위치한 폴더로 이동하고자 할 때는 반드시 중간의 줄기 가지들을 거쳐서 이동해야합니다. 절대경로 방식은 드라이브명에서 출발하여 이동해야 할 풀더까지 경유하는 중간 풀더들을 순차적으로 모두 기술함으로써 이동할 문서가 위치한 경로를 지정해 주는 방식입니다. (A href = " C:\abc\qwe\a.html")

    • 이와는 다르게 상대경로는 현재 문서의 위치에서 이동할 문서의 위치를 경로로 지정해주는 것입니다. 만약 현재 문서의 위치가 folder1이라는 풀더에 있는 h.html 에서 folder1과 같은 위치에 있는 folder2풀더에 있는 h2.html로 옮겨질려면 다음과 같은 경로를 이용하면 됩니다.(<A href= "..\folder2\h2.html>)

    • 만약 대상이 웹서버인경우는 간단합니다 바로 URL을 기술하면됩니다. <A href = "www.tistory.com">처럼 해주면 됩니다.

한문서내에서의 이동

    • 하이퍼링크는 다른 문서 이동도 되지만 한문서 내의 특정위치 이동도 가능합니다. 경로도 필요없고 간단합니다 같은 풀더에 document.html이라는 문서가 존재한다면 <A href="#document"> 라고 해주면 됩니다.


저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
HTML - CSS(Cascading Style Sheet)  (0) 2015.08.22
HTML - 프레임 태그 입력 태그  (0) 2015.08.22
HTML - 멀티미디어 태그 그리고 테이블  (0) 2015.08.21
HTML 기초  (0) 2015.08.21
'Programming/HTML' Related Articles more