HTML

Udemy - The web developer camp

HTML

Hanachoi 2022. 6. 19. 16:57

#단락요소

<p>태그로 단락을 묶으면 블록레벨요소가 생긴다. 그래서 <p>태그 사이에 한 줄 씩 띄어져서 화면에 표시되게 된다.

# 제목요소

<h1>~<h6> 까지의 제목을 설정할 수 있는 태그들이 있는데, <h1>이 가장 크고 <h6>가 가장 작은 크기로 들어간다. 만약 크기를 조절하고 싶어서 태그를 다르게 한다면 그건 쓸모 없는 일! 사이즈는 css로 언제든 조정가능하다.
각각의 태그는 의미가 있는것이기 때문에 잘 사용해야 한다.
<h1>은 한 페이지 당 한 번 만 사용되어야 한다.
순서를 역행해서 쓸 수 없다. <h1>이 없는데 <h2>를 먼저 사용한다던가 할 순 없다.

#목록요소

<ol> : ordered list : 순서가 정해져 숫자가 붙어나오는 리스트
<ul> : unordered liest : 그냥 검정 불렛으로 점찍혀서 앞에 나오는 리스트
두 리스트 모두 중첩태그(nested tag)라서 이 태그 안에<li>라는 요소들로 구성되어 있다.
두 태그는 태그 안에서 허용되는 태그들이 따로 정해져 있다. <li> , <script>, <template> -> these tags are only valid children tags in <ol> , <ul>
<li>는 리스트 안에 들어가는 싱글 요소들을 말한다. 위의 태그 중 어떤걸 사용할지 정하고 그 리스트 안에 들어가는 요소들을 써줄때는 꼭 <li>로 감싸도록 해주자.
css를 사용하면 점의 모양이나 숫자의 폰트를 바꿔줄 수 도 있다.
여기서의 가장 중요한 핵심은 리스트에 순서가 있느냐, 없느냐로 나뉜다.
<li>태그 안에는 <b>, <i>(italic 체) 등을 같이 사용할 수 있음.
리스트 안에 또 다른 리스트를 만들어 낼 수도 있다.
<li>밑에 자식태그로 <ul>,<ol>을 만들어 또 그안에 요소들을 넣어주면 된다.

<ol>
  <li><b><i>silkie</b></i></li>
    <ul>
      <li>polish</li>
      <li>Easter Egger</li>
    </ul>
  <li>Rhode Island Red</li>
</ol>

#앵커태그

<a> : 이 태그를 걸면 같은 페이지에서 해당 부분으로 페이지가 넘어가거나 새로운 페이지로 연결되도록 링크를 걸 수 있다. 오프닝 태그안에 [href = " "] 속성을 넣어서 해당 부분의 링크를 걸 수 있다.
만약 링크로 구글페이지를 넣고싶다면? 그냥 단순히 google.com이라고 입력해서는 오류가 뜬다. 그냥 내가 만든 파일안에 있는 다른 파일인줄로 인식하게 되는 것.
정확한 링크를 걸기 위해서는 완벽한 주소를 넣어야함. http 프로토콜을 사용한다. http://www.google.com 처럼!
우리가 vs code를 사용할 때 같은 파일안에 있는 페이지도 링크로 연결해서 사용할 수가 있다.
<a>태그는 인라인태그에 해당된다. 새로운 줄을 차지하지 않는다는 것. 볼드요소처럼 자리를 차지하지 않는다.
원하는 부분을 <a href = ""></a> 부분으로 감싸주면 링크가 생기고 해당페이지로 연결할 수 있다.

#이미지

img 태그는 오프닝태그, 클로징태그가 없는 태그이다. <img>태그를 만들어서 그 안에 src = "" 로 해당 이미지를 불러와주면 된다. <img src = "">
작업하는 파일에 사진을 저장한 뒤에 불러올 수도 있고, 파일명과 확장자만 정확하다면 컴퓨터의 어떤 이미지도 불러올 수 있다.
사이즈같은건 html 태그에서 바로 바꿔줄 수도 있지만 css를 활용하는게 더 좋다
꼭 내 컴퓨터에 사진을 저장하지 않아도 인터넷에서 바로 <이미지 주소 복사>를 해서 링크를 걸어 줄 수도 있다.
작업을 하다보면 이미지 사진이 많아질 수 있기 때문에 이미지와 관련된 폴더를 하나 정해서 거기서 사진을 가져올 수도 있다. 이때는 정확한 위치를 설정해줘야 할줄 알아야함.

