[HTML]0912 수업 2일차(table,form,label.input,select - option,optgroup)

 

HTML로 표 만들기

 

table(table) 태그는 표를 만들기 위한 태그이다.

• 스스로 닫는 태그 x
• 데이터를 담고 시각화하기 위한 목적으로만 사용하여야 하며, 사이트의 레이아웃이나 디자인 목적으로 사용하여서는 안 된다.

 

 

 

thead(table head) 태그는 테이블의 데이터에 대한 열(column)을 가지기 위해 사용한다.

• 스스로 닫느 태그 x
• 실질적인 데이터를 담지 않는 것이 좋다.
• table 태그의 자식이어야 하며 한 게 이하만 사용되어야 한다.

 

 

 

tbody(table body)태그는 테이블의 실질적인 데이터를 담기위해 사용한다.

• 스스로 닫는 태그 x
• table태그의 자식이어야 햐며 한 개 이하만 사용되어야 한다.

 

 

tfoot(table foot)태그는 테이블이 가지고 있는 데이터의 통계나 정리, 필터링을 목적으로 사용하는 경우가 많다.

스스로 닫는 태그x

table태그의 자식이어야 하며 한 개 이하만 사용되어야 한다.

 

 

tr(table row)태그는 행 하나를 정의하기 위해 사용한다.

• 스스로 닫는 태그x
• 데이터를 직접 가질 수 없다.
• thead,tbody,tfoot의 자식이어야 한다.

 

td(table data cel) 태그는 셀(칸)을 정의하는데 사용한다.

• 스스로 닫는 태그x
• 실제 데이터를 담는 목적으로 사용한다.
• tr태그의 자식이어야 한다

- 속성(셀병합이라고 생각하면 됨)

• colspan:차지할 열(가로)방향으로의 칸 개수를 지정한다. 개수에는 속성이 부여되는 칸도 포함된다. 즉, 값이 1이라면 확장하지 않음.

ㄴ 가로 방향으로 셀병합을 하고 싶다면 <td colspan = "2"></td>

 

• rowspan:차지할 행(세로)방향으로의 칸 개수를 지정한다. 개수에는 속성이 부여되는 칸도 포함된다. 즉,값이 1이라면 확장하지 않음

ㄴ 세로 방향으로 셀병합을 하고 싶다면 <td rowspan = "2"></td>

 

 

th(table heading cell)태그는 셀(칸)을 정의하는데 사용한다. 스스로 닫는 태그x열이나 행을 대표하는 이름이나 설명을 담기 위해 사용하며, 실제 데이터를 담아서는 안 된다.

 

- 속성(셀병합이라고 생각하면 됨)

• colspan:차지할 열(가로)방향으로의 칸 개수를 지정한다. 개수에는 속성이 부여되는 칸도 포함된다. 즉, 값이 1이라면 확장하지 않음.

ㄴ 세로 방향으로 셀병합을 하고 싶다면 <td colspan = "2"></td>

 

• rowspan:차지할 행(세로)방향으로의 칸 개수를 지정한다. 개수에는 속성이 부여되는 칸도 포함된다. 즉,값이 1이라면 확장하지 않음

ㄴ 가로 방향으로 셀병합을 하고 싶다면 <td rowspan = "2"></td>

• scope:어느 방향의 데이터에 대한 대표 값인지에 대 한 설정  
  
  • ㄴ col 열대표(가로방향) 
  • ㄴ row 행대표(세로방향)

 

| 순위  | 도시 | 인구(명)  |
| ----- | --   | --------- |
| **1** | 서울 | 9,500,000 |
| **2** | 부산 | 3,400,000 |
| **3** | 인천 | 2,900,000 |

 

thead에 th는  col 라고 생각하기

 

 

순위,도시,인구(명)은 가로로 

<th scope ="col">

 

 

<표 만들기 실습>

