반응형
글을 쓰다 보면 조금 더 보기 좋고, 읽기 쉬운 구조를 만들고 싶어진다.
그럴 때 도움 되는 것이 바로 HTML의 기본 태그다.
이번 글에서는 자주 쓰이면서도 가장 기본이 되는 태그들을 한 번 정리해보려 한다.
1. 글 구조 관련 태그
<p> : 문단을 구분할 때 사용
<p>여기는 문단입니다.</p>
<br> : 줄바꿈
한 줄<br>그리고 또 한 줄
<hr> : 수평선 (내용 구분 선)
<hr>
2. 텍스트 강조 태그
<strong> : 중요하거나 강조할 때
<strong>이 부분은 중요해요</strong>
<em> : 강조하되, 부드러운 톤
<em>살짝 다른 뉘앙스를 줄 때</em>
<span> : 문장 중 일부를 스타일링할 때
<span style="color:red;">빨간 글씨</span>
3. 제목 태그 (Heading)
<h1>가장 큰 제목</h1>
<h2>중간 제목</h2>
<h3>작은 제목</h3>
4. 링크와 이미지
링크
<a href="https://example.com" target="_blank">링크 열기</a>
이미지
<img src="https://example.com/image.jpg" alt="이미지 설명">
5. 목록 만들기
순서 없는 목록
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
순서 있는 목록
<ol>
<li>첫 번째</li>
<li>두 번째</li>
</ol>
6. 구획을 나누는 태그
<div> : 블록 단위로 영역을 나눌 때
<div>박스처럼 묶을 때</div>
<section>, <article> : 글의 논리적 구조 구분
<section>
<h2>섹션 제목</h2>
<p>내용</p>
</section>
7. 기타 유용한 태그들
<blockquote> : 인용문
<blockquote>이건 인용한 문장입니다.</blockquote>
<code> : 코드 표현
<code>console.log("Hello")</code>
<pre> : 줄바꿈, 공백 보존
<pre>
여러 줄
그대로 보여줄 수 있음
</pre>
당연히 모든 걸 다 외울 필요는 없고, 필요할 때마다 찾아서 쓰다보면 자연스레 사용 빈도가 잦은 태그부터 손이 기억할 것이다.
이렇게 조금씩 정리해 나가다 보면 어느새 나만의 HTML 스타일도 생길 것이다 :)
다음에는 아마도 이 태그들을 실제 게시글에서어떻게 활용할 수 있을지 사용 예시 중심으로 풀어볼 예정이다 !
반응형