CSS 6차시

# 검색창 

<style>

        * {box-sizing: border-box;}     // *: 모든 element를 선택. 처음에 border-box를 설정해주면 크기 컨트롤이 쉽다.

 

 

        form {

            max-width: 300px;

            margin: 0 auto;     // 아이템을 center에 위치시킬 때 사용

           * margin: top/bottom left/right 

             margin: top left/right bottom  

             margin: top right bottom left (시계방향)

        }

        h1 {

            height: 100px;

            display: flex;     // element 중앙정렬

            justify-content: center;

            align-items: flex-end;

        }

        .form-group {

            position: relative;     // input에 button을 위치시키기 위하여 부모element에 relative position을 설정

        }

 

        input {

            padding: 0.5rem 1rem;

            width: 100%;     // %는 부모사이즈에 상대적으로 결정된다

            border-radius: 1rem;     // 모서리를 둥글게 처리

            outline: none;

            border: 1px solid #ddd;

        }

        button {

            position: absolute;     // relative가 설정된 부모 element 내에 위치하기 위한 position

            top: 0;

            right: 0;

            background-color: transparent;

            height: 100%;

            width: 3rem;

            border: none;

        }

    </style>

    <form action="">

        <h1>G o o g o l e</h1>

        <div class="form-group">

            <input type="text">

            <button>&#128269</button>

        </div>

    </form>

 

---

# 댓글창

     <style>
        * {box-sizing: border-box;}
        .form-group {margin-bottom: 0.5rem;} 
        .form-group:nth-of-type(2) {      // selector:nth-of-type(n): selector 중에서 n번째를 선택한다
            display: flex;
            justify-content: flex-end;
        }
        textarea {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            outline: none;     // 클릭했을 때 테두리 표시
        }
        button {
            padding: 0.5rem;
            border: none;
            background-color: #333;
            color: #fff;
            cursor:pointer;     // 손가락 모양 포인터
        }
    </style>

    <form action="">
        <h1>Comments</h1>
        <div class="form-group">
            <textarea name="" id="comments" cols="30" rows="3" placeholder="comments..."></textarea>
        </div>
        <div class="form-group">
            <button>Submit</button>
        </div>
    </form>

---

# 로그인창

<style>
        * {box-sizing: border-box;}
        form {
            max-width: 300px;
            margin: 0 auto;
        }
        h1 {
        display: flex;
        justify-content: center;
        height: 100px;
        align-items: center;
        }
        .form-group {
        margin-bottom: 0.5rem;
        }
        label {
        display: block;     // label과 input 줄바꿈
        }
        input[type=text], input[type=password] {     // 대괄호[]안에 타입 혹은 기타 속성을 기재하여 특정 element를 선택
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            outline: none;
        }
        button[type=submit] {
            padding: 0.5rem;
            background-color: #333;
            color: #fff;
            width: 100%;
            border: none;
            cursor: pointer;
        }
        .relative {
            position: relative;
        }
        button[type=button] {     // type="button"은 클릭해도 form이 제출되지 않는다.
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            background-color: transparent;
            border: none
        }
    </style>

    <form action="">
        <h1>Login</h1>
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" id="username" autocomplete="off">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <div class="relative">
                <input type="password" id="password" autocomplete="off">
                <button type="button">show</button>
            </div>
        </div>
        <div class="form-group">
        <button type="submit">Login</button>
        </div>
    </form>

---

# 테이블1: 셀 병합

    <style>
        table {
            border: 1px dashed;
            caption-side: bottom;
            border-collapse: collapse;
            /* separate가 기본값 */
        }
        caption {
            text-align:left;
        }
        td[scope=row] {
            font-weight: bold;
        }
        th,td {
            padding: 0.5rem;
            border: 1px solid #eee;
        }
    </style>
     

   <h1>Beers</h1>

    <table>
        <caption>Caption</caption>     // caption: 제목, 짧은 설명
        <thead>
            <tr>
                <th scope="col">#</th>     // scope="row": 열의 제목  /  scope="col" : 행의 제목
                <th scope="col">Name</th>
                <th scope="col">Origin</th>
                <th scope="col">Abailable</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row">1</td>
                <td>Heineken</td>
                <td>Netherland</td>
                <td>Yes</td>
            </tr>
            <tr>
                <td scope="row">2</td>
                <td>Guinness</td>
                <td>Ireland</td>
                <td>No</td>
            </tr>
            <tr>
                <td scope="row">3</td>
                <td colspan="2">Asahi, Japan</td>     // colspan: 열 병합 / rowspan: 행 병합
                <td>Yes</td>
            </tr>
        </tbody>
    </table>

 

# 테이블2

    <style>
        table {
            border: 1px dashed;
            border-collapse: collapse;
        }
        thead tr {
            border-bottom: 1px solid #000;
        }
        td[scope=row] {
            font-weight: bold;
        }
        th, td {
            padding: 0.5rem;
        }
        tbody tr:nth-child(odd) {     // odd: 홀수
            background-color: #eee;
        }
    </style>