CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법

CSS 강좌 / 표 꾸미기 / 정렬

표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬

CSS 강좌 / 모바일·큰 화면·확대 보기에서 레이아웃 점검하기

점검용 페이지에서 화면 폭, 확대, 긴 문자열과 키보드 조작을 확인합니다. 가로 넘침과 글자 잘림을 재현하고 원인 확인부터 수정·재점검까지 실습합니다.

CSS 강좌 / 문법: 선택자·선언·주석과 오류 처리

CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.

CSS 강좌 / 유동적인 크기로 반응형 레이아웃 시작하기

본문의 최대 폭, min()·clamp(), 카드와 이미지의 유동 크기를 비교합니다. 전체 예제와 긴 문자열 실습으로 좁은 공간에서도 내용을 유지하는 방법을 배웁니다.

CSS 강좌 / Flexbox로 요소를 한 방향에 배치하기

Flexbox의 직접 자식, 주축과 교차축, row·column·reverse의 차이를 전체 예제로 익힙니다. 초기 크기와 키보드 순서를 비교하면서 배치가 달라지는 이유를 확인합니다.

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법

blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.

CSS 강좌 / 기본 선택자 - 요소, 클래스, ID, 속성

요소·클래스·ID·속성 선택자를 같은 HTML에 적용해 대상과 결과를 비교합니다. 복합 클래스, 공백으로 구분한 속성값, 필수 입력칸을 포함한 전체 예제와 선택자 수정 실습을 제공합니다.

CSS 강좌 / 색상 값과 px·em·rem·% 단위 이해하기

색상 표기와 px·em·rem·%의 계산 기준을 비교합니다. 중첩된 글자 크기와 여백이 있는 상자 예제로 실제 크기를 계산하고 개발자 도구에서 확인할 수 있습니다.

CSS 강좌 / display와 기본 배치 흐름 이해하기

block·inline·inline-block의 줄바꿈과 크기 적용을 같은 요소로 비교합니다. display: none과 visibility: hidden의 공간 차이, 인라인 이미지의 크기 예외를 실행하며 확인합니다.