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>

separate 인 경우
collapse 인 경우

 

 

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>

 

hide로 지정한 경우

 

 

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

+ Recent posts

티스토리툴바