반응형
1. 구역을 나누는 태그
웹페이지를 구성할 때, 구역을 나누는 것은 매우 중요합니다. 대표적인 태그로는 <div>와 <p>가 있습니다.
- <div>: 블록 요소로, 큰 구역을 나눌 때 사용합니다. 예를 들어, 전체 콘텐츠를 여러 섹션으로 구분하거나, 스타일링을 위해 특정 부분을 묶을 때 사용됩니다.
- <p>: 문단을 나눌 때 사용합니다. 텍스트를 여러 단락으로 구성하여 가독성을 높이는 역할을 합니다.
또한, 목록을 구성할 때는 <ul> (순서 없는 목록)과 <ol> (순서 있는 목록), 그리고 목록 항목을 나타내는 <li> 태그를 사용합니다.
2. 구역 내 콘텐츠 태그
구역 내 콘텐츠를 꾸미거나 기능을 추가할 때 사용하는 태그들이 있습니다.
- 제목 태그 (<h1> ~ <h6>): 제목의 중요도에 따라 크기와 두께가 다른 텍스트를 제공합니다. 일반적으로 <h1>은 페이지의 메인 제목으로 사용되고, <h2> 이하의 태그들은 부제목으로 사용됩니다. SEO 측면에서도 중요한 역할을 합니다.
- 구분선 태그 (<hr>): 콘텐츠 사이에 수평선을 그어 구분을 줍니다.
- 강조 태그 (<span>): 특정 텍스트를 스타일링할 때 사용합니다. 인라인 요소로, 텍스트 내부에 사용되며 주로 색상이나 글꼴 스타일을 변경하는 데 사용됩니다.
- 링크 태그 (<a>): 하이퍼링크를 만들어 사용자가 다른 페이지로 이동할 수 있도록 합니다. href 속성을 사용하여 링크할 URL을 지정합니다.
- 이미지 태그 (<img>): 웹페이지에 이미지를 삽입할 때 사용합니다. src 속성으로 이미지의 경로를 지정하며, alt 속성으로 이미지 설명을 추가하는 것이 좋습니다.
- 폼 관련 태그 (<input>, <button>, <textarea>): 사용자와 상호작용할 수 있는 입력 양식을 만듭니다. <input>은 다양한 형태의 사용자 입력을 받을 수 있으며, <button>은 클릭 가능한 버튼을 만들고, <textarea>는 여러 줄의 텍스트를 입력받을 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역을 나누죠</div>
<p>나는 문단이에요</p>
<ul>
<li> bullet point!1 </li>
<li> bullet point!2 </li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
<h2>h2는 소제목입니다.</h2>
<h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
<hr>
span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
<hr>
a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr>
img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
<hr>
input 태그입니다: <input type="text" />
<hr>
button 태그입니다: <button> 버튼입니다</button>
<hr>
textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>
</html>반응형
'스파르타 코딩' 카테고리의 다른 글
| Spring 트랙을 신청한 이유 (스타터 노트) (0) | 2024.08.02 |
|---|---|
| VS Code 코드 단축키 모음 15가지 (윈도우/맥) (0) | 2024.07.25 |
| 부트스트랩 CDN, 버튼, 예제 (0) | 2024.07.25 |
| 구글 폰트 (0) | 2024.07.24 |
| VS Code 설치 (비주얼스튜디오 코드 다운로드) (0) | 2024.07.24 |