0514.zip

box 와 flex

<!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>
        .box{
            width: 200px;
            height: 50px;
            border: 5px solid blueviolet;
        }
        .center1{
            /* 왼쪽 상단 모서리 기준으로 정중앙 그래서 보기엔 정중앙 아님 */
            /* position: absolute;
            top: 50%;
            left: 50%; */

            /* 박스가 화면 가운데로 왔다 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 화면 가운데로 보내기 위해서 마진을 박스의 절반만큼 */
            margin-top: -25px;
            margin-left: -100px;
        }
        .center2{
            position: absolute;
            top: 50%;
            left: 50%; 
            /* 화면 가운데 */
            transform: translate(-50%, -50%);
        }
        .flex {
            display: flex;
            /* 가로 정렬 */
            justify-content: center;
            /* 세로 정렬 */
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="box center2 flex">정중앙으로</div>
</body>
</html>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cb8c9254-90db-4ad7-b025-2380f21d1bf6/Untitled.png

써먹기

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/13fb7809-fa0e-461a-88eb-d1da5de7047b/Untitled.png

table

<style>
        /* table, td, th {
            border: 1px solid black;
        } */
        table {
            /* 테이블 라인이 합쳐짐 */
            border-collapse: collapse;
            width: 150px;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        #myTable tr:hover {
            background-color: thistle;
            color: dodgerblue;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        th {
            background-color: dodgerblue;
            color: white;
        }
    </style>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0b5c86ef-709b-403f-b474-cb427b8a7354/Untitled.png

예제

아래와 같은 테이블을 만드세요. 마우스 커서가 테이블 줄에 올라오면 배경 색과 글자 색이 변하게 합니다.


    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 25px auto;
        }
        th {
            background-color: powderblue;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: cadetblue;
            color: chartreuse;
        }
        th,td{
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
            <th>조회수</th>
        </tr>
        <tr>
            <td>99</td>
            <td>누가 CSS 공부한다면서요?</td>
            <td>홍길동</td>
            <td>2019.07.02</td>
            <td>1</td>
        </tr>
        <tr>
            <td>100</td>
            <td>꺼진불도 다시보자.gif</td>
            <td>김유신</td>
            <td>2019.07.02</td>
            <td>3</td>
        </tr>
        <tr>
            <td>101</td>
            <td>아 배고픈데...</td>
            <td>걸신</td>
            <td>2019.07.02</td>
            <td>7</td>
        </tr>
    </table>
</body>
</html>

결과