숨만쉬어도 귀여운타입:D

자바스크립트 패럴랙스-08, 09 가로스크롤효과

grovy — Thu, 1 Jun 2023 02:45:34 +0900

패럴랙스효과를 나타내기

css 소스는 요기

body를 볼게요 !

<main id="main">
        <div class="parallaxs__wrap">
            <section id="section1" class="parallaxs__item">
                <span class="parallaxs__item__num">01</span>
            </section>
            <!-- //section1 -->
            <section id="section2" class="parallaxs__item">
                <span class="parallaxs__item__num">02</span>
            </section>
            <!-- //section2 -->
            <section id="section3" class="parallaxs__item">
                <span class="parallaxs__item__num">03</span>
            </section>
            <!-- //section3 -->
            <section id="section4" class="parallaxs__item">
                <span class="parallaxs__item__num">04</span>
            </section>
            <!-- //section4 -->
            <section id="section5" class="parallaxs__item">
                <span class="parallaxs__item__num">05</span>
            </section>
            <!-- //section5 -->
            <section id="section6" class="parallaxs__item">
                <span class="parallaxs__item__num">06</span>
            </section>
            <!-- //section6 -->
            <section id="section7" class="parallaxs__item">
                <span class="parallaxs__item__num">07</span>
            </section>
            <!-- //section7 -->
            <section id="section8" class="parallaxs__item">
                <span class="parallaxs__item__num">08</span>
            </section>
            <!-- //section8 -->
            <section id="section9" class="parallaxs__item">
                <span class="parallaxs__item__num">09</span>
            </section>
            <!-- //section9 -->
        </div>
    </main>

위처럼 body영역엔 이미지만 넣어줬어요 !

따로 css를 전부 빼서 작업했어요

script 부분을 볼게용

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        const parallaxCont = document.querySelector(".parallaxs__wrap");
        function scroll(){
            let scrollTop = window.pageYOffset;
            let parallaxWidth = parallaxCont.offsetWidth;
            document.body.style.height=parallaxWidth+'px';

            let viewWidth = parallaxWidth-window.innerWidth;
            let viewHeight = parallaxWidth-window.innerHeight;
            let goLeft = scrollTop* (viewWidth/viewHeight);

            gsap.to(parallaxCont, {left:-goLeft, ease:"power4.out"})

            document.querySelector(".scroll span").innerHTML=Math.round(scrollTop);
            requestAnimationFrame(scroll);
        }
        scroll();
    </script>

가로값 = 세로값으로 세팅하여

세로값이 바뀔때 가로로 스크롤하게 하였습니다 !

아래는 세로>>가로>>세로 효과를 볼거에요 !

    <main id="main">
        <div class="parallaxs__wrap">
            <section id="section1" class="parallaxs__item">
                <span class="parallaxs__item__num">01</span>
            </section>
            <!-- //section1 -->
            <section id="section2" class="parallaxs__item">
                <span class="parallaxs__item__num">02</span>
            </section>
            <!-- //section2 -->
            <section id="section3" class="parallaxs__item">
                <span class="parallaxs__item__num">03</span>
            </section>
            <!-- //section3 -->
            <section id="section4" class="parallaxs__item">
                <div class="sec4">
                    <article><span class="parallaxs__item__num">04-1</span></article>
                    <article><span class="parallaxs__item__num">04-2</span></article>
                    <article><span class="parallaxs__item__num">04-3</span></article>
                </div>
            </section>
            <!-- //section4 -->
            <section id="section5" class="parallaxs__item">
                <span class="parallaxs__item__num">05</span>
            </section>
            <!-- //section5 -->
            <section id="section6" class="parallaxs__item">
                <span class="parallaxs__item__num">06</span>
            </section>
            <!-- //section6 -->
            <section id="section7" class="parallaxs__item">
                <span class="parallaxs__item__num">07</span>
            </section>
            <!-- //section7 -->
            <section id="section8" class="parallaxs__item">
                <span class="parallaxs__item__num">08</span>
            </section>
            <!-- //section8 -->
            <section id="section9" class="parallaxs__item">
                <span class="parallaxs__item__num">09</span>
            </section>
            <!-- //section9 -->
        </div>
    </main>

구조는 위처럼 만들었구요

가로스크롤하는부분은 sec4div에 3개의 화면이 보이게 했어요

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        const secion4 = document.querySelector("#section4").offsetTop;
        function scroll(){
            let scrollTop = window.pageYOffset;
            let goLeft = scrollTop - document.querySelector("#section4").offsetTop
            if(scrollTop >= secion4){
                gsap.to(".sec4", {left: -goLeft, ease: "linear"})
            }
            document.querySelector(".scroll span").innerHTML = Math.round(scrollTop);
            requestAnimationFrame(scroll);
        }
        scroll();
    </script>

전체 세로 길이값에서 4번째div의 높이에 온다면

gsap를 이용해서 가로로 이동시켜 줍니다 이게 왜 되냐면

가로로 스크롤을 한다고 생각을 하지만

실제로는

section은 세로가 400vh이고 이 400vh를 스크롤할때

.sec4에서 flex로 3개의 화면을 붙여 옆으로 이동시킵니다

보이는건 sec4에서 position:fixed효과로 article이 옆으로 나와요

#section4 {
    background-color: #444;
    height: 400vh;
    z-index: 4000;
}
#section4 .sec4 {
    position: fixed;
    left: 0;
    top: 0;
    width: 400vh;
    height: 100%;
    display: flex;
}
#section4 .sec4 article {
    width: 200vh;
    height: 100vh;
    position: relative;
}

그래서

세로로 스크롤은 하지만 내려가는건 보이지 않고

가로방향으로 4-1 4-2 4-3이 차례대로 이동하는모습만 보이고

내려갑니다

포폴용 참고 사이트 !

grovy — Sun, 28 May 2023 22:11:53 +0900

https://www.hellomonday.com/

Hello Monday

Hello Monday is a creative studio in New York, Copenhagen, and Aarhus that handcrafts digital (and magical) products, brands, and experiences.

www.hellomonday.com

마우스 커스가 돋보이는 사이트 !

https://wantedfornothing.com/

Wanted For Nothing | Top Rated Web Design Agency Los Angeles

Wanted for Nothing is a Los Angeles based tactical design agency that focuses on UX/UI, websites, custom web applications and eCommerce solutions.

wantedfornothing.com

구조가 멋진 사이트 !

https://www.tmvdesignstudio.com/

TMV STUDIO DESIGN®

With our deep understanding of user experience and Design, we are committed to creating websites that not only look unique but also function flawlessly. Our expertise in Webflow and Figma allows us to build powerful and responsive experiences that are tail

www.tmvdesignstudio.com

페럴렉스 효과가 멋진 사이트 !

https://abeautifulmess.co/

Home | A Beautiful Mess

from nothing, something beautiful was born, like it was a miracle. mother dearest, you are radiant.

abeautifulmess.co

img에 이질감이 특이한 사이트!

https://valkyrae.basement.studio/

Valkyrae Store

Debut clothing line from creator Valkyrae Radiant Spirits Collection // One week only.

valkyrae.basement.studio

사진에 마우스오버효과가 독특한 사이트 !

https://www.samuelsiebler.com/

time to meet sam

