오름캠프 학습일지(2024/01/29) - 6주차 1일

오늘은 HTML 마지막 날입니다.
과정이 백엔드 과정이다 보니 프론트엔드 일정이 너무 짧습니다.
짧지만 해보면서 느낀건 재밌다^^ 였습니다.
프론트엔드쪽은 뭔가 인싸? 들의 세계 라고 생각이 들어서^^ 안 맞는다고 생각했는데
만드는 대로 눈에 보이니 재밌더라고요.
디자이너 같은 느낌이 있고, 내 옷 깔맞춤(?)도 못하는데 무슨 프론트엔드냐?
라고 저 자신(?)을 너무 쉽게 판단해버린게 아닌가 싶네요.
어쨌든 프론트엔드쪽도 더 배워보고 싶은 생각이 들었습니다.


여러 태그들도 배우고, 속성들도 배우고 있지만 하나 하나 나열하기 보다는 실습한 코드와
중요하다고 판단 되는 것 들을 정리해보려고 합니다.

form

form 태그는 웹페이지에서 사용자가 입력한 데이터를 서버쪽으로 보내줄때 사용하는 태그입니다.
form을 배우면서 제일 먼저 나오는 건 method 속성입니다.
method는 서버쪽으로 어떻게 전달하느냐를 결정하는 전달방식을 설정할 수 있습니다.
전달하는 방법은 get, post 2가지 방식이 있습니다.


get 방식
양식 데이터를 action URL과 ?파라미터 이름=파라미터 값 형태로 뒤에 붙여서 전송합니다.
공개되어도 무방한 정보들을 전달할때 적용되는 방식입니다.
get방식은 브라우저에 의해 캐시되어 저장이 되고, 보통 쿼리 문자열이 포함되어 전송이 되므로
길이의 제한이 있습니다. 보안상 취약점이 있어 중요한 데이터는 post 방식을 사용합니다.

<form method="get" action="">
  <div>
    <label for="user-name">이름</label>
    <input id="user-name" type="text" name="name">
  </div>
  <div>
    <label for="user-age">나이</label>
    <input id="user-age" type="number" name="age">
  </div>
  <button type="submit">버튼</button>
</form>

위 코드를 실행해서 이름과 나이를 입력했을때 method 가 get 방식이라면
https://example.com/test.html?name=john&age=13 이렇게 URL이 넘어갑니다.

post 방식
HTTP프로토콜의 body에 파라미터가 포함되어 넘어가는 방식입니다.
post 방식의 HTTP 요청에 의한 데이터는 쿼리 문자열과는 별도로 전송합니다.
브라우저에 의해 캐시 되지 않고, 브라우저 히스토리에도 남지 않습니다.
get방식과는 다르게 데이터의 길이제한이 없고, 보안성이 높습니다.
method 특성이 post 인 경우 enctype 속성은 전송되는 데이터의 형태가 무엇인지
알려주는 MIME 타입을 나타냅니다.
application/x-www-form-urlencoded : 기본값
multipart/form-data: <input type="file"> : 파일이 존재하는 경우에 사용

    <form method="post" action="">
    <div>
        <label for="user-name">이름</label>
        <input id="user-name" type="text" name="name">
    </div>
    <div>
        <label for="user-age">나이</label>
        <input id="user-age" type="number" name="age">
    </div>
    <button type="submit">버튼</button>
    </form>