<table border="1">
    <thead>
    <tr>
      <th scope = "col" colspan = "2">구분</th>
      <th scope = "col">이름</th>
      <th scope = "col">질량<br>(10<sup>24</sup>KG)</th>
      <th scope = "col">지름<br>(km)</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <th scope = "row" rowspan = "4" colspan = "2" >지구형 행성</th>
        <td>수성</td>
        <td>0.33</td>
        <td>4879</td>
    </tr>
    <tr>
        <td>금성</td>
        <td>4.87</td>
        <td>12104</td>
    </tr>
    <tr>
        <td>지구</td>
        <td>5.97</td>
        <td>12756</td>
    </tr>
    <tr>
        <td>화성</td>
        <td>0.642</td>
        <td>6792</td>
    </tr>
   <tr>
       <th scope = "row" rowspan="4">목성형 행성 </th>
       <td rowspan="2"> 가스형</td>
       <td> 목성</td>
       <td> 0.642</td>
       <td> 6792</td>
   </tr>
    <tr>
        <td> 토성</td>
        <td> 568</td>
        <td> 120536</td>
    </tr>
    <tr>
        <td rowspan="2"> 얼음형</td>
        <td> 천왕성</td>
        <td> 86.8</td>
        <td> 51118</td>
    </tr>
    <tr>
        <td> 해왕성</td>
        <td> 102</td>
        <td> 49528</td>
    </tr>
    <tr>
        <th scope = "row" colspan="2">왜소행성</th>
        <td>명왕성</td>
        <td>0.0146</td>
        <td>2370</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
     <th scope = "row" colspan="3">평균</th>
     <td>296.2918</td>
     <td>44785.55</td>
    </tr>
    </tfoot>

</table>

 

 

 

※ 실습을 통해 알게 된 것

- 그냥 줄을 바꿀 때는 br 태그 사용 가능

---

 

중요 태그

 

 

form (form)태그는 서버로 전송하고자 하는 사용자 입력 값을 받은 입력 태그들(input, select, textarea 태그 등) 을 자식 혹은 자손으로 가지기 위한 태그이다.

• 스스로 닫는 태그x 
• 하나의 양식 태그(form)는 서로 유관한 입력 태그들만 가지는 것이 좋다. ( 아이디를 찾는 폼과 비밀번호 지정 폼은 서로 다르다)\
• 양식 태그(form)는 서로 선조, 부모,자식,자손 관계를 형성하여서는 안 된다.(= 태그를 겹쳐서 중첩사용 안된다)

 - form 태그의 속성들  

• enctype: 데이터를 전송할 때 인코딩할 방식을 지정한다
  • application/x-www-form-unlencoded: 문자열 데이터를 ulr 인코딩 방식으로 인코딩하여 전송한다. 별도의 명시가 없다면 기본값
  • multipart/form/data : 전송하는 데이터를 여러 조각으로 나누어 전송한다. 주로 첨부 파일 업로드와 같이 큰 데이터를 전송할 대 사용한다.
  • text/plain : 문자열 데이터를 그대로 전송하되 공백만 + 기호로 치환한다.

 

• method :요청을 전송할 방식을 지정한다.
  • get ( 입력값이 나 공개되어서 보안성 취약 -> 로그인 같은 아이디, 비번 개인정보가 보여서 사용 x)
  • post( 첨부파일 등 큰 크기 가능) 로그인 할 때 사용 
•  name : 양식 태그의 이름을 지정한다(자바스크립트에서 document.forms 멤버의 키 값으로 접근 가능)

 

• novalidate: 양식 태그의 제출(submit) 이벤트가 발생하였을 때 이가 가지고 있는 입력 태그들이 가지고 있는 요구사항을 무시하게 한다. 속성값을 가지지 않음.

---

 

label (label) 태그는 입력 태그(form)와 관련해 이에 대한 설명을 작성하고 연결시키기 위해 사용한다.사용자 입력 요소(input, textarea, select 등)와 텍스트를 연결하는 역할

• 스스로 닫는 태그x
• label 태그는 연결된 입력 태그에 대한 설명을 문자열로 가지며, 스크린 리더가 연결된 태그에 대한 설명으로 해당 사용을 사용한다.
• 특별한 경우가 아니라면 입력 태그를 하나만 가지도록 작성하여야 한다.
• label 태그 사용 방법은 아래와 같다
  1. label 태그가 직접 입력 태그를 자식 혹은 자손으로 가지게 하는 방법
  2. label  태그의 for 속성 값을 입력 태그가 가지는 id 속성 값과 일치시키는 방법

 

