HTML에서 인용 : 인용문, 인용 및 블록 퀘스트

마크 업에서 따옴표에 사용 된 잘못된 HTML을 보는 것은 너무 일반적입니다. 이 기사에서는 이러한 상황을 처리하기 위해 다른 상황과 다른 HTML 태그를 살펴 보겠습니다.

인용과 관련된 세 가지 주요 HTML 요소가 있습니다.

봅시다.

블록 퀘스트

블록 쿼트 태그는 인용 된 텍스트를 나머지 내용과 구별하는 데 사용됩니다. 제 10 학년 영어 선생님은 4 줄 이상의 인용문이 이런 식으로 구별되어야한다고 내 머리에 뚫었습니다. HTML 사양에는 그러한 요구 사항이 없지만 텍스트가 인용문이고 주변 텍스트 및 태그와 구별되기를 원한다면 블록 퀘스트는 의미 론적 선택입니다.

기본적으로 브라우저는 각 측면에 마진을 추가하여 블록 크기를 들여 쓰기.

흐름 요소 (예 : "블록 레벨"요소)로서 블록 쿼트에는 그 안에 다른 요소가 포함될 수 있습니다. 예를 들어, 문제없이 단락을 삭제할 수 있습니다.

 <blockquote>
  <p> </p>
  <p> </p>
</blockquote>

그러나 제목이나 정렬되지 않은 목록과 같은 다른 요소 일 수도 있습니다.

 <blockquote>
    <h2> </h2>
    <ul>
      <li> </li>
      <li> </li>
    </ul>
</blockquote>

블록 큐어는 디자인의 장식 요소가 아닌 인용에만 사용해야한다는 점에 유의해야합니다. 또한 화면 리더 사용자가 블록 퀘스트 사이를 뛰어 넘을 수 있으므로 액세스 할 수 있습니다. 따라서 미학에만 사용되는 블록 쿼트 요소는 실제로 이러한 사용자를 혼동 할 수 있습니다. 확장 인용문의 한계를 벗어나는 더 장식적인 것이 필요하다면 아마도 클래스와의 div가 갈 길입니다.

 블록 쿼트,
.callout-block {
  / * 스타일을 공유 할 수 있습니다 */
}

Q와 인용

Q 태그 ()는 인라인 따옴표 또는 제 10 학년 선생님이 4 줄 아래의 사람들이라고 말하는 것입니다. 많은 현대식 브라우저는 견적에 따옴표에 따옴표를 자동으로 추가하지만 이전 브라우저에는 백업 솔루션이 필요할 수 있습니다.

일반적인 따옴표는 요소만큼 인라인 따옴표에 유효합니다. 그러나 를 사용하는 이점은 인용 속성, 인용 표시의 자동 처리 및 인용 수준의 자동 처리가 포함된다는 것입니다. 요소는 풍자에 사용해서는 안됩니다 (예 :“당신은 태그를 aways , not not not?”) 또는 공기 따옴표가있는 단어를 나타내는 (예 :“Awesome”은 저자의“정확한”설명)를 나타냅니다. 그러나 에어 따옴표를 표시하는 방법을 알아낼 수 있다면 알려주십시오. 그것은 "굉장한"일 것이기 때문입니다.

인용 속성

와 blockquotes는 모두 인용 (인용) 속성을 사용할 수 있습니다. 이 속성은 인용 된 자료에 대한 컨텍스트 및/또는 참조를 제공하는 URL을 보유합니다. 사양은 URL이 공간으로 둘러싸여 있다고 말하는 지점을 만듭니다. (왜 그것이 지적되는지 잘 모르겠지만, 시맨틱 코드 신들을 화나게하고 싶다면 주변에 공간을 던지는 것보다 더 많은 일을해야합니다.)

 <p> 경찰관은 <q cite="https://johnrhea.com/summons"> </q></p>

해당 인용 속성은 기본적으로 사용자에게 표시되지 않습니다. 다음 데모와 같은 CSS 마법의 뿌리와 함께 추가 할 수 있습니다. 인용이 호버에 나타나게하기 위해 더 바이올린을 만들 수도 있습니다.

이러한 옵션 중 어느 것도 특히 훌륭하지 않습니다. 사용자가 그것을보고 갈 수 있도록 소스를 인용해야한다면, 당신은 html에서 그리고 아마도 다음에 다룰 것입니다.

인용 요소

태그는 인용문을 말하거나 쓴 사람보다는 창의적인 작업을 참조하는 데 사용해야합니다. 다시 말해, 그것은 인용문이 아닙니다. 사양의 예는 다음과 같습니다.

 <p> 내가 가장 좋아하는 책은 <cite> 현실 기능 장애 </cite>입니다
