소개
이 랩에서는 CSS 의 quotes 속성을 탐구하여 인라인 인용구에 사용되는 따옴표를 사용자 정의하는 방법을 알아보겠습니다. 이 속성을 사용하여 자신만의 여는 따옴표와 닫는 따옴표 문자를 정의하고, HTML 의 <q> 요소에 적용하는 방법을 배울 것입니다. 이 랩을 마치면 웹 페이지 스타일링에 개인적인 터치를 추가하는 방법에 대한 이해도가 높아질 것입니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
스타일 지정된 따옴표
index.html과 style.css는 이미 VM 에 제공되어 있습니다.
인라인 따옴표를 사용자 정의하려면 <q> 요소 내에서 quotes 속성을 수정하십시오.
예를 들어:
<p><q>Do or do not, there is no try.</q> – Yoda</p>
CSS 를 사용하여 굴곡진 따옴표로 스타일을 지정할 수 있습니다.
q {
quotes: "“" "”";
}
오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
요약
축하합니다! 스타일 지정된 따옴표 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.