Notice
Recent Posts
Recent Comments
Link
«   2026/07   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

꽃 같은 인생

HTML&CSS🌟 HTML5 마크업 언어 정리 🌟 본문

oz코딩스쿨/HTML, CSS

HTML&CSS🌟 HTML5 마크업 언어 정리 🌟

flo-jee 2025. 2. 12. 21:36

🌟 HTML5 마크업 언어 정리 🌟

HTML5는 최신 웹 표준으로, 보다 효율적이고 의미론적인 마크업을 제공한다.

🔖 HTML5의 기본 구조

<!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>
    </header>
    <nav>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">연락처</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <article>
                <h2>HTML5 소개</h2>
                <p>HTML5는 웹 표준의 최신 버전입니다.</p>
            </article>
        </section>
        <aside>
            <h3>관련 링크</h3>
            <ul>
                <li><a href="#">HTML5 문서</a></li>
                <li><a href="#">CSS3 가이드</a></li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

🌟 HTML5의 주요 태그

🔹 문서 정보 태그

  • <!DOCTYPE html> : 문서 유형을 HTML5로 선언
  • <html lang="ko"> : 문서의 언어 설정
  • <head> : 문서의 메타데이터 포함
  • <meta charset="UTF-8"> : 문자 인코딩 설정
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형 웹 설정
  • <title> : 문서 제목 지정

🔹 레이아웃 태그 (시맨틱 태그)

  • <header> : 머리글 영역 (로고, 내비게이션 등 포함)
  • <nav> : 내비게이션 메뉴
  • <main> : 문서의 주요 콘텐츠 영역
  • <section> : 콘텐츠 섹션 구분
  • <article> : 독립적인 콘텐츠 블록 (예: 블로그 글, 뉴스 기사 등)
  • <aside> : 부가 정보 (광고, 관련 링크 등 포함)
  • <footer> : 바닥글 (저작권 정보, 연락처 등 포함)

🔹 텍스트 관련 태그

  • <h1> ~ <h6> : 제목 태그 (숫자가 클수록 작은 제목)
  • <p> : 단락(문장) 태그
  • <br> : 줄바꿈 (닫는 태그 없음)
  • <hr> : 가로선 삽입 (닫는 태그 없음)
  • <strong> : 굵은 글씨 (중요 강조)
  • <em> : 기울임꼴 (의미 강조)
  • <mark> : 형광펜 표시
  • <blockquote> : 인용문

🔹 목록 관련 태그

  • <ul> : 순서 없는 목록 (●, ○, ■ 등 사용)
  • <ol> : 순서 있는 목록 (숫자, 문자 등 사용)
  • <li> : 목록 항목
  • <dl> : 설명 목록
  • <dt> : 용어 제목
  • <dd> : 용어 설명

🔹 링크 및 미디어 태그

  • <a href="URL"> : 하이퍼링크
  • <img src="경로" alt="설명"> : 이미지 삽입
  • <audio src="경로" controls> : 오디오 삽입
  • <video src="경로" controls> : 비디오 삽입

🔹 테이블 태그

  • <table> : 테이블 생성
  • <tr> : 테이블 행 (row)
  • <th> : 테이블 헤더 (굵은 글씨)
  • <td> : 테이블 데이터
  • <caption> : 테이블 제목

🔹 폼 관련 태그

  • <form> : 사용자 입력 폼
  • <input type="text"> : 텍스트 입력창
  • <input type="password"> : 비밀번호 입력창
  • <input type="checkbox"> : 체크박스
  • <input type="radio"> : 라디오 버튼
  • <input type="submit" value="제출"> : 제출 버튼
  • <textarea> : 여러 줄 텍스트 입력
  • <select> : 드롭다운 목록
  • <option> : 선택 목록 항목

🔹 기타 HTML5 기능 태그

  • <canvas> : 그래픽 및 애니메이션 지원
  • <svg> : 벡터 그래픽 삽입
  • <progress> : 작업 진행 상태 표시
  • <meter> : 특정 범위 내의 측정 값 표시
  • <details> : 세부 정보 표시 (접을 수 있음)
  • <summary> : <details> 태그의 요약 부분



'oz코딩스쿨 > HTML, CSS' 카테고리의 다른 글

HTML&CSS🌟 HTML5 & CSS3 정리 노트 🌟  (0) 2025.02.12
HTML&CSS🌟 웹 개발 기초 정리 🌟  (0) 2024.12.31
'oz코딩스쿨/HTML, CSS' Related Articles more