블로그를 운영하고 관리하기 위한 HTML 코딩의 기초 <div> <p> <span> 태그의 차이점과 주의사항을 알아보고 검색 엔진 최적화(SEO)를 위해서 본문 <body> 태그 내에서 <div> <p> <span>을 활용한 문단의 구성을 어떻게 구성할 수 있는지 알아보겠습니다.
HTML의 <div> <p> <span> 태그의 의미와 차이점
블로그의 글을 작성할 때 일반 문서 작성 방식으로도 충분히 쉽게 작성하고 게시할 수 있지만 조금 개성 있는 글로 꾸미기를 원한다면 기본적인 HTML의 구조를 이해하고 기초적인 태그의 활용법 정도는 알고 있어야 합니다.
HTML 코딩 문서의 기초 태그 중 문단과 문장을 구성하는 태그로 <div> <p> <span>의 의미와 차이점을 알아보겠습니다.
<div> 태그의 의미와 사용 시 주의사항
- <div> 태그의 의미
글 또는 이미지 등과 같은 본문 내용을 상자로 지정하여 상하좌우 간격을 조절하여 상자의 위치를 배열하고 배치할 수 있는 문서의 레이아웃을 구성하는 태그입니다.
- <div> 태그의 사용 방법
<div> 태그를 활용한 상자 내의 글 서식인 <style> 태그를 추가하여 글꼴, 크기, 색상, 위치 등과 이미지의 크기, 위치 고정 등을 반영할 수 있습니다. 그리고 상자 내의 글과 이미지의 간격을 임의로 조절할 수 있으며, 더 나아가서 배열과 배치 위치를 변경할 수 있습니다.
- <div> 태그의 사용 시 주의사항
<div> 태그는 단독으로 사용이 가능한 최상위 태그로 <p> 태그와 <span> 태그를 포함하여 사용할 수 있지만 <p> 태그와 <span> 태그의 하위로 사용할 수 없습니다.
<p> 태그의 의미와 사용 시 주의사항
- <p> 태그의 의미
본문 글을 HTML 코딩으로 작성한다면 가장 많이 사용되는 태그로 본문 글을 문단으로 지정하여 글의 서식을 결정하는 태그입니다. 보통 줄 바꿈 시 문단의 끝을 맺고 문단을 다시 시작할 수 있습니다.
- <p> 태그의 사용 방법
<p> 태그로 지정된 문단 내의 글 서식인 <style> 태그를 추가하여 글꼴, 크기, 색상 등을 변경할 수 있습니다.
- <p> 태그의 사용 시 주의사항
<p> 태그는 단독 사용이 가능하고 <span> 태그를 포함할 순 있지만 <div> 태그를 포함할 수 없습니다.
<span> 태그의 의미와 사용 시 주의사항
- <span> 태그의 의미
문단으로 지정된 본문 글 내용 중 한 부분을 문장으로 지정하여 글 서식을 결정하는 태그입니다.
- <span> 태그의 사용 방법
<span> 태그로 지정된 문장의 <style> 태그를 추가하여 글 서식인 글꼴, 크기, 색상 등을 변경할 수 있습니다.
- <span> 태그의 사용 시 주의사항
<span> 태그는 단독으로 사용할 수 없으며, 반드시 <p> 태그 내에서만 사용할 수 있습니다.
각 태그의 사용 예시
<div> <p> <span> 태그 사용 시 앞서 작성한 주의사항으로 각 태그를 감싸 안는 순서와 개별 사용 가능 여부에 따라 HTML 문서의 오류가 발생할 수 있으니 아래 예시 내용을 확인하시기 바랍니다.
참고사항으로 온라인 html 무료 연습장을 통해 각 태그를 작성하고 오류가 있는지 확인할 수 있으며, 더 나아가 홈페이지 또는 블로그 페이지에 어떻게 적용이 되는지도 확인할 수 있으니 아래 링크를 참고해 주시기 바랍니다.
저 또한 HTML 코딩이라는 것을 일도 모르는 왕초보로 일일이 검색과 책의 내용으로 조금씩 알아가고 있는 중입니다.
생소한 인터넷 프로그램 언어로 처음엔 눈앞이 깜깜했지만 계속해서 연습해 보고 HTML 코딩 수정도 따라 해 보니 기초적이고 반복적으로 사용하는 몇 가지 태그만 알아도 블로그에서는 그 활용도가 꽤 높다는 것을 알 수 있었습니다.
<div> <p> <span> 태그의 의미와 사용방법 그리고 주의사항에 대하여 초보자 입장에서 알아보았습니다. 각 태그의 전문가적인 의미는 네이버 사전과 같은 곳에서 자세한 설명으로 알 수 있으니 참고하시기 바랍니다.
그리고 백문이 불여일견이라고 주야장천 설명해도 한번 보고 수정해 보는 것만도 못한 것이니 간략하게라도 각 태그를 활용하여 내용을 수정해 보시기 바랍니다.
'블로그 이야기 > 알아두면 쓸만한 HTML Coding' 카테고리의 다른 글
| 애드센스 반응형 사각 광고 2개 배치 html 코드, CPM 수익 극대화 (2) | 2024.07.06 |
|---|---|
| 마우스 드래그 차단 우클릭 금지 html 코드, 블로그 포스팅 불펌 방지 (0) | 2024.07.01 |
| 움직이는 로딩 이미지 반영을 위한 html 코드 (0) | 2024.06.08 |
| HTML 코딩의 기초 head와 body 태그의 의미 (0) | 2020.10.10 |