5/8 TIL

GHK·2023년 5월 8일

웹개발 종합반

⭐ 1주차 복습

📌 단축키
여러줄 한 번에 내어쓰기 : shift+tab
정렬하고 싶을 때 : 드래그하고 shift+alt+f
주석 : ctrl + /

팀과제

⭐ 레이아웃

⭐ 상세페이지 코드

<!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">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>Document</title>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

        * {
            font-family: 'Jua', sans-serif;
        }

        .mylogo {
            text-indent: 30px;
        }

        .mypost {
            width: 1000px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

        .mytitle {
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;
        }

        .mytxt {
            text-align: center;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            border: solid 2px;
        }

        /* .mytxt>textarea {
            width: 800px;
            height: 100px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
        } */


        .mybtn>button:hover {
            border: 2px solid black;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            width: 300px;
            height: 50px;
            background-color: transparent;
            border: 1px solid black;
            color: black;
            border-radius: 10px;
            margin-top: 20px;
            margin-right: 30px;
        }

        /* .message {
            clear: both;
            margin: 10px 0 0;
        }

        .message textarea {
            width: 98%;
            height: 100px;
        } */
    </style>
</head>

<body>
    <div class=mylogo>
        <br>
        <h1> 비전5 </h1>
    </div>

    <div class="mypost">
        <div class="mytitle">
            <br>
            <h1> 제목 </h1>
            <p>
            <div style="text-align:right" ;>
                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                    style="width:250px; height:400px;" />
            </div>
            <p>
            <h1> ⭐⭐⭐ </h1>
            </p>
        </div>

        <div class="mytxt">
            <div class="mybtn">
                <button>
                    <h5> 상세설명 </h5>
                </button>
                <button>
                    <h5> 감독/출연진 </h5>
                </button>
            </div>
            <br>
            <div>
                <h5> 상세설명 or 감독/출연진 정보 </h5>
            </div>

        </div>

        <div class="mytxt">
            <h1> 개인 관람평 </h1>
            <!-- <div class="message">
                <textarea class="message_area" placeholder="관람평을 입력해주세요."></textarea>
            <div class="mybtn">
                    <button>등록하기</button> -->
            <div class="form-floating mb-3">
                <input type="text" class="form-control" id="name" placeholder="url" />
                <label for="floatingInput">닉네임</label>
            </div>
            <div class="form-floating">
                <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                    style="height: 100px"></textarea>
                <label for="floatingTextarea2">관람평</label>
            </div>
            <div class="mybtn">
                <button>
                    <h5> 등록하기 </h5>
                </button>
            </div>

            <br>

            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">닉네임</th>
                        <th scope="col">관람평</th>
                    </tr>
                </thead>
        </div>
</body>

📌 img src에 해당하는 이미지 크기 조절과 정렬에 어려움을 겪음. 결국 구글링으로 해결.

        <div style="text-align:right";>
            <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                style="width:250px; height:400px;"/>
        </div>

📌 hover 기능을 넣는 과정에서 위의 위 class 밑의 button으로 작성했으나 작동이 되지 않아서, 바로 위 class로 수정하니까 작동이 됨.
.mytxt>button:hover {
border: 2px solid white;
}
-> 작동 안됨     
.mybtn>button:hover {
border: 2px solid black;
}
-> 작동됨

GHK

다음 포스트

5/8 TIL

웹개발 종합반

팀과제

5/9 TIL

0개의 댓글