[CSS] 잘 알려지진 않았지만 유용한 CSS 속성들

학습자료 : https://youtu.be/o1HzOJfgugE?si=5fWNFz749byroCMg

잘 알려지지 않았지만 유용한 CSS 팁들

1. CSS Isolation

• 설명: isolation: isolate; 속성은 요소가 새로운 스태킹 컨텍스트를 생성하도록 해줌.
  • 스태킹 컨텍스트는 요소의 z-index가 다른 요소와 어떻게 상호작용하는지를 결정하는 계층 구조
  • isolation을 사용하면, 부모 요소의 스태킹 컨텍스트가 자식 요소에 영향을 미치지 않도록 격리할 수 있음
• 예시:

  <div class="parent">
    <div class="child">Child 1 (z-index: 10)</div>
    <div class="child" style="isolation: isolate;">Child 2 (z-index: 5)</div>
  </div>
  
  .parent {
    position: relative;
    z-index: 1;
    background-color: #f0f0f0;
    padding: 20px;
  }
  .child {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #808080;
  }
  .child:nth-child(1) {
    top: 0;
    left: 0;
  }
  .child:nth-child(2) {
    top: 50px;
    left: 50px;
  }
  

  • 결과: Child 1은 부모의 스태킹 컨텍스트 내에 있으므로 z-index가 10으로 적용되어 부모 배경 위에 표시됩니다. Child 2는 isolation: isolate;가 적용되어 새로운 스태킹 컨텍스트를 생성하므로, z-index가 5임에도 불구하고 부모 배경 위에 표시됩니다. 즉, Child 2의 z-index는 부모의 z-index와는 독립적으로 작용합니다.

2. CSS Inset

• 설명: inset 속성은 top, right, bottom, left 속성을 한 번에 설정하는 속기(shorthand) 속성
• 예시:

  .box {
    position: absolute;
    inset: 10px 20px; /* top, bottom: 10px, left, right: 20px */
    /* inset: 10px 20px 30px 40px;  top: 10px, right: 20px, bottom: 30px, left: 40px */
    background-color: #808080;
    width: 100px;
    height: 100px;
  }
  
  .box2 {
    position: absolute;
    inset: auto 20px 30px; /* top: auto, right: 20px, bottom: 30px, left: auto */
    background-color: #808080;
    width: 100px;
    height: 100px;
  }
  

  • 결과: .box는 상단과 좌측에서 10px, 하단과 우측에서 20px 떨어진 위치에 배치됩니다. .box2는 top과 left는 auto, right는 20px, bottom은 30px 떨어진 위치에 배치됩니다.

3. CSS 카운터

• 설명: CSS 카운터는 문서 내의 요소에 번호를 매기는 데 사용. counter-reset 속성으로 카운터를 초기화하고, counter-increment 속성으로 값을 증가시키며, content 속성과 counter() 함수를 사용하여 카운터의 값을 표시
• 예시:

  <h1>Sections</h1>
  <section>
    <h2>Section 1</h2>
    <p>Content for section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>Content for section 2.</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <p>Content for section 3.</p>
  </section>
  
  ```css
  body {
    counter-reset: section; /* body 요소에 'section' 카운터 초기화 */
  }
  
  section {
    counter-increment: section; /* 각 section 요소마다 'section' 카운터 증가 */
  }
  
  h2::before {
    content: "Section " counter(section) ": "; /* h2 요소 앞에 카운터 값 표시 */
  }
  

  • 결과: 각 section의 h2 제목 앞에 "Section 1: ", "Section 2: ", "Section 3: "과 같이 섹션 번호가 자동으로 매겨집니다.

4. CSS 필터

• 설명: CSS 필터는 이미지, 배경, 테두리 등에 다양한 시각적 효과를 적용하는 데 사용
• 예시:

  <img src="image.jpg" alt="Original Image" class="original">
  <img src="image.jpg" alt="Grayscale Image" class="grayscale">
  <div class="shadow-box">Text with shadow</div>
  <div class="drop-shadow-box">Text with drop shadow</div>
  
  ```css
  .original {
    /* Original image */
  }
  .grayscale {
    filter: grayscale(100%); /* 이미지를 흑백으로 변환 */
  }
  .shadow-box {
    background-color: #808080;
    box-shadow: 5px 5px 5px #606060; /* 일반적인 박스 그림자 */
    padding: 10px;
  }
  .drop-shadow-box {
    background-color: #808080;
    filter: drop-shadow(5px 5px 5px #606060); /* 요소의 윤곽에 따라 그림자 생성 */
    padding: 10px;
  }
  

  • 결과: grayscale 클래스가 적용된 이미지는 흑백으로 표시됩니다. drop-shadow 필터는 요소의 모양에 따라 그림자를 생성하므로, 텍스트의 불투명한 부분에만 그림자가 드리워집니다. 반면, box-shadow는 요소의 전체 박스 영역에 그림자를 생성합니다.

5. CSS Contain

• 설명: contain 속성은 브라우저가 요소의 렌더링을 최적화할 수 있도록 해당 요소의 범위를 제한하는 데 사용.
  • 즉, 해당 요소 내부의 변경 사항이 페이지의 다른 부분에 영향을 미치지 않도록 함
• 예시:

  <div class="container">
    <div class="item" style="contain: content;">
      <p>This content is contained.</p>
      <p>Changes here won't affect the rest of the page.</p>
    </div>
    <div class="item">
      <p>This content is not contained.</p>
    </div>
  </div>
  ```css
  .container {
    /* Styles for the container */
  }
  
  .item {
    /* 공통 스타일 */
  }
  

  • 결과: contain: content;가 적용된 .item 내부의 변경 사항(예: 크기, 스타일 변경)은 페이지의 다른 요소에 영향을 미치지 않음. 이는 브라우저가 렌더링을 최적화하고 성능을 향상시키는 데 도움이 됨.