Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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. 22. 00:11

이미지 태그


이미지 삽입


    • 하나의 브라우저 창에서 여러 개의 HTML문서를 동시에 띄울 수 있도록 해주는 기능이 프레임 입니다. 프레임은 브라우저 창을 몇 개의 작은 공간으로 분할하여 각 공간에 다른 HTML문서를 보여줄 수 있도록 지원합니다.

    • 프레임을 구성하기 위해서는 <FRAMESET>태그와 <FRAME>태그를 사용합니다. 이떄 주의할 점은 프레임 문서에서는 BODY태그를 사용하지 않는다는 점입니다. 프레임 태그의 기본 사용 예는 아래 코드와 같습니다. 아래 코드는 하나의 <FRAMESET>태그 안에 2개의 <FRAME>태그를 넣음으로써 브라우저를 두 개의 프레임 공간으로 구분하는 코드이며, <FRAME>태그가 구분된 각각의 프레임을 나타냅니다.


      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <HTML>
          <HEAD>
              <TITLE>
                  프레임
              </TITLE>
              <FRAMESET>
                  <FRAME>
                  <FRAME>
              </FRAMESET>
      </HTML>
      		cs


수직 및 수평 프레임 분할

    • 수직으로 브라우저 창을 구분하여 프레임을 나눌 수도 있고, 수평으로 브라우저 창을 구분하여 프레임을 나눌 수도 있습니다. 수직으로 구분할 때는 <FRAMSET>태그의 속성으로 cols를 사용합니다. cols의 속성값은 콤마로 구분된 두 개의 숫자로써, 이는 수직으로 프레임을 구분 시 왼쪽 프레임 영역의 폭과 오른 쪽 프레임 영역의 폭을 픽셀 단위로 각각 지정합니다. 예를들어, <FRAMESET cols="200,*">는 수직으로 창을 구분하되 왼쪽 프레일 창 영역은 폭이 200픽셀이 되게하고, 오른쪽 프레임창 영역의 폭은 나머지 픽셀로 하라는 것을 의미합니다. 속성 값은 픽셀 단위가 아니라 퍼센트(%)단위로 지정할 수 도 있습니다. 예를 들어 <FRAMESET cols="20%,*>로 지정되면 왼쪽 프레임 창의 폭을 전체 폭의 20%가 되고, 오른쪽 프레임 창 영역의 폭을 80%가 되게 프레임을 구분하라는 의미 입니다. 이와 반대로 수평분할에 이용되는 속성은 rows입니다. 다음 소스는 브라우저 창을 수평분할 하여 상단과 하단 두 개의 프레임으로 구분하고ㅡ 하단 프레임을 또 다시 수직 분할하려 좌측과 우측 프레임으로 구분한 예입니다. 결과적으로 브라우저 창이 총 3개의 프레임으로 구분되었습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      <HTML>
          <HEAD>
              <TITLE>
                  수평 및 수직 분할
              </TITLE>
              <FRAMESET rows="100,*">
                  <FRAME>
                  <FRAMESET cols="50%,*">
                      <FRAME>
                      <FRAME>
                  </FRAMESET>
              </FRAMESET>
      </HTML>
      		cs

      결과

          


