안녕, 세상!

3. HTML 기초 문법(2) 본문

It공부/HTML

3. HTML 기초 문법(2)

dev_Lumin 2020. 7. 22. 21:10

(2) 목록 태그

HTML의 목록 태그로 시각적으로 짜임새 있는 형태의 글을 만들 수 있습니다.

목록 태그는 번호가 없는 목록, 번호 있는 목록, 메뉴 목록, 디렉터리 목록 등 다양한 형태가 제공됩니다.

다음은 목록태그의 종류입니다.

목록태그 의미
<UL> 번호 없는 목록(Unordered List)
<OL> 번호 있는 목록(Ordered List)
<MENU> 메뉴 목록(Menu List)
<DIR> 디렉터리 목록(Directory List)
<DL> 정의 목록(Definition List)

 

다음은 목록 태그 하위에서 사용하는 태그들입니다.

목록태그 의미
<LI> 리스트 항목
<LH> 리스트 제목
<DT> 정의 이름
<DD> 정의의 설명

 

 

① 번호 없는 목록(Unordered List)

번호 없는 목록은 각 항목 앞에 불렛(bullet)이 붙는 목록을 말합니다.

불렛은 목록을 나타내는 특수기호입니다.

<UL> 태그를 이용하며, 목록의 제목은 <LH> 태그 안에 작성하고, <LI> 태그 안에 각 항목을 작성합니다.

<LI> 태그 하위에 <UL>태그를 넣어서 계층적 정보를 나타낼 수 있습니다.

 

형식은 다음과 같습니다.

 

 

<UL>

    <LH> 목록의 제목 </LH>

        <LI> 항목 </LI>

        ....

</UL>

 

 

불렛의 모양은 TYPE 속성에 다음 값을 주어 지정할 수 있습니다.

DISC : 검은 원

CIRCLE : 하얀 원

SQUARE : 검은 사각형

 

다음은 번호 없는 목록의 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<HTML>
<HEAD><title> 번호 없는 목록 </title></HEAD>
<BODY>
  <ul>
    <lh><h3>먹고싶은 음식</h3></lh>
    <li>한식
      <ul type="SQUARE"><li>전주비빔밥</li>
                        <li>한우불고기</li></ul>
    </li>
    <li>양식
      <ul type="circle"><li>햄버거</li>
                        <li>피자</li>
    </li>
  </ul>
</BODY>
</HTML>
 cs

 

 

② 번호있는 목록(Ordered List)

번호 있는 목록은 각 항목 앞에 번호가 붙은 목록으로 <OL>태그를 이용해 작성합니다.

<OL>과 </OL> 태그 안에 <LH>와 </LH> 사이에 목록의 제목을 넣고 <LI> 다음에 항목의 내용을 씁니다.

번호 없는 목록과 마찬가지로 중첩이 가능합니다.

 

초기치로 지정된 번호는 아라비아 숫자(1,2,3..)이며, 번호 형식은 TYPE 속성에 다음 값을 주어 지정합니다.

I : 로마자

A : 알파벳 

 

다음은 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<HTML>
<HEAD><title> 번호 있는 목록 </title></HEAD>
<BODY>
    <lh><h3>먹고싶은 음식</h3></lh>
    <li>한식
      <Ol type="A"><li>전주비빔밥</li>
                   <li>한우불고기</li></Ol>
    </li>
    <li>양식
      <Ol type="I"><li>햄버거</li>
                   <li>피자</li></OL>
    </li>
    <li>일식
      <OL><li>스시</li>
          <li>라멘</li></ol>
</BODY>
</HTML>
 cs

 

 

 

③ 정의 목록(Definition List)

정의 목록은 어떤 항목에 대한 정의나 설명을 써줄 때 사용하며, <DL> 태그를 사용합니다.

<DL>과 </DL> 태그 내에서 <LH>와 </LH> 태그 사이에는 목록의 제목을, <DT>와 </DT> 태그 사이에는 항목을, <DD>와 </DD> 태그 사이에는 항목에 대한 정의나 설명을 씁니다.

중첩이 가능하며, 하위 항목으로 들어감에 따라 문단이 조금식 안쪽으로 들어갑니다.

 

