오봉이와 함께하는 개발 블로그

목록태그 본문

FE/HTML

목록태그

오봉봉이 2021. 12. 2. 16:34
728x90

FrontEnd_day1 정리 (2021.12.02 목요일)

목록 태그

  • 기본 목록
    • <ul> : 순서가 없는 목록
      • type
        • disc : 검은 원(기본 값)
        • circle : 흰 원
        • square : 사각형
    • <ol> : 순사가 있는 목록
      • type
        • 1 : 숫자(기본 값)
        • a : 영어 소문자
        • A : 영어 대문자
        • i : 소문자 로마 숫자
        • I : 대문자 로마 숫자
        • start="n" : n번부터 시작
        • type="@@@" reversed : 역순으로 표시
    • <li> : 목록 내 각 항목을 적을 때 사용
  • 정의 목록
    • <dl>, <dt>, <dd>
목록 태그 예제
  • list.html
<body>
    <ul type="disc"> <!-- 검은 동그라미(기본 값) -->
        <li>javascript/jquery</li>
        <li>web</li>
        <li>internet</li>
    </ul>
    <ul type="circle"> <!-- 빈 동그라미 -->
        <li>water</li>
        <li>coke</li>
        <li>beer</li>
    </ul>
    <ul type="square"> <!-- 검은 네모 -->
        <li>asdas</li>
        <li>dasdasdas</li>
        <li>asdasdadx</li>
    </ul>
    <hr>
    <hr>
    <ol type="1">
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>
    </ol>
    <ol type="a">
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>
    </ol>
    <ol type="A">
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>
    </ol>
    <ol type="i">
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>
    </ol>
    <ol type="I">
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>

    </ol>
    <ol type="A" reversed>
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>
    </ol>
    <ol start="5">
        <li>asdasd</li>
        <li>asdasd</li>
        <li>asdasd</li>
    </ol>
    <hr>
    <hr>
</body>
  • listprac.html
<body>
    <h3>컴퓨터 관련 보유 기술</h3>
    <ul>
        <li>프로그래밍</li>
        <ul type="circle">
            <li>웹 프로그래밍</li>
            <ol>
                <li>JSP/Serverlet</li>
                <li>HTML/JavaScript/jQuery</li>
            </ol>
        </ul>
        <ul type="circle">
            <li>모바일 프로그래밍</li>
            <ol>
                <li>Java</li>
                <li>안드로이드</li>
            </ol>
        </ul>
    </ul>
    <ul>
        <li>웹 및 모바일 디자인</li>
        <ol>
            <li>포토샵</li>
            <li>illustrator</li>
            <li>HTML5/CSS3</li>
        </ol>
    </ul>
    <ul>
        <li>데이터 베이스</li>
        <ol>
            <li>Mysql</li>
            <li>MS SQL Server</li>
            <li>Oracle</li>
        </ol>
    </ul>
</body>
728x90
저작자표시

'FE > HTML' 카테고리의 다른 글

이미지 태그  (0) 2021.12.02
테이블 태그  (0) 2021.12.02
하이퍼링크 태그  (0) 2021.12.02
텍스트 관련 태그  (0) 2021.12.02
문서 구조 태그  (0) 2021.12.02
'FE/HTML' Related Articles more
Comments