24.01.29

BootCamp/모두의연구소:오름캠프

24.01.29

혼복필 2024. 1. 29. 16:30

728x90

SMALL

벌써 1월 마지막 주 월요일이네요.

어느덧 오름캠프를 시작한 지 두 달째 되었어요, 항상 느끼지만 시간은 정말 느린 것 같다가도 빠른 것 같아요.

오늘은 저번 HTML에 이어 기본 양식들에 대해 알아보며 VSCode에 직접 코드를 입력해 보며 배워보았어요.

까먹은 것들이 많지만 직접 쳐보니 또 새록새록 기억이 나네요.

Form

사용자에게 입력받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획

Q. 꼭 form 태그로 묶어줘야 할까?

A. form 태그는 입력한 데이터를 제출 or 전송하기 위해 사용하는 태그, 별도 제출 필요가 없다면 사용하지 않아도 됨

= 단순히 입력받는 값을 화면에 나타내는 용도

1. Method 속성

양식을 제출할 때 사용할 HTTP 메서드

+ GET

https://example.com?name=홍길동&age=20

양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송

GET 방식의 HTTP 요청은 브라우저에 의해 캐시 되어 저장

보통 쿼리 문자열에 포함되어 전송되므로 길이의 제한이 있음 (URL 길이제한은 브라우저마다 차이가 있음)

보안상 취약점은 존재, 중요한 데이터의 경우 POST 방식을 권장

+ POST

양식 데이터를 요청 본문으로 전송

브라우저에 의해 캐시 되지 않고, 브라우저 히스토리에도 남지 않음

POST 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송

데이터의 길이제한이 없으며 GET 방식보다 보안성이 높음

(enctype 속성)

Method 특성이 POST인 경우 enctype은 양식 제출 시 데이터의 MIME 타입을 나타냄

= MIME 타입 (media type or Multipurpose Internet Mail Extensions : 전송되는 데이터의 형태가 무엇인지 알려주는 정보의 포맷)

application/x-www-form-urlencoded : 기본값

multipart/form-data** : <input **type="file">이 존재하는 경우 사용

Name과 Value

이름과 값의 짝으로 양식과 함께 전송

2. Action 속성

작성된 양식 데이터를 처리할 프로그램의 URL을 작성

이 속성을 지정하지 않으면 데이터는 Form이 있는 페이지의 URL로 보내짐

3. Autocomplete 속성

입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄

이전에 해당 양식의 입력된 값이 있을 경우 (브라우저에 기록이 남아있을 경우)

왼쪽은 off, 자동입력 X 오른쪽은 on, 자동입력 O (= 기본값)

Label

사용자 인터페이스의 항목을 나타냄

+ input과 함께 사용

(입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있음, label을 클릭하여 input에 포커스를 이동시키거나 활성화시킬 수 있음)

+ for-id를 이용해 연결

+ label안에 input 중첩하여 연결

+ label안에 제목 요소를 배치하지 말 것 (= form에 제목이 필요한 경우 fieldset legend 사용)

+ type="button"선언과 유효한 value 속성을 가진 input 요소에는 레이블이 필요하지 않음

<input type="button" value="button">
<button type="button">button</button>

Button

사용자가 클릭할 수 있는 요소

form 내부뿐만 아니라 버튼이 필요한 곳이라면 어디에든 배치 가능

+ button의 타입

1. button : 기본 행동 없음, 클릭했을 때 아무것도 하지 않음 (JavaScript와 연결하여 사용)

2. submit : 서버로 양식 데이터를 제출

3. reset : 초기값으로 되돌림

+ <a> vs <button> 차이점

Input

Q. email, tel, url, number 같은 경우 text로 값을 받으면 안 되나?

A. type을 통해 어떤 데이터를 받는지 예측할 수 있음, 코드의 가독성이 좋아지기 때문

1. button / reset / submit

= <button type=”___”> 태그와 동일한 기능을 수행

2. text / password / url / search / tel

= maxlength : 문자수 최대 길이

= minlength : 문자수 최소 길이

3-1. checkbox : 단일 값을 선택하거나 선택 해제할 수 있는 체크박스

<fieldset>
<legend>사용 기술</legend>
<input type="checkbox" name="html" id="html">
<label for="html">HTML</label>
<input type="checkbox" name="css" id="css">
<label for="css">CSS</label>
<input type="checkbox" name="js" id="js">
<label for="js">JavaScript</label>
<input type="checkbox" name="python" id="python">
<label for="python">Python</label>
<input type="checkbox" name="django" id="django">
<label for="django">Django</label>
</fieldset>

3-2. raido : 같은 name 값을 가진 여러 개의 선택 중에서 하나의 값을 선택

+ checked : 체크 여부

4. file

파일을 지정할 수 있음

+ accept : 허용하는 파일 유형을 지정할 수 있음

+ multiple : 지정할 경우 사용자가 여러 개의 파일을 선택 가능

5. number

숫자 입력과 화살표 컨트롤 제공

+ max : 최댓값

+ min : 최솟값

+ step : 증가값

<label for="num">숫자입력 (10-100):</label>
<input

type="number"

id="num"

name="number"

min="10"

max="100"

step="10">

Select

옵션 메뉴를 제공

+ multiple : 여러 개의 항목을 동시에 선택 가능

+ size : 한 번에 노출되는 항목의 수를 조절

+ required : 선택 필수

+ disabled : 선택 불가

1. option

메뉴의 각 옵션을 정의

모든 option 은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요

