HTML 태그 사용법

<태그이름 옵션(또는 속성)="옵션값">내용</태그이름>

HTML body 태그 안에 사용되는 태그

글씨 관련 태그

<b>
bold 약자로 글자를 굵게 만드는 태그이다.

<i>
italic 약자로 글자를 기울게 만드는 태그이다.

<u>
underline 약자로 글자에 밑줄을 만드는 태그이다.

<strike>
취소선 태그로, 글자에 선을 긋는 태그이다.

<em>
강조 태그이다. <i>태그와 비슷하기만 브라우저에서 음성지원시 음성강조 효과가 있다.

글자 관련 태그

<h1>,<h2>,<h3>,<h4>,<h5>
h의 숫자가 작아지면 글씨 크기가 커진다. 자동줄바뀜과 위아래가 조금 띄어져 있다.

<ruby>
한자를 표시해주는 태그이다.

<rt>
한자의 음과 뜻을 설명해줄때 사용하는 태그이다. <ruby>태그의 위에 표시된다.

<p>
단락 태그이다. 자동 줄바뀜 된다. 밑과 조금 띄어져 있다.

파일 관련 태그

<img>
이미지를 넣는 태그이다.

• 옵션
  src="url주소 or 파일위치.파일확장자"
  width="가로크기px"
  height="세로크기px"

src : 이미지의 파일위치를 지정하는 옵션이다.
width : 가로크기를 지정한다.
height : 세로크기를 지정한다.

<video>
비디오를 넣는 태그이다.

• 옵션
  src="url주소 or 파일위치.파일확장자"
  width="가로크기px"
  height="세로크기px"
  controls
  autoplay
  loop
  muted
  poster="url주소 or 파일위치.파일확장자"

src : 비디오의 파일위치를 지정하는 옵션이다.
width : 가로크기를 지정한다.
height : 세로크기를 지정한다.
controls : 영상 컨트롤러를 표시한다.
autoplay : 영상 자동재생
loop : 영상 무한재생
muted : 영상 음소거
poster : 영상 썸네일을 지정한다.

• 웹브라우저가 html5 의 video 태그를 지원하지 않을때 경고하는 메세지를 띄우려면 그냥<video>태그 안에 경고할 메세지를 기술하면 된다.

• 만약 코덱을 따로 지정하고 싶다면 video 태그 안에 src 옵션을 넣지않고 video 태그안에 source 옵션을 따로 생성후 그 안에 src 옵션과 type 옵션을 넣어야 한다.

* 예제
<video autoplay width="300" height="300" controls>
        <source src="./snowboard.mp4" type="video/mp4">
        <source src="./snowboard.ogg" type="video/ogg">
</video> 

<iframe>
<video>태그와 옵션이 비슷하다. 유튜브 영상을 퍼올때 주로 사용한다.

• Youtube영상 가져오기
  유튜브에 공유하기 -> 퍼가기 -> 소스코드 복사
  유튜브 src옵션의 url주소 맨뒤에 ? 를 붙힌뒤 원하는 옵션 ="값 0 or 1" 을 지정하면됨

• ex ) src="https://www.youtube.com/embed/fuY6iwj4kbI?autoplay=1 하면 autoplay(자동재생)됨

<audio>
오디오를 넣는 태그이다.

• audio 태그에 contols 옵션을 지정하면 오디오 컨트롤러가 표시된다.
  * ex ) <audio contorls>

• audio 태그 안에 확장자별로 기술할 수 있다.

* 예제
<audio controls>
  <source src="./sia-snowman.mp3" type="audio/mp3">
  <source src="./sia-snowman.mp4" type="audio/mp4">
</audio>

이동 관련 태그

<a>
지정해둔 문서나 url로 이동한다. <img> 태그와 같이 사용하면 유용하다.

• 옵션
  href="url주소 or 문서위치.문서확장자"
  target="_self or blank"

href : 이동할 url주소나 문서를 지정한다.
target : 이동방식을 지정한다.

>> _self : 현재창으로 이동한다
>> _blank : 새창을열어서 이동한다

리스트 관련 태그

<ol>
번호가 붙는 리스트 태그이다. 자동 줄바뀜된다.

<ul>

번호가 붙지 않는 리스트 태그이다. 자동 줄바뀜된다.

<li>
<ol>이나 ul태그 안에 사용하는 리스트 태그이다.

* 예제
<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
</ol>

표 관련 태그

<table>
표를 생성하는 태그.<tr>태그와<td>태그와<th>태그를 같이 사용한다.

• table 태그와 tr 태그의 옵션
  border="사이즈px"
  bordercolor="16진수색상값"
  align="center or left or right"
  bgcolor="16진수색상값"
  cellspacing="값px"
  cellpadding="값px"
  heigth="세로크기px"
  width="가로크기px"

align : 테이블을 어디에 정렬할지 지정

>> left
>> center
>> right 

bgcolor : 테이블의 배경색 지정
background : 테이블의 배경그림 지정
border : 테이블의 테두리 두께 지정
bordercolor : 테이블의 테두리 색상 지정
cellspacing : 셀과 셀의 간격 지정
cellpadding : 셀 안의 내용과 여백 지정
height : 높이 크기 지정
width : 가로 크기 지정

