5. CSS 목록 스타일

728x90

1. CSS 목록 스타일

1) list-style: none [Unordered List value] [Ordered List Value]

2) list-style-image: url(경로);

2. CSS 목록 실전 예제 - figure(멀티미디어 내용이 있는 그룹) 태그로 만드는 리스트 스타일

1) 링크 태그로 외부 CSS 파일 링크하기 (파비콘: favicon/ Font AweSome)

Font AweSome: 아이콘이지만 텍스트 파일이라 확대해도 깨지지 않는다.

ex1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 목록 스타일</title>
    <style>
        ul {
            list-style-image: url(이미지파일경로);
            padding-left: 16px;
        }
    </style>
</head>
<body>
    
    <h3>CSS li 태그 사용하기</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JQUERY</li>
        <li>BOOTSTRAP</li>
        <li>SEMANTIC-UI</li>
        <li>MOBILE WEB APP</li>
        <li>WORDPRESS</li>
    </ul>
        
</body>
</html>

ex2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure 태그 css 목록 디자인</title>
    <style>
        figure {
            width: 800px;
        }
        figure img {
            border-radius: 5px;
        }
        figure h1 {
            background-color: #000;
            color: #fff;
            text-align: center;
            border-radius: 5px;
        }
        figure ul {
            list-style: circle;
            padding-left: 20px;
            line-height: 1.6em;
        }
        figure ul li span {
            color: blue;
            text-decoration: underline;
        }
        
        
    </style>
</head>
<body>

    <figure>
        <img src="images/sydney.jpg">
        <figcaption>
            <h1>
                The world's three greatest harbor
            </h1>
            <ul>
                <li>
                    <span>Sysdey, Austraila</span>: Sydeny is the state capital of New South Weales and the most populous city in Austraila and Oceania
                </li>
                <li>
                   <span>Rid de sixth-most</span> popular
                </li>
                <li>
                    <span>Naples, Italy</span>: Napies is the regional Camparia and the third-largest municipality in Italy after Rome and Milan.
                </li>
            </ul>
        </figcaption>
    </figure>
</body>
</html>

ex3)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>figure태그 CSS 목록스타일 </title>
    <style>
        figure {
            border: 1px solid red;
            width: 700px;
        }
        figure figcaption {
            text-align: center;
        }
        figure figcaption h1 {
            background-color: gray;
            color: #fff; 
        }
        figure figcaption img {
            width: 700px;
        }
        figure ul {
            list-style-image: url(images/icon-check.png);
            padding-left: 16px;
        }
    </style>
</head>
<body>
    <figure>
        <figcaption>
            <h1>
                Top 3 Best K-Pop comebacks Of July 2018    
            </h1>
            <img src="images/hyolyn-see-sea.jpg">
            <a href="">View 3 Best K-Pop comebacks Of July 2018 </a>
        </figcaption>
        <ul>
            <li>HyoLyn - See Sea</li>
            <li>TWICE - Dance The Night Away</li>
            <li>Mamamoo - Egotistic</li>
        </ul>
    </figure>
</body>
</html>

저작자표시 비영리 변경금지

'2019백업' 카테고리의 다른 글

7. 레이아웃 스타일 (Block elements & Inline elements) (0)	2019.07.22
6. CSS 배경 색상 및 이미지 제어하기 (속성: background-image, background-repeat) (0)	2019.07.22
4. CSS Text (0)	2019.07.22
3. 브라우저 벤더프리픽스 (0)	2019.07.22
2. CSS 선택자 (태그, 클래스, 아이디, 하위, 그룹, 전체 선택자) (0)	2019.07.22

'2019백업' 카테고리의 다른 글

티스토리툴바