Html 태그 총정리

링크태그

<a href="#" target="_blank"> </a>

• href

  • 웹 URL(링크)

  • 페이지 내 이동(#id명)

  • mailto:메일주소: 메일작성

  • tel:전화번호: 전화걸기

• target

  • _blank: 새 탭에서 열기

  • _self: 현재 탭에서 열기 (default)

  • _parent: 현재 브라우징 맥락의 부모에 표시, 부모 없을 시 _self 와 동일하게 열기

  • _top: 최상단 브라우징 맥락에 표시, 부모 없을 시 _self 와 동일하게 열기

입력 태그

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

• action

  • API 주소

• method

  • GET 또는 POST

<input type=" " placeholder=" " maxlength=" " minlength=" " required disabled value=" " />

• type

  • text

  • email

  • password : *로 표시

  • url : url형식 아니면 오류

  • number : 숫자가 아니면 오류 (min="ɑ" max="β" : ɑ~β 숫자만 입력 가능)

  • file

  • tel : 하이픈 없으면 오류 (pattern="[0~9]{3}-[0-9]{3,4}-[0~9]{4}")

• placeholder : 입력하지 않을 때 기본적으로 보이는 텍스트, 해당 텍스트는 복사 불가능

• maxlength, minlength : 입력 가능한 최대, 최소 글자 수

• required : 입력 필수

• disabled : 접근 금지, 사용 불가

• value : 입력하지 않을 때 기본적으로 입력된 값, 해당 텍스트는 복사 가능

라벨 태그

<label for="아이디명"> 라벨 </label> <input id="아이디명" />

라디오 버튼 ⦿

<input type="radio" id="아이디1" name=" " value="a" />
<label for="아이디1"> 라벨 </label>
<input type="radio" id="아이디2" name=" " value="b" />
<label for="아이디2"> 라벨 </label>

• name : 모두 같아야 한다.

• value : 모두 달라야 한다.

• 결과는 URL 주소로 확인 가능

체크 박스 ☑︎

<input type="checkbox" id="아이디1" name=" " value="a" />
<label for="아이디1"> 라벨 </label>
<input type="checkbox" id="아이디2" name=" " value="b" />
<label for="아이디2"> 라벨 </label>

• name : 모두 같아야 한다.

• value : 모두 달라야 한다.

• 결과는 URL 주소로 확인 가능

선택하기

<label for="아이디1"> 라벨 </label>
<select name=" " id="아이디1" multiple>
    <option value="a"> </option>
    <option value="b"> </option>
</select>

• name : 모두 같아야 한다.

• value : 모두 달라야 한다.

• multiple : 여러 옵션 선택 가능하다. (window-ctrl/shift, mac-command/shift에서 중복 선택)

긴 글 쓰기

<label for="아이디명"> 라벨 </label>
<textarea id="아이디명" placeholder=" "> </textarea>

버튼 태그

<button type=" "> 버튼 </button>

• type : ➀button ➁submit ➂reset

주소 태그

<address>
  <h1> yeonsu </h1>
  <a href="#"> # </a>
</address>

• href : 물리적 주소 / URL 주소 / 이메일 주소 / 전화번호 / SNS 링크

테이블 태그

<table>
<thead>
<tr>
<th scope="col"> ID </th>
<th scope="col"> name </th>
</tr>
</thead>
<tbody>
<tr>
<td> sooth </td>
<td> yeonsu </td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

• <table> : 테이블 만들기 시작~!

• <thead> : 헤더 시작합니다~~

• <tr> : table row. 테이블의 가로줄

• <th> : table header. 각각 세로줄에 대한 제목

• <tbody> : 바디 시작합니다~~

• <td> : table data. 테이블의 내용물

• <tfoot> : 하단(합계, 평균 등)

• ⭐️모든 내 항목의 개수가 같아야한다. 빈칸은 틀만 만들고 채우지 않으면 된다.

• rowspan : 숫자만큼 아래 칸에 침범한다.

• colspan : 숫자만큼 오른쪽 칸에 침범한다.

• scope : 가로줄(row)/세로줄(col)에 대한 헤더라고 설명한다.

설명 목록 태그

• 용도:

  • 용어 정리

  • key-value로 정보 제공

• <dl> : descript list. 직계자식은 오직 <div>, <dt>, <dd> 뿐이다.

• <dt> : descript tern. key 값

• <dd> : descript data. value 값

• <dfn> : definition.

이미지 태그

<img src="#" alt=" " />

: css 사용 시 예민한 태그이기 때문에 <div>로 감싸면 좋겠다.

• src : 이미지 위치 ①파일 내 경로(./폴더명./파일명.확장자명) ②웹 URL(링크)

• alt : 대체 텍스트. 이미지 에러가 났을 때 이미지를 대신 설명한다.

오디오 태그

<audio src="#" controls autoplay loop> </audio>

: 소스 한 개일 때

• src : 오디오 위치

• control : 음향 조절

• autoplay : 자동 재생

• loop : 반복 재생

<audio> <source src="#" type="audio/파일포멧" /> </audio>

: 소스 여러 개일 때

<audio controls> <source src="foo.opus" type="audio/ogg; codecs=opus"/> <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> <source src="foo.mp3" type="audio/mpeg"/> </audio>

출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio

• 브라우저마다 불가능한 포멧이 있으므로 이 형식을 권장한다.

외부영상 태그

<iframe src="#"> </iframe>

• src : 문서 위치

• 유튜브 영상 가져오는 방법: 유튜브 → 영상선택 → 공유 → embed → <iframe> 태그 복사

강조 태그

<em> </em> : 비스듬히

<strong> </strong> : 진하게

• 브라우저에게 강조 메세지를 주고 싶을 때 사용한다.

• css를 입히지 않으면 이렇게 다른 모양으로 출력이 되지만, 우린 css를 사용해 열심히 꾸며줄 것이기 때문에 이 두 태그를 구분해서 쓸 필요는 없다.

인용 태그

<blockquote> 인용 내용 <cite> 출처 </cite> </blockquote>

• 문단 전체가 인용일 때 사용한다.

  • <cite>태그 안에는 비스듬히 출력된다.

  • <blockquote>가 <p>와 다른 점? 인용구의 왼쪽 단락이 자동으로 띄어진다.

<blockquote cite="#"> 인용 내용 </blockquote>

• cite : 인용 출처 사이트

<q> 인용 내용 </q>

• 문단 내 일부가 인용일 때 사용한다.

약자 설명

<p> 난 아직도 <abbr title="Application Programming Interface"> API </abbr> 가 뭔지 모르겠어 </p>

• title : 약자 설명, 마우스 올리면 툴팁 열림

그대로 출력

<pre>
  <code>
    var hi="hello";
    console.log(hi);
  </code>
</pre>

• pre 내 텍스트 그대로 출력