<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3개의 div 활용</title>
<style>
div {
display : inline-block;
width : 200px;
border : 1px solid green;
}
</style>
</head>
<body>
<h3>3개의 div 활용</h3>
<hr>
<div>캔버스에 이미지를 그리기 위해서는 이미지를 담을 객체가 먼저 필요하다.</div>
<div>Image 객체의 src 프로퍼티를 이용하여 비트맵을 로드한다.</div>
<div>이미지 로딩이 끝나면 그 때 비로소 이미지의 너비와 높이가 제대로 알려진다.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3개의 div 활용</title>
<style>
div {
display : inline;
border : 1px solid green;
}
</style>
</head>
<body>
<h3>3개의 div 활용</h3>
<hr>
<div>캔버스에 이미지를 그리기 위해서는 이미지를 담을 객체가 먼저 필요하다.</div>
<div>Image 객체의 src 프로퍼티를 이용하여 비트맵을 로드한다.</div>
<div>이미지 로딩이 끝나면 그 때 비로소 이미지의 너비와 높이가 제대로 알려진다.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>소연재</title>
<style>
#fixed {
position : fixed;
bottom: 0px;
left : 0px;
width : 100%;
background: purple;
color : blue;
}
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<div>저는 체조 선수 소연재입니다. 음악을 들으면서 책읽기를 좋아합니다. 김치 찌개와 막국수 무척 좋아합니다.</div>
<div id="fixed">소연재 공연은 24일입니다.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오디오 재생 리스트</title>
<style>
td:first-child {
padding-right : 3px;
border : 1px solid green;
padding-left : 3px;
}
th {
text-align : left;
width : 200px;
border-bottom: 1px solid gray;
}
button:hover {
color : red; /* 버튼에 마우스 오버시 빨간색으로 색 변경 */
}
</style>
</head>
<body>
<h3>오디오 재생 리스트</h3>
<hr>
<table>
<tr>
<td>1</td>
<th>애국가</th>
<td><button>재생</button></td>
<td><button>정지</button></td>
</tr>
<tr>
<td>2</td>
<th>Moon Glow</th>
<td><button>재생</button></td>
<td><button>정지</button></td>
</tr>
<tr>
<td>3</td>
<th>Embraceable You</th>
<td><button>재생</button></td>
<td><button>정지</button></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가보고 싶은 나라</title>
<style>
div {
background-color: aliceblue;
}
div ul {
list-style-type: square;
padding-right: 10px;
}
div ul li:hover {
background-color: yellowgreen; /* li에 마우스 오버시 색 변경 */
}
</style>
</head>
<body>
<h3>가보고 싶은 나라</h3>
<hr>
<div>
<ul>
<li>프랑스</li>
<li>독일</li>
<li>칠레</li>
<li>남아프리카공화국</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가보고 싶은 나라</title>
<style>
div {
background-color: aliceblue;
}
div ul {
background-image : url("../media/worldmap.png"); /* 배경이미지를 넣을 수 있다 */
background-repeat : no-repeat;
background-size : 100% 100%;
list-style-type: square;
padding-right: 10px;
}
div ul li:hover {
background-color: yellowgreen;
}
</style>
</head>
<body>
<h3>가보고 싶은 나라</h3>
<hr>
<div>
<ul>
<li>프랑스</li>
<li>독일</li>
<li>칠레</li>
<li>남아프리카공화국</li>
</ul>
</div>
</body>
</html>
'IT > Css' 카테고리의 다른 글
| css3 - 레이아웃 배치, 자바스크립트 submit 제한걸기, radio, checkbox, select, textarea (0) | 2018.08.29 |
|---|---|
| css3 - 레이아웃 배치 header, nav, section, footer, float (0) | 2018.08.28 |
| css3 - float 배치, 변환(transform rotate), 전환(transition), 리스트로 수직 메뉴 만들기, list float 응용, 애니메이션 응용 keyframes (0) | 2018.08.22 |
| css3 - :hover 활용, 이미지 테두리 만들기, text-shadow와 box-shadow (0) | 2018.08.21 |
| css3로 웹 페이지 꾸미기 (0) | 2018.08.17 |