둥지

6. 그림자 효과의 세 가지 방법: box-shadow, text-shadow, drop-shadowCSS에서 그림자를 표현하는 방법은 크게 세 가지가 있습니다:1. box-shadow: 요소 전체에 그림자를 적용 2. text-shadow: 텍스트에만 그림자를 적용 3. filter: drop-shadow(): SVG나 PNG 이미지에 그림자를 적용 각각의 속성은 다음과 같은 형식으로 사용됩니다: - box-shadow: x축 y축 blur 색상 - text-shadow: x축 y축 blur 색상 - filter: drop-shadow(x축 y축 blur 색상) 아래의 예제에서 볼 수 있듯이, 각각의 그림자 효과는 서로 다른 용도에 최적화되어 있습니다. box-shadow는 div와 같은 블록 요소에,..

이 글은 해당 영상을 정리한 글입니다.1. 간단하게 보더에 그라디언트를 줄 수 있습니다border-image 속성을 사용하면 가상 선택자 없이도 그라디언트 테두리를 만들 수 있습니다. 이 방법의 장점은:1. 코드가 간단하고 직관적입니다 2. 가상 선택자를 사용하지 않아도 됩니다 3. 브라우저 호환성이 좋습니다 border-image와 linear-gradient를 함께 사용할 때 주의할 점은 기본적으로 모서리에만 그라디언트가 적용된다는 것입니다. 하지만 border-image-slice 속성을 활용하면 테두리 전체에 균일한 그라디언트를 적용할 수 있습니다. 아래 예제는 border-image-slice 값을 1로 설정하여 그라디언트를 테두리 전체에 균일하게 적용한 예시입니다. border-image-sl..

CSS 중앙 정렬은 최근 들어 상당히 쉬워졌음에도 불구하고 어려운 것 중 하나입니다. web.dev에 소개된 탄력성 고리(The Resilience Ringer)라는 5가지 테스트 요소가 있습니다.1. Squished: 중앙 정렬은 너비 변경을 처리할 수 있어야 합니다.2. Squashed: 중앙 정렬은 높이 변경을 처리할 수 있어야 합니다.3. Duplicate: 중앙 정렬은 항목 수에 따라 동적이어야 합니다.4. Edit: 중앙 정렬은 콘텐츠의 길이와 언어에 따라 동적이어야 합니다.5. Flow: 중앙 정렬은 문서 방향 및 쓰기 모드에 독립적이어야 합니다.좋은 중앙 정렬은 위 요소를 모두 만족하는 경우가 탄력적이며, 안정적인 중앙 정렬이라 할 수 있다고 소개되었습니다. 1. 컨텐츠 중앙 정렬 (Con..