CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기
마우스를 올리면 선이 그려지는 효과를 만들어봅니다.
위쪽 가로 방향으로 선 그리기
- 다음과 같이 사각형을 만듭니다.
<!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는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만든다. border-width border-style border-color 문법 border: border-width border-style border-color | initial | inherit border-width : 테두리의 두께를 정한다. 기본값은 medium이다. border-style : 테두리의 모양을 정한다. 기본값은 none이다. border-color : 테두리의 색을 정한다. 기본값은 선택한 요소의 색이다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. border-width에는 다음의 값을 넣을 수 있다. medium | thick ...
CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격
letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정한다. 값이 커지면 간격이 커진다. 값에는 음수를 넣을 수 있다. 음수를 값으로 하는 경우 글자가 겹칠 수 있다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제이다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변한다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않는다. <!doctype html> <html lang="ko"> <head> ...
CSS / clip / 요소의 특정 부분만 보이게 하는 속성
개요 clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2 문법 clip: auto | shape | initial | inherit auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 ...
CSS / border-collapse / 표의 테두리와 셀의 테두리 사이의 간격 처리 방식 정하는 속성
개요 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-collapse: separate | collapse | initial | inherit separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다. 겹치는 부분은 한 줄로 나타낸다. initial : 기본값으로 ...
표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...
CSS의 border 속성으로 삼각형을 만들 수 있다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아본다. 삼각형 만들기 기본 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="triangle"></div> 가로와 세로의 크기를 0으로 만든다. 아래쪽, 왼쪽, 오른쪽에 테두리를 추가하면 사각형을 만들 수 있다. .triangle { width: 0px; height: 0px; border-bottom: 360px solid #666666; ...
CSS / radial-gradient - 원형 그라데이션 효과 만들기
radial-gradient radial-gradient로 원형 그라데이션 효과를 만들 수 있습니다. CSS3에서 추가된 것으로,인터넷 익스플로러는 버전 10 이상에서 사용할 수 있습니다. 문법 radial-gradient( shape size at position, color1, color2, ..., color3 ) shape : 원 모양인지 타원 모양인지 정합니다. size : 크기를 정합니다. position : 중심의 위치를 정합니다. color : 색을 정합니다. 아래의 예제로 하나씩 알아보겠습니다. 예제 1 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div.jb { margin: ...
레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...
상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않습니다. 예제 color는 상속하는 속성이므로 자식 요소의 ...
반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...