<img src ="pictures/stevie_chicks.jpg"> //pictures는 폴더명

alt 속성은 필수는 아니지만 접근성과 관련된 태그라고 할 수 있다. 만약에 이미지를 불러오지 못하게되면 어떤이미지 였는지에 대한 설명이 뜨게 되어있다. 만약 사용자가 스크린리더기를 사용하고 있다면 스크린리더기는 이 사진에 대한 설명을 읽어줄 것이다.
아래처럼 코드를 작성하면 사진이 정상적으로 떠 있을때는 아무런 일도 없겠지만, 사진이 안뜨면 alt에 써진 글이 대신 뜬다.

<img src ="pictures/stevie_chicks.jpg" alt = "My pet chicken!" >

# 주석

css, javascript 등 다 각각의 주석을 사용할 수 있는 방법이 있다.
을 하면 주석처리 됨
vs code에서는 주석을 달수 있는단축키가 있다. 주석달고 싶은데서 ctrl + / 하면 됨

# What is the HTML 5 exactly?

html을 정의하는 가장 발전된 표준의 html(새로운 버전의 html)
html은 기본적으로 html의 기본적인 작동방식에 관한 문서라고 할 수 있다. 어떻게 html이 작동되고 만들어져야 하는가
html의 표준위에서 구글의 크롬이나 모질라의 파이어폭스같은 브라우저가 만들어지고 작동하는 것.
html은 자동적으로 실행되는 것이기 때문에 다운받거나 하는 것이 아니다
<!DOCTYPE html>부분이 바로 우리가 html을 사용하고 있다는 것을 말해주는 부분이다.

# 블록vs인라인 요소 - <div>와 <span>

Inline elements fit in alongside other elements.
Block level elements take up a whole "block" of space.
<div> div stands for 'division(분할)' : div태그는 컨텐츠를 분할하는 요소라고 생각하면 됨. 무언가를 잡아두는 또는 요소를 그룹화하는 제네릭 컨테이너이고 블록수준요소 다.
어떤 컨텐츠를 <div>태그에 넣으면 div태그는 전체블록을 차지하고 위아래의 콘텐츠를 밀어낼 것이다.
css를 사용할때 <div>로 콘텐츠를 그룹화할 수 있다.
예를들어 <a>태그는 인라인 태그라서 그냥 자신이 차지한 만큼 만의 공간을 배정한다. 하지만 <a>태그를 <div>로 감싸주면, <div>태그 자체는 전체블록을 차지하게 된다. css에서는 그룹화를해서 전체스타일을 한꺼번에 정할 수 있게 된다.
<span>도 제네릭요소라서 css를 사용할때 얘를 이용해 스타일을 지정할 수있다. 하지만 얘는 인라인요소라서 전체블록을 차지하지는 않는다.

#기타요소모음 - HR , BR , Sup, sub

<hr> : horizontal rule , 자주사용하지는 않음. 화면에 수평선을 하나 그을 때 사용하는 애. 닫는태그는 없음.
<hr> represents a thematic break between paragraph-level elements.
스타일은 변경 가능함

<br> : break element 줄바꿈태그 , 내가 원하는 곳에서 정확하게 태그를 바꿀 수 있게 된다.
html파일에서 그냥 엔터를 쳐서 줄을 바꾸면 줄이 안바뀌고 그냥 한줄로 쭉 나오게 된다. 이 때 <br>태그를 줄바꾸고 싶은 위치에 넣어서 바로 줄을 바꿀 수 있게된다.

<sup></sup>윗첨자 태그 : 2의 제곱 같이 기본택스트보다 약간 위에 택스트가 들어갈때 사용하는애
<sub></sub>아래첨자 태그 : 화학식을 쓸때처럼 글자가 약간 아래에 들어갈 떄 사용하는 애

