▶ id와 class(아이디와 클래스)의 개념 및 차이점
● class
: 자주 사용되는 스타일에 적용하는 것이라고 생각하시면됩니다.
예를 들어서 빨강색 or 파란색 등 색상을 미리 지정하고 HTML에 적용시키는 방법입니다.
css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 이런식으로 적용합니다.
● id
: id는 class와 다른 형태입니다.
css에서의 정의 방법은 #id_name{속성명: 속성값; 속성명:속성값;} 이런식으로 적용합니다.
id 사용할때 중요한것은 class와 다르게 한페이지에서 한번만 사용이 가능합니다. id는 페이지 내에서 특정 위치나 태 그를 지정하는 것이기 때문에 오직 페이지내에서 한번만 사용할 수 있습니다.
● id와 Class의 차이점
: 아래 실습을 통해 아시겠지만, 우선순위가 다릅니다.
우선순위 id>class>태그순으로 적용되고, 자세한건 아래 실습을 통해 설명해드리겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.class1 { color: blue; background-color: yellow; }
.class2 { color: red; background-color: green; }
h3.class1 { color: navy; background-color: pink; }
</style>
</head>
<body>
<h1 class="class1">Class 1 입니다.</h1>
<p class="class1">Class 1 입니다.</p>
<h1 class="class2">Class 2 입니다.</h1>
<p class="class2">Class 2 입니다.</p>
<h3 class="class1">Element+Class Selector</h3>
<h3 class="class3">Class 3 입니다.</h3>
</body>
</html>
class를 실습해보겠습니다.
HTML에서 각 태그별로 class를 부여합니다.
class="class1"은 h1태그에 class1을 부여한것이며, css에서 class1은 노란뒷배경에 파란색글자색을 입혔기때문에
위와같은 실행결과값이 나옵니다.
css에서 h3.class1는 h3태그안에서 class를 class1을 부여한부분만 해당하는데요!
그렇기때문에 Element+Class Selector이라는것만 분홍뒷배경에 파란글자색이 적용되었습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#id1 { color: blue; background-color: yellow; }
#id2 { color: red; background-color: green; }
h2#id1 { color: navy; background-color: pink; }
</style>
</head>
<body>
<h1 id="id1">ID1 선택자</h1>
<p id="id1">ID1 선택자</p>
<h1 id="id2">ID2 선택자</h1>
<p id="id2">ID2 선택자</p>
<h2 id="id1">Element+ID Selector</h2>
</body>
</html>
이번에는 id를 실습해보겠습니다.
id는 class와 다르게 앞에 #을 붙이고, class처럼 이름을 부여한다고 생각하시면 됩니다.
h2태그에 id1이라는 id가 부여되어있는것만 분홍뒷배경에 파란색글자색을 적용시켰습니다.
나머지는 소스에서 보시는바와같이 HTML에서 정보를 입력하고 id를 부여해주고,
css에서 각각의 id에 스타일을 적용시켰습니다.
● id와 Class의 차이점 ( + 태그 )
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<style type="text/css">
div{background: red;}
.green{background: green;}
#blue{background: blue;}
</style>
</head>
<body>
<div class="green" id="blue">id>class>태그</div>
</body>
</html>
이번에는 class와 id의 차이점을 비교해보겠습니다.
우선, HTML에서 위와같이 내용(정보)를 작성해주고 class는 green으로, id는 blue로 부여해줬습니다.
그리고 css에서 무엇으로 색상이 적용되는지 확인해봤습니다.
div태그도 중복해서 테스트해봤는데, 실행결과를 보면 파란배경이 된걸 확인할수있습니다.
이처럼, id > class > 태그순으로 적용되는걸 확인할수있습니다.
'Dev. Front-End > CSS' 카테고리의 다른 글
| [CSS] 가상 클래스 선택자(link, visited, active, hover, text-decoration) (0) | 2019.08.15 |
|---|---|
| [CSS] CSS의 개념이해 및 사용법 ( 간단한 실습 ) (0) | 2019.08.13 |
