1️⃣ 인용문(Blockquote & q태그)
HTML에서는 인용문을 나타낼 때
<blockquote>와<q>태그를 사용
<blockquote> 태그 (블록 인용)
- 문단 전체를 인용할 때 사용
- 들여쓰기가 적용되어 시각적으로 인용문임을 강조
<cite>속성을 사용하면 출처를 명시할 수 있음
예시
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>인용문과 줄바꿈</title>
</head>
<body>
<h1>인용문과 줄바꿈</h1>
<blockquote>
AI 코딩 도구를 활용하면 코드 생성 및 자동화, 개발 워크플로우와의 통합 등이
가능하며 기존 개발 환경 대비 생산성을 높일 수 있습니다. 그러나 개발자를
꿈꾸며 학습을하는 예비 개발자에게 AI 코딩 도구는 양날의 검이 될 수
있습니다. AI 코딩 도구에만 의존하는 주니어 개발자는 경쟁력을 갖출 수 없기
때문입니다. 오히려 더 깊이 있게 언어를 학습하고 좋은 질문을 할 수 있도록
문해력(Literacy)을 기르는 것이 필요합니다. 다만 AI 도구를 완전히 배제하는
것이 아닌 학습을 위한 파트너로서 활용할 것을 추천합니다.
</blockquote>
</body>
</html>
결과
2️⃣ 줄바꿈
<br>태그
- 줄을 바꾸고 싶을 때 사용 (단순 개행)
- 문단을 나누는 것이 아니라 한 줄만 바꿈
예시
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>인용문과 줄바꿈</title>
</head>
<body>
<h1>인용문과 줄바꿈</h1>
AI 코딩 도구를 활용하면 코드 생성 및 자동화, 개발 워크플로우와의 통합
등이<br />
가능하며 기존 개발 환경 대비 생산성을 높일 수 있습니다. 그러나 개발자를<br />
꿈꾸며 학습을하는 예비 개발자에게 AI 코딩 도구는 양날의 검이 될 수
있습니다.<br />
AI 코딩 도구에만 의존하는 주니어 개발자는 경쟁력을 갖출 수 없기
때문입니다.<br />
오히려 더 깊이 있게 언어를 학습하고 좋은 질문을 할 수 있도록<br />
문해력(Literacy)을 기르는 것이 필요합니다. 다만 AI 도구를 완전히 배제하는<br />
것이 아닌 학습을 위한 파트너로서 활용할 것을 추천합니다.
</body>
</html>
결과
<p>태그
- 단락을 구분할 때 사용
- 자동으로 위아래 여백이 생김 (줄바꿈 + 여백 효과)
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>인용문과 줄바꿈</title>
</head>
<body>
<h1>인용문과 줄바꿈</h1>
<p>
AI 코딩 도구를 활용하면 코드 생성 및 자동화, 개발 워크플로우와의 통합 등이
</p>
<p>
가능하며 기존 개발 환경 대비 생산성을 높일 수 있습니다. 그러나 개발자를
</p>
<p>
꿈꾸며 학습을하는 예비 개발자에게 AI 코딩 도구는 양날의 검이 될 수
있습니다.
</p>
<p>
AI 코딩 도구에만 의존하는 주니어 개발자는 경쟁력을 갖출 수 없기
때문입니다.
</p>
<p>오히려 더 깊이 있게 언어를 학습하고 좋은 질문을 할 수 있도록</p>
<p>
문해력(Literacy)을 기르는 것이 필요합니다. 다만 AI 도구를 완전히 배제하는
</p>
<p>것이 아닌 학습을 위한 파트너로서 활용할 것을 추천합니다.</p>
</body>
</html>
결과
정리
| 태그 | 설명 |
|---|---|
<blockquote> | 긴 인용문을 표시 |
<q> | 짧은 인용문을 표시, 큰 따옴표 자동 추가 |
<br> | 강제 줄바꿈 |
<p> | 문단을 나누는 태그 |
프론트엔드 개발일기