[2021/12/20]국비지원 CSS3 2-(4) list-style

목록에는 총 3종이 있는데,

비 순서형 ul
순서형 ol
정의형 dl

이 중에서 이 list-style이 통용되는 목록은 ul과 ol이다.

list-style-position : list 심벌(지금으로 치면 검고 작은 원)의 위치
- outside : default. list 항목은 그대로 있고 그 앞에 심벌이 나타남.
- inside : 심볼이 붙을 경우 항목들이 들여 쓰기 됨
list-style-type : 심벌의 모양
- disc : default. 상기의 심볼형태
- circle : 속이 빈 원형 심벌
- square : 검은 사각형. default 사이즈
- upper-alpha : 영어 알파벳 대문자
- lower-alpha : 영어 알파벳 소문자
list-style-image : 잘 쓰이지는 않지만 이미지로 심벌을 대체하고 싶을 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>list-style<title>
    <style type="text/css">
        /* ol,ul,li{list-style: none;} */
        ul.in{list-style-position: inside;}
        ul.out{list-style-position: outside;}/* 기본값 */
        li.none{list-style-type: none;}
        .disc{list-style-type: disc;}/* 기본값 */
        .circle{list-style-type: circle;}
        .square{list-style-type: square;}
        .upperA{list-style-type: upper-alpha;}
        .lowerA{list-style-type: lower-alpha;}
        .upperR{list-style-type: upper-alpha;}
        .lowerR{list-style-type: lower-alpha;}
        /* 하단은 잘 안 씀. 그냥 백그라운드 이미지 씀 */
        ul.marker{list-style-image: url(images/marker.gif);}
        ul.marker2{list-style-image: url(images/list_dot.gif);}
        ul.marker3{list-style-image: url(images/li.gif);}
        li.red{list-style-image: url(images/list_dot.gif);}
    </style>
</head>
<body>
    <ul class="in">
        <li class="none">로그인</li>
        <li class="disc">회원가입</li>
        <li class="circle">마이페이지</li>
        <li class="square">회사소개</li>
        <li class="upperA">사이트맵</li>
    </ul>
    <ul class="out">
        <li class="lowerA">ENGLISH</li>
        <li class="upperR">CHINESE</li>
        <li class="lowerR">JAPANESE</li>
    </ul>
    <ul class="marker">
        <li>로그인</li>
        <li>회원가입</li>
        <li>마이페이지</li>
        <li>회사소개</li>
        <li>사이트맵</li>
    </ul>
    <hr>
    <ul class="marker2">
        <li>로그인</li>
        <li>회원가입</li>
        <li>마이페이지</li>
        <li>회사소개</li>
        <li>사이트맵</li>
    </ul>
    <hr>
    <ul>
        <ul class="marker3">
            <li class="red">로그인</li>
            <li>회원가입</li>
            <li>마이페이지</li>
            <li>회사소개</li>
            <li>사이트맵</li>
        </ul>
    </ul>
</body>
</html>

제일 하단 marker3 클래스의 경우, ul ul li 구조인데
대략 전체 들여 쓰기 된 list를 보여주고 싶어서 이렇게 짜셨던 게 아닌가 생각

결과물

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바