코코무 : 코딩에 코딩을 무는 디자인

.star {
    animation: light 3s forwards;
}

@keyframes light {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

✅css
1) 빛 이미지를 html에 작성한다
2) keyframe으로 opacity값을 0에서 100으로 가게 하여 서서히 밝아지는 듯한 효과를 준다
3) 원하는 이미지 클래스에 animation에 keframe명과 시간을 작성해준다

✔다양한 서서히 나타나는 효과에도 활용가능

[ 
    {
        "name": "제목1",
        "text": "내용1",
        "img": "../img/이미지1.jpg"
    },
    {
        "name": "제목2",
        "text": "내용2",
        "img": "../img/이미지2.jpg"
    },
    {
        "name": "제목3",
        "text": "내용3"
        "img": "../img/이미지3jpg"
    },
    {
        "name": "제목4"
        "text": "내용4"
        "img": "../img/이미지4jpg"
    },
    {
        "name": "제목5"
        "text": "내용5"
        "img": "../img/이미지5jpg"
    }
]

✅json
1) 해당 형식으로 원하는 제목과 내용을 작성한다

    $.ajax({
        url: "../js/place.json", // 참고할 json파일 작성
        type: "get", // 타입 작성
        datatype: "json", //데이터 타입 json
        success: function (data) { // 참고 후 결과 값 함수
            $(".map>div").each(function (index) {
                $(this).click(function () {
                    $(".left").addClass("on");
                    let i = $(this).index() - 7; //앞에 index번호 없앰
                    console.log(i);
                    console.log(data[i].name);
                    $("#name").text(data[i].name); //배열맞춰서 불러오기
                    $("#text").text(data[i].text);
                    $("#img").attr("src", data[i].img);
                })
            })
        },
        error: function () {
            alert('error');
        }
    });

✅jquery
1) json 불러오는 방식으로 함수 작성
- 참고 json 파일 연결
- type작성
2) .map div를 인덱스로 받아온다
3) 클릭시 left 에 on클래스가 추가되며 창이열리는 형태
4) i로 인덱스 부여 -7이후 인덱스 추출
-console log를 통해 인덱스 번호와 name이 일치하는지 확인
5) 불러오길 원하는 부분에 id값을 준 후 해당 id에 text로 data의 배열순으로 원하는 정보를 넣어준다
6) 불러오기를 실패한 경우 alert메시지를 띄우게 한다

✔ html에 작성하기 많은 양의 경우 인덱스 규칙을 통해 json으로 작성하면 데이터 관리가 쉽다
✔ console.log를 통해 중간중간 오류를 점검할 수 있다

✅goggle
1) 원하는 장소를 구글에 검색하여 지도에 들어간다
2) 지도에서 공유버튼을 누른다
3) 지도퍼가기를 클릭한 후 html을 복사해온다
4) 복사한 iframe을 원하는 html에 넣어준다
5) 태그 내의 width, height, border값을 조정하여 원하는 크기로 맞춰준다

toggle버튼을 눌렀을때 클래스를 추가 삭제하여 html테마 바꾸기 (야간모드 활용가능)

body.dark{
    background: #f0f0f0;
}
.dark header .logo{
    background:url(../img/Logo_black.svg) no-repeat;
}
.dark .navButton span{
    background: #40305f;
}

✅css
1) body 태그에 클래스명을 붙여 배경색을 수정해준다
2) 수정을 원하는 태그 앞에 클래스명을 붙여 변경사항을 css로 적어준다

$("input:checkbox").on('click', function () {
    if ($(this).prop('checked')) {
        $(this).parent().addClass("selected");
        $('body').addClass("dark");
    } else {
        $(this).parent().removeClass("selected");
        $('body').removeClass("dark");
    }
});

✅jquery
1) input check박스가 클릭 했을때
2) 만약 checked되어있으면
3) 해당 input의 부모요소에 selected 클래스를 추가한다
4) body태그에 dark class를 추가한다 -> 클래스를 추가하고 작성한 css가 반영된다
5) checked되어 있지 않은경우
6) 해당 input의 부모요소에 selected 클래스를 제거한다
7) body태그에 dark class를 제거한다 -> 기존 css가 반영된다

https://rara-code.tistory.com/20?category=1072320

toggle버튼 만들기 참고하기

✔ 테마 뿐 아니라 다양한 이벤트에도 addClass를 이용하여 활용가능

form요소를 이용해서 toggle버튼 만들기

<div class="toggle">
            <label class="switch-button">
                <input type="checkbox" />
                <span class="onoff-switch"></span>
            </label>
        </div>

✅html
1) checkbox formr과 빈 span 작성

.toggle{
    margin: 0 100px;
    display: flex;
    align-items: center;
}
.switch-button {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
}

.switch-button input {
    opacity: 0;
    width: 0;
    height: 0;
}

.onoff-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius:20px;
    background-color: #ccc;
    transition: .4s;
}

.onoff-switch:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: #fff;
    transition: .4s;
    border-radius:20px;
}

.switch-button input:checked + .onoff-switch {
    background-color: #723ead;
}

.switch-button input:checked + .onoff-switch:before {

    transform: translateX(26px);
}

✅css
1) 각 버튼을 원하는 모양으로 설정해준다
2) input checkbox는 opacity0으로 눈에 보이지 않게 해준다
3) 빈 span은 원형 버튼이 움직이는 배경으로 만들어주고 transiton을 걸어준다
4) checkbox에 check됐을 경우 배경이 바뀔 수 있게 background color를 설정한다
5) checkbox에 check됐을 경우 움직일 수 있게 transform을 걸어준다