<h2><sup>1</sup>/<sub>2</sub></h2> // 이렇게 설정해주면 좀 더 분수처럼 위아래로 작성 가능 //

# 엔티티코드(entities)

html 대신 쓸 수 있는 특별한 코드 또는 시퀀스. 이걸 사용하면 다른 글자가 그려진다.
저작권기호, 다이아몬드, 십자가, 화살표 등 타자로 치기 힘든 문자들을 만들 수 있다.
html에는 reserved characters 들이 있는데, 얘네들을 그냥 쓰게되면 화면에는 표현될 지 몰라도 IDE에는 오류가 발생하는 식으로 잘 작동하지 않을 수 있다. 이때는 엔티티코드를 찾아서 사용하면됨
예를들어, 부등호표시는 이미 reserved된 문자열이라고 할 수 있다. 부등호 표시를 텍스트로 쓰는 대신, [1 < 6] 이렇게 표시해주면 됨.

#시맨틱 마크업

semantic : relating to meaning. "What purpose or role does that HTML element have?" 의미와 관련된 것. 시맨틱마크업은 의미 있는 마크업을 뜻하거나 또는 그 요소의 내용의 의미에 관련된 마크업이다.
html을 구성할때 우리는 <div>만을 사용해서 모든 페이지를 구성하고 디자인하는게 가능하다. 하지만 여기서 짜여진 코드를 보면 각각의 코드들이 무슨 역할을 하는지 알 수는 없다.
header / footer(꼬릿말) / section / main / nav /article 등 여러가지 태그들이 있는데 얘들의 역할은 <div>태그와 일치한다. 하지만 각자 의미를 가지고 있다.
마크업에 의미를 부여하는건 중요하다. 부여된 의미는 다른 컴퓨터나 구글 크롤러 프로그램에서 의미가 있다.
구글의 크롤러는 짜여진 코드를 바탕으로 링크를 검색해서 그것들을 수집한 후 그 페이지를 방문하고 그 과정을 계속 반복하는 전략을 쓴다. 그래서 <div>만으로 구성된 코드를 볼 때는 각각의 태그가 어떤 역할을 하는지 정확하게 알 수 없게된다. 하지만 마크업을 정확하게 해놨다면, 코드만 보고도 어떤 역할을 하는지 찾을 수 있다.
크롤러가 코드를 더 쉽게 알아보고 다른 어플리케이션 또는 코드와 더 잘 융합되기 위해서 중요하고, 두번째는 스크린 리더기를 쓰는 사람들이 더 쉽게 접근할 수 있도록 하는게 중요하다.
스크린리더기는 header, footer, section 등을 찾아서 그걸 hook으로 사용한다. 이 요소들은 표지판 같은 것들로 아주 중요하다.
우리가 만든 코드나 마크업이 더 쉽게 읽힐 수 있게 되기 때문에도 중요! 꼬릿말 요소를 업데이트 해야하는데 <footer>로 짜여진 코드라면 바로 찾아서 수정하기 더 쉬워질 것이다!

#시맨틱 요소 사용법

Instead of Divs, Use more specific elements.
<main> : 문서의 주요내용을 나타냄. 페이지의 주요 내용을 표시하고 페이지에서 전반에서 계속 반복되는 내용은 전부 제외하는게 원칙이다. side bar / logo / navigation links/ copyright information/ search form 같은 애들은 포함되지 않는다.
<nav> : 페이지에서 내비게이션 링크르 제공하는 것들을 나타낸다. 한 페이지에서 다른 부분으로 이동하는 링크나 전혀 다른 링크로 이동하는 것이 내비게이션 링크
<section> : 제네릭한 요소 . 웹사이트나 애플리케이션의 독립적인 부분을 나타낼 뿐, 딱히 다른 기능은 없다. <div>는 컨테이너같은 요소라서 어떤걸 만들던지 아무곳에나 다 사용될 수 있다. 하지만 section은 내용의 한부분, 웹사이트의 독립적인 부분이어야 한다. <section> element represents a standalone section - which doesn't have a more specific semantic element to represent it .
예를들어, <nav> 대신 <section>을 사용할 수는 있다. 하지만 nav가 훨씬 구체적이고 의미가 있기때문에 더 나은 사용이다.
<article> : 문서내에서 독립적인 구성을 나타낸다. 그냥 독립적인 구성이라면 article을 사용할 수 있다. 독립적으로 나눌 수 있거나 다시 사용될 수 있는 것이면 다 된다. 날씨 위젯같은것도 article로 묶을 수 있다.
<aside> : 얘는 엄밀히 말하자면 문서의 일부는 아니다. 간접적으로 연결되는 요소라고 할 수 있다. 사이즈바, 말풍선 등이 해당됨.
<header>/ <footer> : 머리말과 꼬릿말. 페이지당 꼭 하나만 있어야 하는 애들은 아니고 만약에 <article>을 구성한다면 그 안에서도 얘네드를 각각 정해줄 수 있다.
<time> : 특정한 시간을 나타내는 요소. datetime 이라는 attribute를 사용해야한다. <time datetime = "2022-06-06" ></time>이렇게 감싸주면 됨
<figure> : 일러스트나 다이어그램처럼 이미지와 함께 밑에 설명같은 글이 달릴 때 사용한다.

