소개
HTML 에서, 우리는 웹페이지에 인용문을 표시하기 위해 저자 이름이나 출처와 함께 <blockquote> 태그를 사용합니다. 이 태그는 블록 레벨 요소로 사용되며 별도의 단락으로 표시됩니다. 이 Lab 에서는 HTML <blockquote> 태그를 사용하여 blockquote 를 만드는 방법을 배우게 됩니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
HTML 구조 추가
index.html이라는 이름의 HTML 파일을 생성하고 코드 편집기에서 엽니다.
아래와 같이 HTML 구조를 추가합니다.
<!doctype html>
<html>
<head>
<title>HTML Blockquote Tag</title>
</head>
<body>
<h1>HTML Blockquote Tag</h1>
<!-- Add the blockquote -->
</body>
</html>
Blockquote 태그 추가
다음 구문을 사용하여 HTML 코드에 blockquote 태그를 추가합니다.
<blockquote>
Your quote comes here...
<cite>- Author Name</cite>
</blockquote>
참고: cite 태그는 인용문의 저자 또는 출처 이름을 제공하기 위해 blockquote 태그 내부에 추가됩니다.
CSS 스타일 추가
다음 코드 조각을 사용하여 blockquote 태그에 CSS 스타일을 추가합니다.
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
font-style: italic;
color: #555;
padding: 5px 20px;
border-left: 5px solid #ccc;
}
</style>
참고: 이 코드는 blockquote 태그에 몇 가지 기본적인 스타일을 설정합니다. border-left 속성은 blockquote 태그에 왼쪽 테두리를 추가합니다.
Your quote comes here...를 대체하여 웹 페이지에 표시하려는 인용구를 추가합니다.
HTML 파일을 저장하고 웹 브라우저에서 열어 웹 페이지에 표시된 blockquote 를 확인합니다.
요약
이 랩에서는 웹 페이지에서 인용구를 별도의 블록으로 표시하기 위한 <blockquote> 태그에 대해 배웠습니다. 또한 태그와 함께 사용할 수 있는 속성과 CSS 를 사용하여 스타일을 지정하는 방법에 대해서도 배웠습니다. blockquote 태그를 사용하면 웹 페이지에서 인용구를 쉽게 표시할 수 있습니다!