다음은 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
<HTML>
<HEAD><title> 정의 목록 </title></HEAD>
<BODY>
    <h3>목록</h3>
    <dL>
      <dt>번호없는 목록</dt>
       <dd>각 항목 앞에 불렛이 붙는 목록입니다.</dd>
      <dt>번호있는 목록</dt>
       <dd>각 항목 앞에 번호가 붙는 목록입니다.</dd>
    </dl>
</BODY>
</HTML>
 cs

 

 

 

④ 목록 겹쳐 쓰기

서로 다른 형식의 목록이라도 중첩해 사용할 수 있으며, 계층적인 구조를 이용해 효과적으로 페이지를 만들 수 있습니다.

 

 

 

 

 

(3) 테이블

① 테이블 삽입

웹페이지에서 테이블을 삽입하는 방법은 <Table> </Table> 태그를 사용합니다.

테이블은 단순한 도표뿐만 아니라 복잡한 문단을 정렬할 수 있고, 표제 지정도 가능하고 항목들을 비교할 수 있으며, 문서를 깔끔하게 정리할 수 있습니다.

 

테이블에서 사용하는 태그는 다음과 같습니다.

테이블 태그 의미
<TABLE> 테이블을 선언하는 태그 (테이블의 시작과 끝을 알림)
<TR> Table Row, 테이블 내의 한 행을 정의함
<TD> Table Data, 각 행의 셀을 만들 때 사용함
<TH> Table Header, 행에 있는 셀의 제목을 지정하여 강조되게 표시함
<CAPTION> 테이블의 제목을 표시함

<TD>는 항상 <TR>에 둘러싸여야 합니다.

<TD> 대신에 <TH> 태그를 쓰면 수평, 수직 정렬이 자동으로 가운데가 되며, 볼드(bold)체로 표시된 표제가 됩니다.

<CAPTION>은 ALIGN 속성을 이용하여 테이블의 제목을 정렬할 수 있습니다.

 

<CAPTION ALIGN="TOP" or "BOTTOM"> 테이블의 제목 </CAPTION>

 

 

 

 

② 테이블의 속성

테이블 태그 내의 속성은 <TABLE> 태그나 <TD> 정의할 때 설정하며 다음과 같습니다.

테이블 태그 속성 의미
WIDTH 테이블 가로 크기 (픽셀수 or 백분율)
HEIGHT 테이블의 세로 크기 (픽셀수 or 백분율)
BORDER 테이블의 테두리 굵기 (픽셀수)
CELLSPACING 셀과 셀 사이의 여백 (픽셀수)
CELLPADDING 셀과 문자 사이의 여백 (픽셀수)
BGCOLOR 테이블의 색 지정 (색상명 or RGB값)

 

다음은 테이블 삽입의 예제입니다.

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
<HTML>
<HEAD><title> 정의 목록 </title></HEAD>
<BODY>
  <h3> 메 뉴 </h3>
  <table border="6" width="30%" height="15%">
    <tr>
      <th>품명</th><th>금액</th></tr>
    <tr>
      <td>어글리슈즈</td><td>180000원</td></tr>
    <tr>
      <td>독일군단화</td><td>230000원</td></tr>
  </table> <br>
  <table border="1" cellpadding="5">
    <tr>
      <td>품명</td><td>금액</td></tr>
    <tr>
      <td>어글리슈즈</td><td>180000원</td></tr>
    <tr>
      <td>독일군단화</td><td>230000원</td></tr>
  </table> <br>
  <table border="2" cellspacing="10">
      <tr>
        <td>품명</td><td>금액</td></tr>
      <tr>
        <td>어글리슈즈</td><td>180000원</td></tr>
      <tr>
        <td>독일군단화</td><td>230000원</td></tr>
    </table> <br>
</BODY>
</HTML>
 cs

 

 

③ 테이블 셀 합치기

테이블 태그 내의 셀을 합칠 수 있습니다.

<TD> 태그를 정의할 때 설정하며 다음과 같습니다.

 

 

ROWSPAN = 행의 수 : 여러 행에 걸치는 셀의 행 합치기

COLSPAN = 열의 수 : 여러 열에 걸치는 셀의 열 합치기

 

 

