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의 작성 위치를 비교하고, 두 HTML 페이지가 하나의 스타일시트를 공유하도록 구성합니다. 폴더 위치에 따른 경로와 CSS가 적용되지 않을 때의 확인 순서도 설명합니다.
폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.
CSS 강좌 / 글꼴, 글자 크기, 굵기, 줄 간격 설정하기
글꼴·글자 크기·굵기·줄 간격을 설정하고 실제 사용된 글꼴을 확인하는 방법을 설명합니다. 단위 없는 line-height와 em 값의 상속 차이를 실행 가능한 예제로 비교합니다.
표의 자동·고정 레이아웃, 30:70 열 너비, 긴 문자열의 영향을 같은 데이터로 비교합니다. 모바일 가로 스크롤과 키보드 이동을 확인하고 말줄임 원문을 보존하는 방법을 설명합니다.
CSS 강좌 / Flexbox 정렬·간격·줄바꿈·크기 조절하기
Flexbox의 아이템 정렬과 여러 줄 정렬을 구분하고, gap·줄바꿈·grow·shrink·basis를 비교 예제로 익힙니다. 긴 문자열이 넘치는 원인과 크기·줄바꿈의 해결 방법도 다룹니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.
CSS 강좌 / 브라우저 개발자 도구로 CSS 확인하고 수정하기
브라우저 개발자 도구에서 안내 문단을 선택하고, Styles의 선언과 Computed의 최종 값을 확인합니다. 색상 변경·선언 끄기·원본 저장 실습과 적용되지 않는 CSS의 원인별 점검 방법을 제공합니다.
CSS 강좌 / Grid 반복 열·자동 배치·영역 이름 사용하기
repeat·auto-fit·auto-fill의 차이와 자동 배치 순서를 실행 예제로 비교합니다. grid-template-areas로 페이지를 구성하고 모바일 전환, 영역 이름 오류와 읽기 순서도 확인합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.