피터 F. 해밀턴. 내가 가장 좋아하는 만화는 전에 <cite> 진주입니다
스테판 파스티스의 돼지 인용>. 내가 가장 좋아하는 트랙은 <cite> jive입니다
Samba </cite> Cannonball Adderley Sextet. </cite></p>

또 다른 예는 다음과 같습니다.

이 기사의 저자가 당신에게 컵 케이크를 줄 것이라고 말하고 당신은 이름으로 그에게 를 말하면 의미 적으로 부정확합니다. 따라서 컵 케이크는 손을 바꾸지 않을 것입니다. 그가 당신에게 컵 케이크를 제공 한 기사를 인용했다면, 그것은 의미 적으로 정확하지만 저자는 그렇게하지 않기 때문에 여전히 컵 케이크를 얻지 못할 것입니다. 죄송합니다.

기본적으로 브라우저는 인용 태그를 이탤릭체로 표현하며 인용 요소를 사용하기 위해 a 또는

가 존재해야 할 필요가 없습니다. 책이나 다른 창조적 인 작품을 인용하려면 인용 요소로 슬립니다. 시맨틱 신들은 또는 요소를 사용하지 않기 위해 당신에게 미소를 지을 것입니다.

그러나 인용 요소를 어디에 두어야합니까? 내부에? 밖의? 거꾸로?

또는 안에 넣으면 인용문의 일부를 만들고 있습니다. 그것은 그 이유 때문에 사양에 의해 금지되어 있습니다.

 
<blockquote>
  기사에서 컵 케이크 분포에 대한 인용
  <cite> 기사 </cite>
</blockquote>

바깥쪽에 놓는 것은 잘못된 느낌이 들며 함께 스타일을 함께 만들고 싶다면

와 같은 동봉 요소가 있어야합니다.

 <div>
  <blockquote>
    기사에서 컵 케이크 분포에 대한 인용
  </blockquote>
  <cite> 기사 </cite>
</div>

NB이 문제를 Google에두면 2013 년부터 HTML5 의사 기사를 발견하여 여기에 배치 된 내용의 많은 부분과 모순 될 수 있습니다. 즉, 지원을 위해 문서에 연결할 때마다 문서는 HTML5 의사 기사가 아닌 현재 읽고있는 기사에 동의합니다. 해당 기사가 작성된 이후로 문서가 변경되었을 가능성이 높습니다.

이봐, 그림 요소는 어떻습니까?

인용문을 표시하는 한 가지 방법은 의미 론적 코드 신들을 기쁘게하는 방식으로 블록 쿼트를 그림 요소에 넣는 것입니다. 그런 다음 인용 요소와 다른 저자 또는 인용 정보를 Figcaption에 넣으십시오.

 
  <blockquote>
    그러나 웹 브라우저는 웹 서버와 같지 않습니다. 백엔드 코드가 너무 커져서 눈에 띄게 느리게 실행되기 시작하면 서버를 확장하여 더 많은 컴퓨팅 전력을 던질 수 있습니다. 이는 실제로 <em>하나의</em> 런타임 환경이없는 프론트 엔드의 옵션이 아닙니다. 최종 사용자는 컴퓨팅 전력 <strong>및</strong> 네트워크 연결에 대한 자체 제약 조건을 갖춘 고유 한 런타임 환경을 가지고 있습니다.
  </blockquote>
  
    & mdash; Jeremy Keith, <cite> 정신 모델 </cite>
  
그림>

이것은 필요한 요소의 수를 두 배로 늘리지 만 몇 가지 이점이 있습니다.

1. 네 가지 요소 모두에 의미 적으로 정확합니다.
2. 그것은 당신이 작품의 이름을 인용하는 것 외에 저자 정보를 포함시키고 캡슐화 할 수있게합니다.
3. 그것은 당신에게 divs, spans 또는 wretchedness에 의지하지 않고 견적을 스타일링하는 쉬운 방법을 제공합니다.

이 중 어느 것도 대화를위한 것이 아닙니다

가 아닙니다! 그것들은주의를 끄는 모달을위한 것입니다. 대화,와 마찬가지로 대화를 나누거나 말하는 사람들 사이의 대화 교환.

NOR NOR 는 대화 및 스피커 간의 유사한 교환에 사용되지 않습니다. 대화를 표시하는 경우 가장 의미가있는 모든 것을 사용할 수 있습니다. 그것을 할 의미 론적 방법은 없습니다. 즉,이 사양은

태그와 태그가있는 태그와 구두점을 제안하여 스피커를 지정하고 무대 방향을 표시하기 위해 태그를 지정합니다.

인용문의 접근성

내가 한 연구에서 스크린 리더는 시맨틱-살인 승인 ,

또는 태그를 이해하는 데 아무런 문제가 없어야합니다.

“인용”하는 더 많은“방법”

CSS 의사 요소를 사용하여