다음은 셀 합치기 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
<HEAD><title> 정의 목록 </title></HEAD>
<BODY>
  <h3> 선호 스타일 </h3>
  <table width="200" border="1"> <!-- width만 설정하고 border설정안하면 테이블 태두리가 없어짐 -->
    <tr>
      <td rowspan="3">옷스타일</td>
      <td width="100">캐주얼</td>
    </tr>
    <tr>
      <td>스트릿</td>
    </tr>
    <tr>
      <td>포멀</td>
    </tr>
  </table>
</BODY>
</HTML>
 cs

rowspan=3 을 해서 3개의 행을 합쳤습니다.

 

 

 

 

 

(4) 프레임 

프레임은 웹 브라우저 화면을 여러 개 창으로 나누어주는 역할을 합니다.

이러한 프레임 기능을 이용해 각 창 마다 독립적인 기능을 하는 페이지를 작성할 수 있습니다.

HTML 문서를 몇 개의 파일로 나누어 작성하면 각 파일을 프레임으로 구분된 각각의 창에서 보여줄 수 있습니다.

하지만 HTML5 버젼에서는 프레임을 더 이상 지원하지 않습니다.

아래의 개념은 참고만 해주시면 됩니다.

 

① 화면의 분할

프레임을 정의할 때 <FRAMESET> 태그와 <FRAME> 태그를 이용하여 정의합니다.

<FRAMESET> : 프레임을 사용하기 위해 선언하는 태그

<FRAME> : 실제로 프레임 창을 나누는 기능을 담당하는 태그

 

프레임 정의 구조 형식은 다음과 같습니다.

 

 

<FRAMESET ROWS or COLS = "프레임 수와 크기 지정">

    <FRAME SRC = "프레임에 표시할 파일명">

</FRAMESET>

 

 

여기에서, 프레임 크기는 픽셀 수, 백분율(%)로 입력합니다.

 픽셀의 수로 입력한 예시 : 두 개로 나눌 때 "100, * "   <!--  "*"은 나머지 부분을 대신해서 사용할 수 있음 -->

 백분율로 입력한 예시 : 세 개로 나눌 때 "20%, 40%, 40%" 

 

다음은 프레임을 분할한 예제입니다.

1
2
3
4
5
6
7
8
9
10
<HTML>
<HEAD><title>프렘임으로 화면 나누기</title></HEAD>
<frameset rows="30%,*">
  <frame src="C:///1webstudy/top.html">
  <frameset cols="70%,30%">
    <frame src="C:///1webstudy/left.html">
    <frame src="C:///1webstudy/right.html">
  </frameset>
</frameset>
</HTML>
 cs

 

top.html

1
2
3
4
5
6
7
<html>
<head><title>top 창</title></head>
<body>
  <h2>일반적으로 타이틀이나 배너 윈도우로 사용</h2>
</body>
</html>
 
 cs

 

left.html

1
2
3
4
5
6
<html>
<head><title>left 창</title></head>
<body>
  <h2>일반적으로 메뉴윈도우로 사용</h2>
</body>
</html>
 cs

 

right.html

1
2
3
4
5
6
7
<html>
<head><title>right 창</title></head>
<body>
  <h2>일반적으로 메인윈도우로 사용</h2>
</body>
</html>
 
 cs

 

 

② 프레임의 서식

(1) 프레임의 테두리선 변경

프레임 테두리선의 굵기를 조절하거나 없앨 수 있습니다.

형식은 다음과 같습니다.

 

 

<FRAMESET BORDER = "픽셀수">

 

 

(2) 프레임의 여백 조정

<FRAME> 태그의 MARGINWIDTH와 MARGINHEIGHT 속성을 이용하여 프레임의 좌우 또는 상하의 여백을 조절할 수 있습니다.

형식은 다음과 같습니다.

 

 

<FRAME MARGINWIDTH = "픽셀수" MARGINHEIGHT = "픽셀수">

 

 

(3) 프레임의 크기 변경 금지

프레임의 크기를 사용자가 변경하지 못하도록 하기 위해서 <FRAME> 태그의 NORESIZE 속성을 이용합니다.

형식은 다음과 같습니다.

 

 