(= 지정하지 않은 경우 option 내 텍스트 값으로 사용)

selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옴

2. optgroup

option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있음

<label for="animals">동물을 선택하세요: </label>
<select id="animals">
<optgroup label="포유류">
<option>원숭이</option>
<option>개</option>
<option>고양이</option>
</optgroup>
<optgroup label="파충류">
<option>도마뱀</option>
<option>뱀</option>
</optgroup>
</select>

Fieldset

form 관련 요소들을 묶을 때 사용

disabled를 사용할 경우 모든 자손 컨트롤을 비활성화

Legend

그룹의 제목을 제공

Textarea

여러 줄의 text를 입력받을 수 있음

+ textarea 속성

cols : 입력창의 너비, 문자의 평균적인 넓이를 기준 (기본 : 20)

rows : 기본적으로 보여줄 입력 줄 수 의미

maxlength : 사용자가 입력할 수 있는 문자 최대 길이

minlength : 사용자가 입력해야 할 문자 최소 길이

placeholder : 컨트롤에 무엇을 입력해야 하는지 알려주는 힌트

+ textarea 크기 비활성화 CSS

textarea{
resize:none;
}

Table

테이블을 생성할 때 사용

<table>은 테이블 데이터의 컨테이너 요소

tr / th / td

+ tr : (table row) 테이블의 행

+ th : (table header) 테이블의 행, 열의 제목을 나타내는 셀

+ td : (table data) 셀 내용

Caption

테이블의 제목이나 설명을 의미

table의 첫 번째 자식으로 사용해야 함

선택적으로 사용, 필수 요소 아님

표의 목적에 대한 명확하고 상세한 설명을 포함하는 <caption> 요소를 제공

= 사용자가 표 콘텐츠를 확인할지 or 넘어갈지 결정할 때 도움

CSS caption-side 속성으로 : top, bottom 위치를 설정할 수 있음

thead / tbody / tfoot

테이블의 머리글, 본문, 바닥글을 의미

구역을 나누는 요소로 사용

선택적으로 사용, 필수 요소 아님 (코드의 가독성을 위해 명시적으로 사용하면 좋음)

+ <thead> : 테이블 행 블록 (row block) 내 제목 열 그룹 (column headers) 구성할 경우 사용

+ <tbody> : 행 블록 내에 테이블 데이터로 구성할 때 사용

+ <tfoot> : 행 블록 내에 열 요약 (column summaries) 구성할 때 사용

+ 속성값

colspan(열 병합) / rowspan(행 병합)

= 셀병합 속성

<table>
    <caption>Items Sold August 2016</caption>
    <tbody>
        <tr>
            <td colspan="2" rowspan="2"> </td>
            <th colspan="3">Clothes</th>
            <th colspan="2">Accessories</th>
        </tr>
        <tr>
            <th>Trousers</th>
            <th>Skirts</th>
            <th>Dresses</th>
            <th>Bracelets</th>
            <th>Rings</th>
        </tr>
        <tr>
            <th rowspan="3">Belgium</th>
            <th>Antwerp</th>
            <td>56</td>
            <td>22</td>
            <td>43</td>
            <td>72</td>
            <td>23</td>
        </tr>
        <tr>
            <th>Gent</th>
            <td>46</td>
            <td>18</td>
            <td>50</td>
            <td>61</td>
            <td>15</td>
        </tr>
        <tr>
            <th>Brussels</th>
            <td>51</td>
            <td>27</td>
            <td>38</td>
            <td>69</td>
            <td>28</td>
        </tr>
        <tr>
            <th rowspan="2">The Netherlands</th>
            <th>Amsterdam</th>
            <td>89</td>
            <td>34</td>
            <td>69</td>
            <td>85</td>
            <td>38</td>
        </tr>
        <tr>
            <th>Utrecht</th>
            <td>80</td>
            <td>12</td>
            <td>43</td>
            <td>36</td>
            <td>19</td>
        </tr>
    </tbody>
  </table>

Colgroup

테이블 열 그룹을 만들고 싶을 때 사용

Col

테이블 열을 하나 이상 묶을 때 사용

colgroup 요소 내부에 포함

선택적으로 사용, 필수 요소 아님

CSS와 함께 col에 일부 스타일을 지정할 수 있음 (background, border)

<table>
    <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>
    <tr>
        <td> </td>
        <th scope="col">Batman</th>
        <th scope="col">Robin</th>
        <th scope="col">The Flash</th>
        <th scope="col">Kid Flash</th>
    </tr>
    <tr>
        <th scope="row">Skill</th>
        <td>Smarts</td>
        <td>Dex, acrobat</td>
        <td>Super speed</td>
        <td>Super speed</td>
    </tr>
</table>

여기까지 해서 오늘 HTML은 모두 끝났습니다.

강사님의 추가 과제가 있는데 그 과제는 내일 (30일)에 같이 올려보도록 하겠습니다.

Back-End 교육과정이라 그런지 확실히 Front-End 부분의 기술들은 배우는 시간이 짧지만 그만큼 학습하기 빠르고 좋은 것 같아요.

form 실습과 table 실습은 제 GitHub에 올려두었습니다 :)

https://github.com/soohyun020812/ormcamp

GitHub - soohyun020812/ormcamp: 오름캠프 교육에서 활용한 실습 내용들 정리

오름캠프 교육에서 활용한 실습 내용들 정리. Contribute to soohyun020812/ormcamp development by creating an account on GitHub.

github.com

728x90

LIST