[CSS] 목록 스타일, 표 스타일

리버 River 2024. 3. 23. 21:48

2024. 3. 23. 21:48

1. 목록 스타일

🍋 목록 태그에 스타일을 지정하는 방법으로 순서가 없는 항목(ul), 순서가 있는 항목(ol) 태그에 적용

1) list-style-type 속성

🥑 순서가 없는 항목 태그와 순서가 있는 항목 태그 앞에 나오는 블릿과 번호 스타일을 변경

종류	설명	예시
disc	채운 원 모양	●
circle	빈 원 모양	○
square	채운 사각형 모양	■
decimal	1부터 시작하는 10진수	1, 2, 3...
decimal-leading-zero	앞에 0이 붙는 10진수	01, 02, 03...
lower-roman	로마 숫자 소문자	i, ii, iii ...
upper-roman	로마 숫자 대문자	I, II, III ...
lower-alpha 또는 lower-latin	알파벳 소문자	a, b, c...
upper-alpha 또는 upper-latin	알파벳 대문자	A, B, C...
none	불릿이나 숫자를 없앰

순서 없는 태그 사용 예

<head>
    <style>
        .bullet_circle {
            list-style-type: circle; /* 빈 원으로 표시 */
        }
        .bullet_none {
            list-style-type: none; /* 블릿을 표시하지 않음 */
        }
    </style>
</head>
<body>
    <!--블릿 변경하기-->
    <ul class="bullet_circle">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ul>
    <!--블릿 없애기-->
    <ul class="bullet_none">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ul>
</body>

순서 있는 태그 사용 예

<head>
    <style>
        .style-num01 {
            list-style-type: lower-alpha; /* 알파벳 소문자 */
        }
        .style-num02 {
            list-style-type: upper-latin; /* 알파벳 대문자 */
        }
    </style>
</head>
<body>
    <!--블릿 변경하기-->
    <ol class="style-num01">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>
    <!--블릿 없애기-->
    <ol class="style-num02">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>
</body>

2) list-style-position 속성

list-style-position: inside | outside;

🥑 전체 선택자(*)를 지정해서 마진과 패딩 값을 0으로 초기화하는 이유
▶️ 브라우저마다 기본 패딩값과 마진 값이 달라서 0으로 초기화 해서 사용

▶️ 이런 경우 블릿이나 번호타입을 지정해도 화면에 보이지 않음

🥑 list-style-position 속성 : 항목 번호가 보이지 않는 경우 들여쓰기 스타일 사용

inside : 블릿이나 숫자를 안쪽으로 들여씀
outside : 블릿이나 숫자를 밖으로 내어씀

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .style-num01 {
            list-style-type: lower-alpha;
            list-style-position: inside;
        }

    </style>
</head>
<body>
    <ol class="style-num01">
        <li>회사소개</li>
        <li>생산설비</li>
        <li>제품소개</li>
        <li>온라인문의</li>
        <li>커뮤니티</li>
    </ol>

</body>

2. 표 스타일

1) 제목 위치를 정해주는 caption-side 속성

caption-side: top | bottom

top : 캡션을 표 윗부분에 표시. 기본값
bottom : 캡션을 표 아랫부분에 표시.

2) 표 테두리를 그려 주는 border 속성

<head>    
    <style>
          table {
             caption-side: bottom;  /* 표 캡션 위치 */
             border:1px solid black;  /* 표 테두리는 검은 색 실선으로 */
          }
          td, th {
             border:1px dotted black;  /* 셀 테두리는 검은 색 점선으로 */
             padding:10px;  /* 셀 테두리와 내용 사이의 여백 */
             text-align:center;  /* 셀 내용 가운데 정렬 */
          }
       </style>
    </head>
    <body>    
       <h2>상품 구성</h2>
       <table>
          <caption>선물용과 가정용 상품 구성</caption>
          <thead>
             <tr>
                <th>용도</th>
                <th>중량</th>
                <th>갯수</t>
                <th>가격</th>
             </tr>
          </thead>
          <tbody>
             <tr>
                <td rowspan="2">선물용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>35,000원</td>
             </tr>
             <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>52,000원</td>
             </tr>
             <tr>
                <td rowspan="2">가정용</td>
                <td>3kg</td>
                <td>11~16과</td>
                <td>30,000원</td>
             </tr>   
             <tr>
                <td>5kg</td>
                <td>18~26과</td>
                <td>47,000원</td>
             </tr>
          </tbody>        
       </table>
    </body>

