학원 53일차 - HTML

138956 단어 학원htmlhtml

2021.06.10

ex19_form.html

폼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        <form>, 폼
            - 우리 과정의 목적
            - HTML Form + HTML Input Control
            - 클라이언트(사용자)로부터 입력장치(키보드, 마우스 등)을 통해서 데이터를 입력받는 요소 -> 입력받은 데이터는 JavaScript로 처리하거나 서버측에 전달한다.
            - <form> 이외의 태그: 주로 출력을 위한 태그들..
            - <form> 관련 태그: 주로 행동을 위한 태그들..(입력)
            - ex) 텍스트박스, 버튼, 체크박스, 라디오버튼, 파일업로드, 셀렉트박스 등...

            1. <form> 태그
                - 출력 결과를 가지지 않는다. > Rendering을 안한다.
                - 랜더링 : HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정
                - 모든 브라우저가 같은 랜더링 엔진을 사용하지 않는다. 
                - 블럭태그
                - 서버로 전송하는 모든 요소(컨트롤)를 담는 컨테이너 > 컨트롤이 <form>안에 있지 않으면 서버로 전송이 안된다. -> ex) 택배 상자

                a. form.action 속성
                    - 입력받은 데이터를 수신할 서버측 프로그램의 주소(URL)
                    - 서버측 프로그래밍 언어로 작성한 프로그램의 주소를 적는다. Servlet, JSP, Spring 프로그램 주소
                    - 데이터를 전송받을 측의 주소 -> ex) 택배 받는 사람 주소

                b. form.method 속성
                    - 데이터를 전송하는 방식
                    - 열거형
                    1. GET
                        - 데이터를 전송할 URL에 덧붙여서 전송하는 방식
                        - 데이터가 외부에 노출된다.(브라우저 주소창 등에..)
                        - 보안이 중요한 데이터는 사용 금지(노출되기 때문에..)
                        - URL(256자 제한) > 전송 데이터가 길면 잘린다.ex) 파일전송, 게시판에 글쓰기 -> 다량의 데이터는 잘림..
                        - 주로 숫자나 영문자를 보낼 때 사용한다. > 식별자 전송할 때 주로 사용.
                        - http://localhost:8090/ClientTest/ex19ok.jsp?data=java
                        - 상자에 넣지 않고 받는 사람 송장(받는 사람주소) 뒤에 붙이는 방식

                    2. POST
                        - 데이터를 전송 패킷의 본문안에 넣어 전송하는 방식
                        - 데이터가 외부에 노출되지 않는다.
                        - 보안이 중요한 데이터에 사용(완전한 보안을 의미하진 않음)
                        - 데이터 전송 길이에 제한이 없다.
                        - 데이터 종류에 상관없이 모든 형태의 데이터를 보낼 때 사용한다. 
                        - http://localhost:8090/ClientTest/ex19ok.jsp
                        - 데이터를 택배 상자안에 넣어서 송장 붙여서 보내는 방식
                        
     -->
     
     <h1>폼</h1>

     <form method="GET" action="/ClientTest/ex19ok.jsp"> <!-- 서버(받는사람)쪽 주소 -->

        데이터: <input type="text" name="data" value="홍길동" disabled>
        <input type="submit" value="보내기"> <!-- 전송 버튼 -->

     </form>

     <h1>네이버</h1>
     <form action="https://search.naver.com/search.naver" method="GET">
        데이터: <input type="text" name="query">
        <input type="submit" value="보내기">
     </form>

</body>
</html>
  • 서버(JSP)
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>결과</h1>
	<%
		request.setCharacterEncoding("UTF-8");
		String data = request.getParameter("data");
	%>
	
	<div>데이터: <%= data %></div>
	
</body>
</html>

ex20_form.html

