[부스트코스] 2-2 HTML 태그

2. HTML 태그

8) 테이블 요소 1

표 (TABLE)

데이터 표를 나타내는 태그
표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있음
행(가로 방향) row, 열(세로 방향) column

<td>, <th>: 데이터 셀(table-cell)
<tr>: 행(table-row)
<table>: 표

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>table</title>
    <style>
      td {
        border: 1px solid;
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td></td><td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td><td></td>
      </tr>
      <tr>
        <td></td><td></td><td></td><td></td>
      </tr>
    </table>
  </body>
</html>

테이블 구조 관련 태그

<caption>: 표의 제목
<thead>: 제목 행을 그룹
<tfoot>: 바닥 행을 그룹 (<tfoot>이 <tbody> 뒤에 위치해야 함)
<tbody>: 본문 행을 그룹

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>image</title>
    <style media="" screen>
      th,
      td {
        border: 1px solid;
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        Monthly Savings
      </caption>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

테이블 관련 속성

colspan: 셀을 가로방향으로 병합
rowspan: 셀을 세로방향으로 병합

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>image</title>
    <style media="" screen>
      th,
      td {
        border: 1px solid;
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        Monthly Savings
      </caption>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="2">Sum</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td rowspan="2">$100</td>
        </tr>
        <tr>
          <td>February</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

9) 테이블 요소 2

<!-- 내 코드 -->

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>table</title>
    <style>
      th,
      td {
        border: 1px solid;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>
        Specification values
      </caption>
      <thead>
        <tr>
          <th rowspan="2">Grade.</th>
          <th rowspan="2">Point.</th>
          <th colspan="2">Strength.</th>
          <th rowspan="2">Percent.</th>
        </tr>
        <tr>
          <th>kg/mm</th>
          <th>lb/in</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Hard</td>
          <td>0.45</td>
          <td>56.2</td>
          <td>80,000</td>
          <td>20</td>
        </tr>
        <tr>
          <td>Medium</td>
          <td>0.45</td>
          <td>49.2</td>
          <td>70,000</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Soft</td>
          <td>0.45</td>
          <td>42.2</td>
          <td>60,000</td>
          <td>30</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

10) 폼 요소 1

type="text"
placeholder
type="password"
type="radio"
type="checkbox"

폼 관련 요소(FORM)

서버에 데이터를 전달하기 위한 요소들

INPUT 요소

대표적인 폼 요소로, 다양한 type 속성으로 여러 종류의 입력 양식으로 나타난다.

<input type="...">

text, password, radio, checkbox, file, image, submit, reset, button...

Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>form</title>
  </head>
  <body>
    <h1>Form 관련 요소</h1>
    아이디: <input type="text" placeholder="영문으로 적으시오" /><br />
    비밀번호: <input type="password" placeholder="비밀번호를 입력하십시오" /><br />

    <!--하나만 선택-->
    성별: 남자 <input type="radio" name="gender" checked /> 
    여자 <input type="radio" name="gender" /><br />

    <!--중복선택 가능-->
    취미: 영화감상 <input type="checkbox" name="hobby" />
    음악감상 <input type="checkbox" name="hobby" />
    독서 <input type="checkbox" name="hobby" />
  </body>
</html>

placeholder는 guide 역할!
text 입력하면 placeholder 내용이 사라진다.
input type을 password로 하면, 값이 노출되지 않는다.
input type을 radio로 사용 시, name을 설정해야 한다.
- name을 설정하지 않으면, 2개의 라디오박스 모두 체크가 된다. (그룹화)
- 동일한 name을 줘야, 2개의 라디오박스가 연관이 있다는 것을 나타낼 수 있다.
- name이 동일할 시, 하나의 라디오박스를 선택하면 나머지는 선택되지 않는다.
- checked를 넣으면, 선택되어져서 표시된다. (boolean 속성, 값이 별도로 존재하지 않음)
input type을 checkbox로 사용 시에는, 중복으로 선택할 수 있다.
- 마찬가지로 name을 설정해야 한다.
- checked 또한 사용할 수 있다.

11) 폼 요소 2

type="file"
type="submit"
type="image"
type="button"

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>form</title>
  </head>
  <body>
    <form action="./test.html">
    <h1>Form 관련 요소</h1>
    아이디: <input type="text" placeholder="영문으로 적으시오" /><br>
    비밀번호: <input type="password" placeholder="비밀번호를 입력하십시오" /><br>

    <!--하나만 선택-->
    성별: 남자 <input type="radio" name="gender" checked /> 여자 <input type="radio" name="gender" /><br>

    <!--중복선택 가능-->
    취미: 영화감상 <input type="checkbox" name="hobby" /> 
    음악감상 <input type="checkbox" name="hobby" /> 독서 <input type="checkbox" name="hobby" /><br>
   프로필 사진 업로드: <input type="file"><br>

   <!--value로 이름 변경할 수 있음-->
   <!--제출-->
   <input type="submit" value="전송"><br>
   <!--초기화-->
   <input type="reset" value="취소"><br>
   <!--버튼-->
   <input type="button" value="등록"><br>
   <!--이미지-->
   <input type="image" src="./pizza.jpg" alt="피자" width="300px">
  </form>
  </body>
</html>

file: 파일을 서버에 올릴 때 사용
submit: form의 값을 전송하는 버튼
reset: form의 값을 초기화하는 버튼
image: 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일)
- 이미지 관련 속성인 src, alt 속성이 반드시 필요
button: 아무 기능이 없는 버튼

reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms

12) 폼 요소 3

select
textarea
button

SELECT 요소

선택 목록상자(콤보박스)

<select>
  <option>서울</option>
  <option>경기</option>
  <option>강원</option>
  <option selected>제주</option>
</select>

checked와 selected 같은 기능

TEXTAREA 요소

여러 줄 텍스트 입력 상자

자기소개: <textarea cols="30" rows="5" >Lorem ipsum dolor sit amet consectetur 
adipisicing elit. Corrupti adipisci iusto dolorem libero hic autem rerum inventore 
totam cumque, beatae dolorum tempore voluptatibus? Modi nostrum, tenetur expedita 
autem aliquid tempora!</textarea>

cols: 가로 크기를 조절하는 속성
rows: 세로 크기를 조절하는 속성

BUTTON 요소

사용자가 클릭 가능한 버튼

  <button type="submit">전송</button>
  <button type="reset">취소</button>

13) 폼 요소 4

label
filedset
legend
form

LABEL 요소

폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 된다. (필수적)

<label for="username">이름</label>
<input type="text" id="username">

<label for="userlocation">사는 곳</label>
<select id="userlocation">
  <option>서울</option>
  <option>충남</option>
  <option>경기</option>
  <option>강원</option>
</select>

<label for="usercomment">하고 싶은 말</label>
<textarea id="usercomment"></textarea>

이름, 사는 곳, 하고 싶은 말 텍스트를 클릭했을 때, 입력창에 커서가 깜빡인다.

FILEDSET, LEGEND 요소

<fieldset>
  <legend>기본 정보</legend>
</fieldset>
<fieldset>
  <legend>부가 정보</legend>
</fieldset>