3) 셀 사이 여백을 지정하는 border-spacing 속성

🍯 table 태그와 border 속성을 사용했을 때 테두리와 셀들의 간격을 지정

border-spacing: 수평거리 수직거리

<head>
    <style>
        table {
            border: 2px solid black;
            border-spacing: 20px 40px;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

4) 표와 셀 테두리를 합쳐 주는 border-collapse 속성

🍯 표의 바깥 테두리와 셀의 각 테두리가 떨어져 있는 것을 합칠 것인지 그대로 둘 것인지 조정 가능
🍯 table과 td사이의 선값의 결합 유무를 결정하는 속성

collapse : 표와 셀의 테두리를 합쳐 하나로 표시
separate : 표와 셀 테두리를 따로 표시. 기본값

<head>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

5) empty-cells 속성

🍯 table 태그에서 내용이 없는 빈 셀들의 표시 여부를 지정

show : 빈 셀의 주위에 테두리를 표시하여 빈 셀을 나타냄. 기본값.
hide : 빈 셀에 테두리를 그리지 않고 비워 둠

<head>
    <style>
        table {
            border: 2px solid black;
            empty-cells: hide;
        }
        td {
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>시네마천국</td>
            <td>벤허</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>
</body>

6) width, height

🍯 표의 넓이와 높이를 지정.
🍯 셀 / 전체 표의 넓이에 스타일 지정 가능 ▶️ 높이와 넓이를 지정하지 않으면 셀의 내용만큼 차지

7) table-layout 속성

🍯 콘텐츠에 맞게 셀 넓이를 지정
🍯 셀의 width 값을 지정하면 해당 크기에 맞게 화면에 맞춰 표시
➡️ 영문을 띄어쓰기 없이 길게 입력을 하면 셀의 width 값은 무시되고, 내용이 한줄로 표시 됨

fixed : 셀 넓이를 고정하여 셀 내용에 따라 셀의 넓이가 달라지지 않음
auto : 기본값. 셀의 내용에 따라 넓이가 달라짐

<head>
    <style>
        table {
            border: 2px solid black;
            border-collapse: collapse;
            width: 400px;
            table-layout: fixed;
            word-break: break-all; /* 셀의 내용이 벗어나지 않도록 함 */
        }
        td {
            width: 200px;
            height: 40px;
            padding: 15px;
            border: 1px dotted black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>표 스타일</caption>
        <tr>
            <td>cinemacinemacinemacinemacinemacinemacinema</td>
            <td>벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허벤허</td>
        </tr>
        <tr>
            <td>11:00~14:30</td>
            <td>16:00~19:00</td>
        </tr>
    </table>

</body>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

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

'HTML&CSS > CSS' 카테고리의 다른 글

[CSS] 플렉스(flex) 박스 \| flex-direction, flex-wrap, justify-content, align-content, align-items (0)	2024.03.26
[CSS] position 속성, z-index (1)	2024.03.25
[CSS] 글꼴 및 텍스트 스타일 지정, 웹 폰트 사용 (0)	2024.03.23
[CSS] 배경 이미지 지정과 속성 (0)	2024.03.22
[CSS] 고급 선택자 \| 연결 선택자, 속성 선택자, 가상 클래스와 가상 요소 (0)	2024.03.21

ID_ allriver