학원 day42. 폼(2), id와 class, CSS

기록 2022. 11. 3. 15:06

폼

폼은 사용자가 값을 입력할 수 있는 입력요소(입력필드, 체크박스, 라디오버튼, 콤보박스 등)를 제공하는 것이다.
모든 입력요소들은 <form> 태그 안에 정의되어야 한다.

폼요소

폼요소는 사용자가 값을 입력하거나, 선택하거나, 체크할 수 있는 것들이다.
대표적인 폼요소 태그 : <input>, <select>, <textarea>, <button>

<input> 태그

Input 태그의 주요 속성
type
- 폼입력요소의 타입을 결정한다.
- 타입의 종류
type="text" : 입력필드가 된다.
type="password" : 비밀번호 입력필드가 된다.
type="date" : 날짜 입력필드가 된다.(달력표시)
type="datetime-local" : 날짜와 시간을 입력하는 입력필드를 생성한다. value속성으로 날짜와 시간을 지정할 때는 "2022-11-03T01:43"과 같은 형식으로 지정한다.
type="number" : 숫자만 입력가능한 입력필드를 생성한다. 숫자만 입력가능하고, 증가/감소 화살표가 표시된다.
type="email" : 이메일 입력필드가 된다.(유효하지 않은 이메일 형식인 경우 에러발생)
type="url" : url 입력필드가 된다.
type="file" : 첨부파일 폼요소가 된다. 첨부파일 선택필드에서는 value속성으로 값을 절대 설정할 수 없다. (보안문제)
type="radio" : 하나만 선택가능한 라디오 버튼이 된다.
type="checkbox" : 복수개 선택가능한 체크박스가 된다.
type="reset" : 폼의 입력값을 초기상태로 리셋한다.
type="submit" : 폼의 입력값을 서버로 제출한다.
type="hidden" : 화면에 표시되지 않는 숨김 입력필드를 생성한다. 숨김필드를 지정할 때는 name속성과 value속성을 지정해야 한다. (화면에 표시되지 않기 때문에 사용자가 값을 입력할 수 없으므로, 값이 미리 설정되어 있어야 한다.)

name
- 폼입력요소의 이름을 정의한다.
- 입력값이 서버로 전달될 때 name속성에 지정된 이름과 입력값의 쌍으로 전달된다.
- 모든 입력요소에는 name속성을 꼭 설정하자.
- 체크박스나 라디오버튼의 경우 같은 종류의 항목들은 같은 이름을 설정한다.

value
- 폼입력요소의 입력값을 정의한다.
- 라디오버튼, 체크박스, 옵션태그는 value를 사용해서 미리 값을 설정해야 한다.

checked
- 라디오버튼과 체크박스를 체크상태로 만든다.
- 라디오버튼과 체크박스는 현재 체크상태인 것만 서버로 값이 전달된다.

selected
- <select>태그의 특정 옵션을 선택된 상태로 만든다.

disabled
- 폼요소를 비활성화 시킨다.
- 비활성화된 폼요소의 입력값은 서버로 제출되지 않는다.
- 비활성화된 폼 입력요소에는 값을 입력하거나 수정할 수 없다.

readonly
- 입력필드를 읽기전용으로 만든다. 수정이 불가능해진다.
- 읽기전용 입력요소의 값은 서버로 제출된다.
- 주로 입력필드, textarea에서 사용된다. 라디오버튼, 체크박스는 값이 이미 지정이 되어있기 때문에 readonly속성이 적용되지 않는다.

minlength, maxlength
- 텍스트를 입력하는 폼요소의 최소/최대 문자 입력 개수를 지정한다.
- type속성이 text, password, email, url 등으로 지정된 입력필드에서 사용한다.

step, min, max
- 증감치, 최소값, 최대값을 지정한다. (type="number"로 지정된 입력필드에서 사용한다.)

placeholder
- 입력값에 대한 힌트를 제공한다.

<select> 태그

- 드롭다운 리스트를 만든다.
- 사용자가 입력해야 되는 값이 미리 결정되어 있는 경우에 사용한다.
예) 학력사항, 통신사, 지역 ...

<textarea> 태그

