Interop 2023에서는 CSS 테두리 이미지가 핵심 초점 영역으로 식별되었습니다. 요소의 테두리 스타일을 지정하기 위해 이미지를 사용할 수 있는 이 기능은 수년 동안 브라우저에서 지원되었습니다. 그러나 브라우저 간의 동작 차이(이 웹 플랫폼 문제 에서 강조된 바와 같이 )로 인해 웹 개발자들은 이 기능을 완전히 사용하는 것을 꺼려하게 되었습니다. Interop 2023에 국경 이미지가 포함되면서 행동 차이를 해결하고 광범위한 채택을 장려하려는 새로운 의지가 생겼습니다. 이 이니셔티브는 다양한 브라우저에서 일관되게 시각적으로 매력적인 웹 디자인을 만들 수 있는 능력의 중요성을 강조합니다. 테두리 이미지의 각 측면은 특정 border-imageCSS 속성을 사용하여 제어할 수 있으며, 모든 속성은 MDN의 참조 페이지에 광범위하게 설명되어 있습니다. 이 게시물에서는 테두리 이미지와 관련된 모든 일반적인 속성을 요약하고 테두리 이미지를 사용자 정의하는 방법을 살펴보겠습니다. 테두리 이미지 시작하기 CSS의 테두리 이미지를 사용하면 웹 사이트 요소 주위의 테두리로 사용자 정의 이미지를 사용하여 표준 테두리를 대체할 수 있습니다. 정말 멋지네요! 이를 통해 웹 사이트에 개인적이고 창의적인 터치를 추가하고 스타일을 지정할 수 있는 독특하고 강력한 방법을 제공합니다. 예를 들어 온라인 꽃집을 운영하고 있다고 가정해 보겠습니다. 꽃이나 자연 이미지를 웹 사이트의 다양한 요소에 대한 테두리로 사용하여 전체적으로 매력적이고 통일된 테마를 추가할 수 있습니다. 다음은 이미지를 요소의 테두리로 성공적으로 사용하는 데 관련된 모든 단계에 대한 요약입니다. 첫 번째 단계는 원하는 이미지의 소스를 지정하는 것입니다. 그런 다음 이미지를 분할하여 테두리에 사용할 부분을 지정합니다. 다음으로, 이미지의 너비 (즉, 두께)를 조정하여 테두리 영역 내에서 이미지 크기가 조정되는 방식을 제어합니다. 이미지가 요소의 테두리를 넘어 확장되도록 하려면 여백 을 정의하는 옵션이 있습니다 . 마지막으로 이미지가 테두리 주위에 맞춰지거나 반복되는 방식을 결정합니다. 이는 이미지가 테두리 영역에 맞게 반복, 확장 또는 조정되는지 여부를 정의합니다. 다음 단계를 수행하면 사용자 정의 이미지를 웹 디자인의 요소 테두리로 효과적으로 사용할 수 있습니다. 다음 자연을 테마로 한 이미지( pixabay 제공 )를 사용하여 테두리 이미지로 사용하는 방법을 보여드리겠습니다. 흰색 배경에 노란색 꽃, 노란색과 녹색 잎, 녹색 잎이 있는 갈색 가지가 반복되는 패턴으로 자연을 테마로 한 이미지입니다. 또한 참고로 다음 상자는 해당 테두리 이미지를 추가하려는 요소를 나타냅니다. 두꺼운 녹색 테두리 영역이 이미지로 대체될 영역입니다. 연한 노란색 배경색은 콘텐츠와 패딩 상자를 나타냅니다. 놀다 이미지 지정 속성을 사용하여 테두리 이미지의 소스를 지정합니다 border-image-source. 와 유사하게 background-image이 속성은 이미지 파일의 URL이나 그라디언트를 허용하고 이를 상자 테두리에 적용합니다. PNG, JPG, SVG 등 다양한 이미지 형식을 사용할 수 있습니다. CSS 놀다 클립 보드에 복사 .box { border: 30px solid transparent; border-image-source: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png"); } 이 단계에서는 이미지가 상자 모서리에만 나타나는 것을 알 수 있습니다. 우리가 기대했던 것이 아니죠? 이는 첫 번째 단계일 뿐이며 테두리의 이미지 모양을 사용자 정의하는 데는 아직 몇 단계 남았습니다. 최종 테두리 모양을 렌더링하려면 다른 속성 값을 사용하여 이미지를 추가로 처리해야 합니다 border-image. 이 시점에서는 이미지를 테두리에 걸쳐 분할하거나 배포하는 방법에 대한 지침이 누락되었습니다. 놀다 위의 코드에서는 테두리 이미지와 함께 border-width및 모두 바로가기 속성을 border-style사용하여 정의되었음을 알 수 있습니다 border. 이는 border-image요소에 정의된 테두리가 있는 경우에만 속성이 표시되기 때문입니다. 속성 border-width은 테두리 이미지에 사용 가능한 공간을 설정하고 border-style테두리 이미지가 올바르게 표시되도록 보장합니다. border-width및 가 없으면 설정한 속성 border-style에 관계없이 테두리 이미지가 표시되지 않습니다 .border-image 이미지 분할 슬라이싱은 요소 테두리의 모서리와 측면에 표시될 이미지 부분을 정의하는 데 도움이 됩니다. 이는 케이크를 여러 조각으로 자르고 각 조각이 제 위치에 있는 것과 같습니다. 속성을 사용하여 이미지를 분할할 수 있습니다 border-image-slice. 이 속성은 각 가장자리로부터 지정된 슬라이스 거리에 있는 4개의 가상 선을 사용하여 이미지를 슬라이스합니다. 4개의 분할 선은 효과적으로 이미지를 9개의 영역(모서리 4개, 가장자리 4개, 중앙)으로 나눕니다. 이 선은 테두리에 사용될 이미지 영역의 크기를 결정합니다. 30예를 들어 모든 측면에 대한 슬라이스 값을 사용하면 슬라이스 영역이 아래 오른쪽 이미지와 같이 표시됩니다. 두 개의 이미지가 포함된 스크린샷. 왼쪽 이미지는 네 모서리 모두에서 30단위의 절단선을 보여주는 동일한 자연 테마 이미지입니다. 오른쪽 이미지는 슬라이스 후 제거된 빈 중간 영역을 보여줍니다. 이 값을 사용하면 30위에 표시된 슬라이스 영역이 이미지에서 충분한 부분을 캡처하지 못합니다. 최소한 테두리에 실제로 표시하려는 부분은 캡처하지 않습니다. 대부분의 잎과 꽃이 잘려지고 있습니다. 아래 코드에서는 이미지를 분할하기 위해 더 높은 값(예: )을 사용 70하고 어떻게 보이는지 살펴보겠습니다. CSS 놀다 클립 보드에 복사 .box { border: 30px solid transparent; border-image-source: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png"); border-image-slice: 70; } 테두리에 이미지의 더 바람직한 영역이 표시되면 훨씬 더 좋아 보입니다. 알 수 있듯이 이 단계의 결과는 사용하는 이미지에 따라 달라집니다. 따라서 슬라이싱을 위한 다양한 설정을 살펴보세요. 앞서 보여드린 녹색 테두리 영역이 사용자 정의 이미지로 대체된다는 점에 유의하세요. 놀다 값 으로 지정할 수 있는 또 다른 옵션이 있습니다 border-image-slice. 기본적으로 슬라이싱 작업은 이미지의 중간 부분을 삭제합니다. 하지만 이를 보존하려면 fill다음과 같이 값을 추가할 수 있습니다 border-image-slice: 70 fill;. 이렇게 하면 중간 영역의 배경 위에 테두리 이미지도 그려집니다. 너비 조정 다음 단계에서는 테두리 이미지의 두께를 결정해 보겠습니다. 이는 테두리 영역 내에서 테두리 이미지의 크기를 조정하는 방법을 결정합니다. 속성을 사용하여 테두리 이미지의 너비를 설정합니다 border-image-width. 테두리 가장자리에서 테두리 이미지의 안쪽 오프셋을 정의합니다. 아래 이미지에서 너비 설정이 어떻게 10px보이는지 확인할 수 있습니다. 이 너비에서는 테두리의 이미지가 매우 늘어납니다. 두 개의 이미지가 포함된 스크린샷. 왼쪽의 자연을 테마로 한 이미지는 네 모서리 모두에서 70단위의 절단선을 보여줍니다. 오른쪽 이미지는 확장된 테두리 이미지와 빈 중간 영역을 보여줍니다. 이미지의 너비를 30px. CSS 놀다 클립 보드에 복사 .box { border: 30px solid transparent; border-image-source: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png"); border-image-slice: 70; border-image-width: 30px; } 이 너비에서는 테두리 이미지의 크기가 더 잘 조정되어 보입니다. 놀다 슬라이싱 섹션이 끝날 때에도 이 출력에 도달했다고 생각할 수도 있습니다. 그렇다면 도움말을 어떻게 추가했나요 border-image-width? 슬라이싱 섹션의 경우와 같이 속성이 지정되지 않은 경우 브라우저는 초기 값인 1을 사용하기 때문에 출력이 동일하게 보입니다. border-image-width이는 테두리 이미지의 너비가 기본 너비와 같거나 또는 해당 border-image-slice. 이미지에 필요한 고유 차원이 없으면 해당 차원이 border-width대신 사용됩니다. border-image-width여기서 잠시 시간을 내어 및 속성의 목적을 이해했는지 확인해 보겠습니다 border-width. border-image-width속성은 테두리 이미지의 너비 또는 두께를 정의하는 반면 , border-width속성은 요소 주위의 테두리 너비를 정의합니다. 따라서 border-image-width할당된 경계 영역 내에서 경계 이미지의 크기를 조정하는 방법을 결정합니다. 다음 시나리오를 고려하십시오. 가 border-image-width보다 크면 border-width테두리 이미지는 패딩을 넘어 확장되고 콘텐츠 상자 가장자리까지 확장됩니다. border-image-width가 보다 작으면 이미지 border-width가 전체 테두리 영역을 채우지 못할 수 있습니다. 그러나 이미지가 더 작은 공간에 압축되어 있기 때문에 이미지가 왜곡되거나 축소되어 나타날 수 있습니다. 경계를 넘어 이미지 확장 때로는 디자인에 깊이를 더하는 것처럼 테두리 이미지가 요소의 테두리 상자 너머로 확장되기를 원할 수도 있습니다. 이는 케이크의 아이싱이 얼마나 넘쳐야 하는지를 결정하는 것과 같습니다. 이것이 바로 border-image-outset속성이 작용하는 곳입니다. 속성을 지정하는 순서는 엄격하지 않지만 border-image-outset일반적으로 속성 뒤에 지정됩니다 border-image-width. 10px다음은 초기 값 (왼쪽)과 20px(오른쪽) 을 나란히 비교한 것입니다 . 이러한 이미지의 테두리는 테두리 영역 외부의 테두리 이미지 확장을 보여주기 위해 강조 표시되었습니다(브라우저 검사기 도구의 상자 모델 섹션 사용). 경계 영역 너머로 확장되는 경계 이미지 경계 영역 너머로 확장되는 경계 이미지 10px예제를 계속해서 for 값을 사용해 보겠습니다 border-image-outset. CSS 놀다 클립 보드에 복사 .box { border-width: 30px; /* Width of the border area */ border-style: solid; border-image-source: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png"); border-image-slice: 70; border-image-width: 30px; /* Width of the border image */ border-image-outset: 10px; /* Extension of the border image beyond the border area */ } 30px위의 코드를 기반으로 테두리 이미지는 로 정의된 요소의 테두리 영역 내에 있는 너비로 표시됩니다 border-width. 값 은 border-image-outset테두리 이미지가 10px테두리 상자 밖으로 확장되도록 지정합니다. 이 확장은 에서 지정한 너비에 추가됩니다 border-image-width. 테두리와 시작 부분이 차지하는 전체 너비는 40px( 테두리의 경우 및 시작의 경우 30px추가 )입니다.10px 놀다 아웃셋 값이 클수록 테두리가 요소 주위에 떠 있는 것처럼 보일 수 있으며, 아웃셋이 작을수록 테두리 이미지가 더 많이 포함됩니다. 레이아웃 제어 이제 테두리에 있는 이미지의 최종 모양에 매우 가까워졌습니다. 우리가 사용하고 있는 특정 이미지와 슬라이싱 및 너비에 대해 지정한 값으로 인해 이 요소의 테두리는 이미 원하는 최종 모양과 유사합니다. 그러나 최종 레이아웃 조정을 위해 마음대로 사용할 수 있는 또 다른 손잡이가 있습니다. 이 마지막 단계에서는 이미지의 분할된 섹션이 테두리 주위에 배치되는 방식, 즉 테두리 영역에 맞게 반복, 확장 또는 조정해야 하는지 정의합니다. 숙소 border-image-repeat에서 이를 도와드립니다. 이 속성은 border-image요소의 테두리 이미지의 최종 레이아웃을 처리하므로 속성 중 마지막에 지정되는 경우가 많습니다. 이미지가 잘리지 않고 완벽하게 맞도록 테두리 주변에서 반복되도록 하려면 값을 사용합니다 round. 이미지 섹션이 적절하게 맞도록 늘어날 수 있습니다. 적절한 핏을 위해 늘어나는 대신 추가 공간을 추가하려면 값을 사용하십시오 space. 이미지를 반복하지 않고 테두리 영역을 채우도록 이미지를 늘리려면 값을 사용합니다 stretch. 값은 repeat경계를 넘어 이미지를 반복하며, 경계 영역에 완벽하게 맞지 않으면 잠재적으로 잘립니다. 에 두 개의 값을 지정하여 수평(상단 및 하단)과 수직(왼쪽 및 오른쪽)에 대해 서로 다른 레이아웃과 크기 조정을 정의할 수도 있습니다 border-image-repeat. 연습으로 모든 측면에 동일한 값을 사용하는 것과 수평 및 수직 측면에 다른 값을 사용하는 것 사이의 모양 차이를 탐색해 보십시오. round여기 예제에서는 이미지를 테두리 주위에 완벽하게 맞추는 데 사용하겠습니다 . CSS 놀다 클립 보드에 복사 .box { border: 30px solid transparent; border-image-source: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png"); border-image-slice: 70; border-image-width: 30px; border-image-outset: 10px; border-image-repeat: round; } 그리고 거기에 우리가 좋아하는 예쁜 이미지나 웹사이트 디자인에 사용할 수 있는 요소 주위의 테두리로 사용되는 웹사이트 테마와 일치하는 이미지가 있습니다. 놀다 border-image단축 속성 사용 단축 border-image속성을 사용하면 이러한 모든 속성을 한 번에 설정할 수 있습니다. 아래 코드는 단축 속성을 사용하여 , , , 및 ,를 포함한 여러 테두리 이미지 속성을 동시에 border-image설정합니다 . 지정하지 않은 값은 속성의 초기 값으로 설정됩니다.border-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeat CSS 놀다 클립 보드에 복사 .box { border: 30px solid transparent; border-image: url("https://developer.mozilla.org/en-US/blog/border-images-interop-2023/nature.png") 70 / 30px / 10px round; } 놀다 Interop 2023 이상 Interop 2023은 CSS 테두리 이미지에 중점을 두는 일환으로 브라우저 간 호환성을 향상하고 동작을 표준화하기 위한 상당한 노력을 기울이고 있습니다. 일관된 테두리 이미지 동작을 달성하려는 브라우저 개발자의 노력으로, 이 게시물이 향후 웹 프로젝트에서 테두리 이미지를 탐색하는 데 대한 관심을 자극하거나 새롭게 해주기를 바랍니다.