#HTML 테이블 개요

tables are structured sets of data, made up of rows and columns. They can be a great way of displaying data clearly.
<td> stands for table data cell element. 데이터를 포함한 표 안에 있는 단일 셀을 정의한다. <td>안에 데이터를 넣으면 셀을 하나씩 차지하는 개념
<tr> table rows(horizentally from left to right) <td>만 만들게 되면 그냥 일자로 쭉 셀이 만들어지게 된다. 자동적으로 <tr>이 생성되서 한 줄에 모두 넣어지는 형식으로 만들어진다. 그래서 <tr>을 만들어서 행을 정해줘야 한다.
<th> table header : <th> element defines a cell as header of a group of table cells. 셀 안에 헤더를 넣어준다. 만약 열이 세개 있어야 한다면 헤더도 세개가 있어야 한다. <tr>을 하나 만들어서 그 안에 <th>로 원하는 헤더를 만들어주면 된다.
헤더가 들어간 <tr>은 <thead>로 묶어준다. <thead>안에는 여러줄이 들어갈 수도 있다.
나머지 내용부분에 해당하는 곳은 <tbody>로 묶어준다.
이렇게 분류를 해줘야 나중에 표가 복잡해지는 경우에 접근성이 좋아질 수 있다.

#테이블 : Colspan & Rowspan

여러 열이나 행에 걸친 셀을 생성하는 방법
표중에서는 헤더가 여러줄로 생성되고 하부헤더가 있는경우가 있다. 이런 경우의 표를 만들때 colspan / rowspan을 사용한다.
colspan은 옆으로 셀이 합쳐지고 rowspan은 아래로 셀이 합쳐진다.
<th>를 두 줄의 <tr>로 나눠준다. 그리고 맨 위에 들어가는 헤더에 attribute를 넣어준다.

<thead>
    <tr>
        <th rowspan="2">animal</th>
        <th colspan="2">average mess</th>
        <th rowspan="2">flighted</th>
    </tr>
    <tr>
        <th>kg</th>
        <th>found</th>
    </tr>
</thead>

아래 이미지같은 느낌으로 셀을 나눠줄 수 있다.

#폼(form)요소

The <form> element itself is a shell or container that doesn't have any visual impact. we then fill the form with a collection of inputs, checkboxes, buttons, etc. 여러가지 개별 폼 컨트롤을 품는 껍데기나 컨테이너에 가깝다.
The form element "represents a document section containing interactive controls for submitting information"
폼은 컨테이너라고 생각하면, 작은 배송라벨을 붙여 어떤 지정된 목적지로 함께 제출할 수 있는 것
the action attribute specifies WHERE the form data should be sent 폼이 제출되었을 떄 데이터를 보낼 위치와 시간은 이 속성이 지정한다.
form 자체가 컨테이너고, action 부분이 라벨이라고 생각하면 됨. URL을 보낼 위치를 설정하는 것.
폼을 제출하면 모든 데이터는 HTTP요청을 통해 함께 전송된다. 그리고 action이라는 속성을 사용해 해당 요청이 어디로 가는지 제어한다.
The method attribute specifies which HTTP method should be used. get/ post를 밸류로 가짐.
<input>태그와 연결