form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        <form> 하위 요소
            - 입력 컨트롤, 입력 양식 등..
     -->
     <h1>입력 컨트롤</h1>

     <form method="GET" action="ex20ok.jsp">
         <!-- 
            <input>태그
            - 단독 태그, 인라인 태그
            - 데이터를 입력받는 태그

            - input.type: 입력 컨트롤의 종류
            - input.name: 식별자. 가장 오래된 식별자. 서버로 전송할 때 사용. HTML에서만 사용
            - input.id: 식별자. CSS와 JavaScript에서 사용하는 식별자.HTML에서 아주 가끔 사용
            - input.class: 식별자. CSS와 JavaScript에서 사용하는 식별자.HTML에서 사용 안함
            - input.size: 박스의 길이(문자 수 - 부정확(대략적인 길이))
            - input.maxlength: 입력 가능한 문자수
            - input.value: 해당 컨트롤 입력값(미리 정하면 컨트롤의 초기값 역할을 한다.)
            - input.readonly: 플래그타입(속성값은 없고 속성을 적으면 적용, 안적으면 미적용). 읽기 전용. 입력 off + 전원 on -> 서버로 전송 가능
            - input.disabled: 플래그타입. 비활성화. 입력 off + 전원off -> 서버로 전송 불가능 -> 존재X(눈에만 보임) 
            - input.title: 풍선 도움말
            - input.accesskey: 바로가기 키(Alt + 조합키)
            - input.autocomplete: 자동완성 on, off
            - input.autofocus: 플래그타입. 자동 포커스(활성화)
            - input.tabindex: 탭인덱스. tab키를 누를때 포커스 받는 순서
          -->

          <input type="text"
                 name="data"
                 id="name"
                 class="item"
                 size="30"
                 maxlength="5"
                 title="입력하세요."
                 accesskey="s"
                 autocomplete="off"
                 >

            <hr>
            
            <input type="text" tabindex="1">
            <input type="text" tabindex="3">
            <input type="text" tabindex="2">

            <hr>

                텍스트(단일라인): <input type="text">

            <hr>

                <!-- 
                    단일라인 텍스트 박스와 속성이 동일
                    암호상자는 value 속성을 사용하지 않는다. > 보안상 기본값은 사용 안한다.
                 -->
                텍스트박스(암호): <input type="password">

            <hr>

                 <!-- 
                    <textarea>
                        - 쌍태그, 인라인 태그
                        - 여러줄을 입력받는 텍스트 박스
                        - 대부분은 속성은 <input>과 동일
                        - textarea.cols: 컬럼 수(문자 수)
                        - textarea.rows: 줄 수(문자 수)
                        - value 속성이 없다. > 기본값 지정 불가능? > 가능 PCDATA로 지정한다.
                        - <textarea>의 영역은 컨트롤 영역이다. <body> 영역과 성질이 다르다. > 모든 공백 문자를 있는 그대로 인식한다.
                        - maxlength 속성이 없다. > 다량 텍스트 입력용
                  -->
                텍스트박스(다중라인):
                <!-- <textarea style="resize: none;"></textarea> -->
                <textarea cols="50" rows="5">하나
