1. Hover
Hover 는 Hand Over 의 약자이다.
마우스가 특정 요소 위로 올라갔을 때 스타일을 적용 할 수 있다.
a 태그의 경우 추가적인 기능으로 스타일을 부여 할 수 있다.
| a:link | 링크가 걸려 있는 상태 |
| a:active | 클릭을 했을 경우 |
| a:visitied | 이미 방문한 페이지 |
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
div {
width: 100px;
height: 25px;
border: 1px solid black;
text-align: center;
float: left;
margin: 5px;
transition: 0.5s;
}
div:hover {
background-color: yellow;
}
/* 평소 상태 */
a:link {
text-decoration: none;
color: black;
}
/* 링크를 클릭한 적이 있는 경우 */
a:visited {
color: lightgray;
}
/* 마우스가 올라간 경우 */
a:hover {
text-decoration: underline;
color: black;
}
/* 링크를 클릭하는 순간 */
a:active {
color: black;
}
</style>
</head>
<body>
<div>
<a href="https://www.daum.net">DAUM</a>
</div>
<div>
<a href="https://www.google.com">GOOGLE</a>
</div>
<div>
<a href="https://www.naver.com">NAVER</a>
</div>
<div>
<a href="https://nate.com">NATE</a>
</div>
</body>
</html>
2. Width
min-width 와 max-width 는 유동적으로 넓이가 지정된다.
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
div {
border: 3px solid yellowgreen;
margin: 10px;
text-align: center;
}
div.ex1{
min-width: 800px;
}
div.ex2{
max-width: 800px;
}
div.ex3{
width: 800px;
}
</style>
</head>
<body>
<div class="ex1">min-width:800px</div>
<div class="ex2">max-width:800px</div>
<div class="ex3">width:800px</div>
</body>
</html>
3. Position
Position 속성을 이용해 특정 영역(div)을 자유롭게 배치 할 수 있다.
| static | relative 의 기준이 되는 속성(잘 사용 하지 않음) |
| relative | 다른 요소와 연관 되어 움직임(static이 없으면 가장 가까운 relative 를 기준 삼는다.) |
| absolute | 부모를 기준으로 다른 요소에 방해 받지 않고 움직임 |
| fixed | 특정 위치에서 고정되어 있음 |
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
div {
width: 200px;
height: 200px;
text-align: center;
}
div.static {
position: static;
background-color: yellow;
/* static 은 어떤 기준이 되는 요소 - relative 로도 대체되므로 거의 사용하지 않는다. */
}
div.relative{
position: relative;
background-color: aqua;
top: 1000px; /* static 의 하단 기준으로 */
left: 200px; /* static 의 achor point 의 x 축 기준으로 */
}
div.fixed { /* 따라다니는 메뉴 */
position: fixed;
right: 10%;
top: 10%;
background-color: cadetblue;
}
div.absolute { /* 팝업 */
width: 100px;
height: 100px;
border: 3px solid red;
position: absolute;
top: 25%;
left: 25%;
}
</style>
</head>
<body>
<div class="static">
position:static
</div>
<div class="relative">
position:relative
</div>
<div class="absolute">position:<br/>absolute</div>
<div class="fixed">
position:fixed
</div>
</body>
</html>
4. Z-Index
z 는 3차원적인 두께를 의미 합니다.
요소들 간에 누가 사용자 평면상 위로 올라 가느냐를 지정합니다.
z-index 가 동일하면 아래에 있는 요소가 위로 갑니다.
5. Opacity
투명도를 의미 합니다.
0~1 까지가 있으며 0으로 갈수록 투명해 집니다.
0.2~0.5 정도를 가장 일반적으로 사용합니다.
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
div {
text-align: center;
width: 300px;
height: 300px;
}
#div1 {
position: relative;
top: 10px;
border: 3px dashed green;
background-color: yellowgreen;
}
#div2 {
position: absolute;
top: 10px;
left: 20px;
border: 3px dashed red;
background-color: orange;
z-index: 3;
opacity: 0.4;
}
#div3 {
position: absolute;
top: 100px;
left: 25px;
border: 3px dashed hotpink;
background-color: pink;
z-index: 2;
opacity: 0.4;
}
</style>
</head>
<body>
<!-- 나중에 생기는 요소가 위로 올라간다. -->
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
</body>
</html>
6. Sprite
여러 장의 이미지를 하나의 이미지로 병합 해 놓은 이미지
2D 도트 게임에서 사용하는 개념으로 이제는 웹에서도 사용한다.
여러 이미지를 적은용량으로 효과적으로 사용 할 수 있다.
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
li.bird1{
width: 110px;
height: 110px;
background: url(../img/spriteImg.png) 0 0;
}
li.bird2{
width: 110px;
height: 110px;
background: url(../img/spriteImg.png) 0 -112px;
}
li.bird1:hover{
background: url(../img/spriteImg.png) -109px 0px;
}
li.bird2:hover{
background: url(../img/spriteImg.png) -109px -111px;
}
li{
list-style-type: none;
float: left;
}
</style>
</head>
<body>
<ul>
<li class="bird1"></li>
<li class="bird2"></li>
</ul>
</body>
</html>'CSS' 카테고리의 다른 글
| 02. Space, BgColor, BgImage, Display (0) | 2024.02.28 |
|---|---|
| 01. Tags, Emoji, Selector, Border (1) | 2024.02.28 |