수평 프레임 분할


    • 프레임이  구분되고 나면 각각의 프레임에 HTML문서를 나타낼 수 있습니다. 다음 소스는 브라우저를 수직으로 구분하여 왼쪽과 오른쪽으로 구분하고 왼쪽 프레임과 오른쪽 프레임에 각각의 문서를 나타내는 것입니다. 프레임에 문서를 넣을때는 src 속성을 이용 HTML문서를 경로명을 이용하여 넣어주면 됩니다.

      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
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      <HTML>
          <HEAD>
              <TITLE>
                  프레임과 문서
              </TITLE>
              <FRAMESET cols="400,*">
                  <FRAME src="left.html">
                  <FRAME src="right.html">
                  </FRAMESET>
                      <FRAME>
                      <FRAME>
                  </FRAMESET>
              </FRAMESET>
      </HTML>
      -------------------------------------------------------------------예제3.html
      <HTML>
          <HEAD>
              <TITLE> 
                  왼쪽 문서입니다. 
              </TITLE>
          </HEAD>
          <BODY>
          <H1>Menu</H>
          <A href="http:://www.google.co.kr"> 구글 코리아 </A><BR>
          <A href="http:://www.tistory.com"> 티스토리 </A><BR>
          <A href="http:://www.naver.com.com"> 네이버 </A><BR>
          </BODY>
      </HTML>
      -----------------------------------------------------------------------left.html
      <HTML>
          <HEAD>
              <TITLE>
                  오른쪽 문서입니다. 
              </TITLE>
          </HEAD>
          <BODY>
              <CENTER>
              <H1>본문</H1>
              <HR>
              </CENTER>
          </BODY>
      </HTML>
      ---------------------------------------------------------------------right.html
      		cs

      예제3을 실행하면 다음과 같은 결과가 나오게 됩니다.



프레임의 target 속성


  • 프레임에서 문서를 띄워줄 때 프레임을 지정하여 문서를 보여주는 것도 가능합니다. 이전의 소스는 티스토리를 누르면 그 프레임 자체가 티스토리로 이동합니다. 하지만 왼쪽을 누르면 오른쪽 프레임이 그에 맞게 움직이게 되면 보기가 아주 편할 것입니다. 해당문서의 링크를 클릭했을 때 보여질 문서가 이름으로 지정된 프레임에 나타나게 하기 위해 <A>태그 내에 target 속성을 추가합니다. target 속성에는 프레임 이름을 속성값으로 지정할 수도 있지만, "_blank"를 속성값으로 지정하면 새 창을 열어서 해당 문서를 보여주며 "_top"을 속성값으로 부여하면 전체화면에 해당 문서를 보여줍니다.
    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
    <HTML>
        <HEAD>
            <TITLE>
                프레임과 문서
            </TITLE>
        </HEAD>
            <FRAMESET cols="400,*">
                <FRAME src="left2.html" name="left2">
            <FRAME name="right">
                </FRAMESET>
    </HTML>
    -------------------------------------------------------------------예제4.html
    <HTML>
        <HEAD>
            <TITLE> 
                왼쪽 문서입니다. 
            </TITLE>
        </HEAD>
        <BODY>
        <H1>Menu</H><BR>
        <A href="http://www.google.co.kr"target="right"> 구글 코리아 </A><BR>
        <A href="http://www.tistory.com"target="right"> 티스토리 </A><BR>
        <A href="http://www.naver.com.com"target="right"> 네이버 </A><BR>
        </BODY>
    </HTML>
    -----------------------------------------------------------------------left2.html
    		cs

    결과는 다음과 같습니다.



입력 태그


FORM 태그
    • 입력태그는 <FORM>태그 내에 기술하여야 합니다. <FORM>태그는 입력양식의 이름을 지정하기 위한 name속성과 입력된 데이터를 서버용 프로그램에 전달하는 방식을 설정하는 method 속성 그리고 서버용 프로그램의 URL을 기술하는 action 속성을 가지게 됩니다.

    • method속성은 사용자가 입력한 정보를 서버에 전달하는 방식과 관련된 속성으로 "get"또는 "post"를 속성값으로 취합니다. get방식은 서버용 프로그램의 URL 뒤쪽에 입력된 데이터를 추가하여 전송함으로써 서버용 프로그램에게 요청자가 입력한 정보를 전송하는 방식입니다. 이 방식은 많은 정보를 전달하는 데에는 부적합하며, 최대 255문자까지만 전송할 수 있다는 제한이 있습니다. method속성이 지정되어 있지 않은 경우, 디폴트 방식이 get 방식입니다. 이 방식은 또한 보안에 취약하므로 사용자 비밀번호와 같이 보안이 요구하는 데이터를 전송하는 방식으로는 부적합합니다. 한편 post방식은 표준파일의 형식으로 데이터를 전송하며 데이터의 길이에 제약이 없습니다. 아래 코드는 <FORM>태그의 사용예를 보여주고 있습니다.

      1
      <FORM name="입력양식의 이름" method="get 또는 post" action="URL">
      		cs


