반응형
예제1) CSS 상속
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Inheritance Example</title>
<style>
body{
background-color: lightslategray;
color:whitesmoke;
font-size: 35px;
}
div{
background-color: orange;
margin: 50px;
padding: 100px;
width: 300px;
}
</style>
</head>
<body>
<h2>CSS Inheritance</h2>
<div>Example</div>
</body>
</html>
예제2) 셀렉터 조합
<!doctype html>
<html>
<head>
<title>css-8.html</title>
<style>
/* div 와 h1 모두 */
div,
h1 {
color: orangered;
}
/* div 하위에 위치하는 모든 h2 */
div h2 {
color: mediumblue;
}
/* div 바로 아래(자식) h1 */
div>h1 {
color: lightslategray;
}
/* h1 바로 다음에 오는 h1 */
div+h1 {
font-style: italic;
}
/* div 다음에 오는 모든 h2 */
div~h2 {
margin-left: 50px;
}
</style>
</head>
<body>
<h1>Welcome to MyTube</h1> <!--div, h1 적용-->
<div>
<h1>New</h1> <!--div > h1 적용-->
<h2>New movie1</h2> <!--div h2 적용-->
<h2>New movie2</h2> <!--div h2 적용-->
<span>
<h1>This Week</h1> <!--div, h1 적용, div > h1 미적용-->
</span>
</div>
<h1>Best</h1> <!--div + h1 적용-->
<h2>New movie3</h2> <!--div ~ h2 적용-->
<h2>New movie4</h2> <!--div ~ h2 적용-->
</body>
</html>
예제3) 가상 셀렉터
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtual Selector Example</title>
<style>
body {
counter-reset: section;
}
h1::before {
content: '###';
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
p {
display: none;
}
div:hover p {
display: block;
}
::selection {
color: red;
background: yellow;
}
.content::first-letter {
color: #ff0000;
font-size: xx-large;
}
.content::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>Virtual Selector Example</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<div>Show Message - Mouse over..
<p><b>Note:</b>This message will show when mouse over "Show Message.."</p>
</div>
<hr>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
반응형
'Programming > Web Programming (2021)' 카테고리의 다른 글
| [웹프로그래밍] 10. 부트스트랩 (2) | 2021.05.31 |
|---|---|
| [웹프로그래밍 프로젝트] 3. CSS 네비게이션 바 만들기 (0) | 2021.05.17 |
| [웹프로그래밍] 9. 복합 셀렉터 (0) | 2021.05.17 |
| [웹프로그래밍 실습] 8. 박스모델과 포지셔닝 (0) | 2021.05.10 |
| [웹프로그래밍] 8. 박스모델과 포지셔닝 (0) | 2021.05.10 |
