웹페이지를 꾸며주기 위해서는 css의 적용이 필요한데 누가 대상인지 지정하는 것이 필요하다.
1. 웹 페이지에 태그가 하나만 존재할 경우
- 해당 태그의 이름을 그대로 가져다 쓰면 된다. 아래는 body가 예시이다.
<html>
<head>
<title>Document</title>
<style>
body {
background-color: black;
}
</style>
</head>
<body>
<div>
<div>
<h1>mypage</h1>
</div>
<p>text: <input type="text" /></p>
<button>button</button>
</div>
</body>
</html>2. 웹 페이지에 같은 태그가 여러 개일 경우
- class로 구분하여 적용한다. style 태그에서 .class명으로 설정한다.
<html>
<head>
<title>Document</title>
<style>
.wrap {
background-color: black;
}
.mytitle {
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>mypage</h1>
</div>
<p>text: <input type="text" /></p>
<button>button</button>
</div>
</body>
</html>3. 특정 요소의 하위 요소를 선택할 경우
- '>'로 하위 요소를 선택
- mytitle 클래스 하위에 있는 button에 css 적용
<html>
<head>
<title>Document</title>
<style>
.mytitle > button {
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<button>button</button>
</div>
</div>
</body>
</html>4. 모든 요소에 적용하는 경우
- 해당 css 내용을 *로 설정한다.
<html>
<head>
<title>Document</title>
<style>
* {
font-family: "Noto Sans KR", sans-serif;
}
</style>
</head>
<body>
<div>
<div>
<h1>mypage</h1>
</div>
<p>text: <input type="text" /></p>
<button>button</button>
</div>
</body>
</html>