☑️https://rara-code.tistory.com/20?category=1072320

토글 버튼이용하여 테마바꾸기 참고

✔ toggle버튼 내에 아이콘같은 것을 넣어 줄 수도 있다

<div class="nav">
                <a class="navButton" href="#">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
                <div class="menu">
                    <a href="#">메뉴1</a>
                    <a href="#">메뉴2</a>
                    <a href="#">메뉴3</a>
                    <a href="#">메뉴4</a>
                </div>
            </div>

✅html
1) nav 안에 navButton span으로 작성
2) 하단에 menu작성

.navButton.active-1 span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
    background: #2F2725;
}

.navButton.active-1 span:nth-of-type(2) {
    opacity: 0;
}

.navButton.active-1 span:nth-of-type(3) {
    transform: translateY(-13px) rotate(45deg);
    background: #2F2725;

}

header .menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 40%;
    height: 100vh;
    padding: 100px 0;
    z-index: 10;
    flex-direction: column;
    background: #f7f7f7bb;
    transform: translateX(100%);
    transition: transform 0.5s;
    box-shadow: 6px 6px 9px 2px #342D44;
}

✅css
1) 각 span 색상과 y값 지정
2) menu에 transform값설정

$(function () {
    $(".navButton").click(function () {
        $(".menu").toggleClass("on");
    });
});

var menu = $(".navButton");
menu.each(function (index) {
    var $this = $(this);

    $this.on("click", function (e) {
        e.preventDefault();
        $(this).toggleClass("active-" + (index + 1));
    })
});

✅jquery
1) .navButton클릭시 menu에 .on class가 추가되면서 transform x값 변경
2) .navButton내에 span에 index번호 생성
3) .navButton 클릭시 toggle 되며 index 1이 활성화

https://rara-code.tistory.com/18?category=1072321
goggle아이콘으로 모바일 햄버거 버튼 만들기 참고하기

✔️ 구글링을 통해 작성
✔️ x자가 안맞는 경우 css 수정

javascript jQuery를 이용해서 햄버거버튼 메뉴 슬라이드형식으로 나오게 하기
메뉴 아이콘은 goggle icon사용

<div class="nav">
                <button id="open">
                    <span class="material-symbols-outlined">
                        menu
                    </span>
                </button>
                <div class="menu">
                    <button id="close">
                        <span class="material-symbols-outlined">
                            close
                        </span>
                    </button>
                    <a href="../html/01_Gallery_home.html">HOME</a>
                    <a href="../html/02_Gallery_about.html">ABOUT</a>
                    <a href="../html/03_Gallery_exhibition1.html">EXHIBITION</a>
                    <a href="../html/05_Gallery_education.html">EDUCATION</a>
                    <a href="../html/06_Gallery_Ticket_main.html">TICKET</a>
                    <a href="../html/08_Gallery_Mypage.html">MYPAGE</a>
                </div>
            </div>

✅html
1) nav안에 menu아이콘과 닫기 아이콘 메뉴를 작성

header .nav button {
    display: inline;
}
header .head .nav .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 100px 0;
    z-index: 10;
    flex-direction: column;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.5s;
}

header .head .nav .menu.on {
    transform: translateX(0);
}

header .head .nav .menu span {
    position: fixed;
    right: 0;
    top: 0;
}

✅css
1) menu에 transform x값과 부드러운 이동을 위해 transition을 설정한다
2) jquery함수를 통해 on과 off class를 추가할 예정이기 때문에 transform값을 설정해준다
3) 아이콘 버튼은 fixed로 고정해준다

$(function() {
    $("#open").click(function() {
        $(".menu").addClass("on");
    });
    $("#close").click(function() {
        $(".menu").removeClass("on");
    });
});

// id open을 클릭하면 menu on 추가
// id close를 클릭하면 menu on 삭제

✅jquery
1) #open id버튼 클릭시 .menu 에 class명 .on이 추가된다
-이전에 작성한 css의 효과가 추가(transform)
2) #close id버튼 클릭시 .menu 에 class명 .on이 추가된다
-이전에 작성한 css의 효과가 추가(transform)

https://rara-code.tistory.com/19?category=1072321

span이용하여 x자로 변하는 햄버거버튼만들기

.layer1{
        touch-action: none;
      }

.layer2{
        cursor: pointer;
      }
.layer3{
            pointer-events: none;
      }

✅css
1) 여러 레이어 겹쳐있을 때 z-index는 앞에 있지만 상위 레이어에 touch action이 먹지 않게 한다
2) 원하는 레이어에 click과 같은 이벤트시 mouse cursor가 pointer로 변한다
3) pointer event를 없애준다

$(window).scroll(function () {
    if ($(window).scrollTop() == 0) {
        $('#scroll').show();
    } else {
        $('#scroll').hide();
    }
});

✅jquery
1) scroll 함수 작성
2) if scroll Top이 0이면 #scroll 버튼이 보이고
3) else #scroll 버튼이 사라진다

$(document).ready(function () {
    $("#scroll").on("click", function (event) {
        var offset = $(".Sec6").offset().top;
        // swiper.mousewheel.disable();
        $("html, body").animate({
            scrollTop: offset,
        }, 400);
        console.log(offset);
    });
});

✅ javascript
1) #scroll 이라는 id 버튼을 누르면
2) .Sec6 class 상단으로 이동한다
3) 부드럽게 이동하기 위해 animate 추가