📝 마우스 오버 효과 구현하기: :hover 의사 클래스 기초
웹 페이지를 만들 때 사용자의 인터랙션에 따라 디자인이 변하도록 만드는 것은 매우 중요합니다. 오늘은 가장 대표적인 반응형 스타일 중 하나인 :hover를 활용해 예제와 실습 문제를 풀어보고 해석해보았습니다.
1. :hover 예제 코드 살펴보기
먼저 HTML과 CSS 코드를 확인해 봅시다.
📝 HTML 구조
<div></div>🎨 CSS 스타일링
/* 기본 상태의 div 스타일 */
div {
width: 100px;
height: 100px;
background-color: red;
}
/* 마우스 올림(hover) 상태의 div 스타일 */
div:hover {
background-color: blue;
}2. 개념 정리
① 요소 선택자 (Type Selector)
div { ... } 부분은 HTML의 특정 태그(여기서는 <div>)를 직접 지목하여 스타일을 적용합니다.
- 위 코드에서는 가로 100px, 세로 100px의 크기를 가진 빨간색 정사각형을 화면에 그리게 됩니다.
② 의사 클래스: hover
div:hover에서 :hover는 의사 클래스(가상 클래스)라고 부릅니다. 이는 요소의 특별한 상태를 정의할 때 사용합니다.
- 개념: 사용자가 포인팅 장치(마우스 등)를 요소 위에 올려두었을 때 스타일을 적용합니다.
- 동작: 평소에는 빨간색(
red)이다가, 사용자가 마우스를div위로 가져가는 순간 파란색(blue)으로 배경색이 즉시 변경됩니다. 마우스를 치우면 다시 원래의 빨간색으로 돌아옵니다.
:hover는 버튼, 링크, 이미지 카드 등 웹사이트의 거의 모든 인터랙티브한 요소에 사용됩니다. 사용자에게 "이 요소는 클릭이 가능하다"거나 "현재 선택되었다"는 피드백을 주는 아주 강력한 도구입니다.
3. 자식 선택자 (>)와 스타일 초기화
HTML 구조가 복잡해질수록 원하는 요소만 정확히 골라내는 능력이 중요합니다.
📝 HTML 구조
<a href="#">안녕</a>
<div>
<a href="#">안녕</a>
</div>🎨 CSS 스타일링
/* div 바로 아래(직계 자식)에 있는 a 태그만 선택 */
div > a {
/* a 태그 특유의 밑줄 제거 */
text-decoration: none;
}💡 핵심 포인트
- 자식 선택자 (
>): 부모 요소 바로 한 단계 아래에 있는 자식만을 지목합니다.
text-decoration: none;:<a>태그의 기본 스타일인 밑줄을 제거하여 디자인을 훨씬 깔끔하게 만들어줍니다.
4. 💻 최종 실습: 배운 내용 종합하기
문제1: 그림처럼 BMX 사이트의 상단 메뉴까지 구현해주세요.
🔍 정답 코드와 풀이
📝 HTML 구조
<div><a href="#">BMX</a></div>
<section>
| <nav><a href="#">BRAND</a></nav>
| <nav><a href="#">VISUAL</a></nav>
| <nav><a href="#">STYLE</a></nav>
| <nav><a href="#">MEDIA</a></nav>
| <nav><a href="#">NEWS</a></nav>
| <nav><a href="#">STORE</a></nav>
| <nav><a href="#">CUSTOMER</a></nav> |
</section>💡 Emmet으로 코드 작성 시간 단축하기
복잡한 구조도 단 한 줄의 명령어로 생성할 수 있습니다.
- 기본 생성:
div>a[href="#"]{BMX}div안에href가#인a태그를 만들고 텍스트BMX를 넣습니다.
- 반복 및 그룹화:
section>({|}+nav>a[href="#"]{메뉴아이템 $})*7+|section안에 구분선(|)과nav항목 세트를 7번 반복하여 생성합니다.
🎨 CSS 스타일링
1. 기본 초기화 및 공통 스타일 (a 태그)
a {
text-decoration: none; /* 1 */
color: black; /* 2 */
/* color: inherit; */
}text-decoration: none;: HTML에서<a>태그는 기본적으로 파란색 글씨와 밑줄을 가집니다. 이를 제거하여 디자인을 백지상태로 만듭니다.color: black;: 링크 색상을 검정으로 고정합니다. 주석 처리된inherit을 사용하면 부모 요소의 글자색을 그대로 물려받아 더 유연한 디자인이 가능해집니다.
2. 로고 스타일링 (div > a)
div {
text-align: center; /* 1 */
}
div > a {
font-size: 5rem;
font-weight: bold;
text-transform: uppercase; /* 2 */
letter-spacing: -10px; /* 3 */
}text-align: center;:div안의 인라인 요소(a태그 등)를 가로 중앙으로 정렬합니다.text-transform: uppercase;: HTML에 소문자로 써도 화면에는 자동으로 대문자로 표시됩니다.letter-spacing: -10px;: 자간(글자 사이 간격)을 좁혀서 글자들이 서로 끈끈하게 붙어 있는 디자인적 느낌을 줍니다.
3. 메뉴바 레이아웃 (section, nav)
section {
display: block; /* 1 */
text-align: center;
font-weight: bold;
}
section > nav {
display: inline-block; /* 2 */
width: 120px; /* 3 */
}display: block;:section은 기본적으로 블록 요소입니다. 한 줄 전체를 차지하며 목록의 컨테이너 역할을 합니다.display: inline-block;:💡가장 중요한 부분입니다.nav는 본래 줄바꿈이 일어나는 블록 요소지만, 이를inline-block으로 바꾸면 한 줄에 여러 개를 가로로 나열하면서도 너비(width)를 가질 수 있는 상태가 됩니다.width: 120px;: 각 메뉴 항목의 너비를 일정하게 맞춰 정렬감을 줍니다.
4. UX를 위한 핵심 기법 (section > nav > a)
section > nav > a {
display: block; /* 핵심! */
}
section > nav:hover > a {
color: red;
}💡 왜 a를 display: block;으로 만들까요?
기본적으로 a 태그는 글자 크기만큼만 클릭 영역이 잡힙니다. 하지만 display: block;을 주면 부모인 nav의 너비(120px)만큼 클릭 영역이 꽉 차게 됩니다.
- 효과: 사용자가 글자를 정확히 클릭하지 않고, 메뉴 칸의 빈 공간만 눌러도 링크가 작동합니다. (사용자 경험 개선)
💡 왜 nav:hover를 사용하나요?
a:hover가 아니라 부모인 nav:hover를 사용하면, 마우스가 글자에 닿기 전이라도 메뉴 칸(120px 범위) 안에만 들어오면 즉시 글자색이 빨간색으로 변합니다. 훨씬 민감하고 고급스러운 반응형 디자인이 됩니다.
마무리
오늘은
display: block과inline-block의 차이를 활용한 스타일링 , 그리고:hover의 활용법을 학습했다. 웹 퍼블리싱의 가장 기초가 되는 부분이라고 할 수 있다. 머리로만 이해하기보다 직접 코드를 쳐보며 클릭 영역이 어떻게 변하는지 확인해 보시면 훨씬 빠르게 익힐수 있을 거라고 생각한다!
