HTML의 계층적 구조와 주요 태그 학습
1. HTML의 계층적 구조란 무엇인가?
HTML의 계층적 구조란 웹 페이지를 구성하는 요소들이 부모-자식 관계를 통해 계층적으로 배치되는 방식을 의미한다. 이러한 구조는 HTML 문서의 가독성과 유지보수성을 높이며, 다음과 같은 원칙을 따른다:
• 부모 요소(Parent): 다른 요소를 포함하는 요소를 의미한다.
• 자식 요소(Child): 부모 요소 안에 포함된 요소를 의미한다.
• 형제 요소(Sibling): 동일한 부모를 공유하는 요소를 의미한다.
HTML 계층적 구조 예제
<!DOCTYPE html>
<html>
<head>
<title>HTML 계층적 구조</title>
</head>
<body>
<header> <!-- 부모 요소 -->
<h1>웹 페이지 제목</h1> <!-- 자식 요소 -->
<nav>
<ul>
<li><a href="#home">홈</a></li> <!-- 형제 요소 -->
<li><a href="#about">소개</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>섹션 제목</h2>
<p>여기에 본문 내용이 들어갑니다.</p>
</section>
</main>
<footer> <!-- 부모 요소 -->
<p>© 2024 My Website</p> <!-- 자식 요소 -->
</footer>
</body>
</html>
• <header>: 부모 요소로 <h1>과 <nav>를 포함한다.
• <nav>: <ul>을 포함하며, <li>와 <a>는 자식 요소이다.
• 계층적 관계:
• <html> > <body> > <header> > <nav> > <ul> > <li> > <a>
2. 계층적 디자인 원칙
HTML 계층적 구조에서 디자인 원칙을 따르면 코드를 더 깔끔하고 유지보수하기 쉬워진다.
디자인 원칙
1. 의미론적 태그 사용:
• HTML5에서 제공하는 의미론적 태그를 사용해 구조를 명확히 한다.
• 예: <header>, <main>, <footer>, <article>, <section>
2. 적절한 중첩 사용:
• 부모와 자식 관계를 명확히 하고, 불필요한 중첩을 피한다.
• 올바른 중첩:
<ul>
<li><a href="#">링크1</a></li>
<li><a href="#">링크2</a></li>
</ul>
3. CSS와 JavaScript 분리:
• HTML은 구조를 담당하고, 스타일과 동작은 CSS와 JavaScript로 분리한다.
4. 읽기 쉬운 들여쓰기:
• 각 계층을 들여쓰기하여 가독성을 높인다.
3. 주요 태그 설명
1) <a> 태그와 href 속성
<a> 태그는 하이퍼링크를 생성하는 데 사용된다. href 속성은 링크의 목적지 URL을 지정한다.
예제
<a href="https://www.example.com">여기로 이동</a>
<a href="#section1">페이지 내로 이동</a>
• 외부 링크: https://와 같은 URL을 사용해 다른 사이트로 연결한다.
• 내부 링크: #id를 사용해 동일 페이지 내 특정 위치로 이동한다.
2) <div> 태그
<div>는 블록 레벨 컨테이너로, 특정 영역을 그룹화하거나 스타일을 적용할 때 사용된다.
예제
<div class="container">
<h1>제목</h1>
<p>내용</p>
</div>
• 용도:
• 페이지의 구조를 나누는 데 사용한다.
• CSS를 적용할 때 주로 클래스나 ID와 함께 사용한다.
3) 엔티티(<, >, ©)
HTML 엔티티는 특수 문자를 표현하기 위해 사용된다.
예제
<p><div>는 블록 요소입니다.</p>
<p>© 2024</p>
• <: < (less than) 기호를 나타낸다.
• >: > (greater than) 기호를 나타낸다.
• ©: 저작권 기호를 나타낸다(©).
4) <span> 태그
<span> 태그는 인라인 컨테이너로, 텍스트의 특정 부분에 스타일을 적용하거나 JavaScript로 제어할 때 사용된다.
예제
<p>이 문장에서 <span class="highlight">특정 부분</span>만 강조됩니다.</p>
• 특징:
• 블록 레벨 요소인 <div>와 달리 인라인 요소이다.
• 스타일이나 동작을 특정 텍스트에만 적용할 수 있다.
4. HTML 코드 예제: 계층적 구조와 태그 활용
아래는 위 내용을 종합하여 계층적 구조와 주요 태그를 활용한 예제이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 계층적 구조 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 헤더 섹션 -->
<header>
<h1>HTML 학습 사이트</h1>
<nav>
<ul>
<li><a href="#section1">소개</a></li>
<li><a href="#section2">예제</a></li>
</ul>
</nav>
</header>
<!-- 메인 콘텐츠 -->
<main>
<section id="section1">
<h2>HTML이란?</h2>
<p>HTML은 웹 페이지의 구조를 정의하는 언어입니다.</p>
</section>
<section id="section2">
<h2>HTML 태그</h2>
<p>아래는 주요 태그들에 대한 설명입니다.</p>
<div>
<p>이 문장에서 <span class="highlight">특정 부분</span>만 강조됩니다.</p>
</div>
</section>
</main>
<!-- 푸터 섹션 -->
<footer>
<p>© 2024 HTML 학습 사이트</p>
</footer>
</body>
</html>
5. 요약
'개발하는 디자이너 > 02. 개발 관련 tip' 카테고리의 다른 글
| [React] 추천받은 강의 정리 (0) | 2024.11.21 |
|---|---|
| [javascript] 노드몬 설치 방법 (0) | 2024.11.21 |
| [javascript] 맥에서 백틱(`)을 입력하는 방법 (0) | 2024.11.21 |
| CSS 참조 사이트 (0) | 2024.11.21 |