HTML Blockquote 태그: 웹페이지 인용구 향상 (SEO 최적화)

소개

HTML 에서, 우리는 웹페이지에 인용문을 표시하기 위해 저자 이름이나 출처와 함께 <blockquote> 태그를 사용합니다. 이 태그는 블록 레벨 요소로 사용되며 별도의 단락으로 표시됩니다. 이 Lab 에서는 HTML <blockquote> 태그를 사용하여 blockquote 를 만드는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

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 태그를 사용하면 웹 페이지에서 인용구를 쉽게 표시할 수 있습니다!

HTML 인용문 블록

소개

HTML 구조 추가

Blockquote 태그 추가

CSS 스타일 추가

요약