- 여러 줄의 텍스트가 입력 가능한 입력필드이다.
- textarea 태그는 반드시 여는태그와 닫는태그를 같이 작성해야 한다.
- textarea에 입력값을 정의할 때는 value를 사용하지 않는다. textarea의 값을 지정할 때는 여는태그와 닫는태그 사이에 값을 넣는다.
예시 : <textarea>미리 정의할 입력값</textarea>
- rows 속성 : textarea가 표시할 줄 수를 지정한다.
- cols 속성 : textarea가 표시할 너비를 지정한다.

<button> 태그
- 클릭가능한 버튼을 정의한다.
- <button> 태그가 <form>태그 안에 있을 때는 폼 입력값을 서버로 제출하는 submit버튼처럼 동작한다.
- 팝업창을 띄울 때에는 type값을 button이라고 명시적으로 적어줘야 한다. <button type="button">주소검색</button>

<Form> 태그

Form 태그의 주요 속성
action
- form입력값을 전달받을 서버측의 웹애플리케이션 이름
- 이름은 폴더경로를 포함하는 jsp파일의 이름이다.

method
- form 입력값을 서버로 전달하는 방식(GET, POST 중 하나)을 정의하는 속성
- GET : form 입력값을 url뒤에 붙여서 보낸다. 설정하지 않으면 기본값이 GET이다.
- POST : form 입력값을 요청메세지의 body에 담아서 서버로 보낸다.
  · 첨부파일을 서버로 보낼 때
  · 많은 입력값(종류가 많거나 크기가 크거나)를 서버로 보낼 때
· 서버로 보내는 입력값을 url에 노출시키고 싶지 않을 때
  · 서버로 전달되는 데이터에 대한 사이즈 제한이 없다.

* HTTP 통신규약 : Hyper Text Transfer Protocol, 클라이언트가 서버쪽으로 보내는 메시지의 형식, 서버가 응답으로 클라이언트에게 보내는 메시지의 형식을 규정해놓은 규약

요청메시지의 헤더부에는 요청라인과 요청헤드로 구성되어있다.
요청라인에는 요청방식, 요청URL, HTTP프로토콜의 버전이 적혀있다.
요청헤드에는 클라인언트에 대한 정보(내컴퓨터의 운영체제, 브라우저의 기본 랭귀지, 압축방식, 응답메시지의 형태, 브라우저의 종류)가 담겨있다.
GET방식의 요청일때는 요청메시지의 헤더부분만 있고 바디부는 비어있다.
GET방식일 때 값을 서버로 전달할 때는 URL뒤에 붙여서 전달한다. (name=value&name=value)
요청헤더와 바디 사이에는 공백이 있다. 공백을 경계로 헤더부와 바디부를 구분한다.
POST방식일 때는 값을 서버로 전달할 때는 요청메시지의 바디부에 담아서 서버로 전달한다.
POST방식의 데이터의 형태는 GET방식과 동일. (name=value&name=value)

<body>
    <h1>form 태그</h1>

    <h2>요청방식의 지정</h2>

    <h3>GET 방식의 요청</h3>
    <p>GET 방식의 요청은 method="get"으로 지정한다.</p>
    <p>GET 방식의 요청은 서버로 제출되는 값이 url의 ?뒤에 붙여져서 서버로 전달된다.</p>
    <p>GET 방식의 요청은 서버로 제출되는 값이 길이에 제한이 있다.</p>
    <p>GET 방식의 요청은 첨부파일을 서버로 제출할 수 없다.</p>
    <form method="get" action="search.jsp">
        <select name="opt">
            <option value="title"> 제목</option>
            <option value="writer"> 저자</option>
            <option value="publisher"> 출판사</option>
        </select>
        <input type="text" name="keyword" />
        <input type="submit" value="검색" />
    </form>

    <h3>POST 방식의 요청</h3>
    <p>POST 방식의 요청은 method="post"으로 지정한다.</p>
    <p>POST 방식의 요청은 서버로 제출되는 값이 HTTP 요청 메세지의 body부에 포함되어 전달된다.</p>
    <p>POST 방식의 요청은 서버로 제출되는 값이 길이에 제한이 없다.</p>
    <p>POST 방식의 요청은 첨부파일을 서버로 제출할 수 있다.</p>
    <p>POST 방식의 요청은 서버로 전달되는 값을 요청메시지의 바디부에 담아서 서버로 보내기 
        때문에 웹브라우저의 주소창에 값이 표시되지 않는다.
        (로그인 요청의 경우 아이디나 비밀번호가 주소창에 표시되는 것은 보안에 나쁘다.)</p>
    <form method="post" action="login.jsp">
        <input type="text" name="userid" />
        <input type="password" name="userpw" />
        <input type="submit" value="로그인" />
        <button>버튼1</button>
        <button type="submit">버튼2</button>
        <button type="button">버튼3</button>
    </form>

