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>
CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.
CSS / Tutorial / position의 값이 fixed일 때 가운데 정렬하는 방법
position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.
테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다.
표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.