[css] CSS 투명한 인용구 디자인

26 Dec 2023

HTML에서 인용구 부분을 다음과 같이 작성합니다.

<blockquote>
  <p>인용문 텍스트</p>
</blockquote>

CSS를 사용하여 인용구에 투명도를 적용합니다.

blockquote {
  background-color: rgba(255, 255, 255, 0.5); /* 투명도 조절을 위한 RGBA 색상값 */
  padding: 10px;
  border-left: 5px solid #ccc; /* 원하는 색상 및 스타일의 왼쪽 테두리 추가 */
}

이렇게하면 인용구가 투명한 배경을 가지게 됩니다. 필요에 따라 RGBA 색상값을 조정하여 바탕과 테두리의 투명도를 조절할 수 있습니다.