#일반적인 입력형식

<input> element is used to create a variety of different form controls.
we have 20+ possible types of inputs, ranging from date pickers to checkboxes.
the [type] attribute is where the amgic happens. Changing type dramatially alters the input's behavior and appearance.
클로징태그가 없는 싱글태그다. 그냥 input만 넣으면 됨. 여기서 가장 중요한건 type .
아래 페이지에 들어가면 <input>태그에 관련된 element들을 볼 수 있다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element

developer.mozilla.org

모든 element에 사용할 수 있는건 아니지만, placeholder라는 attriubute가 있다. 중요하게 쓰이는 건데, 예를들어 password type을 만들었다면 사용자가 비밀번호를 입력하기 전에 "password"라고 떠 있도록 할 수 있다. 사용자에게 무엇을 입력해야하는지 알려줄 수 있기 때문 .

<input type="password" placeholder="enter your password">

# 가장 중요한 레이블

<label>은 접근성과 폼을 쓰기 편하게 해준다는 점에서 중요함.
웹페이지를 만들때 꼭 label을 정확하게 설정한 form을 만들어야 한다.
아래처럼 체크박스와 택스트가 있는데 <label>을 붙이지 않으면, 스크린리더기는 어떤 체크박스가 어떤 택스트와 연결되는지 알 수가 없다.
<label>은 실제로 특정한 입력값이나 form control 및 텍스트와 직접적으로 연결되어 있다.
이 태그를 사용하면 스크린리더기를 사용하는 사람의 사용성은 더 좋아질 것이다. 그리고 체크박스를 클릭하지 않고 텍스트를 클릭해도 체크박스에 체크표시를 했다, 안했다 기능을 만들어 줄 수 있다. 시력이 안좋아서 체크박스를 정확히 클릭하기 힘든 사람들한테 유용하게 쓰일 수 있을 것!

<label>을 사용하면 attribute로 "for"을 사용한다. 이 레이블이 뭘 정의하는건지 뭘 위한건지 보여주는 요소

<label for="peas">Do you like cheese?</label>

<label>을 달아서 연결하기 위해서는 <input>에 먼저 id 값을 줘야된다. 하나의 id는 한 페이지에 한번만 나와야한다. 두세번 쓰일 수 없음

<label for="username">Enter a Username : </label>
<input id="username" type="password" placeholder="enter your password">

이렇게 id 값을 설정하고 for = ""에 넣어주면 둘은 연결된다. 연결됬다는 걸 알 수 있는건 [Enter a username]을 클릭하면 <input>박스가 파란색으로 표시되는걸 볼 수있다.
<label>태그안에 <input>박스를 중첩해서 넣게되면 굳이 id 값을 주지 않아도 둘을 묶을 수 있다. 하지만 중첩하지 않고 쓰는게 더 표준 스타일임.

   <label>
      Enter your color : 
      <input type="color">
    </label>

#HTML 버튼

<button>태그를 이용해 버튼을 생성할 수 있음.
우리는 지금 여태까지 <form action = "" ></form>안에서 <input>이나 <label>등을 만들었다. <button>도 이 안에서 만들고 클릭하게 되면 action 파트에 설정해 놓은 곳으로 이동하게 된다. (action은 데이터를 전송할 시간과 위치를 정하는 거니까!) form 안에 버튼을 만들면 기본적으로 form을 제출하게 된다.
만약에 버튼을 눌러도 아무것도 제출하지 않도록 만들고 싶다면, type = "button"으로 설정해주면 버튼은 정말 버튼의 기능만 하게 된다. (폼을 제출하지 않는다. )
<form>안에서 button의 기본적인 type은 "submit"으로 지정되어있기 때문.

<button type = "button">DO NOT SUNMIT!</button>

form을 제출하는 버튼을 만드는 방법은 한 가지가 더 있다.
<input>칸에서 type을 submit으로 설정하는 것. 안에 텍스트를 바꾸고 싶으면 value값을 설정해주면 된다.

<input type="submit" value="click me">

# 이름속성

