[새싹 프론트엔드] CSS 레이아웃과 HTML 테이블 태그

Ryu·2022년 10월 24일

새싹

목록 보기

6/36

CSS 레이아웃

정렬

수평으로 요소 정렬

	속성 지정
부모	overflow:hidden 속성 지정
자식	float 속성 지성

부모 요소에 overflow:hidden을 지정해야 하는 이유?

자식 요소에 float를 적용하면 부모가 자식을 못 잡고 자기 높이를 잃어버리기 때문에 자식 높이만큼 영역을 갖기 위해서 overflow:hidden 설정

float 특징

자식 태그에 float을 적용하면 부모 태그는 높이 값을 잃어버림
- 부모 태그에 overflow:hidden을 적용해서 해결
- 자식 태그만큼 높이 값을 되찾게 됨
float 속성은 상속됨
- float 속성을 적용하지 않은 다음 태그에도 영향을 미침

중앙 정렬

최근 가장 많이 사용되는 레이아웃 구성
중앙 정렬을 원하는 요소에 다음 속성을 부여
- 원하는 너비를 먼저 지정
- 마진값은 0 auto (상하, 좌우)
  - auto를 주면 사이즈를 알아서 측정해서 값을 줌
  
  속성 값
  width 원하는 너비 값 입력
  margin 0 auto

속성	값
width	원하는 너비 값 입력
margin	0 auto

그리드 시스템

화면을 쪼개서 레이아웃을 구성하는 것
일반적으로 880px, 960px, 980px를 많이 사용

One True 레이아웃

레이아웃의 행 구성

행을 독립적으로 생각해서 공간을 나눔

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <!-- 레이아웃 행 구성 후 열 구성 -->
        <div id="top"></div>
        <div id="middle">
            <div id="left"></div>
            <div id="right"></div>
        </div>
        <div id="bottom"></div>
    </body>
</html>

레이아웃 구성 순서

부모 태그에 고정된 너비를 입력
수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용

자손 태그에 적당한 너비를 입력하고 float 속성을 적용

부모 태그에 overflow:hidden이 없을 시

footer가 원하는 것처럼 밑으로 가지 않고 옆에 붙음(float을 상속받았기 때문)

<style>
    /* 전체 초기화 */
    * {
        margin: 0;
        padding: 0;
    }
    body {
        width: 1200px;
        margin: 10px auto;
    }
    #top {
        background: coral;
    }
    #middle {
        overflow: hidden;
    }
    #left {
        float: left;
        width: 150px;
        background: deeppink;
    }
    #right {
        float: left;
        width: 350px;
        background: powderblue;
    }
    #bottom {
        background: plum;
    }
</style>

#middle에 overflow:hidden 대신 #bottom에 clear 속성을 적용해도 됨

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        width: 1200px;
        margin: 10px auto;
    }
    #top {
        background: coral;
    }
    #middle {
        width: 100%;
    }
    #left {
        float: left;
        width: 20%;
        background: deeppink;
    }
    #right {
        float: left;
        width: 80%;
        background: powderblue;
    }
    #bottom {
        background: plum;
        /* clear 속성은 문제가 되는 당사자에게 지정 */
				/* clear: 상속값 없애기 */
				/* 맨 위에 있는 태그가 float:left를 가지고 있으면 clear:left */
        /* 맨 위에 있는 태그가 float:right를 가지고 있으면 clear:right */
        /* both를 더 많이 쓰는 이유는 left를 썼는지 right를 썼는지 찾을 필요 없이 적용할 수 있음 */
        clear: both;
    }
</style>

절대 위치

절대 위치를 사용한 요소 배치
속성
부모 position:relative
자식 position:absolue

	속성
부모	position:relative
자식	position:absolue

절대 위치를 사용하여 요소를 중앙에 배치

중앙 정렬 하려는 요소의 속성
속성 값
position absolute
left 50%
top 50%

속성	값
position	absolute
left	50%
top	50%

너비와 높이의 절반값을 음수로 작성

