HOWTO · HTML
HTML의 가운데 글머리 기호
HTML의 글머리 기호를 사용하면 목록의 각 항목이 글머리 기호로 표시되는 웹 페이지의 항목 목록을 만들 수 있습니다. CSS를 사용하여 글머리 기호의 모양을 제어할 수 있으며 이를 사용하여 정렬된 목록과 정렬되지 않은 목록을 모두 만들 수 있습니다.
이 페이지의 내용
글머리 기호 목록은 HTML에서 관련 항목 목록을 만드는 데 사용되며 개요 및 메뉴 또는 관련 항목 목록을 만드는 데 사용할 수 있습니다. 각 목록 항목은 <li> 태그로 시작합니다.
목록 항목은 <ul>(순서/글머리 기호 목록) 또는 <ol>(순서/번호 목록) 태그에 보관됩니다. 이 기사에서는 다양한 글머리 기호 스타일과 HTML에서 글머리 기호를 중앙에 배치하는 방법에 대해 설명합니다.
글머리 기호의 HTML 스타일
HTML에서는 <ul>(정렬되지 않은 목록) 태그를 사용하여 글머리 기호를 만들고 스타일을 지정할 수 있으며 list-style-type 속성을 사용합니다. list-style-type 속성은 목록의 마커 유형을 지정하며 다음 값을 가질 수 있습니다.
디스크- 솔리드 디스크(기본값)원- 속이 빈 원정사각형- 채워진 사각형없음- 마커 없음(중첩 목록을 만드는 데 유용함)
디스크 – 솔리드 디스크(기본값)
글머리 기호 목록을 만들려면 <ul> 요소를 만들고 list-style-type 특성을 원하는 값으로 설정합니다.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
원 – 속이 빈 원
다음 코드를 사용하여 속이 빈 원 글머리 기호를 만들 수 있습니다.
암호:
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
정사각형 – 채워진 정사각형
다음 코드로 사각형 글머리 기호를 만들 수 있습니다.
<p>The list of developed countries :</p>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
없음 – 마커 없음
글머리 기호 없음 목록에 대한 다음 코드가 있습니다.
<ul style="list-style-type: none;">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
HTML의 가운데 글머리 기호
코드 예:
<!DOCTYPE html>
<head>
<style>
.parent {
text-align: center;
}
.parent > ul {
display: inline-block;
}
</style>
</head>
<body>
<h1>Center Bullet Points in HTML</h1>
<div class="parent">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<br>
<ul style="list-style-type: circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<ul style="list-style-type: square;">
<li>US</li>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</div>
</body>
결론
글머리 기호는 CSS 및 JavaScript를 사용하여 HTML 중앙에 배치됩니다. 글머리 기호 목록은 태그를 사용하여 HTML로 만들 수 있습니다.
HTML은 글머리 기호를 만드는 몇 가지 방법을 제공하며 가장 일반적인 방법은 정렬되지 않은 목록 요소를 사용하는 것입니다. 이 요소는 각 목록 항목에 대한 글머리 기호를 만들고 순서가 지정된 목록 요소를 사용하여 번호가 매겨진 글머리 기호를 만들 수도 있습니다.