<input>태그에 name이라는 attribute를 달아줄 수 있다.
데이터를 전송할 때 form의 이름으로 레이블링되는 것. 모든 <input>에 name을 넣어줘야 한다.

#구글과 레딧 검색하기

form의 속성 중 action을 잘 이용하면 무언가 검색했을때, 결과를 구글이나 레딧에서 찾아줄 수 있도록 만들 수 있다.
form이 제출될 때 해당값을 전송하는 입력값의 검색쿼리에 대해 정확한 이름을 사용하면 됨.

 <form action="https://www.reddit.com/search">
    <input type="text" name = "q">
    <button>Search Reddit</button>

  </form>

<form>을 만든 뒤에 해당 정보를 받을 수 있는 URL을 action에 넣어준다.
<input>태그에 이름을 달아준다. 내가 input박스에서 무언가 검색했을 때, 레딧으로 가서 검색이 되려면 reddit 사이트가 검색을 하면 어떤 URL로 가는지 부터 봐줘야 한다. dog를 검색하면 <https://www.reddit.com/search/?q=dog>로 레딧은 받고 있기 때문에 name을 q로 설정해준다. 실제 reddit 서버가 받는 형식과 정확하게 매치가 되야 이 부분이 작동할 수 있다.
이 부분은 구글에서도 똑같이 작동하도록 만들 수 있다. 구글에 pizza를 검색해보자. 실제 나오는 URL은 엄청나게 길다. 여기서 pizza가 나오는 부분까지 짤라서 쓰면 된다.

  <form action="https://www.google.com/search">
    <input type="text" name = "q">
    <button>Search google</button>
  </form>

검색을 했을때 정해지는 search term은 전적으로 그 사이트를 개발한 개발자한테 달려 있다. 유투브를 본다면, <https://www.youtube.com/results?search_query=dog> dog를 검색했을때, query= dog로 들어가는걸 볼 수 있다. 이 부분은 뭐든지 가능하니까 그걸 따라가기만 하면 됨.
youtube는 검색했을 때 search_query로 받게 된다. 이 부분만 따라서 이름에 넣어주면 됨 .

 <form action="https://www.youtube.com/results">
    <input type="text" name="search_query">
    <button>Youtube</button>
  </form>

여기서 <button>을 만들지 않는다면? 그냥 엔터만 쳐서 form을 submit 할 수 있다.

#라디오 버튼, 체크박스와 선택창

checkbox : 체크박스의 경우 label처리를 꼭 잘해줘야한다. 안그러면 나중에 어떤게 어떤 체크박스와 연결되는지 정말 헷갈리게 됨.
체크박스는 체크된 상태로 시작하게 할 수도 있다.
<input>박스에 id 값을 주고 label과 연결해주는게 중요! 특히 모바일 환경에서는 화면도 작고 체크박스도 작기때문에 label되어있는게 중요하다.
label의 위치는 앞이든 뒤든 상관 없음.

<input type="checkbox" name="agree_tos" id = "agree" checked> // checked 써주면 체크된 상태로 시작
<label for="agree">I agree to everything</label>

이 밑에 <button>을 만들어준 다음, 체크박스에 표시를 하고 버튼을 눌러주면, <http://127.0.0.1:5500/birds?agree_tos=on> URL 에서 agree_tos(name) = on 으로 변하는걸 볼 수 있다. 체크박스를 체크하지 않으면 on은 뜨지 않는다.

radio : 여러가지 선택지 중에 하나만 선택가능한 버튼. 체크박스는 여러개 있을 때, 여러개를 다 선택할 수 있지만 radio 버튼은 하나만 선택 가능하다.
한 코드당 하나의 동그라미를 만들어주는데, 여러개를 만들 경우 그룹으로 묶어서 서로 연관되어 있음을 인식해줘야 한다. 이 때, 같은 name을 부여해서 그룹화 해준다. label처리는 각각 해줘야 한다.
하지만 여기서 label만 달아주면, 사용자가 form을 제출했을 때, 어떤 선택지를 선택했는지는 알수가 없다. 이때 value 값을 정해줘야 한다. value 값으로 정해준 것은 사용자에게는 노출되지 않는 요소다. 하지만 form이 제출되면 value 값이 전송된다. value 값은 각각 다르게 정해져야 한다.

