HTML에서 사각형을 그리는 4 가지 간단한 방법

이 기사는 웹 페이지에서 모양을 그리기위한 4 가지 기본 방법을 소개합니다. HTML 및 CSS 사용, CSS 만 사용하고 SVG를 사용하고 HTML Canvas 요소를 사용합니다.

키 포인트

웹 페이지에서 모양을 그리는 4 가지 기본 방법은 다음과 같습니다. HTML 및 CSS 사용, CSS 만 사용하고 SVG를 사용하고 HTML 캔버스 요소를 사용합니다. HTML 및 CSS를 사용하여 사각형 및 원과 같은 간단한 모양을 생성 할 수 있으며 CSS 만 사용하면 또는 와 같은 의사 요소를 통해 모양을 만들 수 있습니다. SVG는보다 복잡한 모양을 만들 수있는 반면 HTML Canvas 요소를 사용하여 그래픽 및 대화식 기능을 작성할 수 있습니다.

HTML에서 도면 모양을 선택하는 방법은 원하는 결과에 따라 다릅니다. HTML 및 CSS는 컨텐츠 컨테이너와 장식용 요소를 만드는 데 이상적입니다. 특징이지만 JavaScript에 대한 더 깊은 이해가 필요합니다.

• html 및 css
를 사용하여 사각형을 그립니다 HTML 및 CSS를 사용하여 모양을 만드는 것은 매우 간단합니다. 우리는 요소를 사용하여 너비와 높이뿐만 아니라 경계 및/또는 배경색을 설정할 수 있습니다.
• 다음 코드 펜 예제는 결과를 보여줍니다. ::before [Codepen Sample Link- 실제 Codepen Link로 교체하십시오] 참고 : 위의 예에서 ::after 요소는 CSS 그리드를 사용하여 중앙에 있습니다.
물론 우리는 컨텐츠를 사각형에 배치 할 수도 있습니다. 위의 Codepen 예제에서 시도하십시오.
• 우리는 또한 원과 같은
속성의 도움으로 다른 모양을 그릴 수 있습니다.

[Codepen Sample Link- 실제 Codepen Link로 교체하십시오] 우리는 또한 타원을 그릴 수 있습니다 :

[Codepen Sample Link- 실제 Codepen Link로 교체하십시오] 우리는 다음과 같은 더 특이한 모양을 시도 할 수 있습니다. [Codepen Sample Link- 실제 Codepen Link로 교체하십시오] 추가 읽기 :

div 속성의 사용에 대해 자세히 알아보십시오.

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}</code>

CSS 만 사용하여 사각형을 그립니다 위의 예에서 HTML 요소를 사용하여 모양을 만듭니다. 이제 CSS 만 사용합시다.

이를 위해 CSS

pseudo element를 사용합니다. (우리는 또한 를 사용할 수 있습니다).

다음은 우리가 할 수있는 일입니다 :

[Codepen Sample Link- 실제 Codepen Link로 교체하십시오] 우리는 요소에 부착 된 의사 요소를 생성 한 다음 위의 div 요소를 향한 것과 같은 스타일을 만들고 있습니다. 또한 와 같은 속성의 인용문 사이에 텍스트, 이미지 등을 배치 하여이 모양에 컨텐츠를 추가 할 수 있습니다.

추가 읽기 :

CSS Pseudo elements 안내서에서
• 및 ::before에 대해 더 배울 수 있습니다. ::after

svg

를 사용하여 사각형을 그립니다 SVG를 사용하면 HTML에서 매우 복잡한 모양을 만들 수 있습니다. 다음은 사각형을 만드는 방법에 대한 간단한 예입니다. [Codepen Sample Link- 실제 Codepen Link로 교체하십시오] 추가 읽기 :

SVG에 대해 자세히 알아보십시오.

MDN에서 SVG 사용에 대한 자세한 내용을 읽을 수 있습니다.

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}</code>

HTML 캔버스 요소를 사용하여 직사각형을 만듭니다

HTML 캔버스 요소를 사용하여 모양을 만들 수도 있습니다. 먼저 HTML에서 캔버스 요소를 생성하고 너비와 높이를 설정합니다. 그런 다음 다음 JavaScript를 추가합니다

다음 코드 펜 예제는 결과를 보여줍니다.

[Codepen Sample Link- 실제 Codepen Link로 교체하십시오]
• 추가 읽기 :
• mdn의 캔버스 요소에 대해 읽으십시오.
캔버스 대 SVG에 대한 기사를 읽으십시오.

요약 이 기사에서는 HTML에서 모양을 그리는 4 가지 간단한 방법을 소개합니다. 우리가 사용해야하는 방법은 우리가 달성하고자하는 것에 달려 있습니다.

HTML에서 모양을 그리는 것은 HTML 페이지 용 콘텐츠 컨테이너를 작성할 때 CSS를 사용하여 스타일링하는 것이 매우 일반적이며 이상적입니다. 이 스타일의 요소는 장식 목적으로 사용될 수도 있습니다. (HTML 및 CSS를 사용하여 놀라운 예술 작품을 만들 수있는 수천 가지 창의적인 방법에 대해서는 Codepen을 확인하십시오.) CSS 의사 요소를 사용하여 모양을 만드는 것은 웹 페이지에 장식 수정 및 툴팁을 추가하는 데 매우 편리합니다.

SVG는 웹 페이지에 가벼운 반응 형 모양을 만드는 훌륭한 도구입니다. SVG 코드는 HTML 페이지에 포함되거나 링크 된 이미지와 같은 SVG 파일에 연결하여 이런 식으로 페이지에 포함시킬 수 있습니다.

<code class="language-css">div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}</code>

요소는 웹 페이지에서 다양한 그래픽 및 기타 대화식 기능을 만드는 데 사용할 수있는 강력한 플랫폼이지만 일반적으로 JavaScript에 대한 상당히 심층적 인 이해가 필요합니다.

마지막으로, HTML에서 모양을 다음 단계로 만들고 싶다면 CSS

:

<code class="language-css">div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}</code>

를 사용하는 다음의 멋진 예를 확인할 수도 있습니다.

CSS

속성을 ​​소개하고 모양을 애니메이션하는 방법을 보여줍니다.

CSS 기능을 사용하여 삐걱 거리는 초상화를 만들어 SVG와 함께 를 사용하는 방법을 보여줍니다.

html에서 사각형을 그리는 방법에 대한 faqs (원래 텍스트에 언급 된 FAQ 부분은 여기에 추가되어야하며, 원래 의도를 변경하지 않도록 의사 원리 독창성으로 내용을 다시 작성해야합니다. 코드 펜 링크에 액세스 할 수 없으므로 링크를 자리 표시 자로 바꾸 었습니다. 실제 CodePen 링크로 직접 교체하십시오.

위 내용은 HTML에서 사각형을 그리는 4 가지 간단한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!