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

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

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

CSS 강좌 / 표 꾸미기 / 정렬

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

CSS 강좌 / 상속·우선순위·캐스케이드로 최종 스타일 결정하기

상속과 직접 지정의 차이부터 중요도·선택자 우선순위·작성 순서까지 단계별로 판단합니다. 같은 문단의 색상·여백·테두리를 예측하는 전체 예제와 !important·인라인 스타일의 비교 실습을 제공합니다.

CSS / Tutorial / 문자열 자르는 방법

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.

CSS 강좌 / Grid 반복 열·자동 배치·영역 이름 사용하기

repeat·auto-fit·auto-fill의 차이와 자동 배치 순서를 실행 예제로 비교합니다. grid-template-areas로 페이지를 구성하고 모바일 전환, 영역 이름 오류와 읽기 순서도 확인합니다.

CSS 강좌 / ul, ol 가운데 정렬하는 방법

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

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

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

CSS 강좌 / position의 relative·absolute·fixed·sticky 차이

relative·absolute·fixed·sticky의 공간 유지, 위치 기준과 스크롤 차이를 비교합니다. 배지와 고정 버튼, 붙는 제목 예제를 실행하며 기준 부모와 동작하지 않는 원인을 확인합니다.

CSS 강좌 / 링크 꾸미는 방법

링크의 기본 밑줄과 방문·호버·활성 상태를 설정하고 키보드 포커스를 표시합니다. 두 파일로 방문 이력과 Tab·Enter 동작을 확인하며 상태 규칙이 겹칠 때의 결과를 설명합니다.

CSS 강좌 / 작은 학습 사이트를 반응형으로 꾸미는 종합 실습

작은 학습 사이트를 공통 스타일·Flexbox 헤더·유동 제목·Grid 카드 순서로 완성합니다. 전체 파일과 반응형·초점·긴 내용·움직임 감소 점검 방법을 제공합니다.