HTML/CSS에서 색상으로 채워진 상자를 어떻게 만듭니까?

개요

HTML과 CSS는 어떤 모양이나 프레임이든 만들 수 있는 기술입니다. HTML을 사용하여 간단한 상자 프레임을 만들고 CSS 속성을 사용하여 색상으로 채울 수 있으므로 HTML을 사용하여 색상으로 채워진 상자를 만들 수 있습니다. 또한 HTML "svg"(스칼라 벡터 그래픽) 속성을 사용하여 상자를 그리고 채우기 색상 속성을 사용하여 상자를 색상으로 채울 수 있습니다.

문법

svg를 사용하여 상자를 만들고 색상을 채우는 구문은 다음과 같습니다. 여기에는 x, y, 너비, 높이 및 패딩의 네 가지 속성이 포함됩니다. 따라서 x축은 화면을 기준으로 상자의 가로 위치를 설정하고, y축은 세로 위치를 설정하고, 높이는 상자의 높이를 설정하고, 너비는 상자의 너비를 설정하고, 채우기 속성은 상자 안의 상자 색상.

으아악

알고리즘 1

• HTML 상용구가 포함된 텍스트 편집기에서 HTML 파일을 만듭니다.

• 이제 HTML 본문에 svg 태그를 추가하세요.

으아악

• 이제 의미 체계 마크업을 사용하여 svg 태그 안에 상자를 만듭니다.

으아악

• 이제 태그에 x, y, 너비, 높이, 패딩과 같은 속성을 설정하세요.

으아악

• 이제 브라우저를 열면 색상으로 채워진 상자가 표시됩니다.

예 1

이 예에서는 HTML svg 태그를 사용하여 속성의 도움으로 상자를 그립니다.

으아악

알고리즘 2

• 텍스트 편집기에서 index.html 파일을 만들고 파일에 HTML 상용구를 추가하세요

• 이제 HTML 본문에 div 컨테이너를 추가하세요

으아악

• 이제 내부 스타일 태그를 HTML 헤드 태그에 추가하세요.

으아악

• 이제 CSS 스타일 속성을 사용하여 상자의 높이, 너비 및 색상을 설정하세요.

으아악

• 브라우저를 열면 상자가 성공적으로 생성되고 색상이 채워집니다.

예 2

이 예에서는 HTML div 컨테이너가 있는 상자를 만들고 CSS 스타일 속성을 사용하여 상자를 색상으로 채웁니다.

으아악

결론

svg(스칼라 벡터 그래픽)를 사용하여 상자를 만든 것처럼 상자를 사용하여 다양한 모양을 만들 수도 있습니다. 색상이 채워진 상자를 만드는 가장 좋은 방법은 일부 CSS 스타일 속성이 포함된 간단한 div 컨테이너를 사용하는 것입니다. CSS를 사용하면 별도의 스타일시트에서 상자를 쉽게 사용자 정의할 수 있기 때문입니다. 소규모 프로젝트에서는 svg 작업이 어렵지 않게 보일 수 있지만, 동일한 상자를 여러 번 빌드해야 하는 경우 동일한 코드를 여러 번 작성하는 것은 어려운 작업입니다. 상자의 위치를 ​​변경하고 싶지 않다면 ""에 "x" 및 "y" 속성을 사용할 필요가 없습니다. 이러한 유형의 상자는 애니메이션을 로드하는 데 사용되거나 정보를 표시하는 카드로 사용할 수 있습니다

위 내용은 HTML/CSS에서 색상으로 채워진 상자를 어떻게 만듭니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!