INPUT 태그


    • 간단한 입력상자를 작성하거나, 라디오버튼 또는 체크박스를 만들 때 <INPUT>태그를 사용합니다. <INPUT>태그는 반드시 <FORM>태그 내에 써줘야합니다.

    • <INPUT>태그에 type속성을 지정하고, 속성값을 "text"로 지정하게되면 한줄 이내의 간단한 입력상자가 만들어집니다. 이 입력상자는 이름, 전화번호, 이메일 등을 입력하는데 적합합니다. 입력상자의 이름은 name속성을 통해 지정할 수 있으며 크기는 size속성으로 지정합니다. 문자열의 길이를 제한할때는 maxlength속성을 사용하여 최대 길이를 문자수로 지정하면 됩니다.

    • 라디오 버튼은 여러 개의 옵션 중 한개만 선택하도록 하는 입력기능이 제공합니다. 예를 들어, 성별을 선택할 경우 남자 또는 여자 중 하나를 선택해야 하므로 라디오버튼을 사용하여 입력 기능을 작성하는 것이 적합합니다. 라디오버튼은 <INPUT>태그에 type속성을 "radio"로 입력해주면 됩니다. 남성과 여성 중 한개를 선택하는 데 필요한 라디오 버튼의 작성 예는 다음과 같이 합니다. 라디오버튼은 같은 name속성값을 가지는 라디오 버튼들을 하나의 그룹으로 판단하여 그룹 내에서 오직 한개의 항목만 선택할 수 있도록 지원합니다. 사용자가 입력을 완료하고 제출버튼을 누르게 되면, 선택된 항목의 value 속성 값이 입력버튼 이름인 name속성과 함께 "gender=male"이라는 형식으로 서버용 프로그램에 전달되게 됩니다.

      1
      2
      <INPUT type="radio" name="gender" value="male">남성<BR>
      <INPUT type="radio" name="gender" value="female">여성<BR>
      		cs


    • 체크박스는 여러 개의 항목을 동시에 선택할 수 있는 입력기능을 제공합니다. 체크박스는 <INPUT>태그에 type속성을 "checkbox"로 지정하면 됩니다. 체크박스 버튼의 사용예는 아래와 같습니다.

      1
      2
      3
      4
      <INPUT type="checkobx" name="hobby" value="reading">독서<BR>
      <INPUT type="checkobx" name="hobby" value="travel">여행<BR>
      <INPUT type="checkobx" name="hobby" value="coding">코딩<BR>
      <INPUT type="checkobx" name="hobby" value="game">게임<BR>
      		cs

      이렇게 이용하면 코딩을 선택했을때 "hobby=coding"이라는 혁식으로 선택된 정보가 서버용 프로그램에 전달됩니다.
      다음 소스들을 활용하면 이런것을 만들 수 있을 수 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <HTML>
          <HEAD>
              <TITLE>
                  회원정보
              </TITLE>
          <HEAD>
          <BODY>
              <FORM method="post" action="">
                  1. 당신의 이름은 무엇인가요?<BR>
                  <INPUT type="text" name="who" maxlength = 5><BR><BR>
                  2. 당신의 성별은 무엇인가요?<BR>
                  <INPUT type="radio" name="gender" value="male">남성<BR>
                  <INPUT type="radio" name="gender" value="female">여성<BR><BR>
                  3.당신의 취미는 무엇인가요?<BR>
                  <INPUT type="checkbox" name="hobby" value="reading">독서<BR>
                  <INPUT type="checkbox" name="hobby" value="travel">여행<BR>
                  <INPUT type="checkbox" name="hobby" value="coding">코딩<BR>
                  <INPUT type="checkbox" name="hobby" value="game">게임<BR>
              </FORM>
          </BODY>
      </HTML>
      		cs

      이 소스의 결과는 다음과 같이 나오게 됩니다.


