[CSS] 링크(link), 리스트(list), 테이블(table)

1. 링크, 리스트와 테이블

2. 리스트

list-style-type
list-style-image
list-style-position

2-1-1 list-style-type : UL 태그

<style>
    .circle {list-style-type: circle;}
    .disc {list-style-type: disc;}
    .square {list-style-type: square;}
</style>

2-1-2 list-style-type : OL 태그

<style>
    .upperAlpha {list-style-type: upper-alpha;}
    .lowerAlpha {list-style-type: lower-alpha;}
    .lower-roman {list-style-type: lower-roman;}
    .upper-roman {list-style-type: upper-roman;}
    .decimal {list-style-type: decimal;}
</style>

2-2 list-style-image

<style>
    .image {list-style-image: url(이미지 경로);}
</style>

- 마커를 자신이 원하는 이미지로 설정할 수 있다.

2-3 list-style-position

<style>
    .outside {list-style-position: outside;}
    .inside {list-style-position: inside;}
</style>

- 리스트 요소의 위치를 설정할 수 있다.

- outside : 문단 바깥쪽으로 설정한다.

- inside : 문단 안쪽으로 설정한다.

2-4 list 속성 한 번에 적용

<style>
    list {list-style-image: url(); list-style-type: circle; list-style-position: inside;}
</style>

- 위 코드처럼 리스트 속성을 한 번에 적용할 수 있다.

3. 테이블

border
border-collapse
border-spacing
verticla-align
caption-side
empty-cells

3-1 border

<style>
    table, tr, td {border: 1px solid;}
</style>

- 테이블의 테두리를 설정한다.

3-2 border-collapse

<style>
    table, tr, td {
        border: 1px solid;
        border-collapse: collapse;
    }
</style>

- collapse : 테이블의 테두리와 셀(td)의 테두리 사이의 간격을 없앤다.

separate : 테이블의 테두리와 셀(td)의 테두리 사이의 간격을 둔다.

3-3 border-spacing

<style>
    table, tr, td {
        border: 1px solid;
        border-collapse: separate;
        border-spacing: 15px 15px;
    }
</style>

- border-collapse 값이 separate일 경우 테이블의 테두리와 셀의 테두리 사이의 간격을 정한다.

3-4 vertical-align

<style>
    table, tr, td {
        border: 1px solid;
        border-collapse: separate;
        border-spacing: 15px 15px;
        text-align: center;
        width: 50%;
        height: 50px;
        vertical-align: top;
    }

- 텍스트를 수직으로 정렬한다.

- top : 상단으로 설정한다.

bottom : 하단으로 설정한다.

middle : 중앙으로 설정한다

3-5 caption-side

<style>
    table, tr, td {
        border: 1px solid;
        border-collapse: separate;
        border-spacing: 15px 15px;
        text-align: center;
        width: 50%;
        height: 50px;
        vertical-align: middle;
    }
    .top {caption-side: top;} /* 캡션을 위로 설정 */
</style>
<body>
    <table>
        <caption class="top">표</caption> <!-- <caption>에 적용 -->
        <tr>
            <th>1</th>
            <th>2</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
    </table>
</body>

- 표의 캡션의 위치를 정하는 속성이다.

- top : 표 위로 캡션을 위치시킨다.

bottom : 표 아래로 캡션을 위치시킨다.

3-6 empty-cells

<style>
    table, tr, td {
        border: 1px solid;
        border-collapse: separate;
        border-spacing: 15px 15px;
        text-align: center;
        width: 33%;
        height: 50px;
        vertical-align: middle;
    }
    .top {caption-side: top;}
    .hide {empty-cells: hide;} /* 빈 셀을 표시하지 않는다 */
</style>
<body>
    <table class="hide"> <!-- 테이블에 적용 -->
        <caption class="top">표</caption>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td></td>
        </tr>
    </table>
</body>

- 빈 셀의 테두리를 표시하는지 숨기는지를 설정한다.

- hide : 표시하지 않는다.

show : 표시한다.

저작자표시 비영리

'FrontEnd > Css' 카테고리의 다른 글

[CSS] 패딩(padding) (0)	2021.07.27
[CSS] 크기 및 한계 설정 (0)	2021.07.25
[CSS] 글꼴 (0)	2021.07.24
[CSS] 텍스트(text) 속성 (0)	2021.07.24
[CSS] 배경(background) (0)	2021.07.23

PteroSaurs