리스트 태그

ul, li, ol
수평, 혹은 수직 구조로 이루어진 리스트를 만들어야 할 경우, 리스트 태그를 사용한다.

ul: *menu 등등등 넘버링이 아닌 (순서가 없는) 태그

ol : 1,2,3,4 등으로 넘버링이 되는 태그
li : 리스트 생성 태그

dl, dt, dd
메뉴 리스트 태그

`

<dt>메뉴 리스트(상단 타이틀 역할)</dt>
<dd>menu1</dd>
<dd>menu2</dd>
<dd>menu3</dd>

`

a 태그

하이퍼링크 태그로, 속성값으로 href, target 을 가진다.

<a href="링크" target="_blank"></a>
<a href="링크" target="_self"></a>

target"_self" : 링크 클릭 시 현재 보고 있는 창이 다른 창으로 바뀌면서 열리는 것.
target"_blank" : 링크 클릭 시 기존의 창이 유지되면서 새 창이 열리는 것.

table 태그

table 표 형식의 레이아웃을 만드는 태그.

<table>
	<tr>
  		<td>1행 1열</td>
      	<td>1행 2열</td>
      	<td>1행 3열</td>
  	</tr>
  	<tr>
  		<td>2행 1열</td>
      	<td>2행 2열</td>
      	<td>2행 3열</td>
  	</tr>
    <tr>
  		<td colspan>2행 1열</td>
      	<td>2행 3열</td>
      	<td>2행 4열</td>
  	</tr>
</table>

• table 태그의 colspan 행의 셀을 병합하는 속성이다.
• table 태그의 rowspan 열의 셀을 병합하는 속성이다.

img 태그

img 태그는src, alt 속성을 가진다.

src : img 태그의 경로
alt : 경로를 찾을 수 없을 때 웹 접근성에 문제가 되지 않도록, 어떤 이미지인지 단적으로(텍스트로) 보여주는 속성.

form 태그

form을 만드는 태그

form 속성값

1. action : 폼 작성을 마치고 submit 버튼을 눌렀을 시 정보가 전달되는 위치값.

   
   <form action="#"></form>``` 
   
   
   

2. method : 데이터가 가는 방식을 결정하는 속성

   <form method="get"></form> : defalt 값, 브라우저 주소창에 데이터 코드가 그대로 나타나면서 서버로 전송됨.
   <form method="post"></form> : 데이터 코드가 암호화되어 서버로 전달 되는 방식.

form 태그와 함께 쓰는 input, select 태그

input 태그 (닫는 태그 혼용 가능)

input 속성값

1. type
   1) <input type="text"></input> : 말 그대로 text 형식으로 정보가 입력된다.
   2) <input type="password"></input> : password 형식으로 정보가 입력된다.
   3) <input type="file"></input> : 파일 탐색기 형식. (ex. 사진이나 영상을 첨부할 용도의 버튼으로 나타남.)
   4) <input type="radio"></input> : 라디오 버튼 속성
   <input type="radio" checked="checked"></input> :
   checked="checked" : defalt 값으로 저장. (기본으로 체크되는 값)
   5) <input type="checkbox"></input> : 체크 박스 속성
   <input type="radio" checked="checked"></input> :
   checked="checked" : defalt 값으로 저장. (기본으로 체크되는 값)

       ❗️ `radio`, `checkbox` 의 경우 `name` 속성이 같아야 한 박스 안에 여러 선택지가 들어갈 수 있다. 
       
       (ex. 
       ```html
       <input type="radio" name="lan" value="kor">
       	한글
       </input>
       <input type="radio" name="lan" value="eng">
       	영어
       </input>
       <input type="radio" name="lan" value="jap">
       	일어
       </input>
       ```
       
       

   6) <input type="submit"></input> : 버튼 타입

2. name : input 태그 자체의 이름으로, 서버에서 input 박스의 정보를 받길 원할 때, 메소드를 호출하는 용도로 쓰인다. (사용자가 실제 입력한 값을 얻어낼 때 사용.)
3. value
   <input type="radio" name="gender" value="m"> : get gender로 값을 호출할 때 m이라는 값을 전송.
   <input type="radio" name="gender" value="m">: get gender로 값을 호출할 때 w이라는 값을 전송.

textarea 태그

textarea 속성

1. rows : 행
2. cols : 칸
   

select 태그 / option 태그

select 속성

1. multiple : 중복으로(n개) option 을 선택할 수 있게끔 할 때 사용하는 속성.

option : select 태그의 아이템

---

정리

<form action="#" method="post">
  이름 : <input type="text" name="username"/><br>
  비밀번호 : <input type="password" name="pw"/><br>
  <select multiple="multiple">
    <option>korea</option>
    <option>usa</option>
    <option>japan</option>
  </select>
  <br>
  <input type="submit"/>
</form>
  

블록, 인라인 태그

block 태그

div 태그

p 태그

list 태그 (ul, li ...)

---

span 태그

span 태그

시맨틱 태그

태그를 규칙화 시킨 태그로 , 검색엔진이 해석 시 더 빠르게 해석 가능하며 유지 보수에 유용하다!

, , ,