인용 구문
<blockquote></blockquote> 태그
이 태그는 일반적으로 새 줄에서 시작하여 주변
콘텐츠에서 들여 쓰기 된 인용문을 포함할 블록 영역 생성한다.
예)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
p, blockquote {
border:1px solid #000
}
</style>
</head>
<body>
<p>인용구문 테스트 합니다.</p>
<blockquote cite="http://test.html">
이 부분은 현재 <q>인용 <q>구문이</q> 적용된</q> 부분 입니다.
</blockquote>
</body>
</html>
결과 화면
예제 코드의 결과 화면을 보면(식별이 보기 쉽게 태그에 border를 설정함.)
<blockquote> 태그로 감싸져 있는 부분이 상위 태그인 <p></p> 태그하고 비교해봤을 때,
들여 쓰기가 되어 있다는 걸 볼 수 있다.
또 한, cite속성으로 지정할 수 있는 인용문의 출처 문서나 메시지를 가리키는 용도로
적는 속성이 있다. 이건 말 그대로 출처를 적는 용도로만 사용한다.. 아무런 동작이 없다.
그리고 <blockquote></blockquote> 이 태그 안에서는 CSS 따로 만들어서 사용할
쌍 따옴표, 따옴표 등을 만들 필요가 없다.
즉, <blockquote></blockquote> 이 태그 안에서 <q></q> 태그를 사용하면
위 결과 화면처럼 따옴표가 자동으로 적용된다.
이 <q></q> 태그는 중첩으로도 사용이 가능한데,
처음 <q></q> 태그 작성 시 큰 따옴표로 적용이 되고,
이 안에 또 <q></q> 따옴표로 작성을 하면 작은따옴표로 알아서 적용된다.
반응형
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| HTML5 - 텍스트(수정태그) <small>, <del>, <ins> (0) | 2022.02.22 |
|---|---|
| HTML5 - 텍스트(강조태그) <b>, <i>, <strong>, <em> (0) | 2022.02.22 |
| HTML5 - 텍스트(text 단락구분 태그) <p>, <hr>, <br> (0) | 2022.02.21 |
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 4 (0) | 2022.02.20 |
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 3 (0) | 2022.02.19 |