スパルタWebページ開発総合半ホームページ画面

57922 ワード

ホームページ画面を作成します.
前の計画資料の画面設計を参考に作成します.あなたが望むデザートの種類を選ぶと、それに関連する特性が現れます.プロパティを選択した後、下部の「Dessert」ボタンを押すと、条件を満たすスイーツリストの1つをランダムに出力するモードウィンドウが表示されます.

メインスクリーン

<div class="title">나는 원한다</div>
    <div class="content">

        <div class="container">
            <input type="radio"
                   name="size"
                   id="bread"
                   value="1">

            <label for="bread"> 빵</label>

            <input type="radio"
                   name="size"
                   id="drink"
                   value="2">

            <label for="drink"> 음료수</label>

            <input type="radio"
                   name="size"
                   id="icecream"
                   value="3">

            <label for="icecream"> 아이스크림</label>

            <input type="radio"
                   name="size"
                   id="snack"
                   value="4">

            <label for="snack"> 과자</label>

        </div>

スタイル

  <style>
        /** {*/
        /*    !*폰트는 나눔명조를 사용한다*!*/
        /*    font-family: 'Nanum Myeongjo', serif;*/
        /*}*/

        body {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            max-width: 700px;
            margin: 100px auto 0px auto;
            height: 600px;

        }

        .title {
            font-size: 60px;
        }

        .content {
            width: 100%;
            height: 400px;
            border: 1px solid black;
            background: antiquewhite;


        }

        .button_wrap {
            display: flex;
            justify-content: flex-end;
            font-size: 55px;
        }

        .sub_btn {
            font-size: 55px;
            outline: none;
            border-radius: 40%;
            transition: 0.5s;
        }

        .sub_btn:hover {
            background: blue;
            transition: 0.5s;
        }
        </style>

現在の画面

アイテムをチェックして[プロパティを選択](Select Properties)ウィンドウを出力

ラジオボタンのいずれかを選択した場合は、divを出力して条件を示す必要があります.

練習用にindexにdivを作成します.

      <div class="box 1"><h2>빵을 고르셨습니다.</h2></div>
       <div class="box 2"><h2>음료수을 고르셨습니다.</h2></div>
       <div class="box 3"><h2>아이스크림을 고르셨습니다.</h2></div>
       <div class="box 4"><h2>과자를 고르셨습니다.</h2></div>

選択したアイテムのvalue値を読み込み、クラス名が追加されたクラス名を読み込む変数を宣言します.

 var inputValue = $(this).attr("value")
 var targetBox =$("." + inputValue);

この変数以外のすべてのdivを非表示にし、選択したアイテムのみを表示します.

$(".box").not(targetBox).hide();
$(targetBox).show()

-これらのすべての操作は、ページのロード直後に実行されます.

 $(document).ready(function(){
        $('input[type="radio"]').click(function(){
            var inputValue = $(this).attr("value")
            var targetBox =$("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show()
        });
    })

現状

次に、各プロジェクトにプロパティ付きのボタンを生成します.
アイテムをチェックすると、テキストではなくチェックボックスが印刷されます.

 <div class="box 1">// 빵을 선택했을때
            <div class="container_two">
                <div>
                    <label class="check_obj">
                        <input  class="dessert_check"type="checkbox" >
                        <span>Dubai</span>
                    </label>
                </div>
                <div>
                    <label class="check_obj">
                        <input class="dessert_check" type="checkbox" name="">
                        <span>메롱시티</span>
                    </label>
                </div>
                <div>
                    <label class="check_obj">
                        <input class="dessert_check" type="checkbox" name="">
                        <span>스폰지밥</span>
                    </label>
                </div>
                <div>
                    <label class="check_obj">
                        <input class="dessert_check" type="checkbox" name="">
                        <span>광주</span>
                    </label>
                </div>
                <div>
                    <label class="check_obj">
                        <input class="dessert_check" type="checkbox" name="">
                        <span>대전</span>
                    </label>
                </div>

            </div>

格子のスタイルも別途作ります.


        .container_two {

            max-width: 700px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        .container_two div {
            margin: 10px;

        }

        .check_obj {
            cursor: pointer;
        }

        .check_obj input[type="checkbox"] {
            display: none;
        }

        .check_obj span {
            position: relative;
            display: inline-block;
            background: #424242;
            padding: 15px 30px;
            color: #555;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
            border-radius: 30px;
            font-size: 20px;
            transition: 0.5s;
            user-select: none;
            overflow: hidden;
        }

        .check_obj span:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: rgba(255, 255, 255, .1);
        }


        .check_obj input[type="checkbox"]:checked ~ span {
            background: #0f0;
            color: #fff;
            box-shadow: 0 2px 20px #0f0;
        }

他の項目を選択するときにチェックボックスを初期化

ユーザーが1つのプロジェクトと1つのチェックボックスを選択した場合、そのプロジェクトのチェックボックスを選択し、別のプロジェクトのradiobuttonをクリックすると、初期化操作が行われます.他のプロジェクトのcheckbox値を追加できないため、1つのプロジェクトのcheckbox値に基づいてデータベースに必要な値を表示することを目的とします.

radioButtonをチェックするたびに、残りのcheckboxのchecked値が初期化されます.
したがって,以前に記述した$(document).readyだけでなく,コードも記述し,これらのチェックボックスの値をすべてcheckboxに変更した.

   $(document).ready(function () {
        $('input[type="radio"]').click(function () {
            var inputValue = $(this).attr("value")
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show()
            var obj = document.getElementsByClassName('dessert_check');
            for (var i = 0; i< obj.length; i++){
                obj[i].checked = false;
            }

        });
    })

変更

背景画面に動画を入れたいので、背景画面を修正しました.
「body-wrapper」クラスと「video bg」クラスが生成され、背景画面の代わりにビデオファイルが使用されるようになった.

<div class="body_wrapper">
    <div class="video_bg">

         <video muted autoplay loop>
            <source src="../static/video/dessert.mp4" type="video/mp4">
       </video>

    </div>
    <div class="content_wrapper" ...>
</div>

対応するcssプロパティを作成し、cssファイルを参照するために外部に移動します.
`static/index.css


body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: #0c0c0c;
}

.body_wrapper{
    background:#0c0c0c;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    z-index:1;
}
.video_bg{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
video {

    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;

}

Desertボタンを押して表示するモード実装

ユーザーは、アイテムとチェックボタンを選択し、Dessertボタンを押して、その条件を満たすメニューにモードウィンドウをランダムに表示します.

</div>
    <div class="modal">
        <div class="modal_body">

             <button class="close_btn">닫기</button>
        </div>

    </div>
</div>

false


.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0,0,0,0.4);
    z-index: 5;

}


.modal_body{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 600px;
    padding: 40px;
    background-color :rgb(255,255,255);
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba( 34, 36, 38 , 0.15);
    transform: translateX(-50%) translateY(-50%);
}

.close_btn{

    position: absolute;
    bottom:0;
    left: 50%;
    transform: translateX(-50%)  translateY(-50%);
    border: none;
    padding: 15px 30px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s;
    background-color: aliceblue;
    color:#a5d8ff;
}

.close_btn:hover{
    letter-spacing: 2px;
    transform: scale(1.2) translateX(-50%)  translateY(-50%); ;


    cursor: pointer;
}

現状

Reference

この問題について(スパルタWebページ開発総合半ホームページ画面), 我々は、より多くの情報をここで見つけました https://velog.io/@jhs000123/스파르타-웹개발-종합반-메인-페이지-화면

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[今日の珂太練習場]-白俊1024

[Terraform] 1. インストール(on Window 11)