[TUE] 2021-11-09 TIL

이제 졸업전시가 끝났다!
맨날 "아 집에 가고싶다~ 자퇴하고싶다~"를 입에 달고살았었는데,
막상 졸업을 앞두니 싱숭생숭하다.
졸업하기싫다. 나 그냥 평생 학생 시켜주세요😢

지난주는 졸업전시때문에 멋사 수업을 많이 빠졌다.
그래서 그런지 수업진도를 따라가기가 어렵다. 흑흑
이제 전시도 끝났으니 velog업로드도 열심히 하고
수업도 열심히 들어야겠다.😥

진도를 따라가기가 벅차서 혼자 강의 교안을 보면서
공부해봤다.
아래에는 공부하며 배운점을 정리할 예정이다.

#1 HTML

🔷 글자태그

<h1> ~ <h6> : 글자크기 조절이나 bold를 위해 사용하지않음
              중요도에 따라 사용됌
<b>태그 : 굵은 글꼴을 표현할때 사용
<strong> : 굵은 글꼴 + 중요도
<wbr>: 브라우저가 해당 단어를 잘못된 위치에서 행바꿈하지 않도록 
       <wbr> 요소를 사용하여 행바꿈될 수 있는 위치를 직접 명시
<i> : italic
<em> : italic + 강조의 의미
<mark> : 하이라이트 표시
<abbr> : 줄임말이나 약자 표현
<sup> : 윗첨자 ex) H2O (물)
<sub> : 아랫첨자 ex) X2=4 (X제곱은 4)
<blockquote> : 인용 블럭
<q> : 인용구
<cite> : The <cite> tag defines the title of a creative work 
         (e.g. a book, a poem, a song, a movie, a painting, 
               a sculpture, etc.).
        - Note: A person's name is not the title of a work.
        - The text in the <cite> element usually renders 
          in italic.

🔷 콘텐츠 그룹 태그

<dl> : 정의 목록(definition list)
<dt> : 정의할 용어(definition term)
<dd>: 용어를 설명(definition description)

<dl>
    <dt>호두</dt>
    <dd>우리집 고양이 이름입니다.</dd>
</dl>

Use a <figure> element to mark up a photo in a document, 
and a <figcaption> element to define a caption for the photo

<figure>
	<img src="image/cat.jpg" alt="고양이">
	<figcaption>
		귀여운 고양이 사진
	</figcaption>
</figure>

🔷 폼 태그

1. Form이란?
   : 정보를 입력하는 영역 ex) 로그인창, 회원정보 기입창 등
2. Form 동작 방식
   : 브라우저에서 데이터 입력 발생 -> 웹 서버로 데이터 이동 -> 데이터 처리위해 웹 서버가 APP호출
   -> 데이터를 DB로 전송(CRUD) -> APP -> WEB -> 클라이언트 브라우저 -> 사용자 브라우저

*서버와 클라이언트 관련해서는 유튜브 생활코딩
WEB1 - 17. 인터넷을 여는 열쇠 : 서버와 클라이언트
강의를 참고하면 좋을 것 같다.

3. Form 속성

• action : 입력값을 전송할 페이지
• method : 데이터 전송방식 지정
  1. get : 주소에 데이터가 포함됌
  2. post : 보안이 필요한 데이터, 주소에 데이터 포함 X
  

ex) <form action="" method="get" class=""></form>

4. Form type

• text : text 입력
• password : 비밀번호 입력 (⚫⚫⚫⚫⚫)
• textarea : 여러줄의 text
• search : 검색 창
• date : 날짜
• time : 시간 입력
• range : 범위, 슬라이드 바 형식
• number : 숫자 선택
• color : 색 선택
• radio : 라디오 버튼 (택일)
  / radio 버튼의 name이 같아야 하나만 선택되게 할 수 있음
• checkbox : 체크박스 (다중선택 가능)
• file : 파일 업로드
• email : 이메일 주소 입력
• url : 웹 주소 입력
• tel : 전화번호 입력

✨<legend> : 항상 <fieldset> 태그 바로 뒤에 위치, 
           폼 그룹의 목적을 명시하는 제목

The <form> tag is used to create an HTML form for user input.

The <form> element can contain one 
or more of the following form elements:

✨<input> : 사용자에게 정보를 입력받는 공간
<textarea> : 여러줄의 text를 입력할 수 있는 공간
<button> : 버튼 (type: submit/reset/button)
<select> : 드롭다운 리스트 박스 생성
<option> : <select>태그 내부에서 사용, value와 selected 속성 가짐
           (value : 서버에 어떤 데이터를 전송할 것인가
            selected : 페이지 로드시 기본으로 선택되는 옵션 )
<optgroup> : 드롭다운 리스트 박스내 관계있는 옵션들끼리 묶어줌
<fieldset> : 자식 폼 컨트롤 그룹화
<label> : 태그를 설명하는 텍스트 // 시각장애인들의 편의를 위해 필요함
<output> : 사용자 행동의 결과를 삽입

✨ input

• type
• name : 태그 이름 지정
• readonly : 읽기 전용
• maxlength : 최대 글자 수
• required : 필수 입력값
• autofocus : 웹 로딩시 오토 포커스
• placeholder : 입력값에 대한 힌트
• pattern : 특정 범위내의 유효값

✨ label

<label for="Name">이름 : </label>
<input type="text" name="name" id="Name">

폼 타입의 id값과 레이블의 for 속성의 값은 동일해야한다.

🔷 테이블 태그

JS나 CSS 적용을 위해 테이블에 <thead>, <tbody>, <tfoot>를
사용하는 것이 좋다. 구도 잡는용X

<caption> : 테이블 상단 제목
<colgroup> : /*어떻게 사용하는지 모르겠다😓*/

**The <colgroup> HTML element defines 
   a group of columns within a table.

 <caption>Superheros and sidekicks</caption>
    <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>


**<th>내부에 scope 속성과 사용
<row> : 행에 대한 머릿말
<col> : 열에 대한 머릿말

<table>
    <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>