반응 선택자
| 형태 | 설명 |
|---|---|
| :active | 사용자가 마우스로 클릭한 태그 선택 |
| :hover | 사용자가 마우스 커서를 올린 태그 선택 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Selector Basic</title>
<style>
h1:hover { color : red;}
h1:active {color : blue;}
</style>
</head>
<body>
<h1>반응 선택자</h1>
</body>
overflow 속성
| 키워드 | 설명 |
|---|---|
| :hidden | 영역을 벗어나는 부분 감춤 |
| :scroll | 영역을 벗어나는 부분을 스크롤로 만듦 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow 프로퍼티</title>
<style>
p {
width: 15em;
height: 3em;
border: 1px solid dodgerblue;
}
.hidden {
overflow: hidden;
}
.visible {
overflow: visible;
}
.scroll {
overflow: scroll;
}
</style>
</head>
<body>
<h3>overflow 프로퍼티</h3>
<hr>
<p class="hidden">무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.</p>
<br>
<p class="visible">무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.</p>
<br>
<p class="scroll">무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.무궁화 꽃이 피었습니다.</p>
</body>
</html>
float 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float 배치</title>
<style>
#float {
float: right;
border: 1px dotted black;
width: 8em;
padding: 0.25em;
margin: 1em;
}
</style>
</head>
<body>
<h3>학기말 공지</h3>
<hr>
<div>
<p id="float">24일은 피아니스트 조성진의 크리스마스 특별 연주가 있습니다.</p>
<p>이제 곧 겨울 방학이 시작됩니다. 학기 중 못다한 Java, C++ 프로그래밍 열심히 하기 바랍니다. 인턴을
준비하는 학생들은 프로젝트 개발에 더욱 힘쓰세요. 그럼 다음 학기에 만나요.</p>
</div>
</body>
</html>
이것저것 다 적는 기록장📚