I'm Samuel Siebler or simply Sam, an award-winning freelance Digital Designer. My goal is to create outstanding digital experiences, improve every day and have fun. I'm Samuel Siebler or simply Sam, an award-winning freelance Digital Designer. I focus on c

www.samuelsiebler.com

페럴렉스효과 미쳤음 !

https://www.brucemaudesign.com/

Bruce Mau Design

BMD works across disciplines, sectors and cultures to create unmistakable brand experiences that propel organizations forward.

www.brucemaudesign.com

시작시 시강효과 !

https://thebrandstorm.com

TheBrandstorm - Brand Architects

We create, develop and produce brand architecture. This vision, associated with creation, has consistently been the key to the success of the company. From then on, the development of concepts of brand architecture and retail design have been rolling out w

thebrandstorm.com

시작시 문구 change 효과 가 멋진 사이트 !

https://oasisgracebay.com/

The Oasis at Grace Bay

Welcome to The Oasis at Grace Bay, where contemporary, modern design meets luxurious and affordable accommodations.

oasisgracebay.com

이미지 호버 효과

https://react.gg/

The interactive way to master modern React – react.gg

The interactive way to master modern React — from the team at ui.dev.

react.gg

포폴용 디자인...컨셉으로 괜찮은 사이트

https://igma.im/

Igor Mahr — Design and Development

Design and Development

igma.im

포폴용 디자인

https://optimistcreativeindia.com/our-story

어떻게 만든지 모르겠는 사이트 !

웹디자인 기능사 연습문제 3

grovy — Fri, 19 May 2023 23:36:30 +0900

웹디 실기 연습사이트를 만들어 봤어요 !

캡쳐 이미지와 같은 느낌으로 만들었구요

iframe으로 가져오니 화면이 짤리네요 ㅜㅜㅜ

전체소스 보기는 요기루

오느른 스크립트만 보구 갈게용

$(function(){
    let currentIndex = 0;
    $(".sliderWrap").append($(".slider").first().clone(true));
    setInterval(function(){
        currentIndex++;
        $(".sliderWrap").animate({marginLeft:-100*currentIndex + "%"},600);
        if(currentIndex == 3){
            setTimeout(function(){
                $(".sliderWrap").animate({marginLeft:0},0);
                currentIndex = 0 ;
            },700)
        }
    },3000);

    $(".nav > ul > li").mouseover(function(){
        $(this).find(".submenu").stop().slideDown(200);
    });
    $(".nav > ul > li").mouseout(function(){
        $(this).find(".submenu").stop().slideUp(200);
    });

});

위 이미지를 jquery를 이용해서 처리했어요 슬라이드&sub메뉴를 요렇게 처리했습니다.

PHPPHP + MAMP사이트 만들기 - 기초5 (회원가입유효성 ajax체크)

grovy — Mon, 15 May 2023 23:58:29 +0900

Ajax를 이용해서 각 input 박스를 체크해봤어요 !

모든소스는 요기에 !

입력 양식은 이렇구요 !

아래 이미지처럼 포커스를 out 했을때 작동하게 만들었어요 !

php 부분을 볼게요 html과 똑같아요 !

<div class="join__form">
    <form action="#" name="#" method="post" onsubmit="return joinChecks()">
        <fieldset>
            <legend class="blind">회원가입 영역</legend>
            <div>
                <label for="memberID"></label>
                <input type="text" id="memberID" name="memberID" class="inputStyle" placeholder="아이디">
                <p class="joinChkmsg" id="memberIDComment"></p>
            </div>
            <div>
                <label for="youPass"></label>
                <input type="password" id="youPass" name="youPass" class="inputStyle" placeholder="비밀번호">
                <p class="joinChkmsg" id="youPassComment"></p>
            </div>
            <div>
                <label for="youPassC"></label> 
                <input type="password" id="youPassC" name="youPassC" class="inputStyle" placeholder="비밀번호 확인">
                <p class="joinChkmsg" id="youPassCComment"></p>
            </div>
            <div>
                <label for="youName"></label>
                <input type="text" id="youName" name="youName" class="inputStyle" placeholder="이름">
                <p class="joinChkmsg" id="youNameComment"></p>
            </div>
            <div>
                <label for="youPhone"></label>
                <input type="text" id="youPhone" name="youPhone" class="inputStyle" placeholder="휴대폰번호">
                <span id="chkPhone"></span>
                <p class="joinChkmsg" id="youPhoneComment"></p>
            </div>
            <div>
                <label for="nickName"></label>
                <input type="text" id="nickName" name="nickName" class="inputStyle" placeholder="닉네임">
                <span id="chkNickName"></span>
                <p class="joinChkmsg" id="nickNameComment"></p>
            </div>
            <div>
                <label for="youBirth"></label>
                <input type="text" id="youBirth" name="youBirth" class="inputStyle" placeholder="생년월일">
                <p class="joinChkmsg" id="youBirthComment"></p>
            </div>
            <div>
                <label for="youGender"></label>
                <select type="text" id="youGender" name="youGender" class="inputStyle" placeholder="성별">
                    <option value="">성별 선택</option>
                    <option value="1">남</option>
                    <option value="2">여</option>
                </select>
            </div>
            <button type="submit" class="btnStyle3">회원가입 완료</button>
        </fieldset>
    </form>
</div>

