-
HTML 태그 정리FrontEnd/HTML 2021. 2. 17. 15:13
<form>
사용자가 데이터를 입력할 수 있는 폼. 입력란, 전송버튼, 체크박스 등이 포함된다.
폼의 input에서 데이터를 입력할 수 있고, 전송 시에 name을 key, value를 값으로 하여 key=value 형태로 전달된다.
전송버튼을 누르면 action에 지정된 URL로 데이터가 전송된다. 전송방식은 Get과 Post가 있고, method에서 지정할 수 있다.
<form action="/데이터를_전송할_URL" method="get(전송방식)"> <label for="data1">입력 데이터 레이블:</label> <input type="text" name="data1" value="데이터 입력란 기본값"><br> <label for="data2">입력 데이터 레이블2</label> <textarea name="data2">textarea 입력란 기본값</textarea><br> <input type="submit" value="전송 버튼에 표시될 값"> </form>그외에도 input type=""에 들어갈 수 있는 속성에는 여러 가지가 있다.
*아래에서 데이터를 박스로 묶는 데 사용한 태그는 <fieldset>, label을 달 때 사용한 태그는 <legend>
유저에게는 노출되지 않고 데이터 전송시에만 전달되는 데이터인 hidden, 전송버튼을 이미지로 표현하게 해주는image,
년월일을 생성하는 date,
<form> <input type="date" max="2021-12-31" min="2021-01-01" name="date" value="2021-02-17"> </form>년월일에 시분초를 더한 datetime과 datetime-local,
<form> <input type="datetime-local" name="datetime-local" value="2021-02-17KST00:00" min="2021-02-01KST00:00" max="2021-02-28KST00:00"> </form>월(month)을 선택하는 month, 주(week)를 선택하는 week, 시간을 선택하는 time,
<form> <label for="month">Month:</label> <input type="month" name="month" id="month" min="2021-01" value="2021-02"> <label for="week">Week:</label> <input type="week" name="week" id="week" min="2021-W1" max="2021-W52" required> <label for="time">Time</label> <input type="time" name="time" id="time" min="09:00" max="18:00" required> </form>이메일 입력 폼인 email, 전화번호 입력 폼인 tel, password를 입력하는 password, 숫자를 입력하는 number,
<form> <label for="email">Email:</label> <input type="email" id="email" pattern=".+@email.com" size="30" required> <label for="phone">Tel:</label> <input type="tel" id="phone" name="phone" pattern="010-[0-9]{4}-[0-9]{4}" required> <small>Format: 010-****-****</small> <label for="pass">Password:</label> <input type="password" name="password" id="pass" minlength="8" required> </form>url을 입력하는 url, 검색어를 입력하는 search, (유저 컴퓨터의) 파일 선택에 사용하는 file,
<form> <label for="url">URL:</label> <input type="url" name="url" id="url" placeholder="https://example.com" pattern="https://.*" size="30" value="https://" required> <label for="site-search">Search:</label> <input type="search" id="site-search" name="search-query" aria-label="사이트 내 검색: "> <button>Search</button> <label for="file">file:</label> <input type="file" id="file" name="file" accept="image/png, image/jpeg"> </form>radio 그룹을 만드는 radio와 입력데이터를 초기화 하는 reset,
<form> <p>Radio:</p> <div> <input type="radio" id="1" name="company" value="apple" checked> <label for="1">Apple</label> </div> <div> <input type="radio" id="2" name="company" value="microsoft"> <label for=2">MicroSoft</label> </div> <div> <input type="radio" id="3" name="company" value="google"> <label for="3">Google</label> </div> <input type="reset" value="Reset"> </form>대부분의 경우 인풋 타입이 정해지면 데이터 유효성 검사가 들어간다. email이면 @가 없으면 에러 표시되고, tel 등에도 정규식 형태로 pattern을 지정할 수 있으며, password는 입력데이터가 숨김처리 되어서 표시된다.
<시맨틱 레이아웃>
<div>는 아무런 의미가 없으므로 가능한 아래 태그를 이용해 컨테이너를 나누는 편이 좋다.
<header>
<nav> 내비게이션
<aside> 사이드 공간
<section> article을 포함하는 주 내용
<article> 주 내용이 들어가는 공간, 블로그 글, 뉴스 기사, 게시판 등이 여기 들어간다. 작성자 정보는 address를 통해 표현 가능하다.
<footer>
<Empty element>
content 없이 속성(Attribute)만 가지고 있는 요소, 한국어로는 빈 요소라고 한다.
<meta>
메타데이터 정의에 사용되는 태그로 description, keywords, author 등을 정의할 수 있다. 검색엔진에서 사용할 keywords는 meta 태그의 name="keywords"의 content로 주면 된다. http-equiv ="refresh"의 content로 초를 주면 웹페이지 갱신단위 시간을 지정할 수 있다.
<sub>/<sup>
subscripted, superscripted로 각각 아래, 위에 표시한다. (아마도 각주 숫자 표시하는 등의 용도?)
<pre>
preformaated, 공백과 줄바꿈 등을 문자 그대로 표현한다. 안에 들어간 태그는 적용된다. <pre> <h1>H1</h1></pre>는 제목 강조 표시가 적용된다.
<q>
인용문을 지정한다. <q> </q>로 감싸면 따옴표가 생긴다.
<blockquote>
긴 인용문 블럭 지정. blockquote르 넣으면 들여쓰기 된다. CSS와 함께 자주 사용된다.
<hr>
수평줄을 삽입한다. 티스토리에서 구분선을 추가하고 HTML로 열어보면 hr 태그로 되어있다. <hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style5" />
<!DOCTYPE html> <html> <head> <!-- 여기 meta 태그들은 content 없이 속성만 가지고 있기 때문에 Empty element다--> <meta name="keywords" content="검색엔진이 검색하는 키워드"> <meta name="author" content="저자명"> <meta name="description" content="페이지 설명"> </head> <body> <article> <p>일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그 일반적인 p태그</p> <hr> <q>q로 작성한 인용문</q> <blockquote> blockquoto로 작성한 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 인용문 블럭 들여쓰기가 적용될 뿐 줄바꿈은 반영되지 않는다. </blockquote> <pre> 줄바꿈을 하고 싶다면 pre 태그를 넣어야한다. 줄바꿈과 띄어쓰기가 모두 입력한 대로 표시된다. 태그에 따라 들여쓰기 되는 부분도 그대로 반영된다. </pre> <sub>sub</sub>와 <sup>sup</sup>는 각각 위아래에 작게 표시되는 텍스트를 말한다. </article> </body> </html>
<a>
a 태그의 href 속성에는 절대 URL, 상대 URL, fragment identifier(ex href="#top"), 메일(ex mailto:), script가 올 수 있다.
(루트부터 쓰면 절대 경로, 현재 작업 디렉토리 기준으로 쓰면 상대 경로라고 부른다.)
target 속성에는 _self(기본값: 현재 윈도우에서 바로 연다)와 _blank(새로운 윈도우나 탭에서 연다)가 있다.
<ol>
type 속성을 사용해서 숫자를 나타내는 문자를 지정할 수 있다.
<ol type="1"> <li>숫자, 생략시 기본값</li> </ol> <ol type="A"> <li>대문자 알파벳</li> </ol> <ol type="a"> <li>소문자 알파벳</li> </ol> <ol type="I"> <li>대문자 로마숫자</li> </ol> <ol type="i"> <li>소문자 로마숫자</li> </ol>
li의 value 속성으로 목록 번호를 지정할 수 있다. 미 지정시 1번부터 시작한다. 지정하면 그 번호부터 다시 시작한다.
<ol type="a"> <li>1</li> <li>2</li> <li value="2">3</li> <li>4</li> <li value="1">5</li> <li>6</li> </ol>
ol에 reversed를 주면 마지막 번호부터 시작한다.
<ol reversed> <li>1</li> <li>2</li> <li value="2">3</li> <li>4</li> <li value="1">5</li> <li>6</li> </ol>
<table>
행을 나누는 <tr>안에 <td>, head 행인 경우 <th> 태그를 넣어서 각 셀을 표현한다.
셀 병합을 표현하려면 rowspan, colspan을 사용하면 된다.
<table border="1"> <tr> <th>th1</th> <th>th2</th> <th>th3</th> </tr> <tr> <td>(1, 1)</td> <td rowspan="2">세로 병합</td> <td>(1, 3)</td> </tr> <tr> <td>(2, 1)</td> <!-- 위의 row에서 세로 병합했으므로 여기는 생략해야 한다 --> <td>(2, 3)</td> </tr> <tr> <td colspan="2">가로 병합</td> <!-- 위의 column에서 세로 병합했으므로 여기는 생략해야 한다 --> <td>(3, 3)</td> </tr> </table>
<img>
<img src="img.jpg" alt="실패시 표시문구, ex 이미지를 표시할 수 없습니다." width="500" height="600"> <!-- 일반적으로 width, height 등의 표시 형식은 CSS에서 설정한다 --><audio>
HTML5부터 사용가능.
controls: 재생, 정지, 볼륨바 등 도구 표시여부
autoplay: 자동실행
preload: 재생전 모두 로딩
loop: 반복
<audio controls autoplay loop preload> <source src="파일경로.mp3" type="audio/mpeg"> </audio><video>
<video controls autoplay loop poster="비디오 로딩이 끝나기 전까지 표시해줄 이미지 경로"> <source src="movie.mp4" type="video/mp4"> 비디오 태그를 지원하지 않는 경우 이 메세지가 출력된다. </video> <!-- 일반적으로 width, height 등의 표시 형식은 CSS에서 설정한다 -->