728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.js {
/*클래스 값은 . 을 붙여 id값과 구분한다*/
font-weight: bold;
color: crimson;
}
#first { /*id값은#을 붙여서 클래스 문법과 다르게 사용한다.*/
color: #141edc;
}
span { /*모든 span 태그에 대해서 파란색으로 바꾸고 싶다.*/
color: #dc142b;
}
/*아이디가 가장 우선순위가 높고 그다음은 클래스이다.*/
</style>
</head>
<body style="background-color: bisque">
<h2 style="color: powderblue;background-color: aliceblue">java script</h2>
<p style="color: chocolate">
<div>div 태그는 무색 무취의 태그이다. 단지 여 문단의 스타일을 적용 시키기 위해서 적용된 태그이다.</div>
<span style="font-weight: bold;color: chocolate">span 태그도 div태그와 성격은 같으나, 줄바뀜이 되지 않는다는 것이 다른점이다.</span>
<span id="first" class="js"> 클래스는 그룹핑의 의미이고 id는 식별한다는 의미이다. 그래서 클래스 속성이 먼저 부여되어 있지만, id와 같이 지정되어 있으면 id값을 반영한다.
클래스는 광범위의 의미이고, 예외적 디자인을 바꾸는것은 id를 사용하여 적용할 수 있다.
선택자를 통한 문법 = 헤드 부분에 설정되어 있는 .js가 span태그의 js와 맞물려 해당 부분을 볼드 처리하는 css 문법이다.</span>
<span>span 태그만 적용된 태그를 파란색으로 변경한다.</span>
<span>id 선택자가 가장 우선순위가 높으므로, 위에 적용된 태그도 span 태그이지만, 파란색으로 변경되지 않는다.</span>
</p>
</body>
</html>728x90
반응형
'HTML' 카테고리의 다른 글
| html 코드를 온라인에서 수정하는 사이트 (0) | 2024.04.12 |
|---|---|
| HTML 코드를 실시간으로 확인하는 사이트 (1) | 2022.03.31 |
| HTML - Javascript (0) | 2021.07.21 |
| HTML - CSS 선택자를 통한 CSS 적용하기(div, span) (0) | 2021.07.19 |
| HTML 태그에 CSS 스타일 적용하기 (0) | 2021.07.18 |