위에서 각각의 id값을 각각의 input박스에 설정해줬어요 !

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>

    let isEmailCheck = false;
    let isNickCheck = false;
    let isPhoneCheck = false;
    let isNameCheck = false;
    let isBirthCheck = false;
    let isPassCheck = false;


    // 아이디 유효성 검사
    function chkMemberId(){
        isEmailCheck = false;
        let getmemberID =  RegExp(/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([\-.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i);
        $("#memberIDComment").addClass("red");
        if($("#memberID").val() == ''){
            $("#memberIDComment").text("* 아이디를 입력해주세요!");
            $("#memberID").focus();
            return false;
        }else if(!getmemberID.test($("#memberID").val())){
            $("#memberIDComment").text("* 아이디 형식에 맞게 작성해주세요! aaa@gmail.com");
            $("#memberID").val('');
            $("#memberID").focus();
            return false;
        }

        $.ajax({
            type : "POST",
            url : "joinCheck.php",
            data : {"youEmail" : $("#memberID").val(), "type" : "isMemberIdChk"},
            dataType : "json",
            success : function(data){
                if(data.result == "good"){
                    $("#memberIDComment").text("* 사용 가능한 아이디 입니다");
                    $("#memberIDComment").removeClass("red");
                    $("#memberIDComment").addClass("green");
                     isEmailCheck = true;
                }else {
                    $("#memberIDComment").text("* 사용 중인 아이디 입니다");
                    $("#memberID").val('');
                     isEmailCheck = false;
                     return false;           
                }
            },
            error : function(request, status, error){
                console.log("request" + request);
                console.log("status" + status);
                console.log("error" + error);
            }
        });


    }
    // 닉네임 유효성
    function chkNickName(){
        isNickCheck = false;
        // 닉네임 유효성 검사
        $("#nickNameComment").addClass("red");
        let getnickName = RegExp(/^[가-힣|0-9]+$/);
        if($("#nickName").val() == ''){
            $("#nickNameComment").text("* 닉네임을 입력해주세요!");
            $("#nickName").focus();
            return false;
        }else if(!getnickName.test($("#nickName").val())){
            $("#nickNameComment").text("* 닉네임은 한글 또는 숫자만 사용 가능합니다.");
            $("#nickName").val('');
            $("#nickName").focus();
            return false;
        }else{
            $("#nickNameComment").removeClass("red");
            $("#nickNameComment").addClass("green");
            $("#nickNameComment").text("* 사용가능한 닉네임 입니다.");
        }
        $.ajax({
            type : "POST",
            url : "joinCheck.php",
            data : {"nickName" : $("#nickName").val(), "type" : "isNickCheck"},
            dataType : "json",
            success : function(data){
                if(data.result == "good"){
                    $("#nickNameComment").text("* 사용 가능한 닉네임 입니다");
                    $("#nickNameComment").removeClass("red");
                    $("#nickNameComment").addClass("green");
                     isNickCheck = true;
                }else {
                    $("#nickName").val('');
                    $("#nickNameComment").text("* 사용 중인 닉네임 입니다");
                    $("#nickNameComment").removeClass("green");
                    $("#nickNameComment").addClass("red");
                     isNickCheck = false;
                     return false;  
                }
            },
            error : function(request, status, error){
                console.log("request" + request);
                console.log("status" + status);
                console.log("error" + error);
            }
        });

    }
    // 핸드폰 유효성
    function chkYouPhone(){
        isPhoneCheck = false;
         $("#youPhoneComment").addClass("red");
        let getYouPhone = RegExp(/01[016789]-[^0][0-9]{3,4}-[0-9]{4}/);
        if($("#youPhone").val() == ''){
            $("#youPhoneComment").text("* 연락처를 입력해주세요!");
            $("#youPhone").focus();
            return false;
        }else if(!getYouPhone.test($("#youPhone").val())){
            $("#youPhoneComment").text("* 휴대폰 번호가 정확하지 않습니다.(000-0000-0000)");
            $("#youPhone").val('');
            $("#youPhone").focus();
            return false;
        }
        $.ajax({
            type : "POST",
            url : "joinCheck.php",
            data : {"youPhone" : $("#youPhone").val(), "type" : "isPhoneCheck"},
            dataType : "json",
            success : function(data){
                if(data.result == "good"){
                    $("#youPhoneComment").text("* 사용 가능한 전화번호 입니다");
                    $("#youPhoneComment").removeClass("red");
                    $("#youPhoneComment").addClass("green");
                    isPhoneCheck = true;
                }else {
                    $("#youPhone").val('');
                    $("#youPhoneComment").removeClass("green");
                    $("#youPhoneComment").addClass("red");
                    $("#youPhoneComment").text("* 사용 중인 전화번호 입니다");
                    isPhoneCheck = false;
                    return false;  
                }
            },
            error : function(request, status, error){
                console.log("request" + request);
                console.log("status" + status);
                console.log("error" + error);
            }
        });


    }
    // 비밀번호 유효성 검사
    function chkYouPass(){
        isPassCheck=false;

        let getYouPass = $("#youPass").val();
        let getYouPassNum = getYouPass.search(/[0-9]/g);
        let getYouPassEng = getYouPass.search(/[a-z]/ig);
        let getYouPassSpe = getYouPass.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);

        $("#youPassComment").addClass("red");
        if($("#youPass").val() == ''){
            $("#youPassComment").text("* 비밀번호를 입력해주세요!");
            $("#youPass").focus();
            return false;
            // 8~20자이내, 공백X, 영문, 숫자, 특수문자
        }else if(getYouPass.length < 8 || getYouPass.length > 20){
            $("#youPassComment").text(" * 8자리 ~ 20자리 이내로 입력해주세요");
            $("#youPass").focus();
            return false;
        } else if (getYouPass.search(/\s/) != -1){
            $("#youPassComment").text("* 비밀번호는 공백없이 입력해주세요!");
            $("#youPass").focus();
            return false;
        } else if (getYouPassNum < 0 || getYouPassEng < 0 || getYouPassSpe < 0 ){
            $("#youPassComment").text("* 영문, 숫자, 특수문자를 혼합하여 입력해주세요!");
            $("#youPass").focus();
            return false;
        }else{
            $("#youPassComment").removeClass("red");
            $("#youPassComment").addClass("green");
            $("#youPassComment").text("* 사용가능합니다");
        }
        // 비밀번호 확인 유효성 검사
        $("#youPassCComment").addClass("red");
        if($("#youPassC").val() == ''){
            $("#youPassCComment").text("* 확인 비밀번호를 입력해주세요!");
            $("#youPassC").focus();
            return false;
            // 비밀번호 동일한지 체크
        }else if($("#youPass").val() !== $("#youPassC").val()){
            $("#youPassCComment").text("* 비밀번호가 일치하지 않습니다.");
            return false;
        }else{
            $("#youPassCComment").text("");
            isPassCheck = true;
        }
    }
    //이름 유효성 검사
    function chkYouName(){
        isNameCheck=false;
        $("#youNameComment").addClass("red");
        let getYouName = RegExp(/^[가-힣]+$/);
        if($("#youName").val() == ''){
            $("#youNameComment").text("* 이름을 입력해주세요!");
            $("#youName").focus();
            return false;
        }else if(!getYouName.test($("#youName").val())){
            $("#youNameComment").text("* 이름은 한글만 사용 가능합니다.");
            $("#youName").val('');
            $("#youName").focus();
            return false;
        }else if($("#youName").val().length < 2 || $("#youName").val().length > 10){
            $("#youNameComment").text("* 이름은 2~10글자까지만 가능합니다.");
            $("#youName").val('');
            $("#youName").focus();
            return false;
        }else{
            $("#youNameComment").removeClass("red");
            $("#youNameComment").addClass("green");
            $("#youNameComment").text("* 사용가능합니다");
            isNameCheck = true;
        }
    }
    // 생년월일 유효성 검사
    function chkYouBirth(){
        isBirthCheck = false;
        $("#youBirthComment").addClass("red");
        let getYouBirth = RegExp(/^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/);
        if($("#youBirth").val() == ''){
            $("#youBirthComment").text("* 생년월일을 입력해주세요!");
            $("#youBirth").focus();
            return false;
        }else if(!getYouBirth.test($("#youBirth").val())){
            $("#youBirthComment").text("* 생년월일 형식이 정확하지 않습니다.(YYYY-MM-DD)");
            $("#youBirth").val('');
            $("#youBirth").focus();
            return false;
        }else{
            $("#youBirthComment").removeClass("red");
            $("#youBirthComment").addClass("green");
            $("#youBirthComment").text("* 사용가능합니다 !");
            isBirthCheck = true;
        }
    }

    // 윈도우 로드시 window.onload 함수 쓴것과 같음
    // 각 input스타일에서 포커스아웃할때(바깥클릭 and tab클릭)실행되게 해놓은 함수
    $( document ).ready(function() {
        $('#memberID').blur(function(){
            chkMemberId();
        });
        $('#youPass, #youPassC').blur(function(){
            chkYouPass();
        });
        $('#youName').blur(function(){
            chkYouName();
        });
        $('#youPhone').blur(function(){
            chkYouPhone();
        });
        $('#nickName').blur(function(){
            chkNickName();
        });
        $('#youBirth').blur(function(){
            chkYouBirth();
        });
    }); 


    function joinChecks(){
        if (!isEmailCheck || !isNickCheck || !isPhoneCheck || !isNameCheck || !isBirthCheck || !isPassCheck) {
        // 위 변수 중 하나라도 false일 때 실행되는 코드
        switch (false) {
                case isEmailCheck:
                    // isEmailCheck가 false일 때 실행되는 코드
                    chkMemberId();
                    break;
                case isPassCheck:
                    // isPassCheck가 false일 때 실행되는 코드
                    chkYouPass();
                    break;
                case isNameCheck:
                    // isNameCheck가 false일 때 실행되는 코드
                    chkYouName();
                    break;
                case isPhoneCheck:
                    // isPhoneCheck가 false일 때 실행되는 코드
                    chkYouPhone();
                    break;
                case isNickCheck:
                    // isNickCheck가 false일 때 실행되는 코드
                    chkNickName();
                    break;
                case isBirthCheck:
                    // isBirthCheck가 false일 때 실행되는 코드
                    chkYouBirth();
                    break;
                default:
                    break;
            }
            return false;
        }
    }
</script>

각각의 인풋박스에서 포커스 아웃할때와

가입완료를 눌렀을때 실행되게 유효성체크를 했어요 !

ajax를 사용하였을때 focus를 하니까 ...

sql 실행중에 tab키가 눌려 포커스가 변경되어 로직이 꼬이기도 했어요 ... 그래서 다 빼버린

ajax를 써서 체크하는 부분의 php도 보고갈게요 !

type에 따라 각각의 sql을 실행되요 !

<?php
    include "../connect/connect.php";
    $type = $_POST['type'];
    $jsonResult = "bad";
    
    if( $type == "isMemberIdChk"){
        $youEmail = $connect -> real_escape_string(trim($_POST['youEmail']));
        $sql = "SELECT youEmail FROM members2 WHERE youEmail = '{$youEmail}'";
    }
    if( $type == "isNickCheck"){
        $nickName = $connect -> real_escape_string(trim($_POST['nickName']));
        $sql = "SELECT nickName FROM members2 WHERE nickName = '{$nickName}'";
    }
    if( $type == "isPhoneCheck"){
        $youPhone = $connect -> real_escape_string(trim($_POST['youPhone']));
        $sql = "SELECT youPhone FROM members2 WHERE youPhone = '{$youPhone}'";
    }
    $result = $connect -> query($sql);
    if( $result -> num_rows == 0 ){
        $jsonResult = "good";
    }
    echo json_encode(array("result" => $jsonResult));
?>

PHP - Ajax 써보기

grovy — Sun, 14 May 2023 23:55:09 +0900

PHP에서 Ajax를 써볼게요

아래는 PHP소스 일부분이에요

<main>
    <div class="over">
        <label for="youEmail" class="required">이메일</label>
        <input type="email" id="youEmail" name="youEmail" class="inputStyle"  placeholder="이메일을 적어주세요" >
        <a href="#a" class="youCheck btnStyle2" onclick='emailChecking()'>이메일 중복검사</a>
        <p class="msg" id="youEmailComment"></p><!-- 이메일이 존재합니다. -->
    </div>
    <div class="over">
        <label for="youNick" class="required">닉네임</label>
        <input type="text" id="youNick" name="youNick" class="inputStyle"  placeholder="닉네임을 적어주세요" >
        <a href="#a" class="youCheck btnStyle2">닉네임 중복검사</a>
        <p class="msg" id="youNickComment"></p> <!--닉네임이 존재합니다. -->
    </div>
</main>

위에 onclick이벤트에서 jquery를 이용해서 ajax를 써볼거에요 !

<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script>
    let isEmailCheck = false;
    function emailChecking(){
        let youEmail = $("#youEmail").val();

        if(youEmail == null || youEmail ==''){
            $("#youEmailComment").text(" * 이메일을 입력해 주세요");
        }else{
            $.ajax({
                type : "POST",
                url : "joinCheck.php",
                data : {"youEmail" : youEmail , "type":isEmailCheck},
                dataType : "json",

                success : function(data){
                    if(data.result == "good"){
                        $("#youEmailComment").text("사용가능한 이메일입니다.");
                        isEmailCheck = true;
                    }else{
                        $("#youEmailComment").text("이미 사용중인 이메일입니다.");
                        isEmailCheck = false;
                    }
                },
                error : function(requst, status, error){
                    console.log("requst : " + requst);
                    console.log("status : " + status);
                    console.log("error : " + error);
                }
            })
        }
    }

</script>

요렇게 $.ajax를 써서 호출을 해주구요

ajax문법을 써서 joinCheck를 호출했어요 !

<?php
    include "../connect/connect.php";

    // Select youEmail from adminMembers where youEmail = {}

    $type = $_POST['type'];
    $jsonResult = "bad";
    
    if($type == "isEmailCheck"){
        $email = $_POST['youEmail'];
        $youEmail = $connect -> real_escape_string(trim($email));
        $sql.= "SELECT adminEmail from adminmembers where adminEmail = '{$youEmail}'";
    }

    $result = $connect -> query($sql);
    
    if($result -> num_rows ==0){
        $jsonResult = "good";
    }
    echo json_encode(array("result" => $jsonResult));
?>

요긴 joinCheck.php입니다

내용을 간략히 말하자면 이메일을 조회해서 값이 있다면 bad를 반환 없다면 good을 반환하는 로직이에요 !

자세한 코드를 보고싶으시면 ..

요기에 !

웹디자인 기능사 연습문제 2

grovy — Sat, 13 May 2023 23:39:39 +0900

2023웹디 기능사 실기문제를 만들어볼거에요

사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~'

요렇게 만들어졌구요

요 레이아웃을 보구 만들었어요

html부분

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>강원천문대</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script/script.js"></script>
</head>
<body>
    <div class="wrap">
        <div id="header">
            <div class="header__left">
                <h1 class="logo"><a href="#">강원천문대</a></h1>
            </div>
            <div class="header__right">
                <ul>
                    <li>
                        <a href="#">강원천문대</a>
                        <ul class="submenu">
                            <li><a href="#">천문대 소개</a></li>
                            <li><a href="#">인사말</a></li>
                            <li><a href="#">오시는길</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">이용안내</a>
                        <ul class="submenu">
                            <li><a href="#">프로그램</a></li>
                            <li><a href="#">관람시간표</a></li>
                            <li><a href="#">이달의 별자리</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">천문대예약</a>
                        <ul class="submenu">
                            <li><a href="#">예약하기</a></li>
                            <li><a href="#">예약확인</a></li>
                            <li><a href="#">예약취소</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">커뮤니티</a>
                        <ul class="submenu">
                            <li><a href="#">공지사항</a></li>
                            <li><a href="#">방문후기</a></li>
                            <li><a href="#">자유게시판</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div id="slider">
            <div class="sliderWrap">
                <div class="slider">
                    <a href="#"><img src="images/slider01.jpg" alt="천문과학교육관 시 소개"></a>
                    <div class="text">
                        <h2>천문과학교육관 시설 소개</h2>
                        <p>영상강의실로 놀러오세요!</p>
                    </div>
                </div>
                <div class="slider">
                    <a href="#"><img src="images/slider02.jpg" alt="천문과학교육관 이용 안내"></a>
                    <div class="text">
                        <h2>천문과학교육관 이용 안내</h2>
                        <p>어린이를 위한 천문 과학관!</p>
                    </div>
                </div>
                <div class="slider">
                    <a href="#"><img src="images/slider03.jpg" alt="천문과학교육관 소개"></a>
                    <div class="text">
                        <h2>별을 보는 고요한 정상</h2>
                        <p>강원천문대로 놀러오세요!</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="contents">
            <section class="info">
                <h3 class="info-menu">
                    <a href="#" class="active">공지사항</a> |
                    <a href="#">갤러리</a>
                </h3>
                <div class="info-cont">
                    <ul class="notice">
                        <li><a href="#">강원천문대 2023년 휴관일 안내</a><span>2023.05.11</span></li>
                        <li><a href="#">강원천문대 2023년 온라인 예매</a><span>2023.05.10</span></li>
                        <li><a href="#">강원천문대 휴관일 및 이벤트 안내</a><span>2023.05.09</span></li>
                        <li><a href="#">강원천문대 휴관일 안내</a><span>2023.05.08</span></li>
                    </ul>
                    <ul class="gallery">
                        <li><a href="#"><img src="images/gallery01.jpg" alt="천문대1"></a></li>
                        <li><a href="#"><img src="images/gallery02.jpg" alt="천문대2"></a></li>
                        <li><a href="#"><img src="images/gallery03.jpg" alt="천문대3"></a></li>
                    </ul>
                </div>
            </section>
            <!-- //content1 -->
            <section class="banner">
                <h3>강원천문대 온라인 예매하기</h3>
                <a href="#">예매하기</a>
            </section>
            <!-- banner -->
            <article class="link">
                <h3>이달의 별자리</h3>
                <a href="#">바로가기</a>
            </article>
            <!-- link -->
        </div>
        <div id="footer">
            <div class="footer1">
                <h4>강원천문대</h4>
            </div>
            <div class="footer2">
                <div class="footer2-1">
                    <ul>
                        <li><a href="#">개인정보처리방침</a></li>
                        <li><a href="#">저작권보호정책</a></li>
                        <li><a href="#">이메일무단수집거부</a></li>
                        <li><a href="#">cctv설치 및 운영지침</a></li>
                    </ul>
                </div>
                <div class="footer2-2">
                    COPYRIGHT &copy; 2023 All Right Reserved
                </div>
            </div>
        </div>
    </div>
    <script src="script/script.js"></script>
</body>
</html>

css 부분

@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    color: #333333;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333333;
}
img {
    vertical-align: top;
}
.wrap{
    width: 1200px;
    margin: 0 auto;
}
/* header */

