LIGHTIXXX

<table> - 테이블을 만들기 시작할 때 사용

<tr> - 하나의 행(가로줄)을 만들 때 사용 (table row)

<th> - 하나의 열(칸)을 대표하는 셀 만들 때 사용 (table header)

<td> - 하나의 열(칸)의 데이터를 만들 때 사용 (table data)

테이블의 레이아웃에 영향을 주지 않고 묶을 때 사용하는 태그

<thead> - 표의 머리글

<tbody> - 표의 본문

<tfoot> - 표의 바닥글 (총합, 요약 등에 사용)

<table>
  <thead>
    <tr>
      <th> ID </th>
      <th> 이름 </th>
      <th> 취미 </th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> lightixxx </td>
      <td> 라이틱스 </td>
      <td> 사진촬영 </td>
    </tr>
    <tr>
      <td> lalala </td>
      <td> 라라라 </td>
      <td></td> <!-- 빈칸이더라도 th의 개수와 맞춰준다 -->
    </tr>
  </tbody>
  
  <tfoot>
  </tfoot>
</table>

🚨 Syntax alert 🚨 

<th>와 <td>의 개수를 맞춰야 한다

단, rowspan이나 colspan으로 확장이 된 경우는 생략한다

추가 attribute

rowspan=" " : 숫자만큼 행 병합

colspan=" " : 숫자만큼 열 병합

scope=" " : 누구의 머리글 칸인지 명시 (col, colgroup, row, rowgroup)

<button> - 선택 가능한 버튼을 만들 때 사용하는 태그

<!-- 자바스크립트를 이용한 기능 구현에 주로 사용 -->
<button type="button"> 버튼 </button>

<!-- 폼의 전송 전송 기능 -->
<button type="submit"> 확인 </button>

<!-- 폼 작성 내용 초기화 기능 -->
<button type="reset"> 다시 쓰기 </button>

<button type="button"> vs <a href="#"> vs <input type="button">

1. <input type="button"> 보다 디자인에 있어서 매우 자유롭고, 태그 안에 다른 태그 삽입도 가능!

일반적인 디자인들을 모두 적용할 수 있어서, 배경에 이미지로 넣을 수 있다.

 2. <a> 태그는 문서간의 연결이 주된 목적이기 때문에 링크에만 사용하고, 기능 구현은 button으로 하는 것이 시멘틱한 마크업!

<textarea> - 여러 줄의 텍스트를 입력받을 때 사용하는 태그

<label for="field"> 자기소개 </label>
<textarea id="field" placeholder="자기소개를 입력하세요"></textarea>

추가 attribute

rows="30" : 양식의 줄 수 (css로 조절 가능)

maxlength="500" : 입력 가능한 최대 문자 수

autofocus : 페이지가 로드될 때 자동으로 포커스시킬 때 사용

placeholder="자기소개" : 기본적으로 안내 문구 제공

disabled : 양식을 비활성화할 때 사용

<select> - 옵션으로 드롭 다운 목록을 작성하는 태그

<form action="" method="GET">

  <label for="hobby">취미</label>
  
  <select name="hobby" id="hobby">
    <option value="design"> design </option>
    <option value="photograph"> photograph </option>
    <option value="videoEditing"> videoEditing </option>
  </select>
  
  <input type="submit" />
</form>

추가 attribute

multiple : 여러가지 옵션을 선택할 수 있게 해줌

size : 한 번에 볼 수 있는 행의 개수

disabled : 선택 메뉴를 비활성화 

<form action=" " method="GET"> 
  
  <input type="radio" name="user-sex" id="male" />
  <label for="male"> 남자 </label>
  
  <input type="radio" name="user-sex" id="male" />
  <label for="female"> 여자 </label>
  
  <button type="submit"> submit </button>
  
</form>

🚨 Syntax alert 🚨 

필수 attribute

name="user-sex" : 같은 값을 적어서 radio 그룹을 묶어준다

value="male" : 다른 값을 적어서 제출 시 서버에서 구분하기 위해 작성해야 한다

<input type="checkbox" /> - 여러가지 항목을 선택할 수 있는 버튼

<h1> 취미 </h1>

<form action=" " method="POST">

  <input type="checkbox" name="hobby" value="design" id="design" />
  <label for="design"> 디자인 </label>
  
  <input type="checkbox" name="hobby" value="photograph" id="photograph" />
  <label for="photograph"> 사진촬영 </label>
  
  <input type="checkbox" name="hobby" value="video-editing" id="video-editing" />
  <label for="video-editing"> 영상편집 </label>
  
  <button type="submit"> submit </button>
  
</form>

🚨 Syntax alert 🚨 

필수 attribute

name="hobby" : 같은 값을 적어서 checkbox 그룹을 묶어준다

value="design" : 다른 값을 적어서 제출 시 서버에서 구분하기 위해 작성해야 한다

<label> - 폼 양식에 이름을 붙이는 태그

🚨  syntax alert 🚨 

기본 attribute로 input의 id값을 for에 작성해야 한다.

<label for="inputId"> 라벨 </label>
<input id="inputId" type="text" />

label을 누르면 input에 focus가 된다. 사용성 개선!

<input /> - 사용자에게 정보나 데이터를 받아올 입력창

🚨 Syntax alert🚨 

기본 attribute로 type을 작성해야 한다