<form action="/birds">
      <input type="checkbox" name="agree_tos" id = "agree">
      <label for="agree">I agree to everything</label>
     
   
    <p>
      <label for="xs">xs</label>
      <input type="radio" name ="size" id ="xs" value="xs">
      <label for="s">s</label>
      <input type="radio" name ="size" id ="s" value="s">
      <label for="m">m</label>
      <input type="radio" name ="size" id ="m" value="m">
    </p>
    <button>submit</button>
  </form>

이렇게 코드를 작성 한뒤, <button>을 눌러주면 <http://127.0.0.1:5500/birds?agree_tos=on&size=xs>로 URL이 나오는걸 볼 수 있는데, 여기서 'check박스 부분 체크되어있음/ size는 xs로 선택되었음'을 볼 수 있다.

select : 드롭다운 메뉴. 사실상 <select>와 <option> element가 함께 움직이는 거라고 생각하면 된다.
<select>는 상위요소다. 여러 <option>을 한 그룹으로 묶는다.
<select>에도 id 값을 줘야 label 과 묶을 수 있다.
보통 selct에서는 첫번째 옵션을 더미, placeholder로 처리해서 선택해야 한다는걸 알려줄 수도 있다.

 <p>
      <label for="meal">choose your meal</label>
      	<select name="meal" id="meal">
         <option value="">--please choose your option--</option>
            <option value="fish">Fish</option>
            <option value="stake">Stake</option>
            <option value="egg" selected>egg</option> //selected 넣어놓으면 미리 선택되어 있음
     	</select>
    </p>

#범위 및 텍스트 영역

range : 바를 움직여서 1-10 이런식으로 숫자를 선택하는 바
minimum과 maximum을 지정할 수 있고 step을 설정해서 몇 개씩 움직이도록 하는 방법이 있다. value값을 설정하면 항상 시작하는 값을 설정할 수도 있다.

 <label for="cheese">amount of cheese</label>
<input type="range" name="cheese_level" id="cheese" value = "6" min = "0" max = "10" step = "2">

number : 숫자를 설정할 수 있는 칸.

<label for="number">enter your number</label>
    <input type="number" id = "number" min = "1" max="100" step="2">

textarea : 웹사이트에서 기본적으로 여러줄의 텍스트를 입력할 수 있는 창. 얘는 input은 아니다. 오프닝, 클로징 태그가 다 필요한 <textarea>태그다.

 <label for="requests">Any special request?</label>
      <br>
<textarea name="request" id="requests" cols="30" rows="10" placeholder="type soemthing"></textarea>

#HTML 5 form의 유효성 검사

form과 관련하여 중요한 또 한가지는 유효성을 검사하는 것이다. (validation)
주로 제한적인 요소를 넣거나 사용자 입력 또는 데이터의 유효성을 확인하는 것. 예를들어, 어떤 부분은 절대로 비워지면 안된다던가, 비밀번호는 꼭 7-12자리안에 들어가야된다는 내용.
예전에는 모든 내용을 다 작성하고 submit되면 그때 서버단에서 유효성을 확인하는 경우가 더 많았지만 요새는 javascript를 이용해서 사용자가 입력을하면 바로 브라우저에서 유효성을 판단해서 띄워주는 경우가 더 많다. (built-in validaiton)
[required]라는 attribute를 어떤 input에나 넣어주면 필수입력요소로 설정해 줄 수 있다. required를 넣었다면, 아무것도 입력하지 않은 칸이라면 입력을 하라는 경고창이 뜬다.

   <label for="first">Enter your first name!</label>
   <input type="text" name="first" id="first" required >

minlength / maxlngth 를 이용해서 최소 글자수와 최대 글자수도 설정할 수 있다. 얘는 날짜, 월, 주, 시간이나 범위나 숫자입력에 쓰인다. 이때는 min/max가 중요하게 사용된다.

 <label for="password">Enter your password!</label>
 <input type="password" name="password" id="password" required minlength="5" maxlength="20">

<input type = "email">이나 <input type = "url">이렇게 이미 패턴이 매칭되어있는 경우도 있다.