#header {
    width: 1200px;
    display: flex;
    background-color: #0C51A6;
}
.header__left {
    width: 20%;
    height: 100px;
}
.header__left a {
    display: inline-block;
    padding: 30px 40px;
    color: #fff;
}
.header__right {
    z-index: 1000;
    width: 80%;
    height: 100px;
    text-align: right;
}
.header__right > ul {
    margin-top: 24px;
}
.header__right > ul > li {
    display: inline-block;
    position: relative;
    
}
.header__right > ul > li > a {
    padding: 15px 45px;
    background-color: #052B5A;
    color: #fff;
    display: block;
}
.header__right > ul > li > a:hover {
    background-color: #021B3A;
}
.header__right > ul > li > ul {
    display: none;
    text-align: center;
    background-color: #fff;
    position: absolute;
    width: 100%;
    top:51px;
    left: 0;
    
    /* z-index: 1000; */
}
.header__right > ul > li > ul > li > a {
    padding: 10px 20px;
    display: block;
}
.header__right > ul > li > ul > li > a:hover {
    background-color: #6189B9;
}
/* slider */
#slider {
    width: 1200px;
    height: 300px;
    background-color: #BD9494;
}
#slider .sliderWrap {
    position: relative;
}
#slider .sliderWrap .slider {
    position: absolute;
    left: 0;
    top :0;
}
#slider .sliderWrap .slider img{
    vertical-align: top;
}
#slider .sliderWrap .slider .text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(0,0,0,0.4);
    padding: 20px 30px;
}
#slider .sliderWrap .slider .text h2 {
    color: #fff;
}
#slider .sliderWrap .slider .text p {
    color: #fff;
}
/* banner */
#contents {
    width: 1200px;
    height: 200px;
    display: flex;
}
#contents .info {
    width: 400px;
    height: 200px;
    background-color: #78ADCC;
    padding: 20px;
    box-sizing: border-box;
}
#contents .info h3 {
    margin-bottom: 10px;
    font-size: 22px;
}
#contents .info h3 a.active {
    text-decoration: underline;
}

