후후 .. 정말 자격증 때문에 일주일동안 블로그에 소홀했었다 소홀한 만큼 자격증을 잘했어야했을텐데!! 아주 그냥 망해버렸다 !! 다시 자격증 공부 열심히 하구 ! 블로그도 열심히 챙겨야겠다 ^_^
많이 사용하는 modal과 slider를 구현해보는 시간을 가져보았다
modal은 포트폴리오에 자주 출몰하는 녀석이라 한다 ... 곧 포트폴리오를 만들어야한다니 눈물이 나온다 😥
<결과화면>
<modal-prac.html>
<!--
우리가 할 부분
1. view 버튼을 누르면 모달이 껐다 켜진다
2. X 버튼을 누르면 모달이 껐다 켜진다
3. 모달 바깥 부분(overlay)을 누르면 모달이 꺼진다
머리를 돌려보자
1. 사용자가 on/off 버튼을 클릭한다 > 버튼을 준비한다 > view, x button, overlay
2. on/off 정보를 받는다 > :choeck로 신호를 인지한다 > psedu class(가상 클래스)
3. on/off를 실행시킨다 > modal을 보여준다 > opacity:1,
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>modal prac</title>
<style>
/* event catch */
img {
max-width: 100%;
}
input[id=modalBtn] {
display: none;
}
input[id=modalBtn]:checked ~ .modal-container {
display: block;
}
input[id=modalBtn] + label {
border: 1px solid #000;
display: inline-block;
width: 100px;
text-align: center;
height: 50px;
line-height: 50px;
background: dodgerblue;
border-radius: 5px;
z-index: 2;
text-align: center;
}
/* modalContainer */
.modal-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 217, 0, 0.342);
z-index: 10;
display: none;
}
/* modal box */
.modal-box {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 300px;
height: 300px;
background: #fff;
border-radius: 5px;
z-index: 2;
text-align: center;
}
/* overlay */
.modal-container > label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(128, 0, 128, 0.137);
z-index: 1;
}
/* close Btn */
.modal-box > label {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
background: #fff;
text-align: center;
/* line-height: 14px; */
width: 20px;
height: 20px;
border-radius: 50%;
z-index: 3;
cursor: pointer;
}
.modal-box h1 {
text-align: center;
font-size: 17px;
margin: 20px 0;
}
/* 하나의 inline요소 */
.modal-box button {
outline: none;
border: none;
color: #999;
width: 50px;
font-size: 10px;
background: #333;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="checkbox" id="modalBtn">
<label for="modal-btn">view</label>
<div class="modal-container">
<div class="modal-box">
<label for="modal-btn">x</label>
<h1>파리행 티켓을 구매하시겠습니까?</h1>
<img src="./image/paris-bg.jpg" alt="">
<div class="description"></div>
<button onclick="prompt('go paris')">no</button>
<button>yes</button>
</div>
<label for="modal-btn"></label>
</div>
</body>
</html>맨 윗부분엔 뭘 해야될지 적어두면 좋다고 한다! 하나의 문서니까 부연설명이 있으면 좋다는 이야기인거같다!
modal을 하면서 가장 많이 헷갈렸던 부분이 셀렉터 지정하는 부분인 거 같다 분명 저번달쯤에 배운 거 같은데 잘 사용안하다보니 헷갈리는 듯하다 물결이 뭐였지! 플러스가 뭐였지!!! 하다가 찾아보면 아 맞당! 이런느낌...ㅎㅎ
<결과화면>
<silder.html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>silder</title>
<style>
.slider-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* button catch area */
input[name=tab] {
display: none;
}
input[id=tab1]:checked ~ .slider-view .slider-item {
top: 0;
left: 0;
}
input[id=tab2]:checked ~ .slider-view .slider-item {
top: 0;
left: -302px;
}
input[id=tab3]:checked ~ .slider-view .slider-item {
top: 0;
left: -600px;
}
/* slider area */
.slider-view {
width: 300px;
height: 300px;
overflow: hidden;
}
.slider-item {
transition: all .3s;
position: relative;
width: 900px;
}
.slider-item img {
margin-right: -6px;
vertical-align: top;
}
/* button area */
.tabBtn-box label {
background: #999;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
}
input[id=tab1]:checked ~ .tabBtnBox label[for=tab1],
input[id=tab2]:checked ~ .tabBtnBox label[for=tab2],
input[id=tab3]:checked ~ .tabBtnBox label[for=tab3] {
background: coral;
}
label[for*=tab] {
cursor: pointer;
}
.tab-btn-box {
text-align: center;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="slider-container">
<!-- button catch area -->
<input type="radio" name="tab" id="tab1" checked>
<input type="radio" name="tab" id="tab2">
<input type="radio" name="tab" id="tab3">
<!-- slider area -->
<div class="slider-view">
<div class="slider-item">
<img src="https://raw.githubusercontent.com/parkhanseong/green-web-class/main/self-practice/image/float/float-item.png" alt="">
<img src="https://raw.githubusercontent.com/parkhanseong/green-web-class/main/self-practice/image/float/float-item2.png" alt="">
<img src="https://raw.githubusercontent.com/parkhanseong/green-web-class/main/self-practice/image/float/float-item3.png" alt="">
</div>
</div>
<!-- button area -->
<div class="tab-btn-box">
<label for="tab1"></label>
<label for="tab2"></label>
<label for="tab3"></label>
</div>
</div>
</body>
</html>뿌듯!
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_63] fullscreen-slider 만들기 (0) | 2021.05.04 |
|---|---|
| [코딩 공부_62] modal과 slider를 함께 응용하기 (0) | 2021.05.03 |
| [코딩 공부_60] 메인 페이지 실습하기 (0) | 2021.05.01 |
| [코딩 공부_59] the space project-2, 코딩하기 (0) | 2021.04.27 |
| [코딩 공부_58] the space project-1, 기획하기 (0) | 2021.04.23 |
댓글