본문 바로가기
Spring-Java/Front-End

Day37_여백(margin/padding) 속성, 테이블 태그

by 현대타운301 2023. 10. 12.

2023.10.10

 

Day37 세 줄 요약

외부 여백은 margin 내부 여백은 padding

table 행(row) : <tr>,  table 열(column) : <td>

rowspan : 행 병합, colspan : 열 병합

 

 

margin / padding 속성

 

margin 속성

요소의 외부 여백을 지정하는 style 속성

단위에는 px, em, vw 등이 있음 (음수 허용)

     - 0 : 외부 여백 없음

     - auto : 브라우저가 여백을 계산 (가운데 정렬 활용)

 

 

* 여백 적용 순서

 

1) margin : 100px;

     - top, bottom, right, left 모두 100px의 외부 여백

 

2) margin : 100px 10px;

     - top, bottom = 100px / right, left = 10px

 

3) margin : 100px 10px 50px;

     - top = 100px / right, left = 10px / bottom = 50px

 

4) margin : 100px 10px 50px 30px;

     - top = 100px / right = 10px / bottom = 50px / left = 30px

 

 

padding 속성

요소의 내부 여백을 지정하는 style 속성

단위는 margin과 동일

     - % : 부모 요소의 가로 너비에 대한 비율로 지정

 

 

margin / padding 예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        p {
            text-align: center;
            background-color: skyblue;
            margin: 10px;
            border: 3px solid blue;
        }

        .mp1 {
            margin: 10px;
            padding: 0px;
        }

        .mp2 {
            background-color: springgreen;
            border: 3px solid green;
            margin: 20px;
            padding: 20px;
        }

        .mp3 {
            background-color: lemonchiffon;
            border: 3px solid yellow;
            margin: 100px;
        }

        .mp4 {
            background-color: lightgray;
            border: 3px solid black;
            padding-bottom: 20px;
        }

        .mp5 {
            margin: 20px 10px;
            padding: 10px 20px;
        }
    </style>

    <title>margin과 padding</title>
</head>

<body>
    <p>p, background-color: skyblue; border: 3px solid blue;</p>
    <p class="mp1">mp1, margin : 10px; padding : 0px;</p>
    <p class="mp2">mp2, margin : 20px; padding : 20px;</p>
    <p class="mp3">mp3, margin : 10px 20px 30px 40px;</p>
    <p class="mp4">mp4, padding : 0px 0px 20px 0px;</p>
    <p class="mp5">mp5, margin : 20px 10px; padding : 10px 20px;</p>
</body>

</html>

 

 

실행결과

 

 

테이블 태그

 

표(table)를 작성할 때 사용하는 태그

 

<table> 태그 구성 요소

1) <table> 태그

     - 표를 구성하는 모든 요소를 담는 최상위 태그

<table> tag

 

2) <tr> 태그

     - table row, 행 안에 요소를 담는 태그

     - <th> 태그, <td> 태그를 담는 table 요소

     - 행 안에 열(cell)을 채워 나가는 방식 (열 안에 행을 채울 순 없음)

<tr> tag

 

3) <th> 태그

     - table head, 테이블 제목 요소

     - bold + 가운데 정렬

<th> tag

 

4) <td> 태그

     - table column, 열(또는 셀)을 채우는 태그

<td> tag

 

* border-collapse : 해당 태그 내부에 담긴 요소들의 border(테두리) 겹침을 허용

border-collapse

 

 

source code

<body>
    <table>
        <tr>
            <th>1행1열</th>
            <th>1행2열</th>
            <th>1행3열</th>
        </tr>
    
        <tr>
            <td>2행1열</td>
            <td>2행2열</td>
            <td>2행3열</td>
        </tr>
    
        <tr>
            <td>3행1열</td>
            <td>3행2열</td>
            <td>3행3열</td>
        </tr>
    </table>

    <!-- 4행 4열 -->
    <!-- 1행은 th, 나머지는 td -->
    <h1>4행 4열 테이블 만들기</h1>
    <table>
        <tr>
            <th>1행1열</th>
            <th>1행2열</th>
            <th>1행3열</th>
            <th>1행4열</th>
        </tr>

        <tr>
            <td>2행1열</td>
            <td>2행2열</td>
            <td>2행3열</td>
            <td>2행4열</td>
        </tr>

        <tr>
            <td>3행1열</td>
            <td>3행2열</td>
            <td>3행3열</td>
            <td>3행4열</td>
        </tr>

        <tr>
            <td>4행1열</td>
            <td>4행2열</td>
            <td>4행3열</td>
            <td>4행4열</td>
        </tr>
    </table>
</body>

 

 

행 / 열 병합

 

table 병합 속성

rowspan : 행 병합

colspan : 열 병합

 

 

source code

<style>
    table, th, td {
        text-align:center;
        border: solid 1px;
        border-collapse: collapse;
    }

    td, th {
        width: 150px;
        padding: 10px;
    }

    .rowspanTag {
        background-color: salmon;
    }

    .colspanTag {
        background-color: cornflowerblue
    }

    table {
        width: 650px;
    }

    caption {
        padding: 10px;
    }
</style>

<body>
    <table>
        <caption>	<!-- table 제목 태그 -->
            <h2>현재 상영중인 영화정보</h2>
        </caption>

        <tr>
            <th class="rowspanTag" rowspan="2">구분</th>
            <th class="colspanTag" colspan="4">영화정보</th>
        </tr>

        <tr>
            <th>영화제목</th>
            <th>세부정보</th>
            <th>등급</th>
            <th>상영시간</th>
        </tr>

        <tr>
            <th class="rowspanTag" rowspan="3">
                <img src="https://lumiere-a.akamaihd.net/v1/images/p_aladdin1992_20486_174ba005.jpeg" alt="aladdin.jpg"
                    width=100px;>
            </th>
            <td class="rowspanTag" rowspan="3" style="font-weight: bold;">알라딘</td>
            <td>모험, 가족, 판타지</td>
            <td class="rowspanTag" rowspan="3">전체관람가</td>
            <td class="rowspanTag" rowspan="3">128분</td>
        </tr>

        <tr>
            <td>미국</td>
        </tr>

        <tr>
            <td>2019.05.23</td>
        </tr>

        <tr>
            <th class="rowspanTag" rowspan="3">사진</th>
            <td class="rowspanTag" rowspan="3">영화제목</td>
            <td>6,3</td>
            <td class="rowspanTag" rowspan="3">6,4</td>
            <td class="rowspanTag" rowspan="3">6,5</td>
        </tr>

        <tr>
            <td>7,3</td>
        </tr>

        <tr>
            <td>8,3</td>
        </tr>

        <tr>
            <th>9,1</th>
            <th class="colsapnTag" colspan="4">9,2</th>
        </tr>
    </table>
</body>

 

 

실행결과

 

 

 

 

 

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

'Spring-Java > Front-End' 카테고리의 다른 글

Day40_상속, 넘침  (0) 2023.10.16
Day39_입력 태그, 선택자  (2) 2023.10.15
Day34_img/audio/video 태그, list 태그  (2) 2023.10.10
Day33_인라인/블럭 요소, 태그 종류  (3) 2023.10.04
Day32_VSC, Front-End 기초  (0) 2023.09.27

관련글

티스토리툴바