margin-left	음수
margin-top	음수

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background: yellow;
            }
            h3 {
                width: 500px;
                height: 250px;
                background: red;
                position: absolute;
                left: 50%;
                top: 50%;
                /* 태그의 width와 height의 절반값을 음수로 입력하여 중앙 정렬 */
                margin-left: -250px;
                margin-top: -125px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h3>절대 위치를 사용하여 요소를 중앙 배치</h3>
        </div>
    </body>
</html>

고정 위치

고정 위치를 사용한 요소 배치

속성	값	속성	값
position	fixed	right	위치 값
left	위치 값	bottom	위치 값
top	위치 값	width	너비 값
height	높이 값

글자 생략

ellipsis

한 행을 넘어가는 글자를 자동으로 생략

width-space

속성 값	설명
normal	여러 개의 공백과 줄 바꿈을 하나의 공백으로 표시(디폴트)
nowrap	normal과 같지만 가로 폭의 범위를 넘어서면 줄 바꿈을 하지 않고 박스를 벗어나서 표시

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            h1,
            p {
                width: 300px;
                border: 1px solid red;
            }
            .ellipsis {
                white-space: nowrap;
                overflow: hidden;
                /* 넘어가는 글자 ...으로 표시 */
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <h1 class="ellipsis">한 행을 넘어가는 글자를 자동으로 생략하는 기능</h1>
        <p class="ellipsis">300px의 너비를 넘어가는 글자는 ...으로 처리</p>
    </body>
</html>

HTML 테이블 태그

테이블 생성하기

테이블 생성 태그

태그	설명
`table`	표 전체를 담는 컨테이너
`caption`	표 제목
`thead`	표의 머리(head) 생성
`tbody`	표의 본문(body) 생성
`tfoot`	표의 꼬리(foot) 생성
`tr`	행(row), 여러 `th`, `td`를 포함
`td`	데이터 셀 생성
`th`	열(column) 제목 셀 생성

tr: 한 줄
td: 한 칸

행과 열 만들기

표는 여러 행으로 구성
- 행, tr … /tr
한 행은 여러 셀로 구성
- 제목 셀, th
- 데이터 셀, td
thead, tbody, tfoot
- 여러 개의 tr 포함 가능

[실습] 표 만들기

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <style>
            table {
                border: 3px solid red;
            }
            td {
                border: 3px solid skyblue;
            }
        </style>
    </head>
    <body>
        <h1>표에 이미지 넣기</h1>
        <hr />
        <table>
            <caption>
                좋아하는 과일
            </caption>
            <tr>
                <td><img src="../medias/apple.png" /></td>
                <td><img src="../medias/banana.png" /></td>
                <td><img src="../medias/mango.png" /></td>
            </tr>
        </table>
    </body>
</html>

테이블 병합하기

rowspan

셀을 세로로 병합

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <style>
            table {
                border: 1px solid black;
                /* border-collapse: 테두리가 두 줄로 나오는 걸 방지 */
                border-collapse: collapse;
            }
            td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <!-- rowspan="병합할 칸 개수" -->
                <!-- 1행 1열과 2행 1열 병합 -->
                <td rowspan="2">1행 1열</td>
                <td>1행 2열</td>
                <td>1행 3열</td>
            </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>
    </body>
</html>

colspan

셀을 가로로 병합

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <style>
            table {
                border: 1px solid black;
                /* border-collapse: 테두리가 두 줄로 나오는 걸 방지 */
                border-collapse: collapse;
            }
            td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan="2">1행 1열</td>
                <!-- colspan="병합할 칸 개수" -->
                <!-- 1행 2열과 1행 3열 병합 -->
                <td colspan="2">1행 2열</td>
                <!-- colspan으로 병합할 값 지움 -->
                <!-- <td>1행 3열</td> -->
            </tr>
            <tr>
                <td>2행 2열</td>
                <td>2행 3열</td>
            </tr>
            <tr>
                <td>3행 1열</td>
                <td>3행 2열</td>
                <td>3행 3열</td>
            </tr>
        </table>
    </body>
</html>

[실습] 테이블 병합하기

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <style>
            table {
                border: 1px solid black;
                border-collapse: collapse;
            }
            td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td colspan="4">첫번째</td>
            </tr>
            <tr>
                <td rowspan="2">두번째</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <!-- <td>두번째 rowspan으로 인해 삭제</td> -->
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>세번째</td>
                <td rowspan="2">7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>네번째</td>
                <!-- <td>7 rowspan으로 인해 삭제</td> -->
                <td>10</td>
                <td>11</td>
            </tr>
            <tr>
                <td>다섯번째</td>
                <td>12</td>
                <td colspan="2" rowspan="2">마지막</td>
                <!-- <td>마지막 colspan으로 인해 삭제</td> -->
            </tr>
            <tr>
                <td>여섯번째</td>
                <td>13</td>
                <!-- <td>마지막 rowspan으로 인해 삭제</td> -->
                <!-- <td>마지막 colspan rowspan으로 인해 삭제</td> -->
            </tr>
        </table>
    </body>
</html>

테이블 꾸미기

border 속성

border: Table 테두리
border-collapse : collapse
- 중복된 테두리 합치기

셀 크기 제어

width: 너비
height: 높이

셀 여백 및 정렬

padding: 여백
text-align: 정렬(left, center, right)

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅

Ryu

이전 포스트

[새싹 프론트엔드] CSS 위치 속성

다음 포스트