“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
id와 class의 차이점
1. 중복 사용 여부
클래스는 여러 요소가 한 클래스를 사용할 수 있지만
아이디는 한 아이디가 한 요소만을 사용할수 있습니다.
See the Pen Untitled by jo0132 (@jo0132) on CodePen.
2. 한 요소(태그)가 갖는 갯수의 차이
클래스는 한 요소에 여러개의 클래스를 가질수 있으며
아이디는 한 요소에 한개의 아이디만을 가질 수 있습니다.
See the Pen Untitled by jo0132 (@jo0132) on CodePen.
위에 보시면 id가 중복으로 사용이 가능한걸로 나옵니다 .
하지만 id는 고유한 id값이 있어야 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
그러므로 중복되지 않도록 주의해야합니다.
3. 우선순위
id와 class 중 겹치는 속성이 있다면 id값이 먼저 인식, 적용됩니다.
4. 이름을 불러오는 방식(선택자)
클래스와 아이디는 각각 불러올 때는 선택자를 클래스는 클래스명 앞에 마침표(.)을 두고
아이디는 아이디명 앞에 샵(#)을 두어 불러둡니다.
<style>
.box1 {
border: 5px dashed blueviolet;
} /* 클래스입니다 */
#i__box1 {
border: 5px dashed rgb(50, 50, 255);
} /* 아이디입니다 */
</style>
선택자 종류
선택자는 css에서 작업할 때 적용하고자 하는 태그를 말하는 것입니다.
body{
background-color: #FFF3E0;
}
위에서 body가 선택자가 됩니다.
이런 선택자에는 종류가 다양합니다.
밑에 예제를 참고하여 설명드립니다.
<!DOCTYPE html>
<html lang="ko">
<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표현방법</title>
<style>
ul>li {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
</style>
</head>
<body>
<ul>
<li>
<div>
<h1>1111</h1>
<p>내용입니다.</p>
</div>
</li>
<br>
<li>
<div>
<h1>2222</h1>
<p>내용입니다.</p>
</div>
</li>
<br>
<li>
<div>
<h1>3333</h1>
<p>내용입니다.</p>
</div>
</li>
</ul>
</body>
</html>- 태그선택자 : 아무것도 없이 이름만 있는 선택자입니다.
div {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
- 아이디 선택자 : #으로 시작되는 선택자입니다.
#i__box1 {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
- 클래스 선택자 : .으로 시작되는 선택자입니다.
.box1 {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
- 부모 자식 선택자 : ul 밑에 있는 li태그와 함께 부모 자식 으로 부룹니다.
ul>li {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
- 조상 자손 선택자 : ul 와 li, li와 div가 각자 부모자식 관계라면 ul과 div는 서로 조상과자손의 관계입니다.
ul div {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
- 친구 선택자 : 동등한 관계에 있는 선택자들의 관계입니다.
h1, p {
border: 5px dashed blueviolet;
background-color: rgb(220, 197, 241);
border-radius: 10px;
}
- 가상 클래스 선택자 : 링크가 걸린 문자에 스타일을 부여하는 것입니다.
a:hover {
color: red;
}<body>
<ul>
<li>
<a href="#">1111</a>
</li>
<br>
<li>
<a href="#">2222</a>
</li>
<br>
<li>
<a href="#">3333</a>
</li>
</ul>
</body>
- 가상 클래스 종류
| 속성값 | 설명 |
| a:link | 링크가 걸린 문자에 속성을 부여하는 선택자 |
| a:visited | 해당 페이지에 방문했을 경우의 속성을 부여하는 선택자 |
| a:hover | 마우스가 닿았을 경우의 속성을 부여하는 선택자 |
| a:active | 활성화 되었을 경우의 속성을 부여하는 선택자 |
| a:focus | 포커스가 생길 경우의 속성을 부여하는 선택자 |
- 전체 선택자
* {
}