둘
셋</textarea>           

            <hr>

                <!-- 
                    체크박스
                    - 논리값 입력
                    - 속성은 몇개 없음
                    - name, id, class, title, reaonly, disabled
                    - checked: 플래그형. 컨트롤 체크 상태 제어
                 -->
            체크박스 : <input type="checkbox" checked>     
            
            <hr>

                <!-- 체크박스와 글씨 관계를 맺어주기: labeling -->
            <input type="checkbox" id="cb1"> <label for="cb1">약관에 동의합니다.</label>

            <hr>
            
            <label for="txt1">이름: </label><input type="text" id="txt1">

            <hr>

            <label>
                <input type="checkbox"> 약관에 동의합니다.
            </label>

            <hr>

            <!-- 
                라디오 버튼
                - 그룹 지정 -> name 속성 사용
             -->
             <input type="radio" name="rb"> 동의함
             <input type="radio" name="rb" checked> 동의안함

             <hr>

             <input type="radio" name="rb2" checked> 남자
             <input type="radio" name="rb2"> 여자
             <input type="radio" name="rb2"> 기타

             <hr>

             <!-- 
                체크 박스 : 다중 선택
                라디오버튼 : 단일 선택
              -->
             <input type="checkbox"> 햄버거
             <input type="checkbox"> 콜라
             <input type="checkbox"> 샐러드
             <input type="checkbox"> 감자튀김

             <hr>
             
             <!-- 
                셀렉트 박스, Combo box, DropDownList 등..
                - 단일 선택(radio)
                - 다중 선택(checkbox) > multiple
                - selected : 기본값
              -->
              <select size="10">
                  <option>강아지</option>
                  <option selected>고양이</option>
                  <option>병아리</option>
              </select>

              <hr>

              <select multiple size="10">
                <option>강아지</option>
                <option selected>고양이</option>
                <option>병아리</option>
              </select>

              <hr>

              <select>
                  <!-- 단점: 안내메세지도 선택할 수 있음.. -->
                  <option>색상을 선택하시오</option>
                  <option>빨강</option>
                  <option>노랑</option>
                  <option>파랑</option>
              </select>

              <hr>

              <select>
                  <!-- 옵션 선택 방지 -->
                  <option disabled selected>색상을 선택하시오</option>
                  <option>빨강</option>
                  <option>노랑</option>
                  <option>파랑</option>
              </select>

              <hr>

              <select>
                  <optgroup label="필수 색상">
                    <option>빨강</option>
                    <option>노랑</option>
                    <option>파랑</option>
                  </optgroup>
                  <optgroup label="선택 색상">
                    <option>주황</option>
                    <option>보라</option>
                    <option>연두</option>
                  </optgroup>
              </select>

              <hr>

              <!-- 
                  파일 업로드
               -->
               파일 선택: <input type="file">

               <hr>

               <!-- 
                    히든 태그
                    - 개발자용
                    - 눈에 안보이는 텍스트 박스
                    - 고객 화면에는 보이지 않지만, 서버로 전송해야하는 데이터
                -->
                히든 태그: <input type="hidden">

                <hr>

                <!-- 
                    버튼류
                 -->
                 전송 버튼: <input type="submit" value="데이터를 전송합니다.">
                 <br>
                 취소 버튼: <input type="reset" value="취소 버튼"> <!-- 초기화버튼, 게시판글쓰기에 많이 쓰였음 -->
                 <br>
                 이미지 버튼: <input type="image" src="images/catty01.png">
                 <br>
                 일반 버튼: <input type="button" value="일반 버튼" onclick="alert('안녕하세요')">  <!-- 아무 기능이 없음. 가장 많이 쓰는 기능 -->
                 <br>
                 일반 버튼: <input type="button" value="일반 버튼" onclick="location.href='http://google.com'">
                 <br>
                 일반 버튼: <input type="button" value="일반 버튼" onclick="document.body.style.backgroundColor = 'yellow';">
                 <br>
                 디자인 버튼: 
                 <button type="button">일반 버튼</button>
                 <button type="submit">전송 버튼</button>
                 <button type="reset">리셋 버튼</button>

                 <br>

                 <!-- 버튼에다가 "이미지 + 텍스트" -->
                  <button><img src="images/bullet01.png">글쓰기</button>


     </form>
</body>
</html>

ex21_frame.html

프레임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        프레임, Frame
        1. <frameset> + <frame>
            - 잘 사용 안함
        2. <iframe>    
            - inner frame, inline frame
            - 문서의 일부분에 다른 문서를 삽입하는 태그
            - 쌍태그, 인라인태그

        프레임 사용 목적
        1. 코드 재사용(*) -> include로 대체 -> ajax로 대체 
            - 독립된 페이지를 여러 페이지에 삽입해서 페이지 일부분으로 사용
        2. 트래픽 감소(****************) -> ajax로 대체
            - 일부분만 새로 고침을 발생시킨다.
            - 새로고침이 필요한 부분 이외의 부분은 서버로부터 다시 데이터를 받아 올 필요가 없다.
            

            frameborder : 테두리
            scrolling : 스크롤바 유무
            
     -->

     <h1>iframe</h1>
     <iframe src="ex20_form.html" width="100%" height="300" frameborder="1" scrolling="no"></iframe>

     <h1>iframe</h1>
     <iframe src="http://yes24.com" width="100%" height="200" frameborder="0" scrolling="no"></iframe>
     
     <hr>

     <h1>쇼핑몰</h1>
     <table border="1" width="100%" height="500">
        <tr>
            <td width="200">
                <ul>
                    <li><a href="http://coupang.com" target="iframe1">쿠팡</a></li>
                    <li><a href="http://11st.co.kr" target="iframe1">11번가</a></li>
                    <li><a href="http://gmarket.co.kr" target="iframe1">지마켓</a></li>
                    <li><a href="http://auction.co.kr" target="iframe1">옥션</a></li>
                </ul>
            </td>
            <td>
                <iframe name="iframe1" width="100%" height="500" frameborder="0"></iframe>
            </td>
        </tr>
     </table>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 
		webapp > inc > auth.html

        조각 페이지
        - 다른 페이지에 삽입해서 재사용
     -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="250">
        <tr>
            <th width="100">ID: </th>
            <th width="150"><input type="text" size="10"></th>
        </tr>
        <tr>
            <th width="100">PW: </th>
            <th width="150"><input type="password" size="10"></th>
        </tr>
        <tr>
            <th colspan="2"><input type="submit" value="Sign in"></th>
        </tr>
    </table>
