CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다.
위쪽 가로 방향으로 선 그리기
- 다음과 같이 사각형을 만듭니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
}
.jb {
width: 400px;
height: 400px;
margin: 40px auto;
border: 10px solid #dadada;
}
</style>
</head>
<body>
<div class="jb">
</div>
</body>
</html>
- :before를 이용하여 선이 시작하는 위치를 정합니다.
- position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.
.jb {
width: 400px;
height: 400px;
margin: 40px auto;
border: 10px solid #dadada;
position: relative;
}
.jb:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
display: block;
width: 10px;
height: 10px;
background-color: #444444;
}
- :hover를 이용하여 마우스를 올리면 긴 선으로 바뀌도록 합니다.
- 여기까지 코딩하면 마우스를 올렸을 때 바로 선이 길어집니다.
.jb:hover:before {
width: 420px;
}
- transition 속성을 추가하여 애니메이션 효과를 줍니다.
.jb:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
display: block;
width: 10px;
height: 10px;
background-color: #444444;
transition: all linear 0.5s;
}
- 전체 코드는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
}
.jb {
width: 400px;
height: 400px;
margin: 40px auto;
border: 10px solid #dadada;
position: relative;
}
.jb:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
display: block;
width: 10px;
height: 10px;
background-color: #444444;
transition: all linear 0.5s;
}
.jb:hover:before {
width: 420px;
}
</style>
</head>
<body>
<div class="jb">
</div>
</body>
</html>
아래쪽 가로 방향으로 선 그리기
- :after를 이용하여 아래쪽에도 같은 효과를 넣습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
}
.jb {
width: 400px;
height: 400px;
margin: 40px auto;
border: 10px solid #dadada;
position: relative;
}
.jb:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
display: block;
width: 10px;
height: 10px;
background-color: #444444;
transition: all linear 0.5s;
}
.jb:hover:before {
width: 420px;
}
.jb:after {
content: "";
position: absolute;
bottom: -10px;
right: -10px;
display: block;
width: 10px;
height: 10px;
background-color: #444444;
transition: all linear 0.5s;
}
.jb:hover:after {
width: 420px;
}
</style>
</head>
<body>
<div class="jb">
</div>
</body>
</html>
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.
표와 관련된 정렬에는 표 정렬, 셀 안의 내용 가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본 모양은 다음과 같습니다. 표(table) : 왼쪽 정렬 제목 셀(th) 안의 내용 가로 정렬 : 가운데 정렬 내용 셀(td) 안의 내용 세로 정렬 : 왼쪽 정렬 셀 안의 내용 세로 정렬 : 가운데 정렬
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
링크는 a 태그로 만듭니다. 따라서 링크는 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.
CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다.
CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.