<FRAME NORESIZE>

 

 

(4) 프레임의 스크롤바 지정

<FRAME>의 SCROLLING 속성을 이용해서 프레임의 각각의 스크롤바 생성 여부를 사용자가 임의적으로 지정할 수 있습니다.

형식은 다음과 같습니다.

 

 

<FRAME SCROLLING = "YES" or "NO" or "AUTO">

 

 

yes면 무조건 스크롤바가 나타나고, no면 스크롤바가 나타나지 않고, auto면 프레임 크기보다 문서의 내용이 많을 때만 스크롤바가 나타납니다.

하지만 인터넷 익스플로러 9 버전 이상은 더 이상 스크롤 속성을 지원하지 않습니다.

크롬 창으로 실습을 해도 스크롤바가 보이지 않을 것입니다.

 

프레임 서식의 예시는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
<HTML>
<HEAD><title>프렘임으로 화면 나누기</title></HEAD>
<frameset rows="30%,*">
  <frame src="C:///1webstudy/top.html">
  <frameset cols="70%,30%">
    <frame src="C:///1webstudy/left.html" noresize scrolling="YES">
    <frame src="C:///1webstudy/right.html" marginheight="40" marginwidth="40">
  </frameset>
</frameset>
</HTML>
 cs

 

인터넷 익스플로러 9버젼 이상이기 때문에 스크롤바가 보이지 않는 것을 확인할 수 있습니다.

 

 

 

 

 

(5) 입력 양식

웹 서비스는 사용자와 웹 서버 간의 상호 정보 교류를 수행하는데 양방향의 서비스 CGI(Common Gateway Interface)를 통해서 이뤄집니다.

CGI를 웹 문서에서 이용하기 위해서는 사용자로부터 정보를 입력받을 수 있어야 합니다. 

이때 HTML에서는 <FORM> 태그와 <INPUT> 태그를 사용하여 입력 양식을 정의합니다.

입력 양식이 사용되는 대표적인 예는 게시판, 방명록 등이 있습니다.

 

① 입력 양식 태그 (<FORM> 태그)

HTML 문서에서 입력 양식을 통해서 사용자의 입력 데이터를 웹서버로 전송하는데, CGI를 사용하기 위해서 <FORM> 태그를 사용해야 합니다.

형식은 다음과 같습니다.

 

 

<FORM NAME = "폼의 이름" ACTION = "URL" METHOD ="GET" or "POST">

....

</FORM>

 

 

폼 태그의 속성 기능 설명
name 폼의 이름
윈도우 객체에 들어 있는 모든 프레임을 나타내는 속성
action 입력 데이터를 처리할 CGI 프로그램의 URL, 생략하면 현재 문서
method 사용자가 입력한 데이터를 서버에 전달하는 방법
- post : 표준입력 방식으로 데이터를 전송하는 입력 방식
           입력 폼을 서버에 DB화 할 때 주로 사용되며, 방명록, 게시판 등에 활용

- get : URL로 데이터를 전송하는 입력 방식
         입력 폼의 내용에 대한 결과를 서버로부터 가져와서 사용자에게 직접 보여줌
         주로 검색 엔진의 검색 결과나 방문회수를 보여주는 카운터 등에 사용
         웹 페이지의 위치를 보여주고 싶을 때 사용하는 속성

 

 

② 입력 태그( <INPUT> 태그 )

<FORM> 태그 내에서 입력 양식을 정의하기 위해 <INPUT> 태그가 사용됩니다.

<INPUT> 태그는 텍스트 입력, 체크 박스, 라디오 버튼, 리셋 등의 입력 폼을 만들어 사용자들의 입력 작업을 용이하게 도와주는 기능을 수행합니다.

형식은 다음과 같습니다.

 

 

<INPUT TYPE = [속성값]

           NAME = "입력 양식 이름"

           VALUE = "입력 양식에서 표시될 문자열"

           SIZE = "문자수"

           CHECKED
           MAXLENGTH = "문자수">

 

 

<INPUT> 태그의 속성에 대한 속성 값의 기능을 다음과 같습니다.

