HTML5 기본 용어와 페이지 구조

HTML5 기본 용어

HTML5는 웹 문서를 구조화하고 콘텐츠를 표현하는 최신 HTML 표준입니다. 주요 개념과 용어는 다음과 같습니다.

HTML (HyperText Markup Language): 웹 페이지를 구성하는 마크업 언어
태그(Tag): HTML 요소를 감싸는 코드(<>로 감싸짐, 예: <p>, <div>)
요소(Element): 시작 태그, 내용, 종료 태그로 구성됨 (예: <h1>Hello</h1>)
속성(Attribute): 태그에 추가 정보를 제공하는 키-값 쌍 (예: <img src="image.jpg" alt="설명">)
시맨틱(Semantic) 태그: 의미를 전달하는 태그 (예: <header>, <article>, <section> 등)
블록 요소(Block Element): 한 줄 전체를 차지하는 요소 (예: <div>, <p>, <section> 등)
인라인 요소(Inline Element): 콘텐츠 내부에서 동작하는 요소 (예: <span>, <a>, <strong> 등)

HTML5 기본 페이지 구조

HTML5 문서는 <!DOCTYPE html> 선언으로 시작하며, 기본적인 구조는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 기본 구조</title>
</head>
<body>
    <header>
        <h1>웹사이트 제목</h1>
        <nav>
            <ul>
                <li><a href="#">메뉴1</a></li>
                <li><a href="#">메뉴2</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>섹션 제목</h2>
            <p>여기에 본문 내용이 들어갑니다.</p>
        </section>
        <article>
            <h2>아티클 제목</h2>
            <p>기사나 독립적인 콘텐츠를 담을 때 사용합니다.</p>
        </article>
    </main>

    <aside>
        <h2>사이드바</h2>
        <p>관련 정보 또는 광고 영역</p>
    </aside>

    <footer>
        <p>&copy; 2025 웹사이트</p>
    </footer>
</body>
</html>

body 태그에 필요한 스타일 시트(css)와 javascript 를 제공하는데 사용

헤드 태그 내부에 아래의 태그만 입력할수있고, 다른 태그를 넣은 경우 웹 브라우저가 자동으로 해당 태그를

body 태그 내부로 옮김

태그이름	설명
meta	웹 페이지에 추가 정보를 전달
title	웹 페이지의 제목
script	웹 페이지에 스크립트 추가
link	웹 페이지에다른 파일을 추가
style	웹 페이지에 스타일 시트를 추가
base	웹 페이지의 기본경로를 지정

주요 HTML5 시맨틱 태그

<header>: 페이지나 섹션의 머리말(로고, 내비게이션 포함)
<nav>: 내비게이션(메뉴) 영역
<main>: 주요 콘텐츠 영역 (페이지당 1개만 사용 가능)
<section>: 특정 주제를 가진 섹션
<article>: 독립적인 콘텐츠(게시글, 기사 등)
<aside>: 사이드바(부가적인 정보)
<footer>: 페이지나 섹션의 바닥글

HTML 속성이란?

HTML 속성은 태그에 특별한 정보를 추가하는 것이에요!
예를 들어, 자동차에 색깔(빨강, 파랑)을 정할 수 있는 것처럼 HTML 태그에도 속성을 넣어 원하는 기능을 추가할 수 있어요.

HTML 속성의 기본 규칙

속성은 태그 안에 넣어요.
속성 이름과 값이 있어요. (속성="값")
여러 개의 속성을 함께 쓸 수 있어요.

예제

<img src="cat.jpg" alt="귀여운 고양이">

여기서 src는 이미지 파일을 가져오는 속성이고, alt는 이미지가 없을 때 대신 보여줄 글자예요!

자주 쓰는 HTML 속성 7가지

src (출처)
이미지나 동영상이 어디에 있는지 알려줘요.

<img src="dog.jpg">

강아지 사진이 나와요!

alt (대체 텍스트)
이미지가 안 보일 때 대신 보여줄 글자를 써요.

<img src="wrong.jpg" alt="강아지가 귀엽게 자고 있어요">

만약 wrong.jpg가 없으면 "강아지가 귀엽게 자고 있어요"라고 보여줘요.

href (링크)
버튼이나 글씨를 클릭하면 다른 곳으로 이동하게 해줘요.

<a href="https://www.google.com">구글 가기</a>

"구글 가기"를 클릭하면 구글 사이트로 이동해요!

style (스타일)
색깔, 크기 등을 정할 수 있어요.

<p style="color: blue; font-size: 20px;">안녕하세요!</p>

"안녕하세요!" 글자가 파란색이고 크기가 커져요!

width & height (너비 & 높이)
이미지 크기를 정할 수 있어요.

<img src="cat.jpg" width="200" height="150">

사진 크기가 가로 200px, 세로 150px이 돼요!

placeholder (입력 힌트)
입력 칸에 미리 글자를 넣어줄 수 있어요.

<input type="text" placeholder="이름을 입력하세요">

입력 칸에 "이름을 입력하세요"라고 보이지만, 클릭하면 사라져요!

disabled (비활성화)
버튼을 클릭할 수 없게 만들어요.

<button disabled>눌러도 안 돼요!</button>

🚫버튼이 회색으로 바뀌고 클릭이 안 돼요!

정리:

HTML 속성은 태그에 특별한 기능을 추가하는 마법 같은 도구!
중요한 점:
속성은 태그 안에 넣어요.
속성="값" 형태로 써요.
여러 개의 속성을 한 태그에 넣을 수도 있어요.

'*' 카테고리의 다른 글

순서도 (0)	2025.03.09
HTML5 태그 2(오디오,비디오,입력양식,공간분할) (1)	2025.03.09
HTML5 - 태그 1 (0)	2025.03.09
웹(web) (0)	2025.03.09
Return (0)	2024.11.17

상상님의 블로그

HTML5 기본 용어와 페이지 구조