HTML 은 구조화를 잘 시키는게 핵심으로 아래와 같은 태그들을 이용하여 웹 페이지의 구조를 설계할 때 사용한다.
시작전에 강조하는 거지만 모든 태그를 외울 필요는 없다. 사실 전부 외우는게 불가능하다.
아래 정리된 몇 가지 자주 사용하는 HTML 태그들만 간단하게 기억해둔 뒤 필요한 태그나 속성은 검색해서 사용하자.
기본 구조 태그
<html>: HTML 문서의 루트 요소.<head>: 메타데이터 요소들을 포함.<title>: 문서의 제목을 정의, 브라우저의 제목 표시줄에 표시.<body>: 문서의 본문을 정의.
텍스트 형식화 태그
<h1>~<h6>: 제목 태그,<h1>이 가장 크고<h6>이 가장 작음.<p>: 단락을 정의.<br>: 줄 바꿈을 삽입.<hr>: 수평선을 삽입.<strong>: 굵은 텍스트.<em>: 이탤릭 텍스트.<a>: 하이퍼링크를 정의,href속성을 사용해 링크 대상 지정.<blockquote>: 인용문을 정의.
목록 태그
<ul>: 순서 없는 목록.<ol>: 순서 있는 목록.<li>: 목록 항목.
이미지 및 멀티미디어 태그
<img>: 이미지를 삽입,src속성을 사용해 이미지 파일 지정.<audio>: 오디오 콘텐츠를 정의.<video>: 비디오 콘텐츠를 정의.
표 태그
<table>: 표를 정의.<tr>: 표의 행을 정의.<td>: 표의 셀을 정의.<th>: 표의 헤더 셀을 정의.
폼 태그
<form>: 사용자 입력을 받는 양식을 정의.<input>: 사용자 입력 필드를 정의.<textarea>: 여러 줄의 텍스트 입력 필드를 정의.<button>: 클릭 가능한 버튼을 정의.<label>: 입력 요소에 레이블을 붙임.
구조 태그
<div>: 블록 수준의 요소를 그룹화.<span>: 인라인 요소를 그룹화.
메타데이터 태그
<meta>: 문서 메타데이터를 정의.<link>: 외부 리소스와의 관계를 정의 (주로 CSS 파일을 링크할 때 사용).<style>: 문서 내에 CSS 스타일을 정의.
시맨틱 태그
<header>: 문서나 섹션의 헤더를 정의.<nav>: 네비게이션 링크를 포함하는 섹션을 정의.<main>: 문서의 주요 콘텐츠를 나타냄.<footer>: 문서나 섹션의 푸터를 정의.<article>: 독립적인 콘텐츠 항목을 정의.<section>: 문서의 섹션을 정의.<aside>: 문서의 주요 콘텐츠 외의 내용(사이드바 등)을 정의.
이 태그들은 웹 페이지를 작성하는 데 필수적이며, 각각의 태그는 특정한 목적과 의미를 가지고 있습니다. HTML5에서는 시맨틱 태그가 추가되어 콘텐츠의 의미를 보다 명확하게 정의할 수 있습니다.
비디오 태그의 경우 사용자 보호? 등을 위해 구글(크롬 정책상) muted 속성을 적용하지 않으면 autoplay가 불가능함.
<video controls autoplay muted>
<source src="../nike.mp4" type="video/mp4" />
</video>'공부방 > 웹 개발' 카테고리의 다른 글
| 내가 보려고 만드는 웹 개발자 도구 요약 (0) | 2024.07.11 |
|---|---|
| vscode 설정 및 단축키 (0) | 2024.07.11 |