본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.
HTML 기초
- HTML(Hyper Text Markup Language)은 웹 페이지를 만드는 데 사용되는 기본적인 마크업 언어
- HTML은 다양한 요소(element)로 구성되며, 각 요소는 태그(tag)로 표시
HTML 문서의 구조
HTML 문서는 일반적으로 다음과 같은 구조를 갖는다.
<!DOCTYPE html> <!-- 문서 형식을 HTML5로 지정 -->
<html> <!-- HTML 문서의 최상위 요소 -->
<head> <!-- 문서의 메타데이터를 포함 -->
<meta charset="UTF-8"> <!-- 문자코드 -->
<title>HTML연습</title> <!-- 문서의 제목 -->
</head>
<body> <!-- 문서의 본문 -->
</body>
</html>html5를 표준모드로 사용하지 않는 이유는 html5이전에 만들어진 문서와의 호환성 문제때문
HTML 태그 구성요소
<열린태그 속성="속성값">컨텐츠</닫힌태그>제목과 단락 태그
<h1>제목 1</h1>- 제목과 부제목을 표현
- 숫자가 클 수록 중요도가 낮아짐(h1 ~ h6)
- h1 태그는 가장 중요한 정보를 담으므로 한번만 사용
<p>문단 1</p>- 본문의 내용을 표현
이미지 태그
<img src="이미지 주소" alt="대체 텍스트">- src 속성을 이용해 이미지의 주소를 지정
- alt 속성을 이용해 대체 텍스트를 지정
링크 태그
<a href="링크 주소">링크 텍스트</a>- href 속성을 이용해 링크 주소를 지정
목록 태그
<ul>
<li>목록 1</li>
<li>목록 2</li>
</ul>- ul태그 - li태그는 순서가 없는 리스트를 생성
<ol>
<li>목록 1</li>
<li>목록 2</li>
</ol>- ol태그 - li태그는 순서가 있는 리스트를 생성
구조를 잡을 때 사용하는 태그
<header>
<nav>
</nav>
</header>- header 태그는 머리글을 담는 공간
- nav 태그는 메뉴버튼을 담는 공간
<main role="main">
<article>
</article>
</main>- main 태그는 본문영역
- article 태그는 정보영역(h 태그가 무조건 하나 필요)
<footer>
</footer>- footer 태그는 가장 하단에 들어가는 정보영역
<div>
</div>- div 태그는 임의의 공간을 만들 때 사용
열심히