Day4!
오늘 할 것은~~
id와 class에 대해서 구글링해보고 실습하기
id
: 자주 사용하는 스타일에 적용하는 것
: 형태 ) #id_name{속성명: 속성값; 속성명: 속성값;}
class
: 자주 사용하는 스타일에 적용하는 것
: 형태 ) .class_name{속성명: 속성값; 속성명: 속성값;}
id와 class의 차이점
: 우선순위가 다르다. ( id가 더 우선순위에 있다)
: 즉, class와 id를 동시에 적용하면 id만 적용된다.
결과
<!DOCTYPE html>
<html lang="en">
<head>
<title>나의 웹사이트</title>
<style>
.class1 {color:white; background-color: black;}
.class2 {color:black; background-color:aquamarine;}
#id1 {color: blueviolet; background-color: yellow;}
</style>
</head>
<body>
<h1 class="class1">오늘 배운 내용</h1>
<div>
<h2 class="class2">1. id</h2>
<p>id의 형태는 #id_name{속성명: 속성값; 속성명: 속성값;}</p>
</div>
<div>
<h2 id="id1">2. class</h2>
<p> class의 형태는 .class_name{속성명: 속성값; 속성명: 속성값;}</p>
</div>
</body>
</html>
'WEB' 카테고리의 다른 글
[WEB] CSS 기본실습(2) (0) | 2022.02.26 |
---|---|
[WEB] CSS 기본실습 (0) | 2022.02.25 |
[WEB] HTML 기본 실습(2) (0) | 2022.02.23 |
[WEB] HTML 기본 실습 (0) | 2022.02.22 |
[WEB] HTML 개념 알아보기 (0) | 2022.02.21 |