CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다.
다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote>
예제 1
blockquote {
border: 1px solid #27a9e3;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
border-left: 10px solid #27a9e3;
}
예제 2
blockquote:before {
content: "\201C";
font-size: 3em;
font-family: Georgia;
color: #bcbcbc;
float: left;
margin: -5px 10px 0px -10px;
}
CSS 강좌 / 유동적인 크기로 반응형 레이아웃 시작하기
본문의 최대 폭, min()·clamp(), 카드와 이미지의 유동 크기를 비교합니다. 전체 예제와 긴 문자열 실습으로 좁은 공간에서도 내용을 유지하는 방법을 배웁니다.
CSS 강좌 / 관계 선택자와 가상 클래스로 요소 고르기
자손·자식·인접 형제·일반 형제 선택자를 같은 문서 구조에서 비교합니다. hover·focus-visible·first-child·nth-child를 포함한 전체 예제와 구조를 바꿔 선택 결과를 확인하는 실습을 제공합니다.
CSS 강좌 / 큰 스타일시트 정리하기: 파일 구성·중첩·레이어
역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.
CSS 강좌 / width, height, min, max, box-sizing으로 크기 조절하기
content-box와 border-box의 너비 계산, 최소·최대 크기, 고정 높이와 내용에 맞는 높이를 비교합니다. 화면과 글자 크기를 바꾸며 넘침을 진단하고 백분율 높이의 조건을 확인합니다.
이미지와 동영상의 원본 비율과 표시 영역을 구분하고 aspect-ratio·object-fit으로 크기와 잘림을 조절합니다. 같은 그림의 네 가지 비교와 재생 가능한 영상 예제로 결과를 확인합니다.
CSS 강좌 / display와 기본 배치 흐름 이해하기
block·inline·inline-block의 줄바꿈과 크기 적용을 같은 요소로 비교합니다. display: none과 visibility: hidden의 공간 차이, 인라인 이미지의 크기 예외를 실행하며 확인합니다.
CSS 강좌 / 미디어 쿼리와 콘텐츠 기준 분기점 만들기
카드의 최소 폭과 여백을 기준으로 미디어 쿼리 분기점을 정합니다. 1·2·3열 전체 예제와 경계값 비교로 조건이 적용되는 과정을 확인합니다.
Grid의 격자선·트랙·셀과 fr 단위를 이해하고 명시적 행, 자동 행, 열을 가로지르는 배치를 전체 예제로 익힙니다. 긴 콘텐츠와 모바일에서 생기는 넘침도 비교합니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.