post 방식일때 1번을 보면 주소창에 쿼리스트링이 없는것을 알 수 있습니다.
2번을 보면 입력한 이름과 나이 데이터가 headers 에 포함되어 넘어가려는 시도를 했음을 알 수 있습니다.

    <form>
        <fieldset>
            <legend>HTML 스터디 망해가는 이유는?</legend>
            <label>
                노잼이다
                <input type="radio" name="reasome">
            </label>
            <label for="myid">너무 어렵다</label>
            <input id="myid" type="radio" name="reasome">            
            <label>
                주말에 뭐하는 짓이냐
                <input type="radio" name="reasome">
            </label>
            <br>
            <label for="another">만약 다른 스터디를 하고 싶다면?</label>
            <br>
            <select name="lang">
                <option value="javascript">자바스크립트</option>
                <option value="python">파이썬</option>
                <option value="java">자바</option>
            </select>
            <br>    
            <label for="lastWord">마지막으로 하고 싶은 말</label>
            <br>
            <textarea name="lastWord" id="lastWord" cols="30" rows="2"></textarea>
            <br>
            <button type="submit">전송하기</button>
            <button type="reset">다시 작성하기</button>
          </fieldset>
    </form>

실습을 통해 만들어 봤던 form 입니다.
fieldset은 form 관련 요소들을 묶을때 사용합니다. disabled을 사용하면 모든 자손 컨트롤러를 비활성화합니다.
legend 는 그룹의 제목을 넣을 수 있습니다. 태그 이름 멋지죠?ㅎ
form 에 제목이 필요한 경우에는 fieldset 과 legend 를 사용합니다.
label은 input 과 함께 사용합니다. 이유는 스크린리더기 에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게
이해할 수 있게 합니다.

<label for="myid">너무 어렵다</label>
<input id="myid" type="radio" name="reasome"> 

<label>
    노잼이다
    <input type="radio" name="reasome">
</label>

for-id를 이용해서 label 과 input 을 연결할 수도 있고, label안에 input을 중첩해서 연결할 수도 있습니다.
2가지 모두 결과는 같습니다.

<button type="submit">전송하기</button>
<button type="reset">다시 작성하기</button>

버튼은 사용자가 클릭할 수 있는 요소입니다.
button 의 속성중에 type 이 button 일 경우 기본 행동이 없습니다. javascript와 연결하여 사용합니다.
type 이 submit일 경우 서버로 양식 데이터를 제출합니다.
type 이 reset 일 경우에는 초기값으로 되돌립니다.


input 은 다양한 속성을 사용할 수 있습니다.
required 는 양식 전송을 위해 필수로 입력해야 하는 값 입니다.
disabled 는 input 요소를 비활성화 합니다.
readonly 는 읽기전용 이고, 수정불가합니다.
좀 더 구체적으로 보면 readonly는 사용자가 입력할 수 없으나 value 가 있다면 값을 넘길 수 있습니다.
disabled은 사용자가 입력할 수 없고, 기존 value가 있어도 값을 넘길 수 없습니다.
그 외 input요소의 속성중에 email, tel, url, number 등이 있는데 type 을 통해서 어떤 데이터를
받는지 예측할 수 있고, 가독성이 좋아집니다.
모바일에서는 type 에 따라 키패드 UI 가 조금씩 다르다고 합니다. 적절한 input 요소의 type 사용이 필요한 이유입니다.

<input type="button" value="버튼">
<input type="reset" value="초기화">
<input type="submit" value="전송">

<button type="button">버튼</button>
<button type="reset">초기화</button>
<button type="submit">전송</button>

위 코드의 input 과 button 은 동일한 기능을 수행합니다.
input 태그의 경우는 빈태그 요소이기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없습니다.
button 태그의 경우에는 여는 태그와 닫는 태그 사이에 여러 컨텐츠 삽입이 가능합니다.

    <label>
        노잼이다
        <input type="radio" name="reasome">
    </label>
    <label for="myid">너무 어렵다</label>
    <input id="myid" type="radio" name="reasome">            
    <label>
        주말에 뭐하는 짓이냐
        <input type="radio" name="reasome">
    </label>

radio 태그는 같은 name 값을 가진 여러 개의 선택중에서 하나의 값을 선택하는 태그입니다.

    <select name="lang">
        <option value="javascript">자바스크립트</option>
        <option value="python">파이썬</option>
        <option value="java">자바</option>
    </select>

