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 / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS / Tutorial / 인용문(Blockquote) 꾸미는 방법
blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다. 그대로 사용하기보다는 여러 가지 모양으로 꾸미는 것이 일반적입니다. 다음은 아래와 같은 인용문을 꾸미는 몇 가지 예제입니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
링크는 a 태그로 만듭니다. 따라서 링크는 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.