이 기사에서는 각각에 대해 단일 HTML 요소를 사용하여 다양한 플래그를 생성하여 CSS 그라데이션을 검토합니다. 경험의 일환으로 의사 요소::before 및::after와 클립 경로 속성도 확인합니다.
CSS에서는 어려울 수 있으므로 간단한 플래그를 코딩하고 문장 코딩은 피하겠습니다. 불가능하지는 않겠지만, 할 만한 가치도 없는 일입니다. 이를 위해서는 SVG를 사용하세요.
다양한 플래그에 대한 Wikipedia 페이지를 사용하여 치수, 크기, 위치 및 색상을 얻었습니다. 오류가 있으면 미리 사과드립니다.
플래그의 HTML 코드와 몇 가지 일반적인 스타일을 추가하는 것부터 시작하겠습니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
이들이 하는 일에 대한 간단한 설명은 다음과 같습니다.
이 중 일부는 과도한 엔지니어링입니다. 예, CSS를 과도하게 엔지니어링할 수 있습니다. 왜냐하면 대부분의 플래그에는 이러한 플래그가 필요하지 않기 때문입니다. 특히 이 기사에서 코딩할 항목은… 하지만 결국에는 속성이 필요한 속성을 발견하게 될 것입니다. 속성을 개별적으로 여러 번 추가하는 대신 클래스에 직접 포함시키는 것이 어떨까요?
선형 그래디언트는 단일 방향으로 점진적인 색상 전환(선을 따라 이름 지정)을 만듭니다. 기본적으로 방향은 위에서 아래로 수직입니다. 플래그 생성이 간편합니다.
폴란드 국기부터 시작하겠습니다. 동일한 높이를 차지하는 두 가지 색상이 있습니다. 상단은 흰색이고 하단은 빨간색입니다. 이것은 여러분이 찾을 수 있는 가장 간단한 그라데이션 중 하나입니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
이 그라데이션은 위에서부터 50%(플래그의 절반)에 도달할 때까지 흰색을 색상으로 설정한 다음 50%에서 시작하여 빨간색으로 변경합니다.
또한 가로 세로 비율(8/5)도 추가했습니다. 왜냐하면 이것이 폴란드 국기의 공식 비율이기 때문입니다(5:8). 다음 예에서 해당 속성을 무시해도 되지만 추가해야 합니다. 그렇지 않으면 플래그에 너비가 없어 보이지 않게 됩니다!
CSS 그라데이션은 두 가지 색상으로 제한되지 않고 원하는 만큼 많이 가질 수 있습니다. 하지만 색상이 너무 많으면 일부 브라우저에서는 그라데이션이 올바르게 표시되지 않을 수 있습니다.
한 가지 예로 독일 국기를 들 수 있습니다. 위에서 아래로 세 가지 색상이 사용됩니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
우리는 의도적으로 이 예를 여러 줄로 표기하고 더 길게 표시했습니다. 값 뒤에 두 개의 값을 어떻게 추가했는지 확인하세요. 이는 각각 각 색상의 시작 및 끝 중지입니다. 위의 예에서 검정색은 상단(0%)에서 시작하여 깃발의 1/3(33.33%)까지 이동하고, 빨간색은 바로 다음(33.33%)에서 시작하여 깃발의 2/3(66.66%)까지 이동합니다. ), 마지막으로 노란색은 66.66% 바로 뒤에서 시작하여 플래그의 맨 아래(100%)까지 진행됩니다. 플래그의 경우 종료 값과 다음 시작 값이 일치하지만, 일치하지 않으면 브라우저가 점진적으로 색상을 전환합니다.
기본적으로 첫 번째 색상은 0에서 시작하고 마지막 색상은 100%로 끝나는 점을 고려하면 선형 그래디언트에서 해당 값을 제거할 수 있습니다. 또한 이전 끝보다 낮은 시작 값은 색상 사이에 급격한 중단을 유발합니다. 우리는 플래그에 대해 이를 원하고 너무 많이 입력하고 싶지 않으므로 시작 값에 대해 가능한 가장 낮은 값인 0% 또는 그냥 0을 입력할 수 있습니다. 그렇게 하면 위의 CSS가 다음을 생성하는 값으로 축소됩니다. 비슷한 결과이지만 훨씬 더 짧습니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
수직 선형 그라데이션만 생성할 수 있다면 지루하고 쓸모가 없습니다. 그라데이션이 그려지는 방향을 변경하는 방법이 있습니다. 몇 가지를 확인해 보겠습니다.
벨기에 국기를 예로 들어보겠습니다. 색상은 세로로 쌓이지 않고 가로로 쌓여 있습니다. 왼쪽에서 오른쪽으로 각각 검정색, 노란색, 빨간색입니다. 최소한 두 가지 방법으로 이를 달성할 수 있습니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
방사형 그래디언트는 한 원점에서 모든 방향으로 점진적인 색상 전환을 만들어 색상의 타원(또는 측면이 동일한 경우 원)처럼 보이는 방사형 효과를 생성합니다. 기본적으로 해당 지점은 요소의 절대 중심 -수평 및 수직입니다.
고려해야 할 몇 가지 중요한 사항:
이러한 초기 생각(및 키워드)을 염두에 두고 몇 가지 플래그를 만들어 보겠습니다!
일장기는 백기 중앙에 커다란 빨간색 원이 그려져 있습니다. 이것은 우리가 찾을 수 있는 가장 간단한 방사형 그래디언트 중 하나이며 플래그가 직사각형이기 때문에 이전에 검토한 Circle 키워드를 사용하게 되며, 이를 사용하지 않으면 대신 타원을 얻게 됩니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
가장 가까운 쪽 크기 키워드와 원형 모양 키워드를 결합하여 높이의 60%(왼쪽과 오른쪽보다 위쪽과 아래쪽이 더 가깝기 때문에)의 원을 생성했습니다.
요소 중심에서 원과 타원만 만들 수 있다면 CSS를 사용하여 일부 플래그(예: 라오스 또는 부룬디)를 복제할 수 있습니다. 그럼에도 불구하고 우리는 중심에서 벗어난 원을 가진 다른 국가(예: 코스타리카 또는 에티오피아)를 개발할 수 없었습니다.
radial-gradient() 메서드를 사용하면 그라데이션의 원점을 나타낼 수 있습니다. 크기 및 모양 키워드(있는 경우) 뒤에 posX posY를 사용하여 이를 수행합니다. 이를 이용해 방글라데시의 국기를 만들어 보겠습니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
그라디언트 중심을 이동하기 시작하면 어떻게 되나요? 가장 먼 모퉁이까지의 거리가 변경됩니다! 그러면 삼각 계산을 통해 크기가 적절하게 조정됩니다. 또는 대신 가장 먼 모서리가 아닌 다른 기준점을 식별할 수 있습니다(예: 이 경우 가장 가까운 쪽).
이를 방지하기 위해 너비와 높이의 절대 크기를 지정할 수 있습니다. 그렇게 하면 그 절대값에 따라 모양이 결정되기 때문에 원인지 타원인지 식별할 수 없게 됩니다.
원추형 그라데이션은 시계 방향으로 회전하는 하나의 원점에서 점진적인 색상 전환을 만듭니다. 그렇게 시각화하는 것이 복잡하게 들릴 수 있으므로 사람들에게 설명할 때 예를 사용하는 것을 선호합니다. 종이에 인쇄된 규칙적인 선형 그라데이션을 상상해 보십시오(지금까지는 매우 좋습니다). 이제 종이를 가져다가 한쪽을 접어서 원뿔 모양으로 굴립니다(이름이 그렇습니다!). 결과 그림은 위에서 보면 원뿔형 그라데이션처럼 보일 것입니다. 도움이 되었기를 바랍니다.
방사형 그래디언트와 마찬가지로 원추형 그래디언트의 기본 원점은 요소의 절대 중심입니다. 또한 방사형 그래디언트로 posX posY를 사용하여 해당 지점을 변경할 수 있습니다.
이것은 원뿔형 그라데이션을 사용하여 생성할 수 있는 매우 간단한 플래그입니다. 먼저 중심점을 가로 40%, 세로 50%에 배치한 후 중지 지점을 지정해야 합니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
말씀대로 케이크 조각! 내용이 많지 않기 때문에 베냉 국기에 대해 여러분이 모르실 수도 있는 사실이 있습니다. 노란색은 국가의 보물을 나타내고 빨간색은 조상의 용기를 나타내며 녹색은 민주주의의 희망을 나타냅니다.
이를 바탕으로 체코 국기를 그리는 방법을 살펴보겠습니다.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
이것은 잘 작동하지만 #fff를 두 번 사용하는 방법에 주목하세요. 한 번만 사용할 수 있다면 좋지 않을까요? 짐작하셨겠지만, 대답은 우리가 할 수 있다는 것입니다! 그라데이션 그라데이션이 반드시 0deg에서 시작될 필요는 없습니다. from [angle]을 사용하여 시작 위치를 지정할 수 있습니다.
예를 들어 빨간색부터 시작한다고 가정해 보겠습니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
각도는 양수 또는 음수 값일 수 있으며, 시작점을 각각 시계 방향 또는 시계 반대 방향으로 이동합니다.
선형, 방사형 및 원뿔형 그래디언트를 사용하여 비교적 간단한 플래그를 생성하는 방법을 배웠습니다. 하지만 때로는 플래그가 복잡해 단일 그래디언트만으로는 충분하지 않을 수도 있습니다. 그럴 경우 어떻게 해야 할까요?
CSS는 한 요소에 여러 배경 이미지(및 그라데이션)를 허용합니다. 해당 값을 쉼표로 구분해야 합니다. 직관에 어긋날 수 있으므로 기억해야 할 중요한 점 중 하나는 상단 배경이 겹쳐서 하단 배경을 숨긴다는 것입니다.
스웨덴 국기는 파란색 바탕에 노란색 십자가가 그려져 있습니다. 선형 그라데이션 투명-노란색-투명을 사용하여 각 노란색 막대를 생성할 수 있습니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
이 예에는 눈에 보이는 것 이상의 내용이 있습니다.
이전 플래그에서는 여러 그라디언트가 실제로 작동하는 모습을 보여주었지만 투명 필름을 사용했기 때문에 겹쳐지는 방식을 보여주는 것은 좋지 않았습니다. 그럼 다른 유형의 여러 그라디언트를 사용하는 또 다른 예를 살펴보겠습니다.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
배경을 결합할 때 하나의 그라데이션 유형에만 국한되지 않습니다. 어떤 종류든 사용할 수 있습니다.
지금까지 선형, 방사형, 원추형 그래디언트와 이들을 결합하는 방법을 살펴보았습니다. 그러나 모든 경우에 그라데이션이 전체 플래그를 차지했습니다. 일부 투명 필름은 그렇게 보이지 않을 수 있지만 그라디언트의 크기는 항상 너비와 높이의 100%였습니다.
하지만 필요에 맞게 그라디언트 크기를 변경하는 방법이 있습니다. 가장 간단한 방법은 배경 크기를 지정하는 것입니다. 크기가 컨테이너보다 작으면 배경이 반복됩니다( background-repeat: none과 같은 것을 사용하지 않는 한)
카타르 국기의 예를 살펴보겠습니다. 플래그는 패턴을 9번 반복하며 원뿔형 그라데이션을 사용하여 쉽게 복제할 수 있습니다. 그라데이션의 너비가 플래그의 100%이고 높이는 플래그 높이의 1/9이 되어야 한다고 지정하면 브라우저는 컨테이너가 채워질 때까지 배경을 반복하여 그림을 완성합니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
물론 크기를 지정하면 그라데이션이 위치할 위치도 지정할 수 있습니다. 우리는 background-position을 사용하여 그렇게 할 것입니다(여기서 background-repeat 속성이 유용하게 쓰일 것입니다).
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
마지막 색상의 크기와 위치를 지정할 필요가 없습니다. 전체 컨테이너를 자동으로 차지할 하나만 설정할 수 있습니다.
배경 이미지의 값, 크기, 위치를 쉼표로 구분할 수 있습니다. 그 수가 소수일 때는 편리하지만, 배경이 여러 개인 경우에는 정말 골치 아픈 일이 될 수 있습니다. 길을 잃고 가치관이 뒤섞이기 쉽습니다.
대신에 짧은 형식의 배경 속성을 사용하여 모든 값을 한 번에 제공할 수 있습니다. 배경: 아래와 같이 그라데이션 위치/크기 반복:
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
선형, 방사형 및 원추형 그라데이션을 살펴봤지만 각 변형을 통해 '색상 패턴'을 추가할 수 있습니다. 플래그는 이에 적합합니다. 많은 플래그가 반복되는 수평선으로 구성되어 있습니다.
반복 그라데이션에 대해 이야기하고 있습니다. 이는 100% 또는 360도에 도달할 때까지 지정된 패턴을 반복하는 일반 그라데이션과 동일하게 동작합니다. 세 가지 반복되는 그라데이션이 있습니다:
그리스 국기를 예로 들어보겠습니다. 이를 달성하기 위해 3~4개의 큰 선형 그래디언트를 사용하거나 세 개의 반복되는 선형 그래디언트를 사용할 수 있습니다.
왼쪽 상단에 십자 모양을 만들려면 처음 두 선형 그라데이션의 위치와 크기를 모두 정의해야 합니다.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}
우간다 국기에는 실용적인 이유로 CSS로 코딩하지 않을 아름다운 회색관 학이 있습니다. 우리는 나머지 두 개의 깃발 부분, 즉 중앙의 흰색 원과 검은색, 노란색, 빨간색의 여러 수평선에 중점을 둘 것입니다.
이 구성은 두 가지 방법으로 구현할 수 있습니다.
첫 번째 옵션은 다음과 같습니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
두 번째 옵션은 다음과 같습니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
그러나 두 옵션 모두 결과적으로는 동일해 보입니다. 다른 프로그래밍 스타일과 마찬가지로 CSS에도 일반적으로 목표를 달성하는 방법이 여러 가지 있다는 점을 기억하는 것이 중요합니다.
'단일 요소 플래그'라는 용어는 오해의 소지가 있습니다. 비어 있지 않은 모든 HTML 요소에는 그리는 데 사용할 수 있는 최소 두 개의 의사 요소(::before 및::after)가 포함됩니다. 따라서 우리는 개별적으로 스타일을 지정할 수 있고 다양한 가능성을 제공할 수 있는 세 가지 요소를 보유하고 있습니다.
위에 설명된 대로 그라데이션을 사용하여 카타르 국기를 코딩한 경우 일부 모니터에서는 그라데이션의 삼각형 가장자리가 너무 날카롭고 보기 흉하게 보이는 것을 알 수 있습니다. 이를 해결하는 방법은 여러 가지가 있지만 제가 좋아하는 해결책은 클립 경로가 포함된 의사 요소를 사용하여 더 부드럽고 깔끔한 선을 만드는 것입니다.
이 옵션은 다음 섹션에서 설명하는 여러 선형 그래디언트 및 픽셀 차이 트릭을 사용하는 것에 비해 코드를 단순화합니다.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
이 경우 의사 요소는 복잡한 패턴으로 제한될 필요가 없습니다. 예를 들어 쿠바, 바하마, 요르단의 국기를 생각해 보십시오. 왼쪽에는 원뿔형 그라디언트를 사용하여 그린 삼각형이 있습니다. 이러한 그라데이션에는 문제가 있습니다. 특정 모니터에서는 가장자리가 너무 단단해 보이거나 픽셀화되어 보입니다. 다음 섹션에는 선형 그라데이션을 사용하여 이 문제를 해결하는 방법이 있습니다. 대신 의사 요소(3점 다각형 경로)를 사용하여 삼각형을 만들 수 있으며 가장자리가 더 부드러워 보입니다. 위의 바레인 국기와 유사합니다.
5개의 별에 대한 꼭지점의 대략적인 지점을 구하고 이를 ::before 및 ::after 의사 요소의 클립 경로를 사용하여 적용했습니다. 많은 CSS 아티스트는 클립 경로 치트 사용을 고려할 것이며 별은 원뿔형 그라디언트를 사용하여 그릴 수 있습니다. 하지만 편의상 클립 경로로 남겨 두겠습니다.
원뿔형 그라디언트를 깃발 배경으로 추가하고 의사 요소에 별을 추가하면 즉시 파나마 국기를 그릴 수 있습니다.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
배경을 결합하면 나열된 순서대로 쌓이게 된다는 점을 기억하세요. 즉, 첫 번째 항목이 맨 위에 올라가고 아래 항목과 겹쳐지며 그 이후에는 계속됩니다.
디자인 관점에서는 이해가 되지만, 캐스케이드가 속성이나 클래스의 마지막 모양을 이전에 정의된 것보다 우선시하는 CSS 관점에서는 직관에 어긋날 수 있습니다.
기사에서 그라데이션 가장자리가 너무 선명하거나 픽셀화되어 보일 수 있다고 언급했습니다. 이는 브라우저가 그라디언트를 렌더링하는 방식 때문에 발생하며 특히 SVG의 하드 스톱 가장자리에서는 발생하지 않기 때문에 짜증스럽습니다.
예를 들어, 다음 줄은 모든 모니터에서 잘 보이지 않을 수 있습니다.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
이를 방지하는 방법은 끝점과 다음 시작점 사이에 픽셀 차이를 추가하는 것입니다. 각각에서 각각 0.5px을 빼거나 더하거나, 더 간단하게는 그중 하나에서 1px을 빼거나 더하면 됩니다. 이 선은 모든 모니터에서 부드럽게 보입니다.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
반복 그라디언트 작업 시 흔히 저지르는 실수는 첫 번째 색상의 시작점을 추가하지 않는 것입니다. 이렇게 하면 그라데이션이 펑키하게 보입니다. 반복 그라데이션이 예상대로 작동하지 않는 경우 항상 거기에 0(또는 어떤 값이든)을 추가했는지 확인하세요!
의사 요소는 처음에는 위협적일 수 있지만 다른 요소와 크게 다르지 않으며 HTML 요소에 함께 첨부될 뿐입니다.
값이 포함된 콘텐츠 속성을 추가하는 것을 잊지 마세요. 표시만 하려는 경우에는 빈 문자열이 일반적입니다. 그렇지 않으면 의사 요소가 표시되지 않습니다!
CSS로 그림을 그리고 CSS 아트를 만들 때 많은 사람들은 클립 경로 속성을 사용하는 것이 부정행위라고 주장합니다. 이는 일을 더 쉽게 만들고 벨트에 유용한 도구입니다. 단지 '사기'라는 이유로 버리지 않겠습니다.
클립 경로와 마스크 사용법을 알아보세요! 결국 프로젝트에서 유용하게 활용될 것입니다.
이제 CSS 그래디언트를 연습할 시간입니다. 한 번 해보고 직접 플래그를 다시 만들어 보세요. 연습하기에 좋은 국기가 있는 국가 목록은 다음과 같습니다(복잡한 순서대로 정렬).
그리고 기억하세요: 플래그를 코딩하는 고유한 방법은 없습니다. 각각은 다양한 방법으로 수행될 수 있습니다. 더 편안하거나 가장 잘 보일 것 같은 그라데이션을 사용하세요.
위 내용은 Alvaro Montoro가 선사하는: CSS를 이용한 플래그의 재미의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