에 따옴표를 추가 할 수 있습니다. 요소에는 인용 자국이 구워 지므로 추가 할 필요가 없지만 의사 요소로 추가하는 것은 자동으로 추가하지 않는 이전 브라우저의 경우 해결 방법이 될 수 있습니다. 현대식 브라우저가 인용 표시를 추가하는 방식이므로 중복 인용문을 추가 할 위험이 없습니다. 새 브라우저는 기본 유사 요소를 덮어 쓰고 의사 요소를 지원하는 오래된 브라우저가 따옴표를 추가합니다.

그러나 내가했던 것처럼 위의 내용은 항상 스마트 오프닝 및 마감 인용문을 줄 것이라고 가정 할 수는 없습니다. 글꼴이 스마트 인용문을 지원하더라도 때로는 직선 인용문이 표시됩니다. 안전하려면 따옴표 CSS 속성을 사용하여 인용 표시에 대한 지능을 높이는 것이 좋습니다.

 블록 쿼트 {
  인용문 : "" "" "" "" "" "" ";" ";" ""; "" "" ";" ""; "" ";" ";" ";" ""; "" ";" ""; "" ";" ""; 인용;
} 

다단계 견적

이제 견적 수준 을 살펴 보겠습니다. 태그는 자동으로 견적 레벨을 조정합니다.

단일 따옴표를 사용하는 영국 대회를 사용하는 지역에 있다고 가정 해 봅시다. CSS 따옴표 규칙을 사용하여 목록에 개구부 및 마감 단일 따옴표를 먼저 배치 할 수 있습니다. 두 가지 방법의 예는 다음과 같습니다.

중첩에는 제한이 없습니다. 그 중첩 된 요소는 블록 쿼트 내에있는 블록 쿼트 내에있을 수도 있습니다.

견적 마크를 블록 쿼트에 추가하면 블록 쿼트가 태그와 같은 견적 수준을 변경하지 않는다는 것을 알고 있습니다. 블록 쿼트 내에 따옴표가있을 것으로 예상되는 경우, 단일 견적 수준 (또는 영국 컨벤션을 따르는 경우 이중 인용문)에서 요소를 시작하기 위해 후손 선택자 규칙을 추가 할 수 있습니다.

 Blockquote Q {
  인용문 : " '" "" "" "" "" ""; ""; "" ";" ""; "" ""; "" ""; "" ";" ""; "" ";" ""; "" ""; "" "" "" "" ";이다로에" ""; "" ";" ""; "" ";" ""; "" ";" "" "" "" "" "";간의 "" "" "" "" "" "" "" "
}

마지막 인용 수준은 후속 인용 수준을 통해 계속됩니다. 이중, 단일, 이중, 단일… 컨벤션을 사용하려면 CSS 따옴표 속성에 더 많은 레벨을 추가하십시오.

 Q {
  따옴표 : "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""; "" ""; "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""광" "" "" "" "" "" "" """리는; 때문에 ;신;
}

구두점 매달려

많은 타이포그래피 전문가들은 블록 퀘스트에 인용 표시를 걸는 것이 더 좋아 보인다고 말할 것입니다. 구두점은이 경우 텍스트의 문자가 수직으로 정렬되도록 텍스트에서 튀어 나온 인용 표시입니다.

CSS의 한 가지 가능성은 텍스트 인센트 속성에서 약간 음수 값을 사용하는 것입니다. 정확한 부정적인 계약은 글꼴마다 다르므로 사용하는 글꼴로 간격을 두 번 확인하십시오.

 블록 쿼트 {
  텍스트 안정 : -0.45EM;
}

교수형 구분 CSS 속성을 사용하여이를 처리하는 더 좋은 방법이 있습니다. 이 글을 쓰는 시점에서 사파리에서만 지원되므로 점차적으로 향상시켜야합니다.

 / * 폴백 */
블록 쿼트 {
  텍스트 안정 : -0.45EM;
}

/ * 지원이있는 경우 계약을 지우고 대신 속성을 사용하십시오 */
@supports (매달린 푸트 부호 : 첫 번째) {
  블록 쿼트 {
    텍스트 안정 : 0;
    매달린 구분 : 첫 번째;
  }
}

매달린 구분을 사용하는 것이 덜 충실하기 때문에 더 좋습니다. 가능하면 작동합니다 .

견적 마크를 애니메이션 할 수 있습니까?

물론 우리는 할 수 있습니다.

이 작업을 수행 해야하는 이유는 확실하지 않지만 태그의 인용 표시는 UA 스타일 시트의 의사 요소이므로 필요한 경우 애니메이션을 포함하여 선택 및 스타일을 선택할 수 있습니다.

잠깐, 어쩌면 우리는 방금 공기 따옴표를 해결했을 것입니다.

위 내용은 HTML에서 인용 : 인용문, 인용 및 블록 퀘스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!