HTML 필수 태그 요약 정리(2)

---

 

 

링크와 이미지

---

링크 관련 태그

• <a>: 하이퍼링크를 생성합니다.
• href: 링크가 연결할 URL을 지정합니다.
• target: 링크를 클릭했을 때 새 창에서 열지 여부를 지정합니다.
  • _blank: 새 창에서 열기
  • _self: 현재 창에서 열기

<a href="http://www.example.com">링크 텍스트</a>

 

 

이미지 관련 태그

• <img>: 이미지를 표시합니다.
• src: 이미지 파일의 경로를 지정합니다.
• alt: 이미지를 대체할 텍스트를 지정합니다.
• width: 이미지의 가로 크기를 지정합니다.
• height: 이미지의 세로 크기를 지정합니다.

<img src="image.jpg" alt="이미지 설명">

 

 

폼 관련 태그

---

HTML에서 폼을 만들 때 사용할 수 있는 태그와 속성은 다음과 같습니다.

form 태그

• <form>: 폼을 나타냅니다.
• action: 폼이 제출될 URL을 지정합니다.
• method: 폼 제출 방식을 지정합니다.
  • GET: 폼 데이터를 URL의 쿼리 문자열에 추가하여 전송합니다.
  • POST: 폼 데이터를 HTTP 요청 본문에 추가하여 전송합니다.

<form action="insert/member" method="post">
  <!-- 폼 요소들 -->
</form>

 

 

 

input 태그

• <input>: 사용자로부터 입력을 받습니다.
• type: 입력 필드의 유형을 지정합니다.
  • text: 일반적인 텍스트 입력 필드입니다.
  • password: 암호를 입력받는 필드입니다.
  • email: 이메일 주소를 입력받는 필드입니다.
  • number: 숫자를 입력받는 필드입니다.
  • checkbox: 체크박스입니다.
  • radio: 라디오 버튼입니다.
  • submit: 제출 버튼입니다.

 

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username"><br>

<label for="password">비밀번호:</label>
<input type="password" id="password" name="password"><br>

<label for="email">이메일 주소:</label>
<input type="email" id="email" name="email"><br>

<label for="age">나이:</label>
<input type="number" id="age" name="age"><br>

<label for="checkbox">체크박스:</label>
<input type="checkbox" id="checkbox" name="checkbox" value="1"><br>

<label for="radio1">라디오 버튼 1:</label>
<input type="radio" id="radio1" name="radio" value="1"><br>

<label for="radio2">라디오 버튼 2:</label>
<input type="radio" id="radio2" name="radio" value="2"><br>

<input type="submit" value="제출">

 

textarea 태그

• <textarea>: 여러 줄의 텍스트를 입력받습니다.
• rows: 텍스트 영역의 행 수를 지정합니다.
• cols: 텍스트 영역의 열 수를 지정합니다.

<label for="message">메시지:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

 

 

select 태그와 option 태그

• <select>: 드롭다운 목록을 생성합니다.
• <option>: 드롭다운 목록의 각 항목을 나타냅니다.

• <label for="fruits">과일:</label>
  <select id="fruits" name="fruits">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="orange">오렌지</option>
  </select>
  

---

 

멀티미디어 태그

---

HTML에서 멀티미디어(음성, 영상, 이미지)를 나타내기 위해 사용할 수 있는 태그는 다음과 같습니다.

멀티미디어 태그를 사용하여, 음성, 영상, 이미지 등 다양한 미디어 콘텐츠를 웹 페이지에 삽입할 수 있습니다.

img 태그

• <img>: 이미지를 나타냅니다.
• src: 이미지 파일의 경로를 지정합니다.
• alt: 이미지를 대체할 텍스트를 지정합니다.
• width: 이미지의 가로 크기를 지정합니다.
• height: 이미지의 세로 크기를 지정합니다.

<img src="example.jpg" alt="예시 이미지">

 

 

audio 태그

• <audio>: 오디오를 나타냅니다.
• src: 오디오 파일의 경로를 지정합니다.

<audio src="example.mp3" controls></audio>

 

 

video 태그

• <video>: 비디오를 나타냅니다.
• src: 비디오 파일의 경로를 지정합니다.
• controls: 비디오 컨트롤러를 표시합니다.

<video src="example.mp4" controls></video>

 

 

iframe 태그

### iframe 태그

```html
<iframe src="http://example.com"></iframe>
```

---

---