CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다.
- 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
h1 {
text-align: center;
}
img {
max-width: 100%;
}
.a {
width: 400px;
margin: 0px auto;
}
</style>
</head>
<body>
<h1>Hover Effect</h1>
<div class="a">
<img src="images/image-01.jpg" alt="">
</div>
</body>
</html>
- 마우스를 올렸을 때 이미지가 확대되도록 transform 속성을 추가합니다. transition 속성은 부드럽게 커지게 하기 위해 넣은 것입니다.
.a img {
transition: all 0.2s linear;
}
.a:hover img {
transform: scale(1.4);
}
- 이제 이미지에 마우스를 올리면 스스륵 이미지가 확대됩니다.
- 이미지가 확대되지만 전체 크기는 변하지 않게 하고 싶다면 overflow: hidden을 추가합니다.
.a {
width: 400px;
margin: 0px auto;
overflow: hidden;
}
CSS 강좌 / 관계 선택자와 가상 클래스로 요소 고르기
자손·자식·인접 형제·일반 형제 선택자를 같은 문서 구조에서 비교합니다. hover·focus-visible·first-child·nth-child를 포함한 전체 예제와 구조를 바꿔 선택 결과를 확인하는 실습을 제공합니다.
CSS 강좌 / 작은 학습 사이트를 반응형으로 꾸미는 종합 실습
작은 학습 사이트를 공통 스타일·Flexbox 헤더·유동 제목·Grid 카드 순서로 완성합니다. 전체 파일과 반응형·초점·긴 내용·움직임 감소 점검 방법을 제공합니다.
CSS 강좌 / 유동적인 크기로 반응형 레이아웃 시작하기
본문의 최대 폭, min()·clamp(), 카드와 이미지의 유동 크기를 비교합니다. 전체 예제와 긴 문자열 실습으로 좁은 공간에서도 내용을 유지하는 방법을 배웁니다.
CSS 강좌 / 큰 스타일시트 정리하기: 파일 구성·중첩·레이어
역할별 CSS 파일 연결과 네이티브 중첩, 캐스케이드 레이어를 실행 가능한 작은 프로젝트로 익힙니다. 선택자 충돌을 비교하고 원래 설정으로 복원하는 실습을 제공합니다.
CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
폼의 필수·유효성·비활성·읽기 전용 상태와 키보드 초점을 구분합니다. 실제 제출 항목을 확인하고 작은 화면·큰 글자에 대응하는 전체 예제를 제공합니다.
CSS 강좌 / width, height, min, max, box-sizing으로 크기 조절하기
content-box와 border-box의 너비 계산, 최소·최대 크기, 고정 높이와 내용에 맞는 높이를 비교합니다. 화면과 글자 크기를 바꾸며 넘침을 진단하고 백분율 높이의 조건을 확인합니다.
CSS 강좌 / 문단과 목록의 간격, 정렬, 목록 표시 설정하기
문단 안의 줄 간격, 문단 사이 여백, 첫 줄 들여쓰기를 구분합니다. 긴 목록을 이용해 outside·inside 표시 위치와 항목 간격을 비교하고 정렬 문제를 확인할 수 있습니다.
z-index의 적용 조건과 부모 쌓임 맥락을 실제로 겹치는 예제로 이해합니다. 자식과 부모의 숫자 변경을 비교하고, overflow 잘림과 겹침 순서를 구분해 문제를 해결합니다.