1.

<label>

<span>이메일</span>
<input name ="email" type ="email">

</label>

<label>

<span>이메일</span>
<input name ="email" type ="email">

</label>

라벨 안에는 한개의 인풋만 사용 하여야 함.

 

2.

<label for ="email>이메일</label>
<input id = "email" name = "email" type ="email">

id 속성 값은 하나의 HTML 문서 내에서 고유해야 함으로 각별히 유의한다

 

 

input (input) 태그는 사용자로부터 입력값을 받기 위해 사용하는 입력태그이다.

• 스스로 닫는 태그 ㅇ

ㄴ 속성 

• name :  값을 서버로 전송할 때 사용할 식별자이다.
• value: 해당 입력 태그의 (초기) 값을 지정한다
• type : 해당 입력 태그의 종류를 지정한다.
  • text : 별다륵 특성이 없는 일반 텍스트
  • checkbox : 논리값(참,거짓)
  • button : 별 다른 특성이 없는 일반 버튼. 표시할 텍스트는 value 속성 값으로 지정한다.
  • color : 색상, 값은 hex 컬러인 문자열로 전송된다.
  • data : 날짜
  • datetime-local : 날짜와 시간
  • time : 시간
  • email : 이메일
  • file : 파일
    • 파일을 속성을 사용할 려면 enctype 속성 값을 multipart/form-data로 설정한다
    • 양식 태그의 method 속성 값을 post로 설정한다.
  • hidden : 숨겨진 입력 태그를 위해 사용한다. 주로, 서버로 전송은 되어야 하나 사용자가 직접 입력하는 값이 아닌 (보안상의 이유로 대조되는 값 등) 것들을 포함하기 위해 사용한다
  • number : 숫자
  • password : 비밀번호(마스킹 되는 텍스트)
  • radio : 여러 선택지 중 하나를 선택할 수 있게 하기 위해 사용한다. name속성 값이 같은 radio 중 하나만 선택 할 수 있다.( 여러 개 값 중에 하나를 선택하기 위해서는 name으로 선택지들을 하나의 분류로 만들어야 함 - > 과일 자동차 등 .)  
  • range : 범위 내의 숫자를 선택하기 위해 사용하는 막대이다.
  • reset : 속해있는 양식 태그가 가지고 있는 입력 태그들의 값을 초기화 하는 버튼. 표시할 텍스트는 value 속성 값으로 지정한다.
  • search : 검색 키워드를 입력받기 위해 사용한다.
  • submit : 속해있는 양식 태그를 제출하기 위한 버튼, 표시할 텍스트는 value 값으로 지정한다.
  • tel : 연락처.
