html-css

HTML 기초6 ul, ol, li태그

full-moon 2022. 1. 27. 16:44

HTML기초 6 ul, ol, li 목록태그

예제

<!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>
    <h1>ol과 ul의 사용</h1>
    <ul>
        <li>1일차</li>
        <ol>
            <li>HTML이란?</li>
            <li>HTML의 기본 구조</li>
        </ol>
        <li>2일차</li>
        <ol type="A" start="1">
            <li>CSS 스타일적용</li>
            <li>ol과 ul을 사용한 예제</li>
        </ol>
    </ul>
    <hr/>
    <h1>신입 사원 모집 공고</h1>
    <p>IT계획, 개발 부서에서 함께 할 신입 사원을 모집합니다.</p>
    <ul>
        <li type="circle">모집 직군 : 웹개발, 응용프로그래밍</li>
        <li type="square">직무 내용: 스프링, 자바를 사용한 웹개발(신입도 지원가능)</li>
        <!-- ul 안에 ul을 사용하면 type이 자동으로 변한다 (circle) -->
        <ol type="I">
            <li>개발회의</li>
            <li>프로젝트 참여</li>
        </ol>
        <li>접수 마감일 : 2022. 7. 21</li>
    </ul>
    <p>자세한 내용은 공지게시판을 참고해주세요</p>
</body>
</html>

실행결과

설명

<ul>  unordered list 태그로 순서없이 도형형태로 표현한다.
<ol>  ordered list 태그로 숫자나, 알파벳등으로 순서대로 표현한다.
<li>  ul과 ol 태그 안에서 사용되며 list의 약자로 목록을 만든다.
<ul>의 속성  <li type="circle"> 흰색 동그라미
 <li type="square"> 네모
<ol>의 속성  <ul type="1"> 기본값으로 아라비아 숫자로 표현
 <ul type="a"> a, A 둘다 가능하며 알파벳 순서로 표현
 <ul type="i">  i, I 둘다 가능하며 로마숫자로 표현