</body>
</html>

< 화면결과 >

화면에서 오른쪽버튼 -> 검사-> 네트워크 -> register.jsp -> payload에서 값이 전달된것을 확인할 수 있다.

응답메시지

응답메시지도 요청메시지와 마찬가지로 헤더부와 바디부가 있다.
헤더부에는 프로토콜버전, 응답코드, 서버의 유형, 컨텐츠의 정보 등이 들어있다.
바디부에는 화면에 표현되는 html 콘텐츠가 들어있다. 또는 이미지나 동영상이 들어있다.
100번대의 응답코드 : 지금 잘 쓰이지 않음
200번대의 응답코드 : 성공적인 응답
300번대의 응답코드 : Redirection 응답
400번대의 응답코드 : 클라이언트가 요청을 잘못한 경우 (대표적 404, url 잘못적었을 때)
500번대의 응답코드 : 요청은 잘했으나 서버에 있는 웹어플리케이션이 실행되다가 에러가 났을 때 발생

id와 class 속성

id와 class는 모든 태그들이 가지는 공통 속성이다.
id 속성
- 특정 엘리먼트(태그)를 식별하기 위한 용도로 사용된다.
- 웹문서 전체에서 똑같은 id 속성값을 가진 태그는 없어야 한다.
- id의 속성의 값은 고유해야 한다.
- id 속성의 값은 숫자로 시작할 수 없다.
- id 속성의 용도
  - 특정 아이디값을 가진 태그(엘리먼트)에만 스타일을 지정할 때
  - 특정 아이디값을 가진 태그를 선택해서 javascript로 조작해야 할 때

class 속성
- 같은 클래스값을 가진 태그는 같은 스타일이 적용되게 하기위한 용도로 사용된다.
- html 파일내에 같은 클래스값을 가진 태그들이 여러 개 있을 수 있다.
```
  <div id="wrapper">
    <div class="row"> ... </div>
    <div class="row"> ... </div>
    <div class="row"> ... </div>
    <div class="row"> ... </div>
  </div>
```
- class속성은 여러 개의 속성값을 가지는 것이 가능하다.
```
  <div id="container" class="nav navbar navbar-default">
  <button class="btn btn-primary btn-sm">등록</button>
```

    <title>id와 class</title>
    <style>
        /* 
            태그명 {스타일} 
            * 이 문서에서 해당 태그명과 일치하는 모든 태그에 스타일이 적용된다.
        */
        div {
            border: 1px solid #eee;
            padding: 15px;
            margin: 10px;
        }

        /*
            #아이디값 {스타일}
                * 이 문서에서 태그의 id속성이 id="아이디값"인 태그에만 스타일이 적용된다.
        */
        #box-1 {
            background-color: black;
            color: white;
            font-weight: bold;
        }
        #box-2 {
            background-color: yellow;
            color: blue;
            font-weight: bold;
        }
        #box-3 {
            background-color: tomato;
            color: black;
            font-weight: bold;
        }

        dt {
            font-weight: bold;
        }
        
        /*
            .클래스속성값 {스타일}
                * 지정된 클래스속성값을 포함하고 있는 모든 태그에 스타일이 적용된다.
        */
        .text-bold {
            font-weight: bolder;
        }
        .text-big {
            font-size: 25px;
        }
        .text-marked {
            color: red;
        }
    </style>
