[HTML] HTML 태그 정리

태그는 <>로 속성은 - , 속성의 자세한 건 * 로 표시함

list 관련 태그

ul, or, li

<ul> : unorder list. index가 없음

<or> : order list. index 있음. 알아서 넘버링 붙여서 출력함.

<li> : <ul>, <ol> 상관없이 list를 나타내는 태그

dl, dt, dd

<a> : 앵크 태그. 하이퍼링크, 링크거는 태그.

- href : 링크걸어서 넘어갈 때 주는 링크 주소.

- target : _blank (새 창 열림) / _self (지금 현재보고 있는 문서에서 열림)

 

표를 나타내는 태그 <table>

유지보수가 어렵고, 나중에 테이블의 전체적인 구조를 바꾸는 등 한계가 있어서 예전보다 사용빈도가 많이 줄었다.

 

<tr> : 행

<td> : 열

- colspan : 열을 합치는 속성

- rowspan : 행을 합치는 속성

 

이미지를 나타내는 태그 <img>

시작태그와 종료태그가 하나로 묶여있음

- src : 이미지가 있는 경로. local 이나 원격지에 있는 경로써줌

- alt : 이미지가 없는 경우, 아무튼 이미지가 제대로 출력되지않는 경우에 나타내주는 글 문구

- width : 이미지를 리사이징할 수 있음. 그러나 보통 css에서 설정하기 때문에 잘 사용하지 않는 속성.

 

사운드를 출력하는 태그 <audio>

옛날에는 지원안해서 외부 플러그인, 스크립트를 사용했었고, 여전히 사용하고있다.

html 5에서는 audio 태그 지원.

- src : 음원이 있는 경로

- controls="controls" : 컨트롤러 보일것인지 아닌지 결정

- autoplay="autoplay" : 자동재생

- loop="loop" : 반복,무한재생

 

동영상을 출력하는 태그 <video>

별로 중요하진 않음.

<video src="411.mp4" type="video/mp4" controls="controls"></video>    

<video controls="controls">        
     <source src="411.mp4" type="video/mp4" />    
</video>

 

폼 작성 태그 <form>

 <form action="웹 서버 응용 프로그램의 url" 
	enctype="데이터 인코딩 타입"
	method="get|post"
	name="폼 이름"
      target="윈도우 이름">
      여러 폼 요소 작성..
</form>

- name : 폼의 이름 지정. (서버에서 get uname, get uid 등 메소드 입력하면 사용자가 입력한 값을 얻어올 수 있음)

- action : 폼 데이터를 처리할 웹 서버 응용프로그램의 이름. submit 버튼을 눌렀을 때 브라우저는 action에 지정된 웹서버  응용프로그램 실행 요청

- enctype : 폼 데이터를 웹 서버로 전송할 때 암호화 방식 지정

- method : 폼 데이터를 웹 서버로 전송하는 방식. get/post가 있음

   * get :  내가 입력한 정보가 코드값으로 변환되서 감. 도메인 주소뒤에 정보값이 붙어서 서버로 전송되는 것.

       -> 보안에 취약함. 브라우저에 정보가 다 노출됨. 정보 은닉화x

   * post : 정보입력해서 보낼 때 암호화되서 서버로 감. 전송되는 파일 헤더에 은닉화 처리되어서 전송됨.

- target : 웹 서버 응용프로그램으로부터 받은 데이터를 출력할 윈도우 이름

 

https://search.naver.com/search.naver?where=nexearch&query=어쩌고저쩌고..
　       └웹서버주소┘  └웹서버응용┘
                                 프로그램 이름

 

<input> 태그

<input type="text" name="uname" />

- type : 폼 요소 종류

  * text : 일반적인 문자가 들어가는 것. 한 줄 짜리 입력창 (type="text")

  * password : 암호입력창은닉화되서 안보이게 하는 것

  * textarea : 여러줄 입력창

  * file : 파일선택

  * radio : 라디오 버튼. 하나만 선택가능 (value : 서버에 주는 값)

  * checkbox : 체크박스 n개 선택가능 (value, checkd : 처음 선택 지정)

  * datalist : 데이터 목록

 

<!--radio 버튼 예시-->
<input type="radio" name="gender" value="m">남,
<input type="radio" name="gender" value="w">여

서버에서 get gender을 입력했을때 남자면 m, 여자면 w로 값이 온다고 생각하면됨

 

- size : 문자 몇글자 들어갈 수 있는지 지정

 

<select> 태그

콤보박스. 드롭다운 리스트 <option> 태그로 항목 하나하나 값을 줌.

- multiple : 속성을 주면 아이템 여러개 선택가능

<select multiple="multiple">
      <option>아이템1</option>
      <option>아이템2</option>
</select>

 

레이아웃 구성태그

<div> : 블록태그 (list도 블록태그)

<span> : 인라인태그 옆으로..

 

<div> 태그를 이용한 레이아웃 구성

보통 홈페이지를

헤더

메뉴

본문내용

푸터, 회사의 인포메이션 넣는 부분

... 이런식으로 나눔 

이걸 간단히 div 태그로 나눈 것.

 

시멘틱 태그를 이용한 레이아웃 구성

위에 div 태그로 나눈것을

<header>

<nav>

<section>

<footer>

등 시맨틱 태그를 사용해 나눈 것.

-> div보다 시맨틱을 활용하는 것이 좋다.