티스토리 뷰

HTML

HTML Lists

carrot62 2020. 7. 23. 01:20

Unordered HTML list

  • <ul>: (default)bulletpoints를 이용해서 리스트 항목을 나타낸다
    • <li> : 각각의 항목을 적을 때 사용한다
  • list-style-type : bulletpoint 모양을 바꾸고 싶을때 사용한다
    • disc, circle, square, none(bulletpoint 표시가 되지 않는다)
  • Nested list
    list 안에 list를 중첩해서 사용할 수 있다 (그렇게 되면 bulletpoint는 다른 문자로 바껴서 나온다)
<ul style="list-style-type: square;">
      <li>Coffee</li>
      <li>Tea</li>
      <ul>
          <li>Black tea</li>
          <li>Green tea</li>
      </ul>
      <li>Milk</li>
  </ul>

Ordered HTML list

  • <ol>: 숫자를 이용해서 리스트의 항복을 나타낸다
    • <li>
  • type
    예)type="1"
    • 종류: 1, A, a, I, i
  • start: 번호 매기기를 어디서부터 시작할지 정해준다
    예) start="50"
  • Nested list
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Description Lists

subpoints는 들여쓰기 해서 나타낸다

  • <dl>
    • <dt>
    • <dd>: <dt> 항목 아래 들여쓰기 된 항목

Navigation Bar 만들기- 수평 리스트

<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
	float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<!--body 내용-->
<body>
<ul>
    <li><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu#home">Home</a></li>
    <li><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu#news">News</a></li>
    <li><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu#contact">Contact</a></li>
    <li><a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu#home#about">About</a></li>
</ul>
</body>

'HTML' 카테고리의 다른 글

HTML id, iframes, javascript 맛보기, File Paths  (0) 2020.07.23
HTML Block and Inline Elements & class  (0) 2020.07.23
HTML Tables  (0) 2020.07.23
HTML Images  (0) 2020.07.22
HTML Media  (0) 2020.07.22