</body>
</html>
<!-- 로그인 기능 -->
<iframe src="./inc/auth.html" width="270" height="110" frameborder="no"></iframe>

ex22_html5.html

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        ~ ex21.html : HTML 4.01 + XHTML 1.0
        ex22.html + ex23.html : HTML5 추가 기능


        HTML5에서 추가된 레이아웃(시멘틱 웹 태그) -> 의미가 강조된 태그, 기능(X)
        - 페이지 레이아웃 구성할 때 사용
        - 블럭 태그, 쌍태그

        1. <header>
            - 머릿말 역할
            - 주메뉴, 사이트로고, 검색창 등..
        2. <nav>
            - 메뉴 역할
            - 주메뉴, 보조 메뉴, 컨텍스트 메뉴 등..

        3. <section>
            - 주요 컨텐츠 역할

        4. <article>
            - <section>내의 세부 컨텐츠 역할

        5. <aside>
            - 보조 컨텐츠 역할
            - 광고, 보조업무, 채팅창 등..

        6. <footer>   
            - 바닥글 역할
            - 저작권, 연락처, 보조 메뉴 등..

     -->

     <!-- 각각의 영역을 <div>로 묶고 식별하기 위해서 id와 class를 지정 -->
     <h1>예전 방식</h1>

     <div id="header">
         헤더
     </div>
     <div id="menu">
         메뉴
     </div>
     <div id="content">
        <div id="list">
            <div class="item">반복되는 아이템</div>
            <div class="item">반복되는 아이템</div>
            <div class="item">반복되는 아이템</div>
        </div>
        <div id="chat">
            채팅, 보조 컨텐츠
        </div>
     </div>
     <div id="footer">
        바닥
     </div>


    
    <!-- 
        의미가 추가된 새로운 이름의 <div>태그들
    -->
     <h1>새로운 방식</h1>

     <header>
         헤더
     </header>
     <nav>
         메뉴
     </nav>
     <section>
         <article>아이템</article>
         <article>아이템</article>
         <article>아이템</article>
     </section>
     <aside>보조 컨텐츠</aside>
     <footer>바닥</footer>
</body>
</html>

ex23_html5.html

