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 강좌 / 미디어 쿼리와 콘텐츠 기준 분기점 만들기
카드의 최소 폭과 여백을 기준으로 미디어 쿼리 분기점을 정합니다. 1·2·3열 전체 예제와 경계값 비교로 조건이 적용되는 과정을 확인합니다.
CSS 강좌 / Flexbox로 요소를 한 방향에 배치하기
Flexbox의 직접 자식, 주축과 교차축, row·column·reverse의 차이를 전체 예제로 익힙니다. 초기 크기와 키보드 순서를 비교하면서 배치가 달라지는 이유를 확인합니다.
CSS 강좌 / 모바일·큰 화면·확대 보기에서 레이아웃 점검하기
점검용 페이지에서 화면 폭, 확대, 긴 문자열과 키보드 조작을 확인합니다. 가로 넘침과 글자 잘림을 재현하고 원인 확인부터 수정·재점검까지 실습합니다.
CSS 강좌 / 기본 선택자 - 요소, 클래스, ID, 속성
요소·클래스·ID·속성 선택자를 같은 HTML에 적용해 대상과 결과를 비교합니다. 복합 클래스, 공백으로 구분한 속성값, 필수 입력칸을 포함한 전체 예제와 선택자 수정 실습을 제공합니다.
배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.
CSS 강좌 / 큰 스타일시트 정리하기: 파일 구성·중첩·레이어
역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.
CSS 강좌 / transform과 transition으로 상태 변화 표현하기
transform의 이동·회전·확대와 transition의 시간·곡선·지연을 비교합니다. 문서 흐름, 키보드 초점과 움직임 감소 설정을 전체 예제로 확인할 수 있습니다.
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
Grid의 격자선·트랙·셀과 fr 단위를 이해하고 명시적 행, 자동 행, 열을 가로지르는 배치를 전체 예제로 익힙니다. 긴 콘텐츠와 모바일에서 생기는 넘침도 비교합니다.
CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.