본문 바로가기
css

CSS를 사용한 더 나은 블록 인용구

by code-box 2021. 9. 24.

블록 따옴표는 텍스트의 특정 섹션을 다른 웹 사이트나 다른 원본에서 가져올 때 지정하는 HTML 요소입니다. 브라우저마다 블록 견적에 대한 기본 제공 스타일이 다르며, 종종 단순한 왼쪽 여백에 불과합니다. 블로거들이 흔히 하는 것처럼 인용구를 많이 사용한다면, 이 요소를 통제하고 CSS 스타일을 제공하는 것이 좋습니다!

블록 따옴표 영역의 왼쪽 위 및 오른쪽 아래에 큰 그래픽 따옴표를 넣는 것이 일반적인 기법입니다. 이러한 CSS3 이전, 복수 백그라운드일이 아닌 날에는 약간의 추가 HTML 없이 이 작업을 수행할 수 있는 좋은 방법이 없습니다. 가장 쉬운 기술은 요소와 함께 요소를 추가하는 것입니다. 이상적이진 않지만, 효과가 있습니다. 대부분의 스타일을 CSS에 블록 인용 요소를 적용한 다음 두 번째 배경 이미지를 범위로 설정할 수 있습니다. 왼쪽 상단 및 오른쪽 하단.

블록 인용구로 할 수 있는 다양하고 간단한 5가지 예제가 포함된 예제 페이지를 작성했습니다.

[라이브 예시]

[다운로드 예제]

댓글