테스트 8. overflow 프로퍼티 활용
- hidden은 박스 넘어가면 잘림
- visible은 박스 넘어가도 출력
- scroll은 박스 넘어가면 스크롤 바 생김
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow 프로퍼티</title>
<style>
p {
width: 15em;
height: 3em;
border: 1ps solid lightgray;
}
.hidden { overflow: hidden}
.visible { overflow: visible}
.scroll { overflow: scroll;}
</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>
</body>
</html>
테스트 9. CSS3 스타일을 응용하여 리스트로 메뉴 만들기
- inline-block : 새 줄로 넘어가지 않도록 하는 속성.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리스트로 메뉴 만들기</title>
<style>
#menubar {
background: olive;
}
#menubar ul {
margin: 0;
padding: 0;
width: 567;
}
#menubar ul li {
display: inline-block;
list-style-type: none;
padding: 0px 15px;
}
#menubar ul li a {
color: white;
text-decoration: none;
}
#menubar ul li a:hover {
color: violet;
}
</style>
</head>
<body>
<nav>
<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>
</nav>
</body>
</html>
테스트 10. 마우스가 올라오면 행의 배경 색이 변하는 표 만들기
- nth-child : n번째 항목
- hover : 마우스 올릴 때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 응용</title>
<style>
table {
border-collapse: collapse;
}
td, th {
text-align: left;
padding: 5px;
height: 15px;
width: 100px;
}
thead, tfoot {
background: darkgray;
color: yellow;
}
tbody tr:nth-child(even) {
background: aliceblue;
}
tbody tr:hover {
background: pink;
}
</style>
</head>
<body>
<h3>1학기 성적</h3>
<hr>
<table>
<thead>
<tr>
<th>이름</th>
<th>HTML</th>
<th>CSS</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합</th>
<th>310</th>
<th>249</th>
</tr>
</tfoot>
<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>
</table>
</body>
</html>
테스트 11. CSS3 스타일로 폼 꾸미기
- focus : 해당 영역에 입력 창이 활성화 된 경우 작동한다.
- [type=text] : input 내부에 받는 값의 속성이 text인 경우를 말한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>폼 스타일 주기</title>
<style>
input[type=text] {
color: red;
}
input:hover, textarea:hover {
background: aliceblue;
}
input[type=text]:focus, input[type=email]:focus {
font-size: 120%
}
label {
display: block;
padding: 5px;
}
label span {
display: inline-block;
width: 90px;
text-align: right;
padding: 10px;
}
</style>
</head>
<body>
<h3>CONTACT US</h3>
<hr>
<form>
<label> <span>Name</span><input type="text"
placeholder="Elvis">
</label> <label> <span>Email</span><input type="email"
placeholder="elvis@graceland.com">
</label> <label> <span>Comment</span><input type="text"
placeholder="메시지를 남겨주세요">
</label> <label> <span></span><input type="submit"
value="submil">
</label>
</form>
</body>
</html>
'공부일지' 카테고리의 다른 글
| 230927 (HTML) (0) | 2023.09.27 |
|---|---|
| 230926 (Java) (0) | 2023.09.26 |
| 230925 (Java) (0) | 2023.09.25 |
| 230925 HTML (0) | 2023.09.25 |
| 230922 (Java) (0) | 2023.09.22 |