<form action=" " method=" ">

  <!-- 한 줄 정도의 간단한 텍스트를 입력하는 경우 -->
  <input type="text" />
  
  <!-- 숫자를 입력하는 경우 -->
  <input type="number" /> 
  
  <!-- 비밀번호를 입력하는 경우 -->
  <input type="password" /> 
  
  <!-- 이메일을 입력하는 경우 -->
  <input type="email" />
  
  <!-- 전화번호를 입력하는 경우 -->
  <input type="tel" /> 
  
  <!-- 라디오 버튼을 만드는 경우 -->
  <input type="radio" /> 
  
  <!-- 기본 버튼을 만드는 경우 -->
  <input type="button" /> 
  
  <!-- 제출하는 버튼을 만드는 경우 -->
  <input type="submit" /> 
  
  <!-- 파일을 업로드하는 경우 -->
  <input type="file" /> 
  
  <!-- 그 외 -->
  <!-- checkbox, color, reset, search, url 등 -->
  
<form>

추가 attribute

placeholder="기본 안내 문구" : 기본적으로 안내 문구 제공

maxlength="15" : 입력 가능한 최대 문자 수

minlength="5" : 입력 가능한 최소 문자 수

required : 필수로 입력해야 하는 정보일 때 사용

disabled : 특정 인풋값을 사용하지 못하게 막아둘 때 사용

value="라이틱스" : 미리 입력이 되어있는 상태로 시작하고 싶을 때 사용

max="99" : 지정 가능한 최대값 <input type="number"> 에서 사용

min="5" : 지정 가능한 최대값 <input type="number"> 에서 사용

accept=".png, .jpg" : 파일의 확장자를 제한하고 싶을 때 사용 <input type="file"> 에서 사용

<form> - 사용자로부터 인풋을 받기 위한 태그

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

🚨Syntax alert🚨 

action - API 주소 (form을 처리해줄 API 서버에 접근 가능한 URL) Backend 개발자에게 물어보자

method - 서버로 전송할 HTTP 방식 (GET / POST)

GET : 중요 정보가 없거나 정보의 양이 적을 때 사용

POST : 중요 정보가 있거나 정보의 양이 많을 때 사용

<blockquote> - 문단 전체가 인용문구 일 때 사용하는 태그

<cite> - 출처를 표기할 때 사용하는 태그 or 속성

<blockquote> 
  Study without desire spoils the memory,<br />
  and it retains nothing that it takes in.
  <cite>Leonardo da Vinci</cite>
</blockquote>  

<q> - 문장 내의 일부분이 인용문구 일 때 사용하는 태그

"  " 로 감싸진다

<p>
  라이틱스 블로그에 따르면,
  <q cite="https://lightixxx.tistory.com/">프론트엔드가 되는 과정은 멀고도 험하다</q>
</p>

<ul> - 순서가 없는 목록 (Unordered List)

순서가 중요하지 않은 목록을 작성할 때 사용하는 태그.

ex) 상품순서, 메뉴순서 등

<ul>
  <li>첫 번째 상품</li>
  <li>두 번째 상품</li>
  <li>세 번째 상품</li>
</ul>

<ol> - 순서가 있는 목록 (Ordered List)

순서가 중요한 목록을 작성할 때 사용하는 태그.

ex) 실시간 검색어, 요리법 등

<ol>
  <li>물을 끓인다</li>
  <li>스프를 넣는다</li>
  <li>면을 넣는다</li>
</ol>

 ul과 ol의 직계자식은 무조건 li만 가능! 

(실행은 되지만, 웹표준에 어긋남)

<dl> - 설명/정의 목록 (Description List)

1. 용어를 정의할 때 사용하는 태그 

ex) 사전에서 단어와 단어의 뜻

2. key-value로 정보를 제공할 때 사용하는 태그

ex) {이름 : 라이틱스}

 <dl>의 자식요소로는 <dt> <dd> <dfn>이 올 수 있다.

<dt> - 용어 / key 값 (description term)

<dfn> - 의미를 구체적으로 정의내릴 때 (definition)

<dd> - 설명 / value 값 (description data)

🚨 Syntax Alert 🚨

<!-- GOOD -->

<dl>
  <dt>
    <dfn> development </dfn<
  </dt>
  <dd> 1. [u] 발달, 성장 </dd>  <!-- development에 대한 설명 -->
  <dd> 2. [u,c] (신제품의) 개발; 신개발품 </dd>  <!-- development에 대한 설명 -->
</dl>


<dl>
  <dt>라이틱스</dt> <!-- 같은 의미일 때 -->
  <dt>lightixxx</dt> <!-- 같은 의미일 때 -->
  <dd>라이틱스의 블로그입니다.</dd>
</dl>


<dl>
  <dt>라이틱스</dt> 
  <dd>라이틱스의 블로그입니다.</dd> <!-- 같은 의미일 때 -->
  <dd>lightixxx의 블로그입니다.</dd> <!-- 같은 의미일 때 -->
</dl>


<dl>
  <div>
    <dt>사과</dt> 
    <dd>사과에 대한 설명</dd>
  </div> <!--div로 묶기도 가능 -->
	
  <div>
    <dt>바나나</dt>
    <dd>바나나에 대한 설명</dd>
  </div> <!--div로 묶기도 가능 -->
</dl>

<!-- BAD -->

<dt>
  라이틱스 <!-- dt와 dd는 반드시 dl의 자식요소로 존재해야 한다-->
</dt>


<dl>
  <dt>라이틱스</dt>
  <dd>라이틱스의 블로그입니다.</dd>	
  <dt>구글 짱</dt> <!-- 다른 의미인데 따로 설명이 없음 -->
</dl>


<dl>
  <section>
	<dt>사과</dt>
	<dd>사과에 대한 설명</dd>
  </section> <!-- div로만 묶을 수 있음 -->
  <section>
	<dt>바나나</dt>
	<dd>바나나에 대한 설명</dd>
  </section> <!-- div로만 묶을 수 있음 -->
</dl>