#contents .info .notice li {
    display: flex;
}
#contents .info .notice li a {
    width: 75%;
    font-size: 16px;
    line-height: 1.8;
}
#contents .info .notice li a:hover {
    text-decoration: underline;
}
#contents .info .notice li span {
    width: 25%;
    text-align: right;
}
#contents .info .gallery {
    display: flex;
    
}
#contents .info .gallery li{
    padding-top: 3px;
    margin-right: 17px;
}



.content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #92D3E7;
}
.banner {
    width: 33.3333%;
    height: 200px;
    background-color: #3F8AA1;
    background-image: url(../images/banner.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.banner h3 {
    color: #fff;
}
.banner a {
    background-color: rgba(255,255,255,0.4);
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 10px;
}
.banner a:hover {
    background-color: rgba(112, 102, 252, 0.4);
}
.link {
    width: 33.3333%;
    height: 200px;
    background-image: url(../images/link.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.link h3 {
    color: #fff;
}
.link a{
    background-color: rgba(255,255,255,0.4);
    border-radius: 50px;
    padding: 10px 20px;
    margin-top: 10px;
}
.link a:hover{
    background-color: rgba(112, 102, 252, 0.4);
}
/* footer */
#footer {
    width: 1200px;
    display: flex;
    height: 100px;
    background-color: rgb(66, 100, 250);
}
.footer1 {
    width: 20%;
    height: 100px;
    
}
.footer1 h4 {
    font-size: 30px;
    color: #cdcdcd;
    padding: 30px 30px;
}
.footer2 {
    width: 80%;
    height: 100px;
}
.footer2-1 {
    width: 100%;
    height: 50px;
    text-align: center;
}
.footer2-1 li{
    display: inline-block;
    border-right: 1px solid #fff;
}
.footer2-1 li:last-child{
    border: 0;
}
.footer2-1 ul{
    padding-top: 10px;
}
.footer2-1 ul a{
    padding: 10px;
    color:  #fff;

}
.footer2-1 ul a:hover{
    text-decoration: underline;
}
.footer2-2 {
    width: 100%;
    height: 50px;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    color:  #fff;

}

그리고 자바스크립트 부분

$(document).ready(function(){  
    // 메뉴 : 하나씩 나오기
    $(".header__right > ul > li").mouseover(function(){
        $(this).find(".submenu").stop().slideDown(200);
    }) 
    $(".header__right > ul > li").mouseout(function(){
         $(this).find(".submenu").stop().slideUp(200);
    }) 

    // $(".header__right > ul > li").focusin(function(){
    //     $(this).find(".submenu").stop().slideDown(200);
    // }) 
    // $(".header__right > ul > li").focusout(function(){
    //      $(this).find(".submenu").stop().slideUp(200);
    // }) 
    
    // 슬라이드효과
    let currentIndex = 0;
    const slider = $(".slider");
    //모든이미지 숨김 첫이미지만 나옴
    slider.hide().first().show(); 

    setInterval(function(){
        let nextIndex = (currentIndex + 1) % slider.length;

        slider.eq(currentIndex).fadeOut(1200);
        slider.eq(nextIndex).fadeIn(1200);

        currentIndex = nextIndex;
    },3000)

    // 탭매뉴 
    const tabBtn = $(".info-menu > a");
    const tabCont = $(".info-cont > ul");
    tabCont.hide().eq(0).show();

    tabBtn.on("click",function(){
        const index = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        tabCont.eq(index).show().siblings().hide();
    })
    
});

메뉴 : 하나씩 나오기
.header__right 클래스 하위의 ul 태그의 하위 li 태그에 마우스를 올리면, 해당 li 태그 하위의 .submenu 클래스를 슬라이드 다운 시킨다.
.header__right 클래스 하위의 ul 태그의 하위 li 태그에서 마우스를 뗄 때, 해당 li 태그 하위의 .submenu 클래스를 슬라이드 업 시킨다.

슬라이드 효과
slider 클래스를 가진 요소를 찾아서 모두 숨기고, 첫 번째 이미지만 보이도록 한다.
3초마다, 현재 이미지(currentIndex)를 기준으로 다음 이미지(nextIndex)를 결정한다.
현재 이미지는 1.2초 동안 페이드 아웃되고, 다음 이미지는 1.2초 동안 페이드 인된다.
currentIndex 변수를 nextIndex로 업데이트한다.

탭 메뉴 ( 공지사항 )
.info-menu 클래스 하위의 a 태그를 클릭하면, 클릭한 a 태그의 인덱스 값을 가져와서 해당 인덱스 값을 가진 .info-cont 클래스 하위 ul 태그만 보이고, 나머지는 숨긴다.
클릭한 a 태그에는 active 클래스를 추가하고, 나머지 a 태그에서는 active 클래스를 제거한다.

포인트 !

html을 먼저 만들고

css로 슬라이드가 보여질 화면과 sub메뉴를 완성시킨뒤

script를 작업해야 에러잡기도 쉽고 코드 짜기도 쉬워요 !

웹디자인 기능사 연습문제 1

grovy — Fri, 12 May 2023 23:40:48 +0900

2023웹디 기능사 실기문제를 만들어볼거에요

사이즈를 정해놓구 만들어서 깨졌지만 이해 부탁드려요 '~'

요렇게 만들어졌구요

요 레이아웃을 보구 만들었어요

html부분

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>산업대학교</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script/script.js"></script>
</head>
<body>
    <div class="wrap">
        <header id="header">
            <div class="container">
                <h1 class="logo"><a href="#">산업대학교</a></h1>
                <nav class="nav">
                    <ul>
                        <li><a href="#">대학소개</a>
                            <ul class="submenu">
                                <li><a href="#">총장인사말</a></li>
                                <li><a href="#">학교소개</a></li>
                                <li><a href="#">홍보관</a></li>
                                <li><a href="#">캠퍼스안내</a></li>
                            </ul>
                        </li>
                        <li><a href="#">입학안내</a>
                            <ul class="submenu">
                                <li><a href="#">수시모집</a></li>
                                <li><a href="#">정시모집</a></li>
                                <li><a href="#">편입학</a></li>
                                <li><a href="#">재외국인</a></li>
                            </ul>
                        </li>
                        <li><a href="#">정보서비스</a>
                            <ul class="submenu">
                                <li><a href="#">정보알림</a></li>
                                <li><a href="#">정보공개</a></li>
                                <li><a href="#">정보서비스안내</a></li>
                            </ul>
                        </li>
                        <li><a href="#">커뮤니티</a>
                            <ul class="submenu">
                                <li><a href="#">공지사항</a></li>
                                <li><a href="#">참여게시판</a></li>
                                <li><a href="#">자료실</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- header -->
        <aside id="slider">
            <div class="container">
                <div class="sliderWrap">
                    <div class="slider s1">
                        <img src="image/slider01.jpg" alt="미래를 이끄는 열정">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s2">
                        <img src="image/slider02.jpg" alt="미래를 이끄는 열정">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                    <div class="slider s3">
                        <img src="image/slider03.jpg" alt="미래를 이끄는 열정">
                        <div class="text">
                            <h2>미래를 이끄는 <strong>열정</strong></h2>
                            <p>산업대학교</p>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
        <!-- slider -->
        <main id="main">
            <div class="container">
                <section class="notice">
                    <h3>공지사항</h3>
                    <ul>
                        <li><a href="#">2023년 신입생 모집중</a><span>2023.05.01</span></li>
                        <li><a href="#">융합전공멘토링 학생 모집</a><span>2023.05.02</span></li>
                        <li><a href="#">학과 및 학년 별 참여</a><span>2023.05.03</span></li>
                        <li><a href="#">졸업생 취업박람회</a><span>2023.05.04</span></li>
                    </ul>
                </section>
                <!-- notice -->
                <section class="gallery">
                    <h3>우리학교풍경</h3>
                    <ul>
                        <li><a href="#"><img src="image/gallery01.jpg" alt="우리학교 풍경"></a></li>
                        <li><a href="#"><img src="image/gallery03.jpg" alt="우리학교 풍경"></a></li>
                        <li><a href="#"><img src="image/gallery02.jpg" alt="우리학교 풍경"></a></li>
                    </ul>
                </section>
                <!-- gallery -->
                <article class="banner">
                    <h3>산업대학교 <br>2023<br>체육대전</h3>
                    <a href="#">바로가기</a>
                </article>
                <!-- banner -->
            </div>
        </main>
        <!-- main -->
        <footer id="footer">
            <div class="container">
                <div class="footer1">
                    <div class="footer1-1">
                        <ul>
                            <li><a href="#">개인정보처리방침</a></li>
                            <li><a href="#">정보 공개</a></li>
                            <li><a href="#">홈페이지 운영지침</a></li>
                        </ul>
                    </div>
                    <div class="footer1-2">
                        15073 경기도 안산시 산기대학로 237 (정왕동) 산업대학교 COPYRIGHT(C) ALL RIGHTS RESERVED.
                    </div>
                </div>
                <div class="footer2">
                    <select name="" id="">
                        <option >패밀리 사이트</option>
                        <option value="1">서울 산업대학교</option>
                        <option value="2">안양 산업대학교</option>
                        <option value="3">부산 산업대학교</option>
                    </select>
                </div>
            </div>
        </footer>
        <!-- footer -->
    </div>
</body>
</html>

css 부분

@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    color: #333;
}
.wrap{
    width: 100%;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    list-style: none;
}
img { 
    vertical-align: top;
}
/* container */
.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
    
}
/* header */
#header {
    width: 100%;
    height: 100px;
    background-color: #EFEFEF;
    position: relative;
    z-index: 1000;
}
#header .container {
    display: flex;
    align-items: end;
    position: relative;
}
#header .container::after {
    content: '';
    width: 100%;
    height: 0;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    left: 0;
    top: 100px;
    z-index: -1;
    transition: all 0.4s;
}
#header .container.on::after {
    height: 160px;
}
#header .container .logo {
    width: 20%;
    padding: 30px 0;
}
#header .container .nav {
    width: 80%;
    text-align: right;
}
#header .container .nav > ul {
    display: flex;
    justify-content: right;
}
#header .container .nav > ul > li {
    position: relative;
}
#header .container .nav > ul > li > a {
    display: block;
    padding: 15px 40px;
    background-color: #FFE194;
}
#header .container .nav > ul > li > a:hover {
    background-color: #FFD66F;
}
#header .container .nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 50px;
    text-align: center;
    width: 100%;
    display: none;
}
#header .container .nav > ul > li > ul > li > a {
    padding: 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #fff;
}
#header .container .nav > ul > li > ul > li > a:hover {
    background-color: #D9B352;
}
/* slider */
#slider{
    width: 100%;
    height: 300px;
    background-color: #bbb;
}
#slider .container{
    overflow: hidden;
}
#slider .sliderWrap{
    display: flex;
    width: 4800px;
}
#slider .sliderWrap .slider{
    position: relative;
    width: 1200px;
}
#slider .sliderWrap .slider img{}
#slider .sliderWrap .slider .text{
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 40px;
}
#slider .sliderWrap .slider .text h2{
    font-size: 24px;
    color: #fff;
    margin-bottom: 4px;
}
#slider .sliderWrap .slider .text h2 strong{
    color: aqua;
}
#slider .sliderWrap .slider .text p{
    font-size: 16px;
    color: #fff;
}
/* main */
#main{
    width: 100%;
    height: 200px;
    background-color: #ccc;
}
#main .container{
    display: flex;
}
#main .container .notice{
    width: 400px;
    padding: 25px 20px;
    background-color: #dfc7c7;
}
#main .container .notice h3{
    font-size: 24px;
    margin-bottom: 10px;
}
#main .container .notice li{
    display: flex;
    line-height: 1.8;
    position: relative;
    padding-left: 10px;
}
#main .container .notice li::before{
    content: '';
    width: 5px;
    height: 5px;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 11px;
    border-radius: 50%;
}
#main .container .notice li a{
    width: 70%;
}
#main .container .notice li a:hover{
    text-decoration: underline;
}
#main .container .notice li span{
    width: 30%;
    /* background-color: #ccc; */
    text-align: right;
}
#main .container .gallery{
    width: 400px;
    padding: 25px 20px;
    
}
#main .container .gallery h3{
    font-size: 24px;
    margin-bottom: 10px;
}
#main .container .gallery ul{
    display: flex;
}

