선택자 종류
종류는 너무너무 많으나 개인적으로 자주 사용하는 것만 포스팅하겠습니다.
1. 전체 선택자
*{ margin : 0; }
html 페이지 내부의 모든 태그에 영향을 주며 *만 쓰고 style을 나열한다
2. 태그
div { background-color : red; }
p { background-color : red; }
태그명이 div, p인 특정 태그에 영향을 주며 태그 이름만 쓰고 style을 나열한다
3. class
.myclass{ font-size : 17pt; }
클래스 이름이 myclass인 태그에 영향을 주며 class 이름앞에 마침표를 쓰고 style을 나열한다
4. id
#myid{ font-color : ret; }
아이디 이름이 myid인 태그에 영향을 주며 id 이름앞에 #을 쓰고 style을 나열한다
클래스와 아이디 비교
기본적으로 class는 중복으로 사용이 가능하고, 아이디는 중복이 불가능합니다.
그래서 구조를 나눌 땐 id를 사용하여 유일값으로 사용하고 한 분류안에서 한가지 특성(body안에서 파란 글씨 부분)을 나타낼 때 class를 사용합니다.
예)
#header{
border: 1px solid gray;
width: 300px;
height: 100px;
}
#center{
border: 1px solid gray;
width: 300px;
height: 300px;
}
#footer{
border: 1px solid gray;
width: 300px;
height: 100px;
}
.red{
width:50px;
height:50px;
color: red;
}
.blue{
width:50px;
height:50px;
color: blue;
}
<body>
<div id="header">
<h1>머리</h1>
</div>
<div id="center"><br>
<p class="red">빨강</p>
<p class="blue">파랑</p>
<p class="red">빨강</p>
<p class="blue">파랑</p>
</div>
<div id="footer">
<h1>다리</h1>
</div>
</body>
5. E[attr="val"]
input[type="text"] { padding-left: 10px; }
input 태그 중 type이 text인 요소만 영향을 줍니다.
p[id="a"]{ color: red; }
p 태그 중 id가 a인 요소만 영향을 줍니다.
이와 같은 방법으로 응용이 가능하고 이러한 속성 선택자는 css뿐만 아니라 jquery에서도 많은 사용을 하게 되는 선택자입니다.
blog 승제노트
↓ 공감, 댓글 부탁드려요 ↓
'Develop Note' 카테고리의 다른 글
| Java jdk 설치 방법 (0) | 2017.05.30 |
|---|---|
| 이클립스(Eclipse) 설치 방법 (5) | 2017.05.29 |
| CSS 적용하는 방법 3가지 (5) | 2017.05.26 |
| INPUT 태그 스타일(속성) (3) | 2017.05.24 |
| 윈도우10 Java 환경변수 설정 (9) | 2017.05.24 |
댓글