sanginjeongzzz

Cascading 이란?

CSS 규칙이 여러 개이고, 하나의 요소에 적용될 때 어떤 규칙이 우선 적용되는지 결정하는 방식, 프로세스.

우선수위가 높은 규칙일수록 우선적으로 적용한다.

우선순위 규칙

- source order (작성 순서)

- specificity (명시도)

- importance (중요도)

+ 스타일의 출처 (origin)

- user agent style : 브라우저 자체가 정의한 기본적인 스타일

- author style : 페이지의 저자(개발자)가 정의한 스타일 (우리가 작성하는 css)

- user style : 사용자가 정의한 스타일 (페이지에서 사용자가 정하는 스타일, ex: 잘 안보여서 글꼴 설정 , 다크모드)

origin의 우선순위 : 사용자 정의 스타일 > 개발자 스타일 > 브라우저 기본 스타일

source order (작성 순서)

p {
  color: blue;
}

p {
  color: red;
}

동일한 우선순위 규칙이라면 나중에 작성된 것이 우선적용된다. 여기서는 red로 적용된다.

specifity (명시도)

규칙에 따라 점수를 계산하여 우선순위를 결정한다.  점수 규칙과 예시 코드 살펴보자

규칙

- 인라인 스타일 : 1000점

<p style="color:red">

- ID 선택자 : 100점

#id

- 클래스, 속성, 가상클래스 : 10점

.class, [type="text"], :hover

- 요소, 가상요소 : 1점

div, h1, ::before

아래 p태그는 명시도 규칙에의해 red가 적용되는 예시 코드이다.

<p id="title" class="text"></p>

p { color: blue; }            /* 1점 */
.text { color: green; }       /* 10점 */
#title { color: red; }        /* 100점 → 적용됨 */

importance (중요도)

직접 중요도를 붙이는 방법으로 가장 강력하게 적용된다.

p {
  color: blue !important;
}

p {
  color: red; /* 무시됨 */
}

가끔 z-index가 9999를 줘도 안 통할 때가 있는데, 이는 z-index의 쌓임 맥락 특성 때문이다.

z-index의 비교는 같은 쌓임 맥락 안에서만 비교된다.

쌓임 맥락이 생성되는 조건은 대표적으로 position이 설정되어 있을 때이고, 더 많은 조건들이 있는데 아래 사이트에서 참고할 수 있다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Stacking_context

1. 형제 태그들 끼리의 비교

  <div class="box red">z-index 10</div>
  <div class="box blue">
    z-index 1
  </div>
</body>

red 박스와 blue 박스는 형제들끼리의 같은 쌓임 맥락을 형성한다. 따라서 z-index값을 비교해서 누가 위에 렌더링 되는지 정할 수 있다.

2. 여기서 blue box의 자손이 생기면 ?

  <div class="box red">z-index 10</div>
  <div class="box blue">
    z-index 1
    <div class="box green">z-index 100</div>
  </div>

현재 z-index의 우선순위는 green이 가장 크고, red가 2번째, blue가 가장 작다.

따라서 렌더링을 해보면 green이 가장 위에 있고, red가 그다음, blue가 가장 밑에 있어야 한다.

하지만 red와 blue는 같은 쌓임 맥락 안에서 비교하고, green은 blue와 같은 쌓임 맥락 이기 때문에 green과 red는 비교할 수 없다.

즉 여기서 green의 z-index가 9999가 되어도 red보다 위에 렌더링 될 수 없다.

white-space 속성을 nowrap으로 사용하게 되면 줄바꿈을 막는다.

white-space : nowrap;

아래 일부 예시 코드를 보자.

.dropdown > li {
  padding : 10px 0px;
  /* white-space: nowrap; */
}

여기서 white-space: nowrap을 준다면

.dropdown > li {
  padding : 10px 0px;
  white-space: nowrap;
}

import React from "react";
import "./App.css";

export default function App() {
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return (
    <div className="container">
      <button onClick={handleClick}>Clickable Button</button>
      <button style={{ pointerEvents: "none" }}>Disabled Button</button>
    </div>
  );
}

마치 removeEventListner 와 비슷하다.

사용 예시 ) 만약 어떤 버튼을 클릭했을 때 일어난 UI가 버튼을 막아버려서 다시 사용할 수 없게 조금 가린다면 pointerEvents : none 을 사용해서 UI와 버튼이 겹친 부분을 클릭해도 버튼클릭을 할 수 있다.

client : 뷰포트 내에서 의 x,y 좌표

page : 전체 페이지 에서의 x,y 좌표

예시코드

import React from "react";
import './App.css'
export default function App() {
  const onClickBtn = (e) => {
    console.log('client:',e.clientX, e.clientY);
    console.log('page:',e.pageX, e.pageY);
  }

  return (
    <>
      <button 
        style={{height:'300px'}}
        onClick={(e)=>{onClickBtn(e)}}>클릭한 위치</button>
      <div className="page">dd</div>
    </>
  );
}

오른쪽 아래 모서리를 클릭했을 때 좌표 차이를 보자.

스크롤이 맨위에 있을 때

스크롤이 아래로 내려 갔을 때

스크롤이 위에있던 아래에있던 정확한 좌표를 원한다면 page를 쓰는게 맞다.