select 태그는 옵션 메뉴를 제공합니다.
속성은 multiple: 은 여러 갱의 항목을 동시에 선택할 수 있습니다, required: 선택 필수, disabled: 선택불가 등이 있습니다.
option 은 메뉴의 각 옵션을 정의합니다.
모든 option은 자신이 선택됐을 때의 값으로 사용할 value 속성이 필요합니다.
지정하지 않을 경우 option 내 텍스트 값으로 사용합니다.
selected 특성을 지정하면 해당 옵션을 선택한 상태로 페이지를 불러옵니다.
optgroup 태그는 option 요소를 optgroup 요소 안에 배치하면 드롭다운 내에서 옵션그룹을 나눌 수 있습니다.


<textarea name="lastWord" id="lastWord" cols="30" rows="2"></textarea>
textarea는 여러줄의 text를 입력받을 수 있습니다. 속성중에 cols 와 rows 는 기본적으로 보여줄 너비와 줄 수를 의미합니다.
물론 그 이상 입력이 가능합니다. 사용자의 입력 문자를 제한하고 싶다면 maxlength 와 minlength 를 사용하면 됩니다.

table

사실 HTML을 만만하게 보다가 당하는 대표적인 태그가 바로 이 table과 관련된 태그들입니다.
원하는대로 테이블을 만들지 못해서 답답했던 기억이 있는데 강의 한번 들으니 명쾌해지더군요.^^

바로 이 이미지와 강사님의 설명 덕분에 명쾌해졌습니다.
tr이 tablerow 라고 하고, td를 tabledata 라고 하니 바로 이해되더라고요.
그동안의 바보짓은 용어 하나하나를 제대로 몰라서 였던 거죠.^^

    <table>
        <caption>3-1반 역사 성적표</caption>
        <thead>
            <tr class="firstRow">
                <th>이름</th>
                <th>반</th>
                <th>번호</th>
                <th>점수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>뷔</td>
                <td rowspan="3">1반</td>
                <td>1번</td>
                <td>70점</td>
            </tr>
            <tr>
                <td>랩몬</td>
                <td>2번</td>
                <td>90점</td>
            </tr>
            <tr>
                <td>슈가</td>
                <td>3번</td>
                <td>93점</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" class="text-center">평균</td>
                <td>84점</td>
            </tr>
        </tfoot>
    </table>    

<caption>3-1반 역사 성적표</caption>
테이블 제목이나 설명을 의미합니다. table 태그의 첫번째 자식으로 사용합니다. 선택이고 필수 요소는 아닙니다.
CSS 의 caption-side 속성으로 top, bottom 으로 위치를 설정할 수 있습니다.

<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>

테이블의 머리글, 본문, 바닥글을 의미합니다. 구역을 나누는 요소로 사용합니다. 선택이고, 필수 요소는 아닙니다.
<tr> 과 <td> 로도 만들어서 사용할 수 있습니다.

    <tr>
        <td colspan="2" rowspan="2">&nbsp;</td>
        <th colspan="3">Clothes</th>
        <th colspan="2">Accessories</th>
    </tr>

colspan 은 열병합 이고, rowspan 은 행 병합입니다.
같은 행 에서 병합을 하려면 colspan 을 이용해서 병합을 해야 같은 행의 옆에 있는 열의 셀과 병합을 할 수 있습니다.
같은 열 에서 병합을 하려면 rowspan 을 이용해서 병합을 해야 같은 열의 위와 아래에 있는 행의 셀과 병합을 할 수 있습니다.



이 것으로 오늘까지 배운 HTML을 정리해봤습니다.
주요한 태그들과 속성들을 전부 다 정리하기에는 너무도 시간이 부족했고, 강사님의 선택으로 필수적인 것들 위주로 배웠습니다.
내일부터 배우는 CSS도 강의 시간이 턱없이 부족합니다. 개요 정도 할 수 있을 것 같습니다.
그러니 더 열심히 해야겠죠? 화이팅입니다.^^