スパルタWebページ開発総合半ホームページ画面
57922 ワード
ホームページ画面を作成します.
前の計画資料の画面設計を参考に作成します.あなたが望むデザートの種類を選ぶと、それに関連する特性が現れます.プロパティを選択した後、下部の「Dessert」ボタンを押すと、条件を満たすスイーツリストの1つをランダムに出力するモードウィンドウが表示されます.
メインスクリーン
練習用にindexにdivを作成します.
選択したアイテムのvalue値を読み込み、クラス名が追加されたクラス名を読み込む変数を宣言します.
この変数以外のすべてのdivを非表示にし、選択したアイテムのみを表示します.
次に、各プロジェクトにプロパティ付きのボタンを生成します.
アイテムをチェックすると、テキストではなくチェックボックスが印刷されます.
ユーザーが1つのプロジェクトと1つのチェックボックスを選択した場合、そのプロジェクトのチェックボックスを選択し、別のプロジェクトのradiobuttonをクリックすると、初期化操作が行われます.他のプロジェクトのcheckbox値を追加できないため、1つのプロジェクトのcheckbox値に基づいてデータベースに必要な値を表示することを目的とします. radioButtonをチェックするたびに、残りの
したがって,以前に記述した
変更
前の計画資料の画面設計を参考に作成します.あなたが望むデザートの種類を選ぶと、それに関連する特性が現れます.プロパティを選択した後、下部の「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を出力して条件を示す必要があります.
<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>
練習用に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値に基づいてデータベースに必要な値を表示することを目的とします.
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
<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>
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;
}
</div>
<div class="modal">
<div class="modal_body">
<button class="close_btn">닫기</button>
</div>
</div>
</div>
.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