CSS 플래그: 인도

오늘은 8월 15일, 인도가 독립한 날입니다. 그래서 우리 인도인들은 오늘 독립기념일을 기념합니다. 그래서 저는 CSS Flag라는 새로운 시리즈를 시작하려고 합니다. 인도를 시작으로 여러 나라의 국기를 만들게 됩니다.

이제 제가 무엇을 하려는지 짐작하셨을 것입니다. 그럼 바로 시작하겠습니다.

방법-1

이제 당신은 그것이 어떻게 생겼는지 보았습니다. 해보자.

플래그 스트립 만들기

<div class="flag">
    <div class="saffron"></div>
    <div class="white"></div>
    <div class="green"></div>
</div>

인도의 국기는 상단이 짙은 사프란(Kesari), 중앙이 흰색, 하단이 짙은 녹색의 가로 삼색기입니다.

부모 또는 래퍼 클래스를 생성했습니다.flag. 깃발의 각 수평 부분을 나타내는 3개divs가 있습니다.

이제 CSS로 스타일을 지정해 보겠습니다.

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --saffron : #ff6600;
  --green : #046434;
  --blue: #1c1ca5;
}

/* You can change the body color as per your needs */ 
body {
   background-color: aliceblue;
}


/* Flag is 300x200 */
.flag {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 1px rgba(0, 0, 0,0.5); 
}

/* It will divide each section (saffron, white, green) equally */
.flag > * {
  flex:1;
}

.saffron {
  background-color: var(--saffron);
}

.white {
  position: relative;
  background-color: white;
}
.green {
  background-color: var(--green);
}

이 스타일을 적용한 후. 결과는 다음과 같습니다.

휠 추가

이제 흰색 스트립 중앙에 바퀴를 추가해 보겠습니다.

<div class="flag">
    <div class="saffron"></div>
    <div class="white">
        <!-- New Part Added -->
        <div class="wheel">
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
            <span class="spoke"></span>
        </div>
       <!-- New Part End -->
    </div>
    <div class="green"></div>
</div>

.wheel 컨테이너 클래스 내부에 .white div를 추가했습니다. 인도 국기에는 사람의 24가지 특성을 나타내는 바퀴(아쇼카 차크라)에 24개의 살이 있습니다. 그래서 내부에 13개의 스포크를 추가했습니다.wheel. -webkit-box-reflect을 사용할 예정이므로 스포크 13개면 충분합니다.

휠의 스타일을 지정해 보겠습니다.

.wheel {
  height: 100%;
  width: 67px;
  border-radius: 1in;
  margin: 0 auto;
  border: 2q solid var(--blue);
  position: relative;
  display: grid;
  place-items: center;
}

.spoke {
  height: 50%;
  width: 2px;
  position: absolute;
  top: 0;
  clip-path: polygon(50% 0, 50% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
  transform-origin: bottom; /* as we are going to rotate spokes so we need to rotate from the bottom */
  background-color: var(--blue);
}

/* Styling spoke individually */
.spoke:nth-child(1) {
    transform: rotate(15deg)    
}

.spoke:nth-child(2) {
    transform: rotate(30deg);
}

.spoke:nth-child(3) {
    transform: rotate(45deg)
}

.spoke:nth-child(4) {
    transform: rotate(60deg)
}

.spoke:nth-child(5) {
    transform: rotate(75deg)
}

.spoke:nth-child(6) {
    transform: rotate(90deg)
}

.spoke:nth-child(7) {
    transform: rotate(105deg)
}

.spoke:nth-child(8) {
    transform: rotate(120deg)
}

.spoke:nth-child(9) {
    transform: rotate(135deg)
}

.spoke:nth-child(10) {
    transform: rotate(150deg)
}

.spoke:nth-child(11) {
    transform: rotate(165deg)
}

.spoke:nth-child(12) {
    transform: rotate(180deg)
}

이제 .wheel에 -webkit-box-reflect를 추가해야 합니다.

.wheel {
  /* .... */
  -webkit-box-reflect: left -99%;   /* play with value -99%, 100%, 101% */
  animation: spin 4s linear infinite;  
  /* .... */
}

결과

다음 코드펜에서 결과를 볼 수 있습니다.

자바스크립트를 이용한 방법-2

위의 솔루션은 잘 작동하지만 중복이 많고 스타일이 각각spoke 다소 성가시며 일부 스포크에 중복이 있습니다. 이 문제를 해결하기 위해 약간의 자바스크립트를 사용할 것입니다.

HTML

<div class="flag">
    <div class="saffron"></div>
    <div class="white">
        <div class="wheel"></div>
    </div>
    <div class="green"></div>
</div>

멋진 것은 없습니다. .wheel 스트립 컨테이너 안에 .white만 추가했습니다.

CSS

* {
  box-sizing: border-box;
  margin: 0;
}

:root {
  --saffron : #ff6600;
  --green : #046434;
  --blue: #1c1ca5;
}

.flag {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 1px rgba(0, 0, 0,0.5);
}

.flag > * {
  flex:1;
}

.saffron {
  background-color: var(--saffron);
}

.white {
  background-color: white;
  position: relative;
}
.green {
  background-color: var(--green);
}

.wheel {
  height: 100%;
  width: 67px;
  border-radius: 1in;
  margin: 0 auto;
  border: 2q solid var(--blue);
  position: relative;
  display: grid;
  place-items: center;
}

.spoke {
  height: 50%;
  width: 2px;
  position: absolute;
  top: 0;
  clip-path: polygon(50% 0, 50% 0, 100% 70%, 50% 100%, 50% 100%, 0 70%);
  transform-origin: bottom;
  background-color: var(--blue);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

이전 스타일의 유일한 변경 사항은 각 스포크를 개별적으로 스타일링하지 않는다는 것입니다.

자바스크립트

const wheel = document.querySelector(".wheel");

for (let i =1; i <= 24; i++){
  let spoke = document.createElement('span');
  spoke.classList.add("spoke");
  spoke.style.rotate = `${i*15}deg`;
  wheel.appendChild(spoke)
}

여기서는 span를 생성하고 여기에 .spoke 클래스를 추가한 다음 회전시킵니다. 각 스포크에 대해 회전을 15deg 증가시킵니다. 그런 다음 휠에 스포크를 추가하기만 하면 됩니다.

결과

참고: 데스크탑/노트북에서 Codepen을 사용해 보십시오. 모바일 장치에 몇 가지 문제가 있습니다.

마무리

질문이 있으시면 아래에 의견을 남겨주십시오. 더 많은 기사를 팔로우하십시오. 당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 다음에 보고 싶은 국기를 댓글로 달아주세요. 다음편에서 뵙겠습니다.