반응형
HTML이란?
HTML은 HyperText Markup Language의 줄임말로 웹 문서를 만드는 언어 입니다.
HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 Markup하고 문서끼리 링크하는 것입니다.
HTML 구조 파악하기
<!DOCTYPE html>: 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻입니다.
<html> ~`: 웹 문서의 시작과 끝을 나타내는 태그입니다. 웹 브라우저가태그를 만나면`까지 소스를 읽어 화면에 표시합니다.
<head> ~ </head> 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분입니다.
<body> ~ </body> 실제로 웹 브라우저 화면에 나타나는 내용입니다. 앞으로 우리가 공부할 HTML 태그는 대부분 <body> 태그 안에 들어 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 기본 문서</title>
</head>
<body>
<h1>프런트엔드 웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html>
시맨틱 태그
HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱(semantic) 태그라고 합니다.
웹 문서 구조를 만드는 주요 시맨틱 태그
<header>태그는 말 그대로 헤더 영역을 의미합니다.<nav>태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다.<nav>태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있습니다.<main>태그는 웹 문서에서 핵심이 되는 내용을 넣습니다.<main>태그는 웹 문서에서 한 번만 사용할 수 있습니다.<article>태그는 웹에서 실제로 보여 주고 싶은 내용을 넣습니다. 문서 안에는<article>태그를 여러 개 사용할 수 있고, 이 안에는<section>태그를 넣을 수도 있습니다.<section>태그는 웹 문서에서 콘텐츠 영역을 나타냅니다.<aside>태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듭니다.<footer>태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역를 만듭니다. 푸터 영역에는<header>태그를 비롯하여<section>,<article>등 다른 시맨틱 태그를 모두 사용할 수 있습니다.<div>태그는 여러 소스를 묶어 영역을 구별하거나 스타일로 문서를 꾸미는 태그로<div id="header">나<div class="detail">처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용합니다.
반응형
'HTML&CSS' 카테고리의 다른 글
| HTML 입력 양식 작성하기! (0) | 2023.02.09 |
|---|---|
| HTML에 표 삽입하기! (0) | 2023.02.06 |
| HTML에 텍스트, 이미지 삽입하기! (0) | 2023.02.03 |