HTML 가로 막대

Zeeshan Afridi 2023년6월20일

HTML HTML Bar

HTML에서 가로 막대 생성
결론

HTML 막대는 숫자 데이터를 나타내는 데 사용되는 매우 일반적인 도구입니다. 숫자 데이터의 그래픽 표현을 제공합니다.

두 가지 유형의 HTML 막대가 있습니다.

가로 막대
세로 막대

하지만 이 문서는 HTML 가로 막대에 관한 것이며 일반 HTML에서 가로 막대를 생성하는 방법을 살펴보겠습니다.

MS Office, 일반 HTML 및 웹 오피스 구성 요소와 같은 모든 기술로 작업할 수 있지만 일반 HTML을 사용하는 것이 가장 간단합니다. 따라서 여기에서는 효과적인 HTML 가로 막대를 만드는 데 필요한 단계를 살펴보겠습니다.

HTML에서 가로 막대 생성

몇 가지 간단한 단계를 따라 HTML 가로 막대를 생성합니다. HTML 가로 막대의 기본 빌딩 블록은 HTML 테이블, <p> 및 <div> 태그입니다.

HTML 테이블 <tr>의 <td> 태그 안에 배치된 <p> 및 <div> 태그 집합입니다.

HTML 가로 막대를 생성하는 단계입니다.

HTML 표 가져오기
```
<table></table>
```
테이블에서 필요한 행 수를 결정합니다. 테이블의 모든 행은 HTML 가로 막대를 나타냅니다.
각 행에 두 개의 열을 추가합니다. 코드는 다음과 같아야 합니다.
```
<table>
   <tr>
	   <td></td>
	   <td></td>
   </tr>
</table>
```

첫 번째 열에서 Y축 레이블이 있는 <div> 또는 <p> 태그를 추가합니다.

<tr> 태그의 두 번째 열에 <div> 태그를 추가합니다. <div>는 background-color와 width가 다른 style 속성을 사용합니다. 코드는 다음과 같습니다.

<table>
   <tr>
	   <td>
		   <div>
			   HTML Horizontal Bar
		   </div>
	   </td>
	   <td>
		   <div style= 'background-color: blue; width: 300px'>
			   HTML Horizontal Bar
		   </div>
	   </td>
   </tr>
</table>

전체 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML: The strong and em tags</title>
</head>
<body>

    <table>
    <tr>
        <td>
            <div>
                HTML Horizontal Bar1
            </div>
        </td>
        <td>
            <div style= 'background-color: blue; width: 300px'>
                HTML Horizontal Bar1
            </div>
        </td>
    </tr>

    <table>
    <tr>
        <td>
            <div>
                HTML Horizontal Bar2
            </div>
        </td>
        <td>
            <div style= 'background-color: black; width: 400px'>
                HTML Horizontal Bar2
            </div>
        </td>
    </tr>
</table>
</table>
</body>
</html>

결론

기사를 요약하기 위해 가로 막대가 무엇인지, 유형 및 일반 HTML로 만드는 방법에 대해 논의했습니다. 또한 HTML 가로 막대를 만드는 데 필요한 단계와 일반 HTML에서 가로 막대를 생성하는 데 사용되는 태그에 대해 논의했습니다.

작가: Zeeshan Afridi

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.