html - 태그

📗HTML 태그

<form>

회원가입, 로그인 등을 위해 사용할 수 있는 태그

<form name="폼 태그 이름" method="데이터 전송 방식" action="정보를 보낼 주소"></form>

• name : 회원가입 폼일때는 signUp 또는 join, 설문조사 폼일때는 poll 등
• method : GET, POST 등
• action : 정보를 어디로 보낼 것인지

<input>

값에 따라서 입력폼, 비밀번호 폼이 될 수 있다.

<input type="타입" name="입력 폼의 이름" maxlength="최대 입력 가능 글자 수" placeholder="폼에 어떤 내용을 입력해야 하는지 알려주는 기능" />

• type속성

  1. text : 아이디 입력 폼
  2. password : 비밀번호 입력 폼 → 특수문자로 가려짐

  3. checkbox : 체크박스 폼 → checked로 체크된 상태를 표시할 수 있음

     1
     2
     <input type="checkbox" name="myHobby" value="music" /> 음악듣기
     <input type="checkbox" name="myHobby" value="movie" checked /> 영화보기
     

  4. radio : 라디오 버튼 → checkbox와 동일한 형태로 사용
  5. button : 버튼을 눌렀을 때 동작이 일어나도록 자바스크립트 사용가능
  6. file : 파일 업로드
  7. search : 검색어 입력 폼
  8. reset : 폼의 입력값 초기화
  9. submit : 폼의 입력값 전송
  10. email : 이메일 입력 → @ 과 도메인 필요
  11. url : url 입력에 사용
  12. number: 숫자 입력에 사용
  13. color : 색 지정
  14. range : 슬라이드 방식 수를 출력

<label>

• input태그와 같이 사용
• input태그와 세트로 만들기 위해서 id속성 사용
• id속성은 label태그에서 for속성 == input태그의 id속성 값을 일치시켜서 만듦
• id속성이 일치할 경우 label태그를 클릭하는 것과 input태그를 클릭하는 것이 같은 효과를 가짐

<label for="input 태그의 id속성값">명칭</label> <input type="radio" name="gender" value="female" id="이 페이지에서 사용할 고유한 이름" />

<select>

회원가입 폼에서 생년월일을 입력할 때 사용하는 선택창

<select name="birthMonth"> <option value="1">1</option> </select>

• select : 부모태그
• option: 자식태그 (ul - li와 유사)

<table>

표를 구현하는 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

• tr : table row 생성
• th : table head
• td : table data → 새로운 칸을 만듦

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td> </td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

• colgroup : 표의 열을 묶는 그룹을 정의
• thead : 표의 th들을 묶어서 표현(table에 반드시 필요한 요소는 아님)
• tbody : 표의 여러 행(<tr>)을 묶어서 표 본문을 구성 (thead가 없으면 사용하지 않음)

텍스트 콘텐츠 <p> <div>

해당 콘텐츠의 목적이나 구조 판별에 사용하여 접근성과 SEO에 중요한 텍스트 콘텐츠 태그

• p : 하나의 문단을 나타냄. 줄바꿈 반영 안됨
• div : 플로우 콘텐츠를 위한 통용 컨테이너. css로 꾸미기 전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않음. 순수 컨테이너로, 여럿을 묶어 class를 주거나, id속성으로 꾸미기 쉽게 만들 수 있음

인라인 텍스트 시멘틱 <span>

단어, 줄, 아무 의미나 구조, 스타일을 정의할 수 있음

• a : href특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소, 다른 url로 연결

• span : 구문 콘텐츠를 위한 통용 인라인 컨테이너. 본질적으로는 아무것도 나타내지 않음. 스타일을 적용하기 위해서, 또는 요소를 묶을 때 사용할 수 있음

  div와 매우 유사하지만 div는 블록 레벨 요소, span은 인라인 요소

<video>

<video src="동영상 주소"> 웹 브라우저가 HTML5의 video 태그를 지원하지 않을 때 출력할 내용 </video>

• controls : 컨트롤러 표시 → 재생, 볼륨, 전체 화면 등
• loop : 반복 재생
• muted : 음소거
• poster : 동영상의 대표 이미지

• autoplay : 자동 재생

  최신 브라우저에서는 사용자 경험을 중시하여 autoplay가 실행되지 않음.

  단, muted속성을 함께 사용하면 자동재생 가능

<audio>

<audio controls> <source src="오디오 주소" type="audio/확장자"> </audio>

<iframe>

인라인 프레임 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입할 수 있다.

1
2
3
<div>
  <iframe src="https://youtube.com/embed/mQ055hHdxbE" frameborder="0"></iframe>
</div>

📕 용어 정리

MIME type

MIME 타입

• 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
• 브라우저들이 리소스를 받았을 때 할 기본 동작이 무엇인지 결정하는 것
• 오디오와 비디오 파일. 적합한 MIME 타입을 가진 리소스만이 <video> 혹은 <audio> 엘리먼트 내에서 인식되어 재생될 수 있다.

구조 : type/subtype

예시

1
2
3
4
5
6
<audio controls>
  <source
    type="audio/mpeg"
    src="https://actions.google.com/sounds/v1/alarms/medium_bell_ringing_near.ogg"
  />
</audio>

참고자료 mdn

• Previous
  css - 기본개념
• Next
  Spring - MVC 웹 프레임워크란?