반응형
안녕하세요! 오늘은 블로그 글을 더욱 아름답고 효과적으로 작성하기 위해 꼭 알아야 할 HTML 문법에 대해 정리해보려고 해요.
1. HTML이란?
HTML(HyperText Markup Language)은 웹 페이지를 구성하는 기본적인 언어로, 웹 콘텐츠를 구조화하고 표현하는 데 필수적이에요. 모든 웹 페이지는 이 HTML로 작성되며, 이를 통해 텍스트, 이미지, 링크 등을 배치할 수 있죠.
2. 기본적인 HTML 구조
HTML 문서는 다음과 같은 기본 구조로 이루어져 있어요:
<!DOCTYPE html>
<html>
<head>
<title>문서 제목</title>
</head>
<body>
<!-- 여기에 내용이 들어갑니다 -->
</body>
</html>- : 문서가 HTML로 작성되었음을 나타내는 루트 요소입니다.
- : 메타데이터(문서 제목, 문자 인코딩 등)를 포함하는 부분입니다.
- : 실제 콘텐츠가 들어가는 부분으로 사용자에게 보여지는 내용이에요.
3. 주요 HTML 태그 종류
3.1 텍스트 관련 태그
텍스트를 표현하기 위한 다양한 태그들이 있어요:
- #~
<h1>제목 1</h1> <h2>제목 2</h2> <p>여기는 본문 내용입니다.</p>
제목 1
제목 2
여기는 본문 내용입니다.
- : 제목을 나타내는 태그로 숫자가 작아질수록 중요도가 낮아져요.
- : 강조된 텍스트를 나타내며 보통 굵게 표시돼요.
<strong>강조할 내용</strong>- : 이탤릭체로 강조된 내용을 나타냅니다.
<em>이탤릭체 내용</em>
3.2 목록 관련 태그
목록을 만들기 위한 두 가지 주요 유형이 있어요:
- 순서 없는 목록(ul)
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>- 첫 번째 항목
- 두 번째 항목
- 순서 있는 목록(ol)
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>- 첫 번째 항목
- 두 번째 항목
3.3 링크와 이미지 태그
링크를 추가하려면 태그를 사용해요:
<a href=https://www.example.com>https://www.example.com</a><img src="image.jpg" alt="설명 텍스트">위 코드는 클릭 시 지정된 URL로 이동하는 링크와 이미지를 삽입하는 방법이에요.
3.4 테이블 태그
테이블은 데이터를 정렬하여 보여줄 때 유용해요:
<table border="1">
<tr>
<th>헤더1</th>
<th>헤더2</th>
</tr>
<tr>
<td 데이터></td>
<td 데이터></td><
/tr> <!-- 추가 행 --> <tr>
<td 데이터></td>
<td 데이터></td>
</tr>
<!-- ... -->
</table>| 헤더1 | 헤더2 |
|---|---|
위 코드는 간단한 테이블 구조예요.
3.5 버튼 및 입력 폼 태그
버튼이나 입력 필드를 만들 때는 다음과 같은 방법으로 해보세요:
버튼:
<button type="button">클릭하세요!</button>입력 필드:
<input type="text" placeholder="여기에 입력하세요">위 코드는 버튼 클릭 시 동작할 수 있는 버튼과 사용자 입력을 받을 수 있는 필드예요.
4. HTML 속성에 대한 이해
각각의 요소에는 다양한 속성을 추가할 수 있어요:
- class: CSS 스타일링이나 JavaScript에서 특정 요소를 선택할 때 유용해요.
<p class="highlight">강조된 단락입니다.</p>
- id: 특정 요소에 고유한 식별자를 부여하여 스타일링이나 스크립트에서 사용할 수 있어요.
<div id="uniqueElement">특별한 요소입니다.</div>- style: 인라인 스타일링으로 직접 CSS 속성을 적용할 수 있어요.
<p style="color:red;">빨간색 단락입니다.</p>빨간색 단락입니다.
반응형
'정보' 카테고리의 다른 글
| 스케일링의 장점과 보험적용에 대해 알아봐요! 🦷✨ (5) | 2024.09.09 |
|---|---|
| 키보드 배열의 종류와 사용목적에 맞는 배열 추천 🖥️ (4) | 2024.09.09 |
| 블로그 글을 예쁘게, 마크다운 문법 총정리 (0) | 2024.09.09 |
| 백엔드 개발 입문, 스프링 부트의 기초 (4) | 2024.09.09 |
| KBO 경기 진행 방법과 팀 정보 (3) | 2024.09.09 |
