오늘은 블로그스팟으로 블로그를 운영중이시라면 꼭 알아야 하는 HTML 태그 5가지 (div, center, table, p,  , span)에 대한 설명과 사용법에 대해서 알아보도록 하겠습니다.
블로그스팟할 때 꼭 알아야할 HTML 태그 6가지
1. div 태그
div 태그는 division의 약자로 웹 페이지의 섹션을 블록화 하는 태그입니다. 보통은 CSS와 함께 사용되어 웹 페이지의 구조를 만드는데 사용합니다. 하지만 우리가 블로그를 할 때 사용하는 div 태그는 위아래 글의 문단과 확실하기 구분을 하기 위해 사용한다고 이해하시면 좋습니다. 즉, 광고 코드를 넣는다고 할 때 위 아래와 확실히 구분하여 광고코드가 깨지지 않게 하기 위해서는 다음과 같이 div를 사용하시는 것이 좋습니다.
<div>
<center>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
2. center 태그
center 태그는 내용을 중앙에 배치하는데 사용됩니다. 다만 HTML5 이후에는 지원되지 않기 때문에 CSS의 text-align: cent; 속성도 같이 알아두어야 합니다.
위의 광고코드 삽입 예제에서 <center> </center> 안에 있는 부분, 즉 광고를 가운데로 배치하라는 의미입니다. 이를 CSS를 사용하여 바꾼다면 아래와 같습니다.
<div style="text-align:center">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
3. table 태그
블로그스팟에서는 table 태그를 지원하지 않습니다. 그래서 간단한 테이블을 만드는 방법은 알고 있어야 합니다.
table 태그를 사용하려면, tr, td 도 같이 알아야 하는데, tr 은 table row 로 행을 나타내고, td 는 table data로 열을 나타냅니다.
아래 테이블을 만드는 코드는 다음과 같습니다.
<table border=1>
<tr>
<td width=50%> td 1, 1 </td>
<td width=50%> td 1, 2 </td>
</tr>
<tr>
<td width=50%> td 2, 1 </td>
<td width=50%> td 2, 2 </td>
</tr>
</table>
| 첫번째 열 | 두번째 열 | |
| tr 첫번째 행 | td 1, 1 | td 1, 2 |
| tr 두번째 행 | td 2, 1 | td 2, 2 |
위에서 border=1은 테두리 굵기를 1로 하라는 의미이고 border=0이면 테두리가 보이지 않습니다. 그리고 width=50%은 화면 가로의 50% 크기로 설정한다는 의미입니다.
4. p
p. 태그는 paragraph의 약자로, 텍스트를 단락형식으로 작성할 때 사용합니다. 블로그스팟에서는 “단락 형식”을 선택하면 p 코드로 작성이 됩니다. 글을 작성할 때 “단락 형식”과 “보통” 중 어떤 것을 사용해도 되기 때문에 개인의 취향에 맞게 선택하여 글을 작성하시면 됩니다.
p 태그는 아래와 같이 사용합니다.
<p>여기에 단락 내용을 작성하세요.</p>
5.  
 는 non-breaking space로 공백을 의미합니다. html에서 글자간 공백이 하나 이상일 때  로 표시가 되는데, 예를 들어 “한”과 “국” 사이에 공백이 3개가 있다면 “한  국”으로 표시가 됩니다.
그래서 공백이 많은 HTML 코드를 보면  가 많아 지저분하게 보이게 되는데, 이럴 때는 전체 HTML 코드를 노트패드에 복사한 후 Ctrl+H 를 눌러 “찾을 내용”에   를 입력하고 “바꿀 내용”은 아무것도 입력하지 않은채 “모두 바꾸기”를 클릭하여  를 제거하면 코드가 깔끔하게 정리됩니다. 이렇게 정리된 코드를 다시 블로그스팟 “HTML 보기”에서 붙여넣기 하면 정리된 코드가 블로그에 적용이 됩니다.
6. span
span 태그는 텍스트의 일부분을 선택하여 스타일을 적용하는데 사용합니다.
예를 들어 “블로그스팟에서 블로그할 때 꼭 필요한 HTML 태그 6가지 알아보기”에서 “꼭 필요한 HTML 태그 6가지” 를 굵고 빨간색으로 표시하고 싶다면 아래와 같습니다.
<div>
블로그스팟에서 블로그할 때 꼭 필요한 <span style="color:red; font-weight:bold">HTML 태그 6가지</span> 알아보기
</div>
블로그스팟에서 블로그할 때 꼭 필요한 HTML 태그 6가지 알아보기
오늘은 블로그스팟할 때 꼭 알아야 하는 HTML 태그 6가지에 대해서 알아보았습니다. 이 6가지 태그는 글을 쓸 때 많이 사용되기 때문에 사용법을 잘 알아두시면 많은 도움이 될 것입니다.
