[html/css] list작성

2024. 8. 1. 05:32·HTML|CSS

20240730수업
list작성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- style문법은 무조건 헤드안에만 존재 -->
    <style>
      li {
        color: blue;
        list-style-type: hangul; /*가나다*/
      }
      #item1 /* id가 item1인걸 찾는것*/ {
        background-color: yellow;
      }
      li.item2 {
        background-color: aqua;
      }
      /* li태그중에서 클래스가 item2인것만 적용하겠음.li없애면 h2도 같이 적용 */
    </style>
  </head>
  <body>
    <h2 class="item2">OrderdList, UnOrderdList</h2>
    <ul type="square">
      <!--attribute(속성) type="", disc, circle, square-->
      <li>사과</li>
      <li id="item1">배</li>
      <li class="item2">바나나</li>
      <li class="item2">수박</li>
      <!-- id는 원래 중복되면 안됨 대신 class로 여러개 지정 가능 -->
    </ul>
    <!-- li:list -->
    <ol type="I">
      <!-- attribute(속성) type="", 1,A,a,I,i -->
      <li>복숭아</li>
      <li>포도</li>
      <li>바나나</li>
      <li>딸기</li>
    </ol>
    <!-- 숫자 -->
  </body>
</html>

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

ol:ordered list
ul:unordered list

'HTML|CSS' 카테고리의 다른 글

[html/css] Input type  (0) 2024.08.02
[html/css] table태그 (표 만들기), reset css(스타일 시트 초기화)  (0) 2024.08.01
[html/css] a 태그(문서or링크 연결),padding과 margin의 차이  (0) 2024.08.01
[html/css]이미지 태그(삽입),css적용  (0) 2024.08.01
[html/css] display mode  (0) 2024.08.01
'HTML|CSS' 카테고리의 다른 글
  • [html/css] table태그 (표 만들기), reset css(스타일 시트 초기화)
  • [html/css] a 태그(문서or링크 연결),padding과 margin의 차이
  • [html/css]이미지 태그(삽입),css적용
  • [html/css] display mode
라텐느
라텐느
이제 막 개발을 시작한 초보가 개인공부를 하는 공간입니다.
  • 라텐느
    괴발개발
    라텐느
    • 개발자 (153)
      • HTML|CSS (14)
      • JAVA (29)
      • JAVACSCRIPT (15)
      • SQL (16)
      • 기타 (5)
      • JSP (2)
      • SPRING (13)
      • SPRING BOOT (6)
      • Git&GitHub (1)
      • 시행착오 (2)
      • 개발일지 (35)
        • GreenMiniProject1 (12)
        • GreenMiniProject2 (9)
        • GreenFinalProject (14)
      • Flutter (5)
      • 자격증 (0)
        • SQLD (1)
      • AWS (2)
      • Linux (1)
      • 자료구조&알고리즘 (4)
  • 블로그 메뉴

    • 홈
    • 방명록
    • 태그
  • 링크

    • GitHub
  • 공지사항

  • 인기 글

  • 태그

    db
    AJAX
    오블완
    개발자
    SQL
    link
    부트캠프
    티스토리챌린지
    HTML
    JS
    링크
    일지
    javascript
    태그
    java
    JQuery
    CSS
    tag
    자기계발
    input
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
라텐느
[html/css] list작성
상단으로

티스토리툴바