HTML : 컨텐츠의 구조를 정의하는 마크업 언어
→ (마크)컨텐츠(마크)
제목 : 웹 프로그래밍 강좌
⇒
<제목>웹 프로그래밍 강좌</제목>
→ <h1> : 시작 태그
→ </h1> : 종료 태그
→ 내용
제목 : 웹 프로그래밍 강좌
내용 : 웹 프로그래밍, HTML/CSS 강의를 통해 친절히 ...
⇒
<제목>웹 프로그래밍 강좌</제목>
<내용>웹 프로그래밍, HTML/CSS 강의를 통해 친절히 ...</내용>
→ 태그 : 내용을 나누고 어떤 역할을 하는지 구조를 정의
→ 시작 태그 : 컨텐츠의 시작을 표시
→ 종료 태그 : 컨텐츠의 끝을 표시
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset-"utf-8">
<title>여정이를 소개합니다.</title>
</head>
<body>
<h1>안녕하세요 저는 조여정입니다!</h1>
<p>저는 현재 웹 프로그래밍을 공부하는 학생입니다.</p>
</body>
</html>
HTML
복사
<!DOCTYPE html>
→ 문서 형식을 정의
<html lang="kr">
→ html 필수, html 태그 밖 다른 태그x, 언어
→ 본격적인 태그의 시작, 사용하는 주 언어 정의
<head>
→ 한번만 쓰임
→ <meta charset-"utf-8"> : 문서와 관련한 정보를 담음, 쓰이는 한글이 깨지지 않도록 함
→ 웹 페이지의 제목을 담음
<body>
→ 한번만 쓰임
→ 실질적으로 보이는 부분
→ header, nav, section, article, aside, footer ⇒ 시맨틱 태그 : 의미를 가지고 있는 태그
→ <header> : 웹 페이지 혹은 <section> 의 소개나 제목을 담기 위해 사용하는 요소
→ <nav> : 네비게이션 역할을 하는 요소
→ <section> : 기준에 따라 구획을 구분하기 위해 사용하는 요소
→ <article> : 주내용을 담기 위해 사용하는 요소
→ <aside> : 광고나 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소
→ <footer> : 웹사이트의 가장 아래에 들어가는 회사 정보 등의 추가 정보를 담기 위해 사용하는 요소
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>XX일보</title>
</head>
<body>
<header>
<p>여기는 로고와 이름이 들어갑니다.</p>
</header>
<nav>
<p>여기는 사이트 메뉴입니다.</p>
</nav>
<section>
<p>여기서 부터는 기사가 들어갑니다.</p>
<article>
<p>여기는 첫번째 기사입니다.</p>
</article>
<article>
<p>여기는 두번째 기사입니다.</p>
</article>
</section>
<aside>
<p>여기에 광고가 들어갑니다.</p>
</aside>
<footer>
<p>여기에 회상 정보가 들어갑니다.</p>
</footer>
</body>
</html>
HTML
복사