HTML5 - 라벨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        HTML 4.01 + 추가 기능 부재 -> 개발자 직접 -> HTML + CSS + JavaScript -> 필요한 기능을 만들어서 씀(15년 가까이)
        HTML5 -> 기대감 -> HTML5 새기능 -> 모두 이전에 개발자들이 직접 만들어서 사용하던 기능들..
        HTML5 -> 플래시(Adobe Flash), 실버라이트(Microsoft Silverlight) 사라짐 
     
        HTML5 -> HTML5 + CSS + JavaScript(ES6 이상)
    -->

    <h1>HTML5</h1>

    <h2>form 관련 기능</h2>

    <form method="POST" action="ex23ok.jsp">

        <h3>라벨</h3>

        <label for="txt1">이름: </label><input type="text" id="txt1">
        <hr>
        <!-- 디자인 요소때문에 label사용 안함.(칸을 덜 차지함) -->
        <input type="text" value="이름을 입력하세요." onfocus="this.value='';">
        <hr>
        <!-- 단점: 안내메세지의 역할을 못함 -->
        <input type="password" value="암호를 입력하세요." onfocus="this.value='';">

         <!-- HTML5 -->
        <input type="text" placeholder="이름을 입력하세요."> <!-- placeholder: 미리 데이터를 입력해놓는 역할 -->
        <hr>
        <input type="password" placeholder="암호를 입력하세요.">
        <hr>
        <textarea cols="50" rows="6" placeholder="인사말을 적으세요"></textarea>


        <h3>필수 입력값 체크</h3>

        <!-- required : 필수값 체크 안쓰면 전송 안됨. -->
        <input type="text" name="data" required><br> ** 반드시 입력하세요.


        <h3>의미가 강조된 태그들 > Semantic Web(시멘틱 웹)</h3>

        URL: <input type="url"> <!-- http:// ~~을 적어야 전송이 된다.(유효성검사)   -->
        <hr>
        Email: <input type="email">
        <hr>
        숫자: <input type="number" min="10" max="100" step="10"> <!-- 숫자 범위도 지정 가능 -->
        <hr>
        범위: <input type="range" min="20" max="120" step="10" onchange="document.getElementById('rtxt').value=this.value;"> <!-- slider bar -->
        <input type="text" id="rtxt">
        <hr>
        색상: <input type="color" onchange="document.getElementById('ctxt').value=this.value; document.body.bgColor = this.value;">
        <input type="text" id="ctxt">
        <hr>
        날짜시간: <input type="date">
        <hr>
        <input type="month">
        <hr>
        <input type="week">
        <hr>
        <input type="time">
        <hr>
        <input type="datetime"> <!-- 브라우저가 지원을 안함 -->
        <hr>
        <input type="datetime-local">
        <hr>

        데이터 리스트:
        <input type="text" list="list1">

        <!-- 자동완성기능 -->
        <datalist id="list1">
            <option value="홍길동"></option>
            <option value="아무개"></option>
            <option value="하하하"></option>
        </datalist>
        <hr>


        <h3>진행률</h3>
        <progress></progress>
        <hr>
        <progress value="0"></progress>
        <hr>
        <progress value="0.2"></progress>
        <hr>
        <progress value="0.4"></progress>
        <hr>
        <progress value="0.6"></progress>
        <hr>
        <progress value="0.8"></progress>
        <hr>
        <progress value="1"></progress>
        <hr>
        <progress value="24" max="100"></progress>
        <hr>

        
        <h3>수치</h3> <!-- 숫자를 도식화 시킴 -->
        <meter></meter>
        <hr>
        <meter value="0"></meter>
        <hr>
        <meter value="0.5"></meter>
        <hr>
        <meter value="1"></meter>
        <hr>
        <meter value="50" min="-100" max="100"></meter>
        <hr>
        <meter min="0" max="100" low="30" high="80" value="20"></meter>
        <hr>
        <!-- low&height : 안전한 값의 기준 -->
        <meter min="0" max="100" low="30" high="80" value="70"></meter>
        <hr>
        <meter min="0" max="100" low="30" high="80" value="90"></meter>

        <h3>접기</h3>
        <details>
            <summary>java란?</summary>
            <div>
                자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 자바는 어쩌고 저쩌고 블라 블라 
            </div>
        </details>


        <hr>
        <input type="submit" value="보내기">


        <hr>
        <!-- HTML 4.01 -->
        <!-- 입력 컨트롤들을 구분짓기 위한 집합 태그 -->
        <!-- <fieldset> 태그는 <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용 -->
        <fieldset>
            <legend>로그인</legend>
            <div>
                <div>아이디: <input type="text" size="10"></div>
                <div>암호: <input type="text" size="10"></div>
            </div>
        </fieldset>


        <hr>
        <!-- 뉴스 서비스 -->
        <marquee scrollamount="20" behavior="alternate">긴급 속보 입니다. 서울시 미세먼지 농도는 어쩌고 저쩌고</marquee>

    </form>
</body>
</html>
JAVA_39_인터페이스
JavaScrip_ Function

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage