Front-end 국비지원 #039일

JooSehyun·2022년 12월 11일

반응형 페이지 1-5

결과

HTML

<section id="titleBox" class="title-box">
				<h2 class="section-title">좋은 디자인 맛을 내는 풍부한 재료들까지</h2>
				<p class="section-p">
					망고보드의 디자인 툴로 망고보드의 다양한 재료들을 조리하면 <br>
					어떤 맛의 디자인도 완성할 수 있습니다.
				</p>
			</section>
			<section id="slickBanner" class="slick-banner-box">
				<div class="container">
					<div class="bxslider">
						<div><img src="./images/main_img01.png" title="main_img01"></div>
						<div><img src="./images/main_img02.png" title="main_img02"></div>
						<div><img src="./images/main_img03.png" title="main_img03"></div>
					</div>
				</div>
			</section>
			<section id="dynamic" class="dynamic">
				<div class="container">
				<h2><img src="./images/dynamic.png" alt="dynamic"></h2>
				<h3>시선을 사로잡는 다이나믹 콘텐츠도 쉽게 만드세요</h3>
				<h4>클릭 몇 번만 하면, 반복해서 움직이는 콘텐츠로 변합니다.</h4>
				
					<div class="dynamic_banner">
						<ul>
							<li>
								<a href="#">
									<img src="./images/d_blog.png" alt="blog">
								</a>
							</li>
							<li>
								<a href="#">
									<img src="./images/d_insta.png" alt="insta">
								</a>
							</li>
							<li>
								<a href="#">
									<img src="./images/d_facebook.png" alt="facebook">
								</a>
							</li>
							<li>
								<a href="#">
									<img src="./images/d_shopping.png" alt="shopping">
								</a>
							</li>
						</ul>
					</div>
					<div class="link"><a href="#">자세히보기</a></div>
				</div>
			</section>

CSS

#titleBox{width: 100%; padding: 60px 0;}
#slickBanner{width: 100%; height: auto; background: #555;}
#dynamic{width: 100%; height: auto; background: #fcce01;}

/* titleBox */
.title-box{text-align: center;}
.title-box h2{font-size: 40px; color: #1e1e1e; margin-bottom: 30px;}
.title-box p{font-size: 18px; color: #777;}

.bx-wrapper{box-shadow: none; border: none; background: #555; margin-bottom: 0;}
.bx-wrapper .bx-pager{bottom: 50px;}
.bx-wrapper .bx-pager.bx-default-pager a.active{
    background: #fcc201;}
.bx-wrapper .bx-pager.bx-default-pager a{background: #666;}
.bx-wrapper .bx-pager.bx-default-pager a:hover{background: #666;}


/* dynamic */
.dynamic{text-align: center;}
.dynamic>div{padding: 60px 0;}
.dynamic h3{font-size: 40px; color: #fff; line-height: 150%; margin-bottom: 5px; margin-top: 10px;}
.dynamic h4{font-size: 25px; color: #555;}
.dynamic .dynamic_banner{margin-top: 45px;}
.dynamic .dynamic_banner ul{display: flex; justify-content: space-between;}
.dynamic .dynamic_banner ul li{width: 25%;}
.dynamic .link{text-align: right; padding: 10px 0;}
.dynamic .link a{text-decoration: underline;}

@media screen and (max-width: 950px){
    .dynamic .dynamic_banner ul li{text-align: center;}
    .dynamic .dynamic_banner ul li img{width: 98%;}
    }
@media screen and (max-width: 720px){
#titleBox{padding: 30px 0;}
    .title-box h2{font-size: 30px;}
    .title-box p{font-size: 16px;}

    #dynamic{height: auto;}
    .dynamic .dynamic_banner ul{flex-wrap: wrap;}
    .dynamic .dynamic_banner ul li{width: 50%;}

    .dynamic h3{font-size: 22px;}
    .dynamic h4{font-size: 18px;}
}

Script

//bx slider 
  $('.bxslider').bxSlider({
    mode: 'fade',
    auto: true
});

bx slider (슬라이더)

오늘 만든 슬라이드 중에서는 'bx slider'를 이용하여 슬라이드를 구현하였다. 'bx slider' 사용법을 알아보자

bx slider 사용법

bx slider 를 검색하여 https://bxslider.com/ 에 들어간다.

Examples 을 선택한다.

두가지 Examples 중에 선택을 한다.

1번은 fade 모드로 슬라이드로 넘어가는게 아니라 사라지면서 다음 슬라이드가 나타나는것

2번은 기존에 슬라이드 모드로 왼쪽으로 넘어가면서 다음 슬라이드가 나타나는것

Examples 하단에 JS와 HTML이 있다. 복사하여 코드에 붙여넣는다

CSS 링크도 복사하여 link에 복사한다. (github에 들어가면 사용순서가 있다.)

바로위에 있는 script도 복사하여 스크립트 영역에 복사한다.

Script에 JS: 를 복사하여 붙여넣어 준다. 슬라이드는 작동한다.

결과

JavaScript

html Element

결과

HTML

<div id="wrap">
        Text:
        <br>
        <input type="text" id="text1" value="abc" size="40">
        <br>
        <hr>
        관심사 (checkbox):
        <br>
        <label><input type="checkbox" name="chk_interest" value="it"> IT/컴퓨터</label>
        <label><input type="checkbox" name="chk_interest" value="sports"> 스포츠</label>
        <label><input type="checkbox" name="chk_interest" value="shoping"> 쇼핑</label>
        <label><input type="checkbox" name="chk_interest" value="book" checked="checked"> 도서</label>
        <label><input type="checkbox" name="chk_interest" value="entertainment"> 엔터테인먼트</label>
        <br>
        <hr>
        동의 (radio):
        <br>
        <label><input type="radio" name="radioY" value="Yes"> 동의</label>
        <label><input type="radio" name="radioY" value="No"> 비동의</label>
        <br>
        <hr>
        선택 (select):
        <br>
        <select id="select1">
            <option value="Korea">Korea</option>
            <option value="China">China</option>
            <option value="Japan">Japan</option>
        </select>
        <br>
        <hr>
        <div id="el">
            <h1>제목</h1>
        </div>
        <br>
        <hr>
        <button type="button" onclick="save();">저장</button>
    </div>

CSS

#wrap{width: 500px; border: 5px solid #ddd; margin: 50px auto; padding: 30px;}

Script

function save(){
	let saveText=document.getElementById('text1').value='다가와';
    console.log(saveText);
    
    //checkBox checked 확인
    let saveCheckbox1=document.querySelector("[name=chk_interest]:checked");
    console.log(saveCheckbox1.value);
    
    //radio button
    let saveRadio=document.querySelector("[name=radioY]:checked");
    console.log(saveRadio)
    
    //select
    let saveSelect=document.getElementById('select1');
    console.log(saveSelect.value);
	console.log(document.getElementById('el').innerText)//text= 텍스트만 html=<h2>텍스트만<h2>
}

ID : text1 의 밸류 값을 기존 abc로 되어있는 값을 다가와 로 바꾼다.
let saveText=document.getElementById('text1').value='다가와';
    console.log(saveText);

html 관심사 (checkbox)의 input요소의 name은 chk_interest이다. 쿼리셀렉터를 선택하여 checked가 된 값을 콘솔로그에 나타나게 한다.
let saveCheckbox1=document.querySelector("[name=chk_interest]:checked");
    console.log(saveCheckbox1.value);

html의 선택 (select Box) 의 값을 나타나게 한다.
let saveSelect=document.getElementById('select1');
    console.log(saveSelect.value);

콘솔로그창

Html Event

결과

HTML

<div id="wrap">
        focus / blur<br>
        <br>
        <input type="text" id="text1" onfocus="onFocus1();" onblur="onblur1(this);">
        <br>
        <hr>
        <select id="select1" onchange="eventChange();">
            <option value="남자">남자</option>
            <option value="여자">여자</option>
        </select>
        <br>
        <hr>
        keydown
        <br>
        <input type="text" id="text2" onkeydown="eventKeydown();"><!-- keydown, keypress, keyup -->
        <button onclick="eventSave();">click</button>
    </div>

CSS

#wrap{width: 500px; border: 5px solid #ddd; margin: 50px auto; padding: 30px;}

Script

function onFocus1(){
            console.log('안녕하세요')
        }
        function onblur1(obj){
            if(obj.value==""){
                alert('필수입력값입니다.')
            }else{
                console.log(obj.value)
            }
        }
        function eventChange(){
            let selectValue=document.getElementById("select1").value;
            console.log(selectValue);
        }
        function eventKeydown(e){
            console.log(event.key)
            
        }
        function eventSave(){
            console.log("반갑습니다.")
        }

html input 요소 id ="text1" 에 속성에는 onfocus가 있다. 포커스가 되면 콘솔로그에 '안녕하세요'가 나타난다.
onFocus1(){
            console.log('안녕하세요')

html input 요소 id ="text1" 에 속성에는 onblur가 있다. if문에 obj.value=="" 비어있다면 alert창에 필수 입력값입니다. 라고 나타나게 한다. 그것이 아니라면 obj의 밸류값을 콘솔로그에 나타나게 한다.
function onblur1(obj){
            if(obj.value==""){
                alert('필수입력값입니다.')
            }else{
                console.log(obj.value)
            }
        }

html select box를 선택하여 select 된 값을 콘솔로그에 나타나게 한다.
function eventChange(){
            let selectValue=document.getElementById("select1").value;
            console.log(selectValue);
        }

html input요소의 id= text2를 선택하여 onkeydown속성을 부여했고 인풋창에 keydown된 값을 콘솔로그에 나타나게 한다.
        function eventKeydown(e){
            console.log(event.key)
        }

마지막 click 버튼을 클릭하면 반갑습니다 라는 콘솔로그가 나온다.
function eventSave(){
            console.log("반갑습니다.")
        }

Html phone

정규식을 html에 넣어 적용한다.

결과

HTML

<div id="wrap">
        <input type="text" id="tel1" maxlength="3" onkeydown="checkNum(event, this.value)" onkeyup="next(this.value, 3, 'tel2')" required pattern="^01[0-9]{1}">
        <input type="text" id="tel2" maxlength="4" onkeydown="checkNum(event, this.value)" onkeyup="next(this.value, 4, 'tel3')" required pattern="[0-9]{4}">
        <input type="text" id="tel3" maxlength="4" onkeydown="checkNum(event, this.value)" required pattern="[0-9]{4}">
    </div>

CSS

        #wrap{width: 600px; padding: 30px; margin: 50px auto; border: 5px solid #ddd;}
        input:invalid{border: 1px solid #f00;}

Script

function next(val, len, nexId){
            if(val.length==len){
                document.getElementById(nexId).focus();
            }
        }
        function checkNum(event){
            let key=event.key;
            //console.log(key)
            if(key >=0 && key <10 || key=='backspace'){
                return true;
            }else{
                event.preventDefault();
            }
        }

html에 각 input에 maxlength="x"를 넣어 x의 자리를 넘어가면 더이상 입력이 되지 않게 적용한다.

자바스크립트에 next(value, length, 변수)를 적어준다. 적용된 밸류와 length값이 되면 다음 input으로 focus가 된다.
function next(val, len, nexId){
            if(val.length==len){
                document.getElementById(nexId).focus();
            }
        }

form 회원가입 페이지 제작

결과

HTML

<h1>회원가입</h1>
    <fieldset>
        <legend>회원가입</legend>
        <form action="result.html" method="post" name="form1">
            <ul>
                <li>
                    <label for="id1" class="w">아이디</label>
                    <input type="text" required size="30" id="id1">
                </li>
                <li class="alert_li"><span class="alert" id="id1Msg"></span></li>
                <li>
                    <label for="pw" class="w">비밀번호</label>
                    <input type="text" required size="30" id="pw1">
                </li>
                <li class="alert_li"><span class="alert" id="pw1Msg"></span></li>
                <li>
                    <label for="pw" class="w">비밀번호확인</label>
                    <input type="text" required size="30" id="pw2">
                </li>
                <li class="alert_li"><span class="alert" id="pw2Msg"></span></li>
                <li>
                    <label for="name1" class="w">이름</label>
                    <input type="text" required size="30" id="name1">
                </li>
                <li class="alert_li"><span class="alert" id="name1Msg"></span></li>
                <li>
                    <span class="w">성별</span>
                    <label for="m">남</label>
                    <input type="radio" name="gender" id="m">
                    <label for="f">여</label>
                    <input type="radio" name="gender" id="f">
                </li>
                <li class="alert_li"><span class="alert" id="gender1Msg"></span></li>
                <li>
                    <label for="email1" class="w">이메일</label>
                    <input type="email" required size="30" id="email1"> 
                </li>
                <li class="alert_li"><span class="alert" id="email1Msg"></span></li>
                <li>
                    <label for="tel1" class="w">전화번호</label>
                    <input type="text" required size="30" id="tel1"> 
                </li>
                <li class="alert_li"><span class="alert" id="tel1Msg"></span></li>
                <li>
                    <input type="submit" class="blank" value="회원가입" id="submit">
                </li>
            </ul>
        </form>
    </fieldset>

CSS

        ul{list-style: none; padding: 0; margin: 0; text-align: center;}
        h1{text-align: center; font-size: 18px; color: rgb(108, 19, 225);}
        fieldset{width: 600px; border: 5px solid #eee; margin: 20px auto; padding: 30px; box-sizing: border-box;}
        legend{display: none;}
        li{height: 40px; border-bottom: 1px solid #ddd; line-height: 20px; /* margin-bottom: 20px; */}
        li:last-child{padding-top: 30px; border: none; text-align: center;}
        .w{width: 120px; display: block; float: left;}
        input{padding: 3px; border: 1px solid #ccc;}
        #submit{border: none; background: rgb(124, 95, 254); color: #fff; padding: 10px 20px;}
        .alert{display: inline-block; margin-left: 20px; font-size: 12px;}
        .alert_li{height: 30px;}

Script

const id1=document.getElementById('id1');

let pw1=document.getElementById('pw1');
let pw2=document.getElementById('pw2');
let name1=document.getElementById('name1');

let email1=document.getElementById('email1');

let tel1=document.getElementById('tel1');

let id1Msg=document.getElementById('id1Msg')
let pw1Msg=document.getElementById('pw1Msg')
let pw2Msg=document.getElementById('pw2Msg')
let gender1Msg=document.getElementById('gender1Msg')

let regId=/^[A-Z][a-zA-Z0-9]{4,}$/; //아이디
let regPw1=/^.*(?=^.{8,16})(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&*]).*$/;//비밀번호
let regName1=/^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]{3,}$/;
let regEmail1=/^[a-zA-Z0-9]([-_.]?[0-9a-zA-Z])*@[a-zA-Z0-9]([-_.]?)[a-zA-Z0-9]*.[a-zA-Z]{2,3}$/g;
let regPhone1=/(^01[016789]{1})([0-9]{3,4})[0-9]{4}$/g;

id1.addEventListener("blur", function(){
    if(!regId.test(id1.value)){
        id1Msg.style.color='red';
        id1Msg.innerHTML="아이디는 5글자 이상이고 첫글자가 대문자이고 영문자, 숫자만 가능"
        id1.value="";
    }else{
        id1Msg.style.color='green';
        id1Msg.innerHTML="사용가능한 아이디입니다."
    }
});
pw1.addEventListener("blur", function(){
    if(!regPw1.test(pw1.value)){
        pw1Msg.style.color='red';
        pw1Msg.innerHTML="특수문자, 문자, 숫자 포함하고 8~16 이내의 값만 가능"
        pw1.value="";
    }else if((pw1.value=='') && (pw2.value =='')){
        pw1Msg.innerHTML=""
    }
    
    else{
        pw1Msg.style.color='green'
        pw1Msg.innerHTML="사용가능한 형식입니다."
    }
});
pw2.addEventListener("focus", function(){
    if(document.getElementById('pw1').value==""){
        alert("패스워드를 입력해주세요"); 
        document.getElementById('pw1').focus();
    }
});
pw2.addEventListener("blur",function(){
    if(pw1.value !=pw2.value){
        pw2Msg.style.color='red';
        pw2Msg.innerHTML="비밀번호가 일치하지 않습니다."
        return false;
    }else{
        if((pw1.value=='') && (pw2.value =='')){
            pw2Msg.innerHTML=""
        }else{
            pw2Msg.style.color="green"
            pw2Msg.innerHTML="비밀번호가 일치합니다."
        }
    }
});
name1.addEventListener("blur",function(){
    if(!regName1.test(name1.value)){
        name1Msg.style.color='red'
        name1Msg.innerHTML=("한글 영문 3~10자 가능");
        name1.value="";
    }
});


email1.addEventListener("blur",function(){
    if(!regEmail1.test(email1.value)){
        email1Msg.style.color='red'
        email1Msg.innerHTML="이메일 규칙에 어긋납니다."
        email1.value="";
    }else{
        email1Msg.style.color='green'
        email1Msg.innerHTML="아주 좋습니다."
    }
});

tel1.addEventListener("blur",function(){
    if(!regPhone1.test(tel1.value)){
        tel1Msg.style.color='red'
        tel1Msg.innerHTML="정확히 입력해주세요."
        tel1.value="";
    }else{
        tel1Msg.style.color='green'
        tel1Msg.innerHTML="아주 좋습니다."
    }
});
document.getElementById('submit').addEventListener('click',function(){
    if(document.querySelector('[name=gender]:checked')==null){
        alert("성별을 체크하세요")
        document.getElementById("name1").focus();
        return false;
    }
    if(id1.value==""){
        alert("아아디를 입력하세요.")
        return false;
    }else{
        if(!regId.test(id1.value)){
            alert("아이디는 5글자 이상이고 첫글자가 대문자이고 영문자, 숫자만 가능");
            id1.value="";
            return false;
        }else{
            if(pw1.value==""){
                alert("비밀번호를 입력해주세요.")
                return false;
            }else{
            }
        }
    }
});

JooSehyun

이전 포스트

Front-end 국비지원 #038일

다음 포스트

Front-end 국비지원 #039일

반응형 페이지 1-5

bx slider (슬라이더)

bx slider 사용법

JavaScript

html Element

Html Event

Html phone

form 회원가입 페이지 제작

Front-end 국비지원 #038일

Front-end 국비지원 #040일

0개의 댓글