<tr>
새로운 열을 생성한다.

<td>
새로운 행을 생성한다.

<th>
표의 이름이나 제목을 지정한다. 자동 가운데 정렬됨.

* 예제
<table>
<tr align="center" bgcolor="skyblue"  >
      <td>월</td>
      <td>화</td>
      <td>수</td>
      <td>목</td>
      <td>금</td>
      <td>토</td>
      <td>일</td>
    </tr>
    <tr align="center" bgcolor="black" style="color:white">
      <td>운동</td>
      <td>공부</td>
      <td>여행</td>
      <td>취미</td>
      <td>아파트장</td>
      <td colspan="2">놀기</td>
      <!-- td (셀)태그에 colspan 으로 가로셀을 합칠 수 있다 ..
                        rowspan 으로 세로셀을 합칠 수 있다.. -->
    </tr>
</table>

• td 태그에 colspan 옵션으로 으로 가로 셀을 합치거나 rowspan으로 세로셀을 합칠 수 있다.

구역 관련 태그

<div>
영역을 지정하는 태그이다.

<span>
in-line 형식으로 영역을 지정하는 태그이다.

<header>
보통 웹 상단에 웹서비스의 로고, 메뉴등이 위치하는 구역 태그이다.

<footer>
보통 웹 하단에 회사의 정보등이 위치하는 구역 태그이다.

<nav>
보통 메뉴를 위치하는 구역 태그이다.

<section>
보통 서브제목과 관련된 내용을 표시하는 구역태그이다.

<article>
보통 신문기사나 블로그에 글을 작성할때 사용되는 구역태그이다.

form(전송) 관련 태그

<input>
입력을 하는 태그이다. 많은 옵션들이 존재한다.

• 옵션
  type="type명"
  name="서버로 전달될 파라메터명"
  value="값"
  placehorlder="미리입력될값"

type : input 태그의 type을 지정한다.
name : 백엔드 서버로 전달될 파라메터값 이름을 지정한다.
value : 지정한 값이 미리 쓰여있게 하거나 버튼에 값을 넣을 수 있다.
placehorlder : input 태그의 입력창에 미리 표시되는 내용이다.

ex ) <input type="text" value="userID" placeholder="ID를 입력하세요"/>

• input 태그의 type 들
  text
  password
  checkbox
  radio
  button
  file
  search
  reset
  submit
  email
  url
  number
  color
  range
  date

text : 글자를 입력하는 타입이다. 흔히 아이디나 주소 입력시 사용된다.
password : 비밀번호를 입력하는 타입이다. 암호화 된다.
checkbox : 체크박스 타입이다. 흔히 취미 체크시 사용된다. input 태그의 마지막에 checked 옵션을 주면 미리 체크가 된 상태로 표시된다.

• ex ) <input type="checkbox" name="hobby" value="music" checked />

radio : 라디오 버튼형 체크 박스이다. 한개밖에 선택하지 못한다. 흔히 남녀 선택시 사용된다.

• 여러 라디오 버튼중 하나만 선택할 수 있게 하려면 라디오 버튼들의 id 태그가 모두 같아야 한다.

button : 버튼형 타입.
file : 파일 업로드형 타입.
search : 검색창형 타입. 옆에 검색어를 자동으로 지워주는 버튼이 존재함.
reset : 초기화버튼을 만듦. 모든 입력창이 초기화됨.
submit : 전송 버튼을 만듦. 백엔드 서버나 form태그의 action 속성에 지정된 페이지로 입력값을 전송함.
email : 이메일 입력창을 만듦. 해당 입력창에는 무조건 @ 과 이메일 형식이 있어야함.
url : 주소를 입력하는 창을 만듦. 주소형식을 갖추지 않으면 전송이 되지 않음.
number : 숫자입력에 사용된다. 문자는 입력되지 않는다.

• 스마트폰에서 사용할 경우 숫자 키패드가 나타나게 하려면 pattern="/d*" 를 태그 마지막에 작성해야 한다.

color : 색을 선택하는 기능을 한다.
range : 바를 만들어서 마우스나 손으로 바를 움직여 숫자를 조절해주는 기능을 한다.
date : 날짜를 선택하는 기능을 한다.

<label>
해당 입력창 또는 선택창에 명칭을 부여한다. input 태그의 radio 타입이나 check타입과 같이 사용하면 유용하다.
label 태그의 for 옵션과 input 태그의 id 옵션이 일치하면 label(글자)를 누르는 것만으로도 체크가 된다.

* 예제
<label for="woman">여성</label>
<input type="radio" name="gender" value="여자" id="woman"/>
<label for="man">남성</label>
<input type="radio" name="gender" value="남자" id="man"/>

<select>
select 태그는 선택할 수 있는 창을 사용할때 쓴다. 주로 직업선택을 선택할 때 쓰인다.
option 태그와 같이 사용한다.

• 옵션
  name="서버로 전달될 파라메터명"

name : 백엔드 서버로 전달될 파라메터명을 지정한다.

• select 태그 안에 option 태그를 지정하여 사용한다.

* 예제
<select name="job">
    <option value="student">학생</option>
    <option value="teacher">교사</option>
    <option value="criminal">회사원</option>
</select></br>