<fieldset>: 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
<legend> 폼 요소의 제목으로 <fieldset> 요소 내부에 작성

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>form</title>
  </head>
  <body>
    <form action="./test.html">
      <h1>Form 관련 요소</h1>
      <fieldset>
        <legend>기본 정보</legend>
        <label for="userid">
          아이디:
          <input
            type="text"
            placeholder="영문으로 적으시오"
            id="userid" /></label
        ><br />
        <label for="userpw">
          비밀번호:
          <input
            type="password"
            placeholder="비밀번호를 입력하십시오"
            id="userpw" /></label
        ><br />

        <!--하나만 선택-->
        성별: 남자 <input type="radio" name="gender" checked /> 여자
        <input type="radio" name="gender" /><br />
      </fieldset>
      <fieldset>
        <legend>부가 정보</legend>
        <!--중복선택 가능-->
        취미: 영화감상 <input type="checkbox" name="hobby" /> 음악감상
        <input type="checkbox" name="hobby" /> 독서
        <input type="checkbox" name="hobby" /><br />
        프로필 사진 업로드: <input type="file" /><br />
        사는 지역:
        <select>
          <option>서울</option>
          <option>경기</option>
          <option>강원</option>
          <option>제주</option></select
        ><br />
        자기소개:
        <textarea cols="30" rows="5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti adipisci iusto dolorem libero hic autem rerum inventore totam cumque, beatae dolorum tempore voluptatibus? Modi nostrum, tenetur expedita autem aliquid tempora!</textarea
        ><br />
      </fieldset>
      <button type="submit">전송</button>
      <button type="reset">취소</button>
      <br />
      <!--value로 이름 변경할 수 있음-->
      <!--제출-->
      <!-- <input type="submit" value="전송" /><br /> -->
      <!--초기화-->
      <!-- <input type="reset" value="취소" /><br /> -->
      <!--버튼-->
      <!-- <input type="button" value="등록" /><br /> -->
      <!--이미지
   <input type="image" src="./pizza.jpg" alt="피자" width="300px">-->
    </form>
  </body>
</html>

FORM 요소

폼 데이터를 그룹화하여 서버에 전송한다.

<form action="..." method="...">
...
</form>

action: 폼 데이터를 처리하기 위한 서버의 주소
method: 데이터를 전송하는 방식을 지정(get, post)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />

    <title>form</title>
  </head>
  <body>
    <form action="/result.html" method="get">
      아이디: <input type=""text" name="id"><br />
      비번: <input type="password" name="pw"><br />
      <input type="submit" />
    </form>
  </body>
</html>

get은 민감한 정보를 다루는 포맷에서 사용하면 안 됨
- 데이터가 전송될 때, 주소창에 파라미터 형태로 붙어 데이터가 노출됨
- 보안성 취약
회원가입, 로그인 등에서는 post 방식으로!
- 데이터가 전송될 때 데이터가 노출되지 않음

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록

'LEARN > HTML | CSS' 카테고리의 다른 글

[부스트코스] 4-1 CSS 이해하기 (0)	2022.03.15
[부스트코스] 3 HTML 콘텐츠모델, 시멘틱마크업, 블록 (0)	2022.03.14
[부스트코스] 2-1 HTML 태그 (0)	2022.03.12
[부스트코스] 1 HTML 이해하기 (0)	2022.03.10
[CSS] 14~15 코드의 재사용 style.css 파일 생성 실습 끝 (0)	2022.01.28

JeLog

[부스트코스] 2-2 HTML 태그

2. HTML 태그

8) 테이블 요소 1

표 (TABLE)

테이블 구조 관련 태그

테이블 관련 속성

9) 테이블 요소 2

10) 폼 요소 1

폼 관련 요소(FORM)

11) 폼 요소 2

12) 폼 요소 3

SELECT 요소

TEXTAREA 요소

BUTTON 요소

13) 폼 요소 4

LABEL 요소

FILEDSET, LEGEND 요소

FORM 요소

'LEARN > HTML | CSS' 카테고리의 다른 글

티스토리툴바

[부스트코스] 2-2 HTML 태그

2. HTML 태그

8) 테이블 요소 1

표 (TABLE)

테이블 구조 관련 태그

테이블 관련 속성

9) 테이블 요소 2

10) 폼 요소 1

폼 관련 요소(FORM)

11) 폼 요소 2

12) 폼 요소 3

SELECT 요소

TEXTAREA 요소

BUTTON 요소

13) 폼 요소 4

LABEL 요소

FILEDSET, LEGEND 요소

FORM 요소

'LEARN > HTML | CSS' 카테고리의 다른 글

관련글

티스토리툴바