728x90
HTML 기초 강의 1편: 웹 페이지 기본 구조와 태그
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 이번 강의에서는 HTML의 기본 구조와 자주 사용하는 태그들에 대해 설명합니다.
1. HTML 기본 구조
HTML 문서는 <!DOCTYPE html> 선언으로 시작하고, 전체 구조는 <html>, <head>, <body> 세 부분으로 나뉩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기초 강의 1편</title> <!-- 웹 브라우저 탭에 표시될 제목 -->
</head>
<body>
<!-- 웹 페이지의 실제 콘텐츠가 들어가는 본문 부분 -->
</body>
</html>
- <!DOCTYPE html> : HTML5 문서임을 선언합니다.
- <html> : HTML 문서의 루트 요소입니다.
- <head> : 페이지의 메타데이터와 스타일, 스크립트를 포함하는 영역입니다.
- <body> : 웹 페이지의 주요 내용을 담는 부분입니다.
2. 기본 HTML 태그
HTML에서 자주 사용하는 태그들을 소개합니다.
제목 태그 (<h1> ~ <h6>)
제목을 표시하는 태그로, <h1>이 가장 크고 <h6>이 가장 작습니다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
단락 태그 (<p>)
본문의 문단을 표시할 때 사용합니다.
<p>이것은 단락을 나타내는 태그입니다.</p>링크 태그 (<a>)
다른 페이지나 사이트로 이동할 수 있는 하이퍼링크를 생성합니다.
<a href="https://www.example.com" target="_blank">Example 사이트로 이동</a>- href 속성은 이동할 URL을, target="_blank"는 새 창에서 열리게 설정합니다.
이미지 태그 (<img>)
웹 페이지에 이미지를 삽입하는 태그입니다.
<img src="image.jpg" alt="이미지 설명">src 속성은 이미지 파일의 경로, alt 속성은 이미지가 표시되지 않을 때 나타날 설명입니다.
3. HTML 요소와 속성
HTML 태그에는 속성을 추가하여 요소의 행동을 제어할 수 있습니다.
예를 들어, 링크에 target="_blank"를 추가하면 새 창에서 링크를 엽니다.
<a href="https://www.openai.com" target="_blank">OpenAI 사이트 방문</a>
- href: 링크 주소
- target="_blank": 새 창에서 링크 열기
4. HTML 예제: 간단한 웹 페이지 만들기
다음은 위 내용을 활용해 구성한 간단한 HTML 웹 페이지 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기초 웹 페이지</title>
</head>
<body>
<h1>HTML 기초 강의 1편</h1>
<p>HTML은 웹 페이지의 구조를 정의하는 언어입니다. 다양한 태그를 사용해 페이지를 구성합니다.</p>
<h2>HTML 태그 예시</h2>
<p>아래는 HTML에서 자주 사용하는 태그입니다.</p>
<h3>링크 예제</h3>
<a href="https://www.openai.com" target="_blank">OpenAI 사이트 방문</a>
<h3>이미지 예제</h3>
<img src="https://via.placeholder.com/150" alt="예제 이미지">
<h3>단락 예제</h3>
<p>이것은 하나의 단락입니다.</p>
</body>
</html>
간단한 용어 정리
- 태그(Tag): HTML 요소를 정의하는 구문으로 <h1>, <p>처럼 구성됩니다.
- 속성(Attribute): 태그 내에서 추가 정보를 제공하는 부분으로 href, src 등이 있습니다.
- 요소(Element): 태그와 내용이 포함된 전체입니다. 예) <h1>제목</h1>
728x90
'Study > HTML' 카테고리의 다른 글
| HTML 기초 강의 6편: 폼과 입력 필드 (5) | 2024.11.06 |
|---|---|
| HTML 기초 강의 5편: 반응형 웹 디자인과 미디어 쿼리 (0) | 2024.11.05 |
| HTML 기초 강의 4편: CSS 레이아웃(Flexbox와 Grid)으로 웹 페이지 구성하기 (0) | 2024.11.04 |
| HTML 기초 강의 3편: CSS로 웹 페이지 스타일링하기 (0) | 2024.11.03 |
| HTML 기초 강의 2편: 리스트, 테이블, 폼 태그로 웹 구성하기 (0) | 2024.11.02 |
