티스토리 뷰

JAVA

캐스케이딩

코린이도이 2023. 10. 7. 14:36
  • 선택자에 의한 캐스케이딩: style > id > class > type 순으로 우선순위가 높음
  • 나중에 작성한 코드가 우선순위를 갖는다.

지시사항

  1. <body> 태그 안에 다음을 입력합니다.
<p>순서 캐스케이딩</p>
<header>
	<h3>디테일 캐스케이딩</h3>
</header>
<h4 style="color:green;" id="color" class="color">선택자 캐스케이딩</h4>

 

2. <style> 태그 안에서 여러 선택자들의 속성을 변경해보며, 캐스케이딩에 대해 알아봅니다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 우선 순위</title>
  <style>
      p {color:red;}
      p {color:blue;}

      header h3 {background-color: green;}
      h3 {background-color:red;}

      #color {color:blue;}
      .color {color:yellow;}
      h4 {color:red;}
  </style>
</head>
<body>
    <p>순서 캐스케이딩</p>
    <header>
        <h3>디테일 캐스케이딩</h3>
    </header>
    <h4 style="color:green;" id="color" class="color">선택자 캐스케이딩</h4>
</body>
</html>
저작자표시

'JAVA' 카테고리의 다른 글

웹사이트 레이아웃  (0) 2023.10.08
CSS 주요 속성  (1) 2023.10.07
CSS 속성의 상속  (0) 2023.10.07
CSS 선택자  (0) 2023.10.07
css 연동 방법  (1) 2023.10.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
글 보관함