CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법
CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.
마우스 올렸을 때 모양 만들기
- 마우스를 올렸을 때 보이길 원하는 모양을 먼저 만듭니다.
- .jb-title에 마우스를 올리면 .jb-text가 보이게 만들 것입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 16px;
}
.jb-text {
padding: 15px 20px;
background-color: #444444;
border-radius: 5px;
color: #ffffff;
}
</style>
</head>
<body>
<p class="jb-title">Lorem ipsum dolor</p>
<div class="jb-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</body>
</html>
display 속성 이용하여 만들기
- display 속성으로 .jb-text를 보이지 않게 합니다.
.jb-text {
padding: 15px 20px;
background-color: #444444;
border-radius: 5px;
color: #ffffff;
display: none;
}
- :hover를 이용하여 .jb-title에 마우스가 올라간 것을 감지하고, 형제 선택자를 이용하여 .jb-text가 나오게 합니다.
.jb-title:hover + .jb-text {
display: block;
}
- 결과는 다음과 같습니다.
다른 요소 위에 나오게 하기
- .jb-text 다음에 다른 요소가 있다면, .jb-text 요소가 보이면서 다른 요소가 아래로 밀리게 됩니다. 다른 요소가 밀리지 않고 그 위에 나오게 하려면 position 속성을 이용합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 16px;
}
.jb-text {
padding: 15px 20px;
background-color: #444444;
border-radius: 5px;
color: #ffffff;
position: absolute;
display: none;
}
.jb-title:hover + .jb-text {
display: block;
}
</style>
</head>
<body>
<p class="jb-title">Lorem ipsum dolor</p>
<div class="jb-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
애니메이션 효과 주기
- .jb-text 요소가 보여지고 사라질 때 애니메이션 효과를 주고 싶다면, display가 아니라 opacity를 사용합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
* {
font-family: Consolas, monospace;
font-size: 16px;
}
.jb-text {
padding: 15px 20px;
background-color: #444444;
border-radius: 5px;
color: #ffffff;
position: absolute;
opacity: 0;
transition: all ease 0.5s;
}
.jb-title:hover + .jb-text {
opacity: 1;
}
</style>
</head>
<body>
<p class="jb-title">Lorem ipsum dolor</p>
<div class="jb-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다.
CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS / Tutorial / CSS를 HTML에 적용시키는 방법
HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 과 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.
CSS / Tutorial / 상속(inheritance)
CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.
표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법
문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.