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열 전체 예제와 경계값 비교로 조건이 적용되는 과정을 확인합니다.
폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.
실습용 이미지를 내려받아 배경색과 배경 이미지 경로를 설정합니다. cover·contain의 잘림과 빈 공간, 반복과 위치를 비교하고 배경이 안 보일 때의 확인 순서를 설명합니다.
인라인·내부·외부 CSS의 작성 위치를 비교하고, 두 HTML 페이지가 하나의 스타일시트를 공유하도록 구성합니다. 폴더 위치에 따른 경로와 CSS가 적용되지 않을 때의 확인 순서도 설명합니다.
CSS 강좌 / 변수 사용하는 방법: var()·상속·대체값
CSS 변수의 범위와 상속, var()의 대체값과 잘못된 값 처리 방법을 예제로 설명합니다. calc()와 단위 조합, 미디어 쿼리 조건에 변수를 사용할 수 없는 적용 한계도 확인할 수 있습니다.
CSS 강좌 / 작은 학습 사이트를 반응형으로 꾸미는 종합 실습
작은 학습 사이트를 공통 스타일·Flexbox 헤더·유동 제목·Grid 카드 순서로 완성합니다. 전체 파일과 반응형·초점·긴 내용·움직임 감소 점검 방법을 제공합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
z-index의 적용 조건과 부모 쌓임 맥락을 실제로 겹치는 예제로 이해합니다. 자식과 부모의 숫자 변경을 비교하고, overflow 잘림과 겹침 순서를 구분해 문제를 해결합니다.
CSS 강좌 / Flexbox 정렬·간격·줄바꿈·크기 조절하기
Flexbox의 아이템 정렬과 여러 줄 정렬을 구분하고, gap·줄바꿈·grow·shrink·basis를 비교 예제로 익힙니다. 긴 문자열이 넘치는 원인과 크기·줄바꿈의 해결 방법도 다룹니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.