CSS 속성들의 마지막 정리

CSS의 속성들의 정보 정리 마지막.

CSS의 속성 목록

• transform
  
• position
  
• display
  
• transition
  
• z-index
  
• height: inherit
  

CSS z-index

CSS z-index는 웹 페이지의 수직 배치를 제어 하는 데 매우 중요한 역할을 합니다. 포지셔닝된 요소에만 적용되며, 스택킹 컨텍스트 내에서 작동 합니다. z-index 값을 적절히 사용하면 다양한 UI 요소를 효과적으로 구현할 수 있습니다. 하지만 스택킹 컨텍스트와 z-index 값 관리에 주의를 기울여야 합니다

z-index의 기본 원리

포지셔닝된 요소에만 적용

• z-index는 position 속성이 static이 아닌 요소에만 적용 됩니다. 즉, relative, absolute, fixed, sticky 값을 가진 요소에만 z-index를 사용할 수 있습니다.
  

스택킹 컨텍스트(Stacking Context)

• z-index는 스택킹 컨텍스트 내에서만 적용됩니다. 스택킹 컨텍스트는 z-index 값에 따라 요소를 수직으로 쌓는 독립적인 레이어 입니다. 스택킹 컨텍스트는 부모-자식 관계에 따라 계층적으로 구성됩니다.
  

z-index 값

• z-index는 정수 값을 가질 수 있습니다. 양수는 위쪽에, 음수는 아래쪽에 배치 됩니다. 값이 같은 경우 HTML 문서 순서에 따라 쌓입니다. auto 값은 부모 요소의 z-index를 상속받습니다.
  

z-index 활용 사례

팝업 모달

• 팝업 모달 창을 다른 콘텐츠 위에 표시하기 위해 z-index를 사용합니다.
  

드롭다운 메뉴

• 드롭다운 메뉴가 다른 콘텐츠 위에 나타나도록 z-index를 조정합니다.
  

이미지 갤러리

• 이미지 갤러리에서 선택된 이미지를 다른 이미지 위에 표시하기 위해 z-index를 사용합니다.
  

툴팁

• 툴팁이 다른 콘텐츠 위에 나타나도록 z-index를 조정합니다.
  

z-index 관련 주의사항

스택킹 컨텍스트 이해

• 스택킹 컨텍스트를 이해하고 관리하는 것이 중요합니다. 부모-자식 관계에 따라 z-index가 적용되기 때문입니다.
  

z-index 값 관리

• z-index 값이 너무 크거나 작으면 예상치 못한 결과가 발생할 수 있습니다. 적절한 값을 사용하는 것이 중요합니다.
  

성능 고려

• z-index를 과도하게 사용하면 성능 문제가 발생할 수 있습니다. 필요한 경우에만 z-index를 사용하는 것이 좋습니다.
  

CSS height: inherit

• CSS height: inherit 은 부모 요소의 높이 값을 자식 요소에 상속 할 수 있게 해줍니다. 이를 통해 일관된 레이아웃을 유지하고, 반응형 웹 디자인 및 동적 콘텐츠 높이 조정에 활용할 수 있습니다. 하지만 상속 가능 여부와 명시적 높이 지정, 성능 고려 등에 주의해야 합니다.
  

height: inherit의 기본 원리

상속 가능한 속성

• height 속성은 상속 가능한 속성입니다. 따라서 부모 요소의 height 값을 자식 요소에 적용할 수 있습니다.
  

상속 과정

• 자식 요소에서 height 속성을 지정하지 않으면 부모 요소의 height 값이 자동으로 상속됩니다. 이를 통해 일관된 레이아웃을 유지할 수 있습니다.
  

상속 우선순위

• 자식 요소에서 height 속성을 직접 지정하면 부모 요소의 값을 덮어씁니다. 즉, 자식 요소의 직접 지정 값이 우선합니다.
  

height: inherit 활용 사례

일관된 레이아웃 유지

• 부모 요소의 높이를 자식 요소에 상속하여 일관된 레이아웃을 유지할 수 있습니다.
  

반응형 웹 디자인

• 부모 요소의 높이를 자식 요소에 상속하면 반응형 웹 디자인에 유용합니다. 부모 요소의 높이가 변경되면 자식 요소도 자동으로 변경됩니다.
  

동적 콘텐츠 높이 조정

• 부모 요소의 높이를 자식 요소에 상속하면 동적으로 변경되는 콘텐츠의 높이를 자동으로 조정할 수 있습니다.
  

툴팁

• 툴팁이 다른 콘텐츠 위에 나타나도록 z-index를 조정합니다.
  

height: inherit 관련 주의사항

상속 가능 여부 확인

• height 속성은 상속 가능한 속성이지만, 모든 CSS 속성이 상속되는 것은 아닙니다. 상속 가능 여부를 확인해야 합니다.
  

명시적 높이 지정

• 자식 요소에서 height 속성을 직접 지정하면 부모 요소의 값을 덮어쓰게 됩니다. 이 경우 의도한 대로 동작하지 않을 수 있습니다.
  

성능 고려

• height: inherit을 과도하게 사용하면 성능 문제가 발생할 수 있습니다. 필요한 경우에만 사용하는 것이 좋습니다.
  

여기까지 CSS의 속성 정리였습니다!