팝업메뉴와 리스트박스


    • 라디오버튼과 체크박스 대신 사용할 수 있는 기능으로 팝업메뉴와 리스트 박스가 있습니다. 팝업메뉴는 라디오 버튼과 같이 한번에 한가지 항목만 선택할 수 있으며, 리스트 박스는 체크박스 처럼 여러가지를 선택하는 것이 가능합니다. 팝업메뉴와 리스트박스는 <SELECT>태그와 <OPTION>태그를 이용하여 구성합니다. 다음나오는 코드는 팝업메뉴와 리스트박스를 구성하기 위한 코드의 형식입니다. <SELECT>태그의 size속성값을 1로 지정하면 한개의 항목만이 화면에 나타나는 콤보박스가 나타나고, size속성값을 2 이상으로 하게되면 숫자만큼의 항목이 나타납니다. <SELECT>태그의 속성으로 multiple을 지정하면 여러 개의 항목을 동시에 선택할 수 있게되며 multiple 속성을 지정하지 않으면 오직 한개의 항목만 선택할 수 있게 됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <HTML>
          <HEAD>
              <TITLE>
                  회원정보
              </TITLE>
          <HEAD>
          <BODY>
              <FORM method="post" action="">
                  업 메뉴 :<BR><SELECT SIZE=1>
                  <OPTION selected>항목 1
                  <OPTION>항목2
                  <OPTION>항목3
                  <OPTION>항목4
                  </SELECTED size=3 multiple><BR><BR><BR><BR><BR>
                  리스트 박스 :<BR><SELECT size=3 multiple>
                  <OPTION selected>항목 1
                  <OPTION selected>항목 2
                  <OPTION>항목 3
                  <OPTION>항목 4</SELECT>    
              </FORM>
          </BODY>
      </HTML>
      		cs
      다음 소스의 결과는 다음과 같습니다.

TEXTAREA 태그와 제출 및 취소버튼

    • 두줄 이상의 소감문이나 의견을 입력하고자 할 때는 <TEXTAREA>태그를 사용하여 구현합니다. <TEXTAREA>태그의 속성으로는 rows와 cols가 있는데 이는 각각 텍스트 작성영역의 세로와 가로크기로 지정합니다.

    • 입력내용을 전송하는 버튼을 구현하기위해서는 <INPUT>태그의 type속성을 "submit"으로 지정하면 됩니다. 또한 입력내용을 취소하고자 하는 경우, <INPUT>태그의 type속성을 "reset"으로 지정하면 됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      <HTML>
          <HEAD>
              <TITLE>
                  회원정보
              </TITLE>
          <HEAD>
          <BODY>
              <FORM method=post action="">
                  의견을 남겨 주세요.<BR>
              <TEXTAREA name=comments rows=10 cols=50>
              좋았던 느낌
       
       
       
              나빴던 느낌
              </TEXTAREA><BR><BR>
              <INPUT type=submit value="확인">
              <INPUT type=reset value="취소">
              </FORM>
          </BODY>
      </HTML>
      		cs


      다음 소스의 결과는 다음과 같습니다.








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

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

HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
HTML - CSS(Cascading Style Sheet)  (0) 2015.08.22
HTML - 멀티미디어 태그 그리고 테이블  (0) 2015.08.21
HTML - 글자, 문단, 목록 태그와 링크 태그  (0) 2015.08.21
HTML 기초  (0) 2015.08.21
'Programming/HTML' Related Articles more