[CSS] 몇가지 팁들

1. 단색 그라데이션 (Single-colour Gradients)

단색 그라데이션은 CSS에서 하나의 색상을 사용하여 은은한 시각적 효과를 만들 때 유용.

linear-gradient() 함수를 활용하여 간단하게 구현할 수 있음

linear-gradient(white 0 0) padding-box

이 코드는 흰색에서 시작하여 흰색으로 끝나는 선형 그라데이션을 만듬

• white
  • 그라데이션의 시작 색상 및 종료 색상.
  • 동일한 색상을 지정했으므로 색상 변화는 없음
• 0: 그라데이션의 시작 위치와 종료 위치를 나타냄. 둘 다 0으로 설정되어 있으므로 그라데이션은 요소 전체에 걸쳐 균일하게 적용
• padding-box
  • 이 키워드는 그라데이션이 요소의 padding-box 영역까지 적용되도록 지정.
  • 즉, 콘텐츠 영역과 안쪽 여백 영역에 그라데이션이 칠해짐

활용 예시:

• 버튼이나 카드 컴포넌트의 배경에 미묘한 입체감을 더하고 싶을 때 사용할 수 있음
• (실질적인 색상 변화는 없지만, background-origin 속성과 함께 사용하여 테두리 효과 등을 만들 수 있음.)

linear-gradient(-45deg, var(--gradient)) border-box

이 코드는 사용자 정의 CSS 변수 --gradient에 정의된 색상을 사용하여 -45도 방향으로 선형 그라데이션을 만듬

• 45deg
  • 그라데이션의 방향을 지정.
  • -45도 방향은 왼쪽 아래에서 오른쪽 위로 향하는 대각선 방향
• var(--gradient)
  • CSS 변수 -gradient에 할당된 색상을 그라데이션의 시작 및 종료 색상으로 사용합.
  • 이를 통해 JavaScript 등에서 동적으로 색상을 변경하여 다양한 효과를 연출
• border-box
  • 그라데이션이 요소의 border-box 영역까지 적용되도록 지정.
  • 즉, 콘텐츠 영역, 안쪽 여백 영역, 그리고 테두리 영역까지 그라데이션이 칠해집니다.

2. user-select 속성

• user-select 속성은 사용자가 웹 페이지의 텍스트를 선택할 수 있는지 여부를 제어.
  • user-select: none;
    • 요소 내의 텍스트를 사용자가 선택할 수 없게 만듬
  • user-select: all;
    • 요소 전체가 하나의 단위로 선택됨. 텍스트의 일부분만 선택하는 것은 불가능
    • 활용 예시: URL이나 코드 스니펫과 같이 전체 내용을 복사해야 하는 경우에 유용
  • user-select: text;
    • 사용자가 일반적인 텍스트 선택 방식으로 텍스트를 선택할 수 있음.
    • 브라우저의 기본 동작과 같음.
  • user-select: auto;
    • 요소의 텍스트 선택 동작은 브라우저의 기본 설정에 따르며 일반적으로 텍스트는 선택 가능
    • 활용 예시: 명시적으로 텍스트 선택 동작을 변경할 필요가 없는 대부분의 경우에 사용

3. all 속성

all 속성은 요소의 모든 CSS 속성을 한 번에 초기화, 상속, 또는 특정 값으로 되돌리는 데 사용되는 매우 강력한 속성

• all: initial
  • 요소의 모든 속성을 해당 속성의 초기값으로 설정.
  • CSS가 적용되기 전의 기본 상태로 되돌리는 것과 같음
    • 활용 예시: 특정 컴포넌트의 스타일을 완전히 초기화하고 새로운 스타일을 적용하고 싶을 때 유용
• all: unset
  • 요소의 모든 속성을 상속된 값이 있으면 상속된 값으로, 상속된 값이 없으면 초기값으로 설정
    • 활용 예시
      • 스타일 상속의 흐름을 유지하면서 특정 속성만 초기화하고 싶을 때 사용
• all: revert
  • 요소의 모든 속성을 사용자 에이전트 스타일시트 (브라우저 기본 스타일)로 되돌림
  • 이는 작성한 CSS를 모두 무시하고 브라우저의 기본 스타일을 적용하는 것과 같음
    • 활용 예시
      • 특정 요소에 적용된 모든 커스텀 스타일을 제거하고 브라우저의 기본 스타일로 되돌리고 싶을 때 사용

