미디어 태그
1) 미디어 태그란?
- 미디어(이미지, 오디오, 비디오 등)를 표시하거나 재생하기 위해 사용되는 몇 가지 주요한 HTML 태그
2) 미디어 태그 예시
👉 (1-1) 이미지 태그 예시
<img src="https://img.freepik.com/free-photo/ultra-detailed-nebula-abstract-wallpaper-4_1562-749.jpg?size=626&ext=jpg&ga=GA1.1.632798143.1705881600&semt=sph" alt="이미지 태그">💡 미디어 태그 작성 시 alt 태그는 웹 표준 때문에 반드시 작성해야 함
💡 img 태그는 빈 요소이기 때문에 시작 태그만 존재, 종료 태그가 없어야 함
👉 (1-2) 코드 실행 결과
👉 (2-1) 오디오 태그 예시
<audio src="" alt="오디오 태그" controls></audio>💡 controls 태그는 플레이 버튼이나 정지 버튼과 같이 오디오의 실행을 제어할 수 있는 제어기가 표시됨을 명시
👉 (2-2) 코드 실행 결과
👉 (3-1) 비디오 태그 예시
<video src="" alt="비디오 태그" controls></video>👉 (3-2) 코드 실행 결과
👉 (4-1) iframe 태그 예시
<iframe src="https://velog.io/@danjr/posts" alt="iframe 태그"></iframe>👉 (4-2) 코드 실행 결과
목록 태그
1) 목록 태그란?
- 목록을 생성할 때 사용하는 태그
2) 목록 태그 예시
👉 (1-1) Unordered List(순서가 없는 목록) 예시
Unordered List (순서가 없는 목록)
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ul>👉 (1-2) 코드 실행 결과
👉 (2-1) Ordered List(순서가 있는 목록) 예시
Ordered List (순서가 있는 목록)
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>👉 (2-2) 코드 실행 결과
👉 (3-1) Definition List (용어와 정의 목록) 예시
Definition List (용어와 정의 목록)
<dl>
<dt>용어 1</dt>
<dd>정의 1</dd>
<dt>용어 2</dt>
<dd>정의 2</dd>
</dl>👉 (3-2) 코드 실행 결과
링크 태그
1) 링크 태그란?
- 클릭하게 되면 연결된 곳으로 이동하는 태그
2) 링크 태그 예시
<a href="#"> 입력한 곳으로 이동 </a>
<!-- # 대신 파일 경로나 URL을 넣으면 그 곳으로 이동 -->3) 코드 실행 결과
문단 태그
1) div 태그
👉 (1-1) div 태그란?
- 레이아웃을 구성하거나 스타일을 적용하기 위해 일반적으로 사용하는 태그
👉 (1-2) div 태그 예시
<div> div 요소 내에 있는 문장입니다. </div>👉 (1-3) 코드 실행 결과
2) span 태그
👉 (2-1) span 태그
- 특정 부분을 감싸는 인라인 요소로, 텍스트 스타일링이나 특정 부분에 스크립트를 적용할 때 사용하는 태그
👉 (2-2) span 태그 예시
<span> span 요소 내에 있는 문장입니다. </span>👉 (2-3) 코드 실행 결과
