블로그에서 사용되는 간단한 태그들.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : 제목을 표시하는 태그입니다.

 각 숫자는 헤더의 크기를 나타내며, 숫자가 작을수록 크기가 큽니다.

 

h1 적용시 사이즈

h2 적용시 사이즈

h3 적용시 사이즈

h4 적용시 사이즈

h5 적용시 사이즈

h6 적용시 사이즈

 

<h1>이것은 제목입니다.</h1>

<p> : 문단을 표시하는 태그입니다. 본문 내용을 작성할 때 주로 사용됩니다.

 

이것은 첫 번째 문단입니다.

이것은 두 번째 문단입니다.

<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다.</p>

<a> : 링크를 생성하는 태그입니다. href 속성을 이용하여 링크 주소를 지정할 수 있습니다.

 

<a href="링크주소"> 클릭할 문구 </a>

<img> : 이미지를 삽입하는 태그입니다. src 속성을 이용하여 이미지 파일의 주소를 지정할 수 있습니다.

<img src="이미지주소">

<ul>, <li> : 순서 없는 리스트를 생성하는 태그입니다. 

<ul>은 리스트를 감싸는 태그이고, 

<li>는 리스트 아이템을 나타냅니다.

• 리스트 아이템 1
• 리스트 아이템 2
• 리스트 아이템 3

<ul>
  <li>리스트 아이템 1</li>
  <li>리스트 아이템 2</li>
  <li>리스트 아이템 3</li>
</ul>

 

<ol>, <li> : 순서 있는 리스트를 생성하는 태그입니다. 

<ol>은 리스트를 감싸는 태그이고, 

<li>는 리스트 아이템을 나타냅니다.

1. 리스트 아이템 1
2. 리스트 아이템 2
3. 리스트 아이템 3

<ol>
  <li>리스트 아이템 1</li>
  <li>리스트 아이템 2</li>
  <li>리스트 아이템 3</li>
</ol>

<div>, <span> : 구역을 분리하는 태그입니다.

<div>는 블록 수준의 요소이며, 영역을 크게 분리할 때 사용됩니다. 

<span>은 인라인 수준의 요소이며, 작은 영역을 분리할 때 사용됩니다.

 

<code> 태그를 사용하여 코드 블록을 나타낼 수 있습니다.

이것은 코드 블록입니다.

<code>
  이것은 코드 블록입니다.
</code>

 

 

 

<blockquote> : 인용문을 나타내는 태그입니다. 

이것은 인용문입니다.

<blockquote>
  이것은 인용문입니다.
</blockquote>

 

<em> 태그를 사용하여 강조할 텍스트를 표시할 수 있습니다.

이것은 기울어진 텍스트입니다.

<p>이것은 <em>기울어진</em> 텍스트입니다.</p>

 

 

<div> 태그는 HTML 요소를 그룹화하고 그룹에 스타일을 적용하는 데 사용됩니다. 예를 들어, 다음과 같은 <div> 태그를 사용하여 웹 페이지의 머리글, 내용 및 바닥글을 그룹화할 수 있습니다.

웹 페이지 제목

웹 페이지 내용

저작권 © 2023 웹 페이지

<div id="header">
  <h1>웹 페이지 제목</h1>
</div>
<div id="content">
  <p>웹 페이지 내용</p>
</div>
<div id="footer">
  <p>저작권 © 2023 웹 페이지</p>
</div>

위 코드에서 <div> 태그는 id 속성을 사용하여 각각의 그룹을 식별합니다. CSS를 사용하여 각 그룹에 스타일을 적용할 수 있습니다.


<span> 태그는 텍스트를 그룹화하고 그룹에 스타일을 적용하는 데 사용됩니다. 예를 들어, 다음과 같은 <span> 태그를 사용하여 텍스트 중 일부를 강조하거나 색상을 변경할 수 있습니다.

이 문장은 빨간색으로 강조됩니다.

<p>이 문장은 <span style="color:red;">빨간색</span>으로 강조됩니다.</p>

 

위 코드에서 <span> 태그는 style 속성을 사용하여 텍스트에 빨간색 스타일을 적용합니다.

<div>와 <span> 태그는 웹 페이지 디자인에서 중요한 역할을 담당하고 있으며, 

적절히 사용하면 웹 페이지를 보다 깔끔하고 효과적으로 디자인할 수 있습니다.