HTML과 CSS를 사용하여 인도 국기 만들기

우리는 HTML과 CSS가 웹과 디자인에 사용되는 언어라는 것을 알고 있지만 웹 앱을 만드는 것 이상의 일을 할 수 있습니다. 예를 들어, 두 언어에 대한 깊은 지식이 필요한 흥미로운 프로젝트를 만드는 데 이를 사용할 수도 있습니다.

그래서 우리의 임무는 HTML과 CSS를 사용하여 인도 국기를 만드는 것입니다. 어떤 유형의 깃발을 만들든 관계없이 두 부분으로 구성됩니다. 첫 번째는 깃대이고 두 번째는 깃발 자체입니다. 아시다시피 직사각형 DIV에 색상을 추가하고 깃발의 삼색 부분을 만드는 것은 실제로 매우 간단합니다. 까다로운 부분은 바퀴를 만드는 것입니다.

그래서 접근 방식은 컨테이너 요소를 사용하여 전체 로고를 담는 것입니다. 이것은 기둥과 깃발의 두 부분으로 구성됩니다. 로고 섹션에는 세 가지 요소가 포함되며, 각 요소는 위에서 아래로 해당 색상을 나타냅니다. 이 세 가지 요소 중 중간 요소는 바퀴의 컨테이너 요소 역할을 합니다.

로고 만들기로 넘어 갑시다.

외부 용기

앞서 논의한 것처럼 외부 용기에는 깃발 전체(깃발과 기둥 부분)가 들어갑니다. div 태그를 사용하고 "컨테이너" 클래스를 제공하겠습니다. 이 div 태그에는 두 개의 div가 중첩되어 있습니다. 하나는 기둥용이고 다른 하나는 깃발용입니다.

이제 문제는 두 div 요소가 모두 인라인이 되기를 원하므로 이를 달성하기 위해 display:flex 속성을 사용할 것입니다. 그런 다음 요소의 너비, 높이 및 색상을 지정합니다.

코드의 html 부분은 다음과 같습니다. -

으아악

CSS 부분은 -

으아악

세 가지 색상 추가

이제 삼색의 세 가지 색상을 추가해 보겠습니다. 이를 위해 flagPart 내부에 세 개의 중첩된 div를 사용합니다. 그런 다음 먼저 서로 동일한 적절한 너비와 높이를 지정한 다음 각각의 배경색을 할당합니다. 첫 번째 div는 사프란 배경색을 가지며, 중간 div는 흰색 배경색, 아래쪽 div는 녹색 배경색을 갖습니다.

HTML 부분−

으아악

CSS 부분−

으아악

내부 div의 너비를 상위 div(예: middleColor 클래스가 있는 div)의 크기로 확장하기를 원하므로 너비를 지정할 필요가 없습니다.

바퀴 추가

이제 중간 부분에 바퀴를 추가하겠습니다. 바퀴에는 24개의 바퀴살이 있습니다. 따라서 12개의 선을 사용하고 CSS를 사용하여 원을 형성하도록 각도를 조정하겠습니다.

이것은 바퀴살만 형성한다는 점에 유의하세요. 바퀴의 원형 부분에는 바퀴 컨테이너의 "경계 반경" 속성을 사용합니다.

HTML 부분 −

으아악

CSS 부분 −

으아악

중심에서 15도 회전한 12개의 행이 24개의 바퀴살을 형성하므로 n번째 자식 의사 클래스를 사용하여 각 행을 15도 회전했습니다. n번째 자식 의사 클래스는 중괄호 안에 지정된 컨테이너의 자식 요소 수와 일치하는 데 사용됩니다.

우리가 만든 것은 단순한 플래그뿐이지만 CSS에 대한 고급 지식을 사용하면 훨씬 더 많은 일을 할 수 있습니다. 애니메이션을 사용하면 깃발이 바람에 펄럭이거나 바퀴 위에서 움직이는 것처럼 보이게 만들 수 있지만 이 문서에서는 이에 대해 자세히 다루지 않습니다.

예

다음은 위의 전체 작업 예입니다. -

으아악

결론

이 기사에서는 HTML과 CSS를 사용하여 인도 국기인 삼색기를 만드는 방법을 살펴보았습니다. 우리는 배경색, 테두리, 테두리 반경, 변환 등과 같은 CSS 속성을 사용하여 아름다운 플래그를 만들 수 있다는 것을 보았습니다.

위 내용은 HTML과 CSS를 사용하여 인도 국기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!