속성 속성 값 기능 설명
TEXT BUTTON 버튼 입력 폼
CHECKBOX 체크 박스
HIDDEN 숨기기 입력 폼
PASSWORD 패스워드 입력 폼
RADIO 라디오 버튼
RESET 리셋 버튼
SUBMIT 데이터 전송 버튼
TEXT 텍스트 입력 폼 박스
속성 속성 값 기능 설명
NAME 문자열 입력한 내용을 저장할 변수의 이름을 지정
SUBMIT과 RESET을 제외한 모든 TYPE의 필수요소
VALUE 문자열 TEXT, PASSWORD : 기본 값으로 지정
CHECKBOX, RADIO : 버튼이 선택될 때 CGI로 보내는 값
SUBMIT, RESET : 버튼에 표시될 내용 지정
SIZE 문자수 TEXT, PASSWORD 입력부분에 보이는 문자수 정의
CHECKED   CHECKBOX, RADIO의 기본 값 선택 시 사용
MAXLENGTH 문자수 TEXT와 PASSWORD에서 입력받을 수 있는 최대 문자수

 

 

 

③ 선택 태그 ( <SELECT> 태그 )

선택 목록을 정의하기 위해 사용되며, <FORM> 태그 안에 기술됩니다.

선택 태그의 사용 형식은 다음과 같습니다.

 

 

<SELECT NAME = "변수 이름" SIZE = "목록 창에 보이는 선택 개수" [MULTIPLE]> 

<OPTION [SELECTED]> 선택 항목

</SELECT>

 

 

[MULTIPLE] 속성은 여러 개의 항목을 동시에 선택할 경우 사용합니다.

 

다음은 입력 양식을 이용한 예제입니다.

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
<HTML>
<HEAD><title>입력 양식</title></HEAD>
<BODY>
  <form name="frame" action="/cgi-bin/post/query" method="post">
    ID : <input type="text" name="id" size="12" value="Your ID" maxlength="10">
    PW : <input type="password" name="pwd" size="12" maxlength="10">
         <input type="submit" name="sm" value="login"><br><br>
    좋아하는 계절을 선택하세요. <br>
    select: <br>
      <select>
        <option selected> 봄  <!-- 기본적으로 화면에 선택되어 있게 하기 -->
        <option>여름
        <option>가을
        <option>겨울
      </select><br>
    checkbox : <br>
      <input type="checkbox" name="cb" value="cbsp">봄
      <input type="checkbox" name="cb" value="cbsm">여름
      <input type="checkbox" name="cb" value="cbfa" checked>가을
      <input type="checkbox" name="cb" value="cbwt">겨울<br>
    radio : <br>
      <input type="radio" name="rd" value="rdsp" checked>봄
      <input type="radio" name="rd" value="rdsm">여름
      <input type="radio" name="rd" value="rdfa">가을
      <input type="radio" name="rd" value="rdwt">겨울<br>
  </form>
</BODY>
</HTML>
 cs

 

 

④ 문서 입력창 

문서 입력창은 여러 줄을 전송할 때 사용하며, <TEXTAREA> 태그를 사용합니다.

형식은 다음과 같습니다.

 

 

<TEXTAREA NAME = "변수 이름" ROWS = "행의 수" COLS = "열의 수">

</TEXTAREA>

 

 

name 속성은 입력한 내용을 저장할 변수의 이름을 나타내고, rows 속성과 cols 속성은 브라우저에 표시될 줄과 칸의 수를 나타냅니다.

rows와 cols 속성을 지정하지 않으면 default 값은 rows= 1, cols= 20으로 지정됩니다.

 

1
2
3
4
5
6
7
8
9
10
<HTML>
<HEAD><title>문서 입력창</title></HEAD>
<BODY>
  <form name="frame" action="/cgi-bin/post/query" method="post">
    <textarea name="letter" rows="6" cols="45"> </textarea> <p>
    <input type="submit" value="보내기">
    <input type="submit" value="뒤로가기">
  </form>
</BODY>
</HTML>
 cs

 

 

 

저작자표시 비영리 변경금지

'It공부 > HTML' 카테고리의 다른 글

2. HTML 기초 문법(1)  (0) 2020.07.20
1. HTML 개요 및 설치  (0) 2020.07.19
'It공부/HTML' Related Articles more
Comments