• accep : type 속성 값이 file 일때 파일 선택 창에서 기본적으로 선택하게 할 파일의 형식을 지정한다. 별도로 지정하지 않으면 모든 파일을 선택할 수 있게 한다. 속성 값 지정 방ㅂ버은 아래와 같다.
  • .확장자 ( 가령 jpg 등)
  • MIME ( 가령 image/jpg 등)
  • MIME타입의 서브타입은 와일드카드를 허용한다. ( 가령 image /* 등 )
  • 위와 같은 형식을 콤마(,)로 구분해 여러 개 작성 할 수 있다.( 가령 jpg,jpeg,png,gif )
• multiple : type 속성 값이  file 일 때 파일 여러개를 선택 할 수 있게 한다. 속성 값을 가지지 않음.
• autofocus : 페이지가 로드되었을 때 해당 입력 태그에 자동으로 포커스를 줄 것인가에 대한 속성, 속성 값을 가지지 않음.(창을 켰을 때 자동으로 커서가 이동됨 ) <input autofocus type = " text">
• checked :type 속성 값이  checkbox 이거나 radio일때, 체크된 상태로 설정할 것이가에 대한 속성. 속성 값을 가지지 않음. < input checked name = "food" type = "radio">바나나 창을 열자마자 바나나가 체크되어 있는 상태로 나타남.
• disabled : 비활성화 할 것이가에 대한 속성 , 속성 값을 가지지 않음. (타입 상관 없음) <input disabled name = "food" type = "radio">바나나
• max : type 속성 값이  number, range 등 숫자와 관련이 있을 때 가질 수 있는 최댓값
• min : type 속성 값이 number, range 등 숫자와 관련이 있을 때 가질 수 있는 최솟값
• step : type 속성 값이 number, range 등 숫자와 관련이 있을 대 변화하는 단위를 설정한다. (한 번에 증가하는 값을 의미)
• maxlength : 문자열의 최대길이
• minlength : 문자열의 최소길이
• required : 필수 필드이며 값이 비어있을 수 없음을 의미한다. 속성 값을 가지지 않음.
• placholder : 값이 비어있을 때 보여줄 텍스트를 지정한다.
• readonly : 읽기 전용으로 지정하기 위해 사용한다. 속성값을 가지지 않음.(수정 불가능 disabled  랑 비슷하지만 disabled는 완전히 커서도 안 가져다지게 끄는거임)
• spellcheck : 브라우저에 내장되어있는 철자 확인 기능을 사용할 것인가에 대한 설정.
  • defult : 기본값으로,  브라우저에 설정에 따름
  • true : 사용
  • false : 미사용

<input type = "radio" name = "바나나"> 바나나
<input type = "radio" name = "바나나"> 사과
<input type = "radio" name = "바나나"> 배

하나의네임( 카레고리)로 묶여야 radio 하나만 선택이 가능

 

 

select (select) 태그는 드롭다운(drop down) 방식 혹은 리스트(list) 방식의 항목 선택을 위한 입력 태그이다.

• 스스로 닫는 태그 
• select 태그는 직접 값을 가지지 않으며, 자식  혹은 자손으로 값을 가지는 option 태그를 가진다
• 속성
  
  • name : 값을 서버로 전송할 때 사용할 식별자이다.
  • autofocus : 페이지가 로드되었을 때 해당 입력 태그에 자동으로 포커스를 줄 것인가에 대한 속성, 속성 값을 가지지 않음
  • disabled : 비활성화 할 것 인가에 대한 속성, 속성 값을 가지지 않음.
  • multiple : 여러개의 옵션을 선택할 수 있게 한다. 드롭 다운 형식에서 리스트 형식으로 변하게 된다. 속성 값을 가지지 않음.
  • required : 필수 필드이며 값이 비어있을 수 없음을 의미한다. 속성 값을 가지지 않음. 

option (option) 태그는 select 태그가 가지는 실질적인 값을 가지는 항목 태그이다.

• 스스로 닫는 태그 x
• 속성
  
  • disabled : 해당 선택지를 비활성화한다. 속성 값을 가지지 않음
  • hidden : 해당 선택지를 숨긴다. 속성 값을 가지지 않음.
  • selected : 해당 선택지를 초기에 선택된 상태로 지정한다. 속성 값을 가지지 않음.
  • value : 실질적으로 서버에 전송될 값을 지정한다. 생략할 경우 해당 선택지가가지고 있는 내용으로 대체된다.

optgroup (optgrouup) 태그는 서로 유관한 option 태그들을 묶어내기 위해 사용한다. 반드시 라벨 속성을 가져야 함

• 스스로 닫는 태그 x
• 하나 이상의 option 태그가 서로 관련이 있음을 알리지만,  선택이 불가한 항목이고, 시각적 외의 특별한 기능을 가지지 않는다
• select 태그의 자식이어야하고, option 태그를 자식으로 가져야 한다. 
• 속성
  • label : 표시할 텍스트를 지정한다.
  • disabled : 해당 태그를 비활성화한다. 단, 이가 가지고 있는  option 태그들도 함께 비활성화 된다. 속성 값을 가지지 않음.

 <select>
        <optgroup label="그룹명1">
            <option>옵션1</option>
            <option>옵션2</option>
        </optgroup>
        <optgroup label="그룹명2">
            <option>옵션3</option>
            <option>옵션4</option>
        </optgroup>
    </select>

 

 

---

 

회원가입 폼 실습 결과물

 

이게 라벨 사용법 1번
<form>
 <h1>회원가입</h1>
  <table border="1">
  <tbody>
    <tr>
        <th>이메일</th>
        <td>
            <label>
                <input required type = "email" maxlength="50" minlength="5" name="email" placeholder="이메일 형식을 입력해 주세요." >
            </label>
        </td>
    </tr>
    <tr>
      <th rowspan="2">비밀번호</th>

        <td>
           <label>
               <input required type = "password" maxlength="50" minlength="5" name="password" placeholder="비밀번호를 입력해 주세요." >
            </label>
         </td>
    </tr>
    <tr>
        <td>
          <label><input required type = "password" maxlength="50" minlength="5" name="passwordcheck"  placeholder="비밀번호를 한 번 더 입력해 주세요." >
           <br>
           (알파벳 대소문자, 숫자 ,특수 기호 5~50자)
          </label>
        </td>
    </tr>
    <tr>
       <th>닉네임</th>
        <td>
            <label><input required type ="text" minlength="1" maxlength="10" name = "nickname" placeholder="닉네임을 입력해 주세요">
             <br>
             (알파벳 대소문자, 숫자 ,완성 한글 1~10자)
            </label>
        </td>
    </tr>
    <tr>
      <th>생년월일</th>
       <td>
        <label>
            <input required type="date" name = "birth">
        </label>
        </td>
    </tr>
    <tr>
     <th>성별</th>
        <td>
            <label>
                <select name ="gender" required>
                        <option selected disabled hidden>성별</option>
                        <option>남자</option>
                        <option>여자</option>
                </select>
            </label>
        </td>
    </tr>
  </tbody>
  </table>
    <br>
    <label>
        <input type="checkbox" name = "agreeService">
    </label>
    <strong>
        <a href = "#">서비스 약관</a>을 읽어보았고 이해하였으며 동의합니다
    </strong>
    <br>
    <label>
        <input type="checkbox" name = "agreePrivacy">
    </label>
    <strong>
        <a href = "#">개인정보 처리방침</a>을 읽어보았고 이해하였으며 동의합니다
    </strong>
   <br>
   <br>
    <input type = "reset" value="다시 입력하기">
    <input type = "submit" value="회원가입">
</form>

 

성별을 체크하는 박스에 성별, 남자, 여자 항목을 표시하고 싶음. 하지만 성별에 체크는 안가게 하고 싶음

-> disabled, hidden, selected 속성 사용

다 만들진 않았지만 이게 2번 label for = "email" 
input id ="email" 로  묶어주기
<form>
    <h1>회원가입을 해보세요</h1>
    <table border="1">
        <tr>
            <th><label for ="email">이메일</label></th>
            <td>
                <input id ="email" type="email" name = "email" required minlength="1" maxlength="50" placeholder="이메일 형식을 입력해 주세요">
            </td>
        </tr>
        <tr>
           <th><label for ="password">비밀번호</label></th>
            <td>
                <input id = "password" required minlength="5" maxlength="50" placeholder="비밀번호를 입력해 주세요">
                <input required minlength="5" maxlength="50" name = "passwordcheck" placeholder="비밀번호를 입력해 주세요">
                <br>
                (알파벳 대소문자, 숫자, 특수 기호 5~50자)
            </td>
        </tr>
    </table>
</form>

 

 

 

 

※  실습 중 느낀 것

1. 형식이 조그만 바뀌어도 테이블을 만드는 것이 어렵고 복잡했음. 줄 나누기를 잘 해야 할 듯 

2. 아직 라벨 사용법은 글쎄 ? 입력 받는 애들을 하나로 묶어서 관리 ? 의 개념인건가 라벨 하나당 입력필드 하나

3. 안내문구에 <span> 태그 사용 권장 이유 : 접근성이랑 css 사용해서 스타일을 넣기도 좋고 aria-describedby로 연결해서, 스크린 리더 사용자에게도 안내 문구를 읽게 만들 수도 있음