반응형
|
스타일 시트 CSS 마우스오브(Mouseover) 이미지 테두리 적용 |
|
환경: Eclipse Mars, CSS3 |
이번 예제는 이미지에 마우스오브 했을 때 선택되었다는 느낌을 주기 위해 이미지 안쪽에 빨간색 테두리를 만들어 보겠습니다.
▼ 먼저 CSS 전체 소스에서 첫번째 부분입니다. 마우스가 이미지 위에 없을 때 적용하는 부분입니다. overflow : hidden 인 이유는 이미지 안쪽을 border 크기만큼 가릴 때 안 보이는 부분 제외하고 보여 주기 위해서 입니다. visible 을 하게 되면 테두리 생성이 안됩니다.
a.inner, a.inner img {
float: left;
overflow: hidden;
}
▼ 두번째 부분인 a.inner : hover 는 이미지에 마우스를 올렸을 때 둘러싸고 있는 테두리를 크기만큼 만들고 색깔을 칠하게 됩니다.
a.inner:hover {
border: 20px solid #f00;
}
▼ 세 번째 소스에서 margin: -20px 은 boder 크기만큼 이미지를 바깥쪽으로 밀어내는 역할을 합니다. a.inner : hover 와 a.inner : hover img 가 합쳐 져서 이미지가 줄거나 늘어나지 않고 안쪽에 테두리가 쳐진 것처럼 보이게 만드는 것입니다.
a.inner:hover img {
margin: -20px;
}
▼ 다음은 전체 소스 입니다.
<html>
<head>
<meta charset="EUC-KR">
<title>마우스오브 테두리 주기</title>
<style type="text/css" media="screen">
a.inner, a.inner img {
float: left;
overflow: hidden;
}
a.inner:hover {
border: 20px solid #f00;
}
a.inner:hover img {
margin: -20px;
}
</style>
</head>
<body>
<h1>마우스오브 테두리 주기</h1>
<a href="#" class="inner">
<img src="https://t1.daumcdn.net/cfile/tistory/2101443B5587DDB602"
width="300" height="300" alt="" border="0" />
</a>
</body>
</html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션 (0) | 2023.12.01 |
|---|---|
| 스타일 시트 CSS 가상 선택자 after 사용하는 방법 (0) | 2023.03.18 |
| 스타일 시트 CSS 여러 태그에 스타일을 동시 적용하거나 특정 태그에 적용하는 방법 (1) | 2020.01.18 |
| 스타일 시트 CSS width 와 height 속성 사용법 (0) | 2020.01.17 |
| 스타일 시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법 (1) | 2020.01.12 |
| 스타일 시트 CSS 이벤트 마다 적용할 수 있는 가상 클래스 사용하는 방법 (0) | 2020.01.10 |
| 스타일 시트 CSS 특정 스타일을 적용하기 위한 CLASS, ID 속성 사용법 (0) | 2020.01.05 |
| 스타일 시트 CSS 배경색, 이미지 지정하는 background 속성 알아보기 (0) | 2020.01.04 |