#main .container .banner{
    width: 400px;
    background-image: url(../image/banner.jpg);
    text-align: center;
    position: relative;
}
#main .container .banner h3{
    margin-top: 40px;
    font-size: 24px;
    color: #3a2727;
}
#main .container .banner a{
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 40px;
}
/* footer */
#footer{
    width: 100%;
    height: 100px;
    background-color: #ddd;
}
#footer .container {
    display: flex;
}

#footer .container .footer1 {
    width: 80%;
    ;
}
#footer .container .footer1 .footer1-1 {
    width: 100%;
    height: 50px;
}
#footer .container .footer1 .footer1-1 li{
    display: inline;
    border-right: 1px solid #333;
}
#footer .container .footer1 .footer1-1 li:last-child{
    border: 0;
}
#footer .container .footer1 .footer1-1 li a{
    padding: 15px 10px;
    display: inline-block;
}
#footer .container .footer1 .footer1-2 {
    width: 100%;
    height: 50px;
    padding-top: 15px;
    box-sizing: border-box;
}
#footer .container .footer2 {
    width: 20%;
}
#footer .container .footer2 select{
    margin-top: 34px;
    width: 100%;
    height: 30px;

}

그리고 자바스크립트 부분

$(function(){
    //메뉴
    $(".nav > ul > li").mouseover(function(){
        $(".nav > ul > li > ul").stop().fadeIn(400);
        $("#header .container").addClass("on");
    });
    $(".nav > ul > li").mouseout(function(){
        $(".nav > ul > li > ul").stop().fadeOut(100);
        $("#header .container").removeClass("on");
    });
    //슬라이드
    let currentIndex = 0;
    const $sliderWrap = $(".sliderWrap");  //이미지 부모 : 움직이는 영역
    const $slider = $(".slider");           //각각의 이미지
    const $sliderWidth = $slider.width();   //이미지 가로값
    $sliderWrap.append($slider.first().clone(true));   //첫 번재 이미지를 복사 마지막에 추가
    setInterval(function(){
        currentIndex++;     //현재 이미지를 1씩 증가
        $sliderWrap.animate({marginLeft: -$sliderWidth * currentIndex}, 600);
        if(currentIndex === $slider.length){
            setTimeout(function(){
                $sliderWrap.animate({ marginLeft: 0},0);
                currentIndex = 0;
            }, 700);
        }
    }, 3000)
});

우선, $를 이용하여 전체 문서가 준비됐을 때 바로 실행되는 함수를 정의합니다. $(function(){...});으로 구현되어 있습니다.

이후 .nav > ul > li와 .sliderWrap, .slider 클래스를 가진 요소를 선택합니다.

.nav > ul > li 클래스를 가진 요소에 마우스 커서를 올리면 하위 요소인 .nav > ul > li > ul 클래스를 가진 요소가 400밀리초 동안 fade-in 되며, #header .container 요소에 on 클래스가 추가됩니다. 마우스 커서를 요소 밖으로 이동하면 다시 100밀리초 동안 fade-out되며 #header .container 요소에서 on 클래스가 제거됩니다.

이후 이미지 슬라이드를 구현하는 코드가 나옵니다. $sliderWrap 요소에 첫 번째 이미지를 복사하여 마지막에 추가합니다. 이렇게 함으로써 마지막 이미지에서 다시 첫 번째 이미지로 이동할 때 자연스럽게 이어지는 효과를 만들 수 있습니다.

setInterval을 이용하여 3초마다 실행되는 함수를 정의합니다. currentIndex 변수는 현재 이미지의 인덱스를 저장하는 역할을 하며, 이 변수는 슬라이드가 움직일 때 마다 1씩 증가합니다. $sliderWrap 요소의 marginLeft 값을 -현재 이미지 인덱스 * 이미지 가로값으로 설정하면 이미지가 왼쪽으로 이동합니다. 마지막 이미지까지 도달하면 다시 첫 번째 이미지로 돌아갑니다. 이때 setTimeout을 이용하여 0.7초 뒤에 marginLeft 값을 0으로 설정하고, currentIndex 값을 0으로 초기화합니다. 이렇게 함으로써 마지막 이미지와 첫 번째 이미지가 자연스럽게 이어지는 효과를 만들 수 있습니다.

포인트 !

html을 먼저 만들고

css로 슬라이드가 보여질 화면과 sub메뉴를 완성시킨뒤

script를 작업해야 에러잡기도 쉽고 코드 짜기도 쉬워요 !

React - 01 기본문법

grovy — Wed, 10 May 2023 23:16:33 +0900

React 기본 문법을 알아봐요 !

1. Hellow World 출력

import React from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello World</h1>);

//Hello World