</head>
<body>
    <h1>id와 class</h1>
    <!--
        id속성과 class 속성
            - 모든 태그(엘리먼트)가 가지는 속성이다.

            - id속성
                - 특정 태그(엘리먼트)를 식별하기 위한 용도로 사용되는 속성이다.
                - HTML문서 전체에서 id속성값은 고유한 값이다.
                    <div id="box-1"> </div>
                    <div id="box-2"> </div>
                    * id속성값이 box-1인 div는 이 HTML문서에서 오직 하나다.
                    * 특정 div를 조작하거나 특정 div에만 스타일을 적용해야 할 때 id속성값을 사용한다.
            
            - class속성
                - 같은 class 속성값을 가진 태그는 같은 스타일이 적용되게 하기위한 용도로 사용된다.
                - HTML문서 전체에서 CLASS 속성값이 같은 속성값을 가지는 태그는 여러 개 존재할 수 있고, 이 태그들은
                  같은 스타일이 적용된다.
                - class 속성값은 한번에 여러개를 정의할 수 있다.
                    <div class="text-bold text-marked text-big box">
                    * 정의된 클래스값으로 지정된 스타일이 전부 해당 태그에 적용된다.   
    -->
    <h2>id 속성값의 활용</h2>
    <div id="box-1">첫번째 div</div>
    <div id="box-2">두번째 div</div>
    <div id="box-3">세번째 div</div>

    <h2>class 속성값의 활용</h2>
    <dl>
        <dt>제목</dt><dd>이것이 자바다</dd>
        <dt>저자</dt><dd>신용권</dd>
        <dt>출판사</dt><dd>한빛미디어</dd>
        <dt>가격</dt><dd class="text-big text-bold">35,000 원</dd>
        <dt>할인가격</dt><dd class="text-big text-bold text-marked">31,500 원</dd>
        <dt>포인트</dt><dd class="text-marked">730 점</dd>
    </dl>
</body>
</html>

< 화면결과 >

CSS (Cascading Style Sheets)

HTML 문서가 웹브라우져의 화면, 인쇄물 혹은 여러 미디어에 어떻게 표현될지를 정의하는 언어다.
CSS는 화면의 레이아웃, 텍스트 형식, 애니메이션 효과, 3D효과 등을 설정할 수 있다.
HTML 문서에 대한 디자인적인 요소를 담당한다.
문법

  Selector(선택자)	Declaration(CSS 선언)
  h1                {color:blue;  font-size:12px;}

  * 선택자
    스타일을 적용할 대상 엘리먼트(태그)를 지정한다.
  * CSS 선언
    선택자에서 지정한 엘리먼트에 적용할 스타일을 선언한다.
    각각의 CSS선언은 세미콜론으로 구분한다.
    CSS선언은 PropertyName:PropertyValue로 구성된다.

css 적용하기

Inline CSS
- 하나의 엘리먼트에만 적용할 스타일을 정의할 때 사용한다.
- 엘리먼트에 CSS선언을 정의하는 것 (지양할 것)
```
  <h1 style="color:red; font-size:12px;">컨텐츠</h1>
  
```

Internal CSS

하나의 HTML문서에만 적용할 스타일을 정의할 때 사용한다.
HTML문서의 헤더부분에서 <style>태그 안에 CSS선언을 정의하는 것

  <style>
    h1 {color:red; font-size:12px;}
    p {margin: 10px; padding:6px;}
  </style>
  <!-- HTML문서에 있는 모든 <h1>, <p> 태그에 스타일이 적용된다. -->

External CSS
- 프로젝트 내의 모든 HTML문서에 적용할 스타일을 정의할 때 사용한다.
- 별도의 css파일에 CSS선언을 정의하고, <link>태그를 이용해서 css파일을 html문서와 연결시킨다.
- 하나의 css파일만 변경하면 프로젝트 내의 모든 HTML문서의 스타일을 변경할 수 있다.
```
  h1 {color:red; font-size:12px;}
  p {margin: 10px; padding:6px;}
```
```
  <link rel="stylesheet" type="text/css" href="style.css">
```

저작자표시

'기록' 카테고리의 다른 글

학원 day44. 네트워크 (0)	2022.11.07
학원 day43. 선택자, 색표현, 박스모델, 포지션, 레이아웃 (0)	2022.11.04
학원 day41. 태그(2), 엘리먼트, 폼 (0)	2022.11.02
학원 day40. 웹, HTML, 태그, 속성 (0)	2022.11.01
학원 day39. 분석함수, 집합 연산, 계층형 쿼리 (0)	2022.10.31

ABOUT ME

개발 일기 개발 일기

폼

폼요소

id와 class 속성

CSS (Cascading Style Sheets)

'기록' 카테고리의 다른 글

티스토리툴바

ABOUT ME

폼

폼요소

id와 class 속성

CSS (Cascading Style Sheets)

'기록' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바