CSS day2
| 전체선택자 | 요소선택자 | id선택자 | class선택자 | 그룹선택자 |
선택자
선택자는 웹 문서에서 어느 부분에 스타일을 적용할지 알려주는 것으로 선택자를 사용하는데는 여러방법이 있다.
1. 전체 선택자
스타일을 문서의 모든 요소에 적용할 때 사용하는 선택자로 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다.
* { padding:0, margin: 0;} /*모든 요소에 padding:0, margin: 0를 적용*/
위와 같이 웹 문서 전체에 마진과 패딩을 0으로 지정하면 필요없는 여백을 지워 깔끔하게 웹문서를 정리할 수 있다.
2. 요소 선택자
특정 태그를 사용해 지정하면 해당 태그를 사용한 모든 요소에 스타일을 지정한다.
<style>
p{ color: deepskyblue; } /*p태그 요소의 글자 색을 deepskyblue로 지정*/
</style>
예제
<!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>전체선택자</title>
<style>
* {color: deeppink;} /*전체 선택자*/
h2 {color: deepskyblue; font-weight: bold;} /*요소 선택자*/
</style>
</head>
<body>
<h2>전체선택자</h2>
<p>전체선택자는 * 기호를 사용</p>
<ol>
<li>전체선택자는 한번에 많은 용소를 선택</li>
<li>너무 많은 요소가 있는 문서에서는 부하를 줄 수 있음</li>
</ol>
</body>
</html>
위 예제를 보면 전체 선택자로 지정한 부분은 deeppink이지만, 요소 선택자로 지정한 부분은 deepskyblue와 글자 크기 bold가 지정된 것을 볼 수 있다. 이것을 보아 전체 요소가 먼저 적용되고 하위 요소가 그 위를 덮어 씌는 것을 확인할 수 있다.
3. id 선택자
웹 문서 안의 특정 부분을 선택하여 스타일을 적용할 때 사용되며, #기호를 사용하여 id 속성을 가진 요소에 스타일을 적용한다.
h2{font-size: 20px;} /*요소 선택자 사용, h2요소의 글자크기는 20px로 지정*/
#hello {color: pink;} /*id 선택자 사용, id="hello"를 가진 요소의 글자색을 pink로 지정 */
h2#bye{color: yellow;}
/*요소, id 선택자 사용, h2요소와 id="bye"를 동시에 만족하는 요소의 글자색을 yellow로 지정*/
<h2 id="hello">안녕하세요</h2>
<p id="hi">안녕</p>
<h2 id="bye">잘지내</h2>
id 선택자는 문서에서 한 번만 적용이 가능하여 요소에 id 선택자를 중복해서 적용할 수 없다.
예제
<!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>id선택자</title>
<style>
#container{
background-color: gold;
padding: 20px; /* padding : 안쪽 여백*/
width: 400px;
height: 200px;
margin: 0 auto; /* margin : 바깥쪽 여백*/
}
#header{
background-color: deepskyblue;
width: 200px;
height: 100px;
margin: 20px auto;
}
</style>
</head>
<body>
<h2>id선택자</h2>
<div id="container">div 첫번째 영역</div>
<div id="header">div 두번째 영역</div>
</body>
</html>
4. class 선택자
id 선택자와 마찬가지로 웹 문서 안의 특정 부분을 선택하여 스타일을 적용할 때 사용되며, .기호를 사용하여 class 속성을 가진 요소에 스타일을 적용한다. id 선택자와 가장 큰 차이점은 요소들에 class 선택자를 중복하여 적용할 수 있다.
h2{font-size:20px; } /*요소 선택자 사용, h2요소의 글자크기는 20px로 지정*/
.hello{color:pink; }
/*clsass 선택자 사용, class="hello"를 가진 요소의 글자색을 pink로 지정 */
h2.hello{font-weight: bold; }
/*요소, class 선택자 사용, h2요소와 class="hello"를 동시에 만족하는 요소의 글자 크기를 bold로 지정*/
<h2 class="hello>안녕하세요</h2>
<p class="hello>안녕</p>
<h2 class="bye">잘지내</h2>
예제
<!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>클래스 선택자</title>
<style>
.redText {color: red;}
.blueText {color: blue;}
.skyBox{border: 3px solid deepskyblue}
</style>
</head>
<body>
<h2>클래스 선택자</h2>
<p><span class="redText">클래스 선택자</span>는 <span class="blueText skyBox">특정 집간의 여러 요소를 한번에 선택</span>할 때 사용합니다.</p>
<p><span class="redText">특정 집단의 클래스</span>라고 하며, <span class="blueText">(도트)기호를 사용</span>하여 같은 클래스 이름을 가지는 요소들을 모두 선택합니다.</p>
</body>
</html>
5. 그룹 선택자
여러 선택자에서 같은 스타을 규칙을 사용하고 싶을 경우 쉼표( , )로 구분해 여러 선택자를 나열한 후 스타을 규칙을 한번에 정의 할 수 있다.
h2, p{text-align: center;} /*h2, p태그의 요소들에 스타일을 한번에 적용*/
예제
<!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>그룹 선택자</title>
<style>
h2, p{text-align: center;}
h2{color: deeppink; font-size: 50px;}
</style>
</head>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 적용</p>
</body>
</html>
