앱 만들기/HTML5 study

<ul>태그 예제

나도처음이야 2023. 2. 26.
반응형

<ul> 태그는 unordered list 의 약자로 순서가 없는 리스트를 만듭니다.

예제를 통해서 <ul>태그를 확인해 봅니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- UnOdered list -->
  <ul>
    <li>나이키</li>
    <li>아디다스</li>
    <li>푸마</li>
    <li>프로스펙스</li>
  </ul>  
</body>
</html>

결과 값은 하기와 같습니다.

<ul>태그 결과값

순서가 없기에 순서대신 기호가 붙습니다.

이 기호를 불릿(bullet) 이라고 부릅니다. 블릿 기호는 list-style 속성을 추가하여 변경이 가능합니다.

  <!-- UnOdered list -->
  <ul>
    <li>나이키</li>
    <li>아디다스</li>
    <li>푸마</li>
    <li>프로스펙스</li>
  </ul> 
  <ul style="list-style: circle;">
    <li>나이키</li>
    <li>아디다스</li>
    <li>푸마</li>
    <li>프로스펙스</li>
  </ul>  
  <ul style="list-style: square;">
    <li>나이키</li>
    <li>아디다스</li>
    <li>푸마</li>
    <li>프로스펙스</li>
  </ul>

블릿  list-style 속성

- disc : 검정색 원 기호(속성 없을때 기본값)

- circle : 흰색원 기호.

- square : 사각형 기호.

 

블릭기호 속성 설정하기

 

https://soo0100.tistory.com/2123

 

<ol> 태그 속성

태그 사용법 태그는 odered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다. HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 ol 태그를 사용하면 됩니다. 그럼, 실제 예제를 살펴보겠습

soo0100.tistory.com

 

반응형

'앱 만들기 > HTML5 study' 카테고리의 다른 글

html 표 만들기  (4) 2023.02.28
<dl> 태그 예제  (2) 2023.02.27
<ol> 태그 속성  (2) 2023.02.19
<ol> 태그 사용법  (4) 2023.02.06
<hr> 태그 예제  (2) 2023.02.04

댓글