[문제] 괄호 안에 ( ) 마우스를 올리면 답이 빨간색으로 보여주시오.
=> visibility: visible; 사용
exam08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
span {
visibility: hidden; /* 영역은 살아있다. 내 눈에만 안 보일뿐 */
/* display: none; */ /* 영역 자체가 안 나온다. */
}
li:hover span{
visibility: visible;
color: red;
}
</style>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?</h3>
<hr>
<ul>
<li>I (<span>love</span>) you.
<li>CSS is Cascading
(<span>Style</span>) Sheet.
<li>응답하라 (<span>1988</span>).
</ul>
</body>
</html>
괄호 안에 올렸을 때만 딱 글씨가 나오게 만들어보면 !
[문제] 괄호 안에 ( ) 마우스를 올리면 답이 빨간색으로 보여주시오.
① visibility: visible; 사용
② 숨겨진 요소 <span> 위로 마우스를 올릴 수 없다. ===> 중첩을 사용
exam08-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.item span {
visibility: hidden;
}
.item:hover span {
visibility: visible;
color: red;
}
</style>
</head>
<body>
<h3>다음 빈 곳에 숨은 단어?</h3>
<hr>
<ul>
<li>I (<span class="item"><span>love</span></span>) you.
<li>CSS is Cascading
(<span class="item"><span>Style</span></span>) Sheet.
<li>응답하라 (<span class="item"><span>1988</span></span>).
</ul>
</body>
</html>
[ hidden / visible / scroll / auto ]
- overflow에 hidden 값을 적용하면 박스를 넘어가는 내용이 잘려 보이지 않는다.
- overflow에 visible 값을 적용하면 콘텐트가 박스를 넘어가도 출력된다.
- overflow에 scroll 값을 적용하면 박스에 스크롤바를 붙여 출력한다.
- overflow에 auto 값을 적용하면 콘텐트가 박스를 넘어갔을 때 박스에 스크롤바를 붙여 출력한다.
exam09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
width: 15em;
height: 3em;
border: 1px solid lightgray;
}
.hidden {
overflow: hidden;
}
.visible {
overflow: visible;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
</style>
</head>
<body>
<h3>overflow 프로퍼티</h3>
<hr>
<p class="hidden">overflow에 hidden 값을 적용하면 박스를 넘어가는 내용이 잘려 보이지 않습니다.</p><br>
<p class="visible">overflow에 visible 값을 적용하면 콘텐트가 박스를 넘어가도 출력됩니다.</p><br>
<p class="scroll">overflow에 scroll 값을 적용하면 박스에 스크롤바를 붙여 출력합니다.</p><br>
<p class="auto">overflow에 auto 값을 적용하면 콘텐트가 박스를 넘어갔을 때 박스에 스크롤바를 붙여 출력합니다.</p><br>
</body>
</html>
transform: scale
box안의 이미지를 확대할 때 사용한다.
transition
시간의 흐름을 줘서 부드럽게 확대되도록 설정한다.
ease : 기본값, 느리게 시작해서 빠르게 전환한 다음 다시 천천히 종료
linear : 처음부터 끝까지 같은 속도로 전환
exam10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.imgDiv {
border: 1px solid red;
width: 150px;
height: 150px;
overflow: hidden;
margin: 100px;
}
img{
width: 100%;
height: 100%;
object-fit: cover; /* 상위 div에 맞게 들어가도록 설정 */
}
.imgDiv:hover img {
transform: scale(1.4);
}
.imgDiv img {
transition: all 0.35s linear;
/* 애니메이션이 0.35초 간격을 두고 서서히 움직인다. */
}
</style>
</head>
<body>
<div class="imgDiv">
<img src="../image/토끼.gif" alt="토끼">
</div>
</body>
</html>
Folder: cssDecorate
exam01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#menubar {
background: olive;
}
#menubar ul{
margin: 0;
padding: 0;
width: 570px;
}
#menubar ul li {
display: inline-block;
list-style: none;
padding: 10px 15px; /* top/bottom left/right */
}
#menubar ul li a {
color: white;
text-decoration: none;
}
#menubar ul li a:hover{
color: violet;
}
</style>
</head>
<body>
<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Espresso</a></li>
<li><a href="#">Cappuccino</a></li>
<li><a href="#">Cafe Latte</a></li>
<li><a href="#">F.A.Q</a></li>
</ul>
</div>
</body>
</html>
exam02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border-collapse: collapse; /* 이중 테두리 제거 */
}
th, td {
text-align: left;
padding: 5px;
width: 100px;
height: 15px;
}
thead, tfoot {
background: darkgray;
color: yellow;
}
tbody tr:nth-child(even){ /* tr의 자식들 중에 짝수만 1부터 시작 / even(짝수) /odd(홀수) */
background: aliceblue;
}
tbody tr:hover {
background: pink;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr/>
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td><td>80</td><td>70</td>
</tr>
<tr>
<td>라이언</td><td>95</td><td>99</td>
</tr>
<tr>
<td>프로도</td><td>85</td><td>90</td>
</tr>
<tr>
<td>어피치</td><td>50</td><td>40</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합</th><th>310</th><th>299</th>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
padding: 5px;
}
label {
display: inline-block;
width: 90px;
text-align: right;
padding: 10px;
}
input[type="text"] {
color: blue;
}
input[type="text"]:hover, input[type="email"]:hover, textarea:hover {
background: aliceblue;
}
input[type="text"]:focus, input[type="email"]:focus {
font-size: 105%;
}
</style>
</head>
<body>
<h3>CONTACT US</h3>
<hr/>
<form>
<div>
<label>Name</label>
<input type="text" placeholder="이름 입력">
</div>
<div>
<label>Email</label>
<input type="email" placeholder="xxx@gmail.com">
</div>
<div>
<label>Comment</label>
<textarea rows="5" cols="25" placeholder="메시지를 남겨주세요"></textarea>
</div>
<div>
<label></label>
<input type="submit" placeholder="submit">
</div>
</form>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| DAY 31 - 페이지 만들기1 (2024.08.14) DAY 32 - 페이지 만들기2 (2024.08.16) (0) | 2024.08.16 |
|---|---|
| DAY 31 - CSS - cssShadowCursor / map (2024.08.14) (1) | 2024.08.14 |
| DAY 29 - CSS - 박스 / 테두리 / Position / float / inline / inline-block (2024.08.12) (0) | 2024.08.12 |
| DAY 28 - CSS (2024.08.09) (0) | 2024.08.09 |
| DAY 28 - HTML 연습 (2024.08.09) (0) | 2024.08.09 |