4. masks 속성

mask 속성은 요소의 어떤 부분이 보이게 할지, 어떤 부분을 투명하게 처리할지를 결정하는 데 사용

이미지 파일이나 CSS 그라데이션 등을 마스크로 활용할 수 있음

mask: linear-gradient(red calc(100% - 6rem), transparent);
// 선형 그라데이션을 마스크로 사용하여 요소의 하단 6rem 부분을 투명하게 만듬

linear-gradient(red calc(100% - 6rem), transparent)
// 빨간색에서 시작하여 요소 하단에서 6rem 떨어진 지점까지 빨간색을 유지하고, 
// 그 이후부터 투명해지는 선형 그라데이션을 정의

• red
  • 그라데이션의 시작 색상입니다. 마스크에서 불투명한 영역을 나타냄
• calc(100% - 6rem)
  • 빨간색이 유지되는 지점을 요소의 하단에서 위로 6rem 떨어진 위치로 계산
• transparent
  • 그라데이션의 끝 색상입니다. 마스크에서 투명한 영역을 나타냄

활용 예시:

• 이미지나 컨테이너의 하단 부분을 부드럽게 사라지게 하는 효과를 줄 수 있음
• 텍스트나 다른 요소 위에 특정 모양의 마스크를 적용하여 독특한 시각적 효과를 연출할 수 있음

5. 스크롤 컨테이너 바깥 영역 다루기

모달이나 팝업과 같은 요소가 스크롤 가능한 컨테이너 내부에 위치할 때, 모달 내부의 스크롤이 바깥쪽 컨테이너의 스크롤을 방해하는 경우가 발생할 수 있음. 이를 해결하기 위한 몇 가지 방법이 있습니다.

dialog { overflow: visible; overflow-y: auto; }

dialog 요소에 다음과 같은 스타일을 적용하면, 내용이 dialog 요소의 경계를 넘어가더라도 스크롤이 dialog 내부에서만 발생하도록 처리할 수 있음

• overflow: visible;
  • 내용이 dialog 요소의 박스 영역을 넘어갈 수 있도록 허용 (기본값)
• overflow-y: auto;
  • 세로 방향으로 내용이 넘칠 경우에만 스크롤바를 표시

.dialog-content { overflow-y: scroll; padding: 1rem; }

dialog 요소 내부의 콘텐츠를 감싸는 .dialog-content 요소에 다음과 같은 스타일을 적용하면, dialog 자체는 overflow: visible로 설정하되, 실제 스크롤은 .dialog-content 내부에서 일어나도록 분리할 수 있음

6. 앵커 포지셔닝 (Anchor Positioning)

앵커 포지셔닝은 특정 요소 (앵커 요소)를 기준으로 다른 요소 (포지셔닝된 요소)의 위치를 상대적으로 쉽게 배치할 수 있도록 해주는 CSS 기능

이를 통해 드롭다운 메뉴, 툴팁, 팝업 등을 앵커 요소 주변에 동적으로 배치하는 것이 편리해짐

anchor-name: --profile-button;

• 이 속성은 현재 요소를 --profile-button이라는 이름의 앵커 요소로 지정.
• 다른 요소에서 이 이름을 사용하여 해당 요소의 위치를 참조할 수 있음

position-anchor: --profile-button;

• 이 속성은 현재 포지셔닝될 요소가 어떤 앵커 요소를 기준으로 위치할지를 지정.
• 여기서는 --profile-button이라는 이름을 가진 앵커 요소를 기준으로 위치하게 됨

position-area: bottom left;

position-area 속성은 포지셔닝될 요소의 어떤 모서리나 영역을 앵커 요소의 어떤 모서리나 영역에 맞출지를 지정

• bottom left
  • 포지셔닝될 요소의 왼쪽 아래 모서리를 앵커 요소의 특정 영역에 맞춤.
  • position-anchor와 함께 사용되어 앵커 요소의 어느 부분을 기준으로 할지 결정

position-area: center right;
// 포지셔닝될 요소의 오른쪽 가운데 지점을 앵커 요소의 특정 영역에 맞춤