티스토리 뷰

Web/CSS

[Web/CSS] CSS - 캐스캐이딩 스타일 시트 알아보기

poopooreum 2024. 4. 21. 21:23
반응형

✏️ 캐스캐이딩의 의미

스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 CSS는 우선순위가 있는 스타일
CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정함

● 스타일 우선 순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선 순위가 결정되고, 그 우선 순위에 따라 스타일 적용
● 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

✏️ 스타일 우선 순위

우선 순위는 스타일 규칙의 중요도와 적용 범위, 소스 코드의 작성 순서에 따라서 결정됨

● 얼마나 중요한가?
스타일에는 사용자가 지정한 스타일(user), 제작자(author)의 스타일, 웹 브라우저(browser) 스타일이 있고
중요도는 사용자 > 제작자 > 브라우저

● 적용 범위는 어디까지인가?
중요도가 같은 스타일이라면 스타일 적용 범위에 따라서 우선순위를 정할 수 있음
순서는 !important > 인라인 스타일 > id 스타일 > 클래스 스타일> 타입 스타일
※부가 설명
!important : 어떤 스타일보다 우선 적용하는 스타일

● 소스 코드의 작성 순서는 어떠한가?
적용 범위가 같다면 그다음으로 고려하는 것은 소스 코드의 작성 순서
작성 순서는 나중에 작성한 코드가 우선시됨
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      color:black;
    }
    h1 {
      color: brown !important;
    }
    p {
      color:blue;
    }
  </style>
</head>
<body>
  <h1 style="color:green">레드향</h1>
  <p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>    
</body>
</html>

h1요소에는 !important가 있기 때문에 h1요소의 색깔은 항상 brown색깔
그 다음 p요소는 두 가지 스타일이 있는데 blue로 지정을 제일 마지막으로 했기 때문에
p요소의 글자들은 모두 파란색으로 출력
다만 "껍질에 붉~레드향이라 불린다"부분은 인라인 스타일을 적용하였으므로 red색깔로 출력

✏️ 스타일 상속

웹 문서에서 사용하는 여러 태그는 서로 포함 관계가 있는데, 이때 포함하는 태그를 부모 요소, 포함된 태그를 자식 요소
스타일 시트에서는 자식 요소의 스타일을 별도로 지정하지 않으면 부모 요소의 스타일이 자식으로 전달
반응형
저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 글꼴 관련 스타일  (0) 2024.04.22
[Web/CSS] CSS - 복습1  (0) 2024.04.22
[Web/CSS] CSS - 기본 선택자  (0) 2024.04.21
[Web/CSS] CSS - 스타일과 스타일 시트  (2) 2024.04.21
[Web/CSS] CSS 소개 및 기본  (0) 2024.04.21
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
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 31
글 보관함