위와 같이 root에 리엑트돔을 생성해서 root에 render 시키면 출력이 됩니다.

2. JSX

JSX는 React에서 사용되는 자바스크립트 문법 확장입니다. JSX는 HTML과 유사한 구문을 사용하여 UI 구성 요소를 만들 수 있게 해줍니다.

스크립트 안에 h1같은 태그도 사용을 할수 있어요 !

import React from "react";
import ReactDOM from "react-dom/client";

const name = "getgrovy";

const hello = <h1>hellow {name}</h1>;;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);

//Hello getgrovy

import React from "react";
import ReactDOM from "react-dom/client";

function helloName(){
    return name.nick
}

const name = {
    nick : "getgrovy",
}

const hello = <h1>Hello, {helloName()}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
//Hello getgrovy

3. 랜더링

ReactDOM.render으로 랜더링을 했어요 !

import React from 'react'
import ReactDOM from 'react-dom'

function clock(){
    const element = (
        <div>
            <div>hello, getgrovy</div>
            <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
        </div>
    );
}
ReactDOM.render(element, document.getElementById('root'));


export default clock;

//hello, getgrovy

//지금은 2023. 5. 8.입니다.

4. 컴포넌트를 사용하기

function 대문자+### 형식으로 컴포넌트로 생성 문법으로 생성함 쓸때는 < > 안에 넣어서 쓴다

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(){
    return <h1>hello, getgrovy</h1>
}
const element = <Hello/>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

5. props

컴포넌트에 props라는 변수를 object타입으로 받아와서 실행할수있어요 !

import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props){
    return <h1>hello, {props.name}</h1>
}
const element = <Hello name="getgrovy1"/>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

//hello, getgrovy1

REACT 맛보기 !

grovy — Tue, 9 May 2023 07:42:26 +0900

REACT를 같이 알아봐요 !

React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다.

React는 컴포넌트 기반 아키텍처를 사용하며, 이를 통해 재사용 가능한 UI 요소를 만들 수 있습니다. React는 Virtual DOM을 사용하여 빠른 성능을 제공합니다. 이는 변경된 부분만을 업데이트하고 렌더링하는 방식으로 작동합니다. 이러한 접근 방식은 기존의 DOM 조작 방식에 비해 빠른 업데이트와 높은 성능을 제공합니다. React는 또한 다른 라이브러리나 프레임워크와 함께 사용할 수 있습니다. 예를 들어, React Native는 React를 사용하여 네이티브 모바일 앱을 만들 수 있습니다. React는 현재 매우 인기 있는 라이브러리 중 하나이며, 다양한 규모의 프로젝트에서 사용됩니다.

REACT 기본 개념 익히기

리엑트는 문서가 잘되있어요 사이트 들어가서 보시면 됩니다. !

요기 링크에 있어요 !

php에서 html을 사용하는 방법

grovy — Sun, 7 May 2023 23:47:41 +0900

php에서 html을 사용하는 방법

PHP는 서버 측 언어이기 때문에, HTML과 함께 사용되어 클라이언트에게 동적으로 생성된 웹 페이지를 제공할 수 있습니다. PHP 파일 내에서 HTML 코드를 삽입하는 가장 일반적인 방법은 다음과 같습니다.

1. echo문 사용하기

PHP에서 HTML을 출력하려면, echo문을 사용합니다. 다음은 간단한 예시입니다.

<!DOCTYPE html>
<html>
<head>
	<title>PHP와 HTML</title>
</head>
<body>
	<h1><?php echo "안녕하세요!"; ?></h1>
</body>
</html>

위 예시에서, PHP 코드는 <?php와 ?> 사이에 삽입되며, echo문을 사용하여 "안녕하세요!"라는 텍스트를 출력하고 있습니다.

2. 단축 구문 사용하기

PHP에서 HTML 코드를 간결하게 작성하려면, 단축 구문을 사용할 수 있습니다. 다음은 위의 예시를 단축 구문을 사용하여 작성한 것입니다.

<!DOCTYPE html>
<html>
<head>
	<title>PHP와 HTML</title>
</head>
<body>
	<h1><?= "안녕하세요!"; ?></h1>
</body>
</html>

위 예시에서는 <?=와 ?> 사이에 출력할 값을 삽입하면, echo문을 사용하지 않고도 HTML 코드 내에서 출력할 수 있습니다.

3. HTML 코드와 함께 PHP 코드 작성하기

HTML 코드 내에 직접 PHP 코드를 삽입하여 사용할 수 있습니다. 다음은 예시입니다.

<!DOCTYPE html>
<html>
<head>
	<title>PHP와 HTML</title>
</head>
<body>
	<h1>
		<?php
			$message = "안녕하세요!";
			echo $message;
		?>
	</h1>
</body>
</html>

위 예시에서는 PHP 코드가 HTML 태그 내에 직접 작성되어 있습니다. $message 변수에 "안녕하세요!"라는 값을 할당하고, echo문을 사용하여 변수 값을 출력하고 있습니다.

4. include() 함수 사용하기

PHP에서는 include() 함수를 사용하여 다른 파일에 있는 HTML 코드를 현재 파일에 포함시킬 수 있습니다. 이를 통해 HTML 코드를 재사용하거나 파일을 분리하여 관리할 수 있습니다. 다음은 예시입니다.

<!DOCTYPE html>
<html>
<head>
	<title>PHP와 HTML</title>
</head>
<body>
	<?php include("header.html"); ?>
	<h1>내용입니다.</h1>
	<?php include("footer.html"); ?>
</body>
</html>

위 예시에서는 header.html과 footer.html 파일에 있는 HTML 코드를 include() 함수를 사용하여 현재 파일에 포함시켰습니다. 이렇게 하면 header.html과 footer.html 파일에서 작성한 HTML 코드를 재사용할 수 있으며, 유지보수도 편리해집니다.

숨만쉬어도 귀여운타입:D

자바스크립트 패럴랙스-08, 09 가로스크롤효과

패럴랙스효과를 나타내기

전체 소스는 요기

css 소스는 요기

body를 볼게요 !

script 부분을 볼게용

아래는 세로>>가로>>세로 효과를 볼거에요 !

포폴용 참고 사이트 !

웹디자인 기능사 연습문제 3

웹디 실기 연습사이트를 만들어 봤어요 !

PHPPHP + MAMP사이트 만들기 - 기초5 (회원가입유효성 ajax체크)

Ajax를 이용해서 각 input 박스를 체크해봤어요 !

PHP - Ajax 써보기

PHP에서 Ajax를 써볼게요

웹디자인 기능사 연습문제 2

2023웹디 기능사 실기문제를 만들어볼거에요

포인트 !

웹디자인 기능사 연습문제 1

2023웹디 기능사 실기문제를 만들어볼거에요

포인트 !

React - 01 기본문법

React 기본 문법을 알아봐요 !

1. Hellow World 출력

2. JSX

4. 컴포넌트를 사용하기

5. props

REACT 맛보기 !

REACT를 같이 알아봐요 !

React는 Facebook에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위한 라이브러리입니다.

REACT 기본 개념 익히기

php에서 html을 사용하는 방법

php에서 html을 사용하는 방법

1. echo문 사용하기

2. 단축 구문 사용하기

3. HTML 코드와 함께 PHP 코드 작성하기

4. include() 함수 사용하기