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

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

✅css
해당 태그 추가시 input number의 모든 우측 버튼이 사라진다

.star {
    animation: light 3s forwards;
}

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

    100% {
        opacity: 100%;
    }
}

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

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

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버튼 내에 아이콘같은 것을 넣어 줄 수도 있다

.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를 없애준다

    <div class="swiper slide">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
         <div class="swiper-wrapper">
            <div class="swiper-slide">
            슬라이드내용
            </div>
         </div>
        <div class="swiper-pagination"></div>
    </div>

✅html
1) swiper slider에서 html가져오기

//Initialize Swiper
var swiper = new Swiper(".slide", {
    direction: "vertical",
    sensitivity: 3,
    mousewheel: true,
    touchRatio: 2,
    // followFinger: false,
    pagination: {
        el: ".slide .swiper-pagination",
        type: "fraction",
    },
    on: {
        reachEnd: function () {
            swiper.mousewheel.disable();
        }
    }
});
// 슬라이드 가장 마지막에서 스크롤 활성화
window.addEventListener('wheel', function (event) {
    if (event.deltaY < 0) {
        swiper.mousewheel.enable();
    } else if (event.deltaY > 0) { }
});

✅css
1) swiper slider에서 script내용가져오기
2) swiper slider API에서 필요한 부분 가져오기
- mouse wheel로 작동 될 수 있게 하였다
- 스크롤, 터치에 대해 민감하게 휙휙 넘어가는 듯한 느낌을 위해 sensitivity와 touchRatio 값을 주었다
3) pagination 숫자로 보이게 추가
4) 슬라이더가 작동할 때 마우스 휠에 움직이지 않는다는 명령어를 작성

5) 휠 이벤트를 주어 if Y가 0보다 작으면 휠이 작동하지 않고 else if Y가 0보다 크면 작동한다는 함수 작성

✔ touch시 마지막 슬라이드가 움직이지 않는 현상

<section class="sec2">
        <div class="Tbox">
            <h3>
                타이틀
            </h3>
            <h3>
                제목
            </h3>
            <p>
               내용
            </p>
        </div>
        <div class="imgBox">
            <div class="img1">
               이미지
            </div>
            <div class="img2">
               이미지
            </div>
            <div class="img3">
                이미지
            </div>
            <div class="img4">
                이미지
            </div>
        </div>
    </section>

✅html
1) sticky로 배경이 될 텍스트 작성
2) 상단으로 올라갈 이미지 작성

.sec2 {
    display: flex;
    justify-content: space-between;
    padding: 40px 0 20px 0;
}
.sec2 .Tbox {
    position: sticky;
    top: 25%;
    height: fit-content;
    padding-bottom: 50px;
}

.sec2 .imgBox {
    width: 45%;
}

.sec2 .imgBox div[class^="img"] {
    background-size: contain;
    height: 400px;
    text-indent: -9999px;
    overflow: hidden;
    margin: 15px 5px;
}

✅css / position sticky이용하여 스크롤시 좌측 텍스트는 고정하고 우측 이미지 움직이기
1) flex로 가로 배치
2) 좌측 고정될 텍스트에 position sticky 선언
3) 우측으로 올라갈 이미지 작성
4) 각 이미지 사이즈 조정, 텍스트 숨기기

.sec2 {
    flex-direction: column;
}
.sec2 .imgBox {
    width: 100%;
    backdrop-filter: blur(1.5px);
    box-shadow: 0 0 30px 30px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.5);
}

.sec2 .imgBox div[class^="img"] {
    height: 300px;
}

.sec2 .Tbox {
    z-index: -1;
}

✅css / position sticky이용하여 스크롤시 텍스트가 배경으로 깔리고 이미지 덮기
1) flex로 세로 배치
2) 배경으로 덮을 이미지에 filter blur처리하여 텍스트 흐리게 하기
3) 이미지 크기 조절하기
4) 텍스트 부분 z-index를 -1로 이미지보다 뒤에 위치하게 하기


✔ sticky 이용하여 유동적인 고정가능

css keyframe 이용하여 svg 파일 일부를 회전, 확대하는 애니메이션 만들기

<svg version="1.1" id="path" xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500"
                                style="enable-background:new 0 0 500 500;" xml:space="preserve">
                                <rect id="square" x="108.58" y="108.58"
                                    transform="matrix(0.7071 -0.7071 0.7071 0.7071 -103.5534 250)" class="st0"
                                    width="282.84" height="282.84" />
                                <line id="line_x5F_up" class="st0" x1="250" y1="10" x2="250" y2="250" />
                                <line id="line_x5F_right" class="st0" x1="490.85" y1="250" x2="250.85" y2="250" />
</svg>

✅Illustration에서 svg 가져오기 / html
1) 일러스트로 원하는 파일 제작하기
2) 각 레이어별 애니메이션을 지정하기 쉽도록 레이어 이름 설정해주기
3) svg파일을 가져와 text를 복사해서 html에 붙여 넣기

.st0 {
    fill: none;
    stroke: #FFFFFF;
    stroke-miterlimit: 10;
}

#path{
    width: 600px;
    height: 600px;
}
#line_x5F_up {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    transform-origin: center ;
    animation-name: circle;
}

@keyframes circle {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes scale {
    from{
        transform: scale(0);
    }
    to{
        transform: scale(2);
    }
}
@keyframes circle2 {
    0%{transform: rotate(0deg)}
    25%{transform: rotate(45deg)}
    50%{transform: rotate(90deg)}
    75%{transform: rotate(135deg)}
    100%{transform: rotate(180deg)}
}

✅css
1) 기존 svg에 있던 style 태그를 복사하여 css에 붙여 넣기(html 길이 줄이기 위해)
2) 전체 크기 조정을 위해 id path의 가로와 세로를 지정
3) id line up에 애니메이션 설정을 추가
- animation-duration: 애니메이션이 동작하는 시간(s:초);
- animation-iteration-count: 애니메이션 동작 횟수(infinite:무한);
- animation-fill-mode: 애니메이션 마지막 상태 설정(forwards: 마지막 동작상태 유지);
- transform-origin: transform 작동하는 기준점 (center:중앙 대지를 기준) ;
- animation-name: 동작하고 싶은 애니메이션 이름(circle: 동작할 keyframe명);
4-1) keyframe명 circle을 지정하고 회전 애니메이션을 추가한다
0도 에서 360도로 rotate(회전)하는 transform을 추가
4-2) keyframe명 scale을 지정하고 확대 애니메이션을 추가한다
0에서 2배로 scale(확대 또는 축소)하는 transform을 추가
4-3) keyframe명 circle2를 지정하고 사각형 4각에 맞춰 회전 애니메이션을 추가한다
100을 4로 나누어 %마다 transform 각도를 지정

✔ svg내에 레이어 고정과 레이어 애니메이션이 함께 있으면 html내에 텍스트로 가져와야한다
✔ svg 모든 애니메이션이 한번에 움직일때는 svg파일을 불러와도 된다

100vh와 100%를 이용하여 콘텐츠 흐름에 따라 배경이 따라갈 수 있게 제작하기

<section class="wrap">
 <div class= "main">
  컨텐츠
 </div>
</section>

✅html
1) 배경을 넣을 section에 클래스명 wrap선언
2) div로 콘텐츠 내용을 작성 후 클래스명 main선언

.wrap {
 background: black;
 height: 100%;
}
.main{
 min-height: 100vh;
}

✅css
1-1) wrap에 배경 색을 넣어준다
1-2) 높이 100%를 지정해준다

2-1) main 콘텐츠 최대 높이를 100vh로 지정해준다

✔️배경 높이를 100% 콘텐츠 높이를 100vh 설정 시 콘텐츠 높이보다 화면 높이가 작아지면 스크롤이 생기며 배경 높이가 따라오지 못함
✔️배경 높이를 100vh 콘텐츠 높이를 100% 설정 시 콘텐츠 높이가 화면 높이보다 작으면 배경 높이가 콘텐츠에 맞춰져 하단에 빈 공간이 생김
✔️ 높이가 아닌 최소 높이를 100vh를 설정하여 해결

css에서 position값을 이용할 때 중앙 정렬할 때 사용!
가로 세로 모두 중앙 정렬된다

.className{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

✅css
1) 포지션 속성을 입력한다
2) top 50%를 설정해준다
3) left 50%를 설정해준다
4) transform을 이용해서 translate의 x축 y축 값을 지정한다
5) IE에서도 적용시키기 위해 -ms-추가하여 transform을 한번 더 작성해준다

✔️ position은 좌상단을 기준점으로 이동한다
✔️ transform에 -를 넣는 이유는 내려온 만큼의 반을 다시 올라가고 오른쪽 이동만큼의 반을 다시 왼쪽으로 이동하게 하여 중앙에 맞추기 위해!

css를 이용해서 이미지 위에 불투명한 이미지 배경 깔기 배경색에 비해 이미지 색상이 너무 튀어 보일 때, 다양한 이미지를 동일한 페이지에 사용할 때 유용하다!

<a href="#" class="poster">
이미지이름
</a>

✅html
1) 해당 이미지를 클릭할 수 있게 <a> 태그에 이미지 이름을 넣어준다

.poster::after{
    background: url(/앞에넣을이미지경로/) no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    content: " ";
    z-index: 2;
    width: 406px;
    height: 575px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.poster::before{
    background: url(/뒤에넣을이미지경로/) no-repeat;
    background-size: cover;
    position: absolute;
    display: block;
    content: " ";
    z-index: 1;
    filter: blur(10px) brightness(0.3);
}

✅css
1-1) background에 넣을 이미지 경로 지정, 사이즈 조정
1-2) 가상 요소 after를 사용하기 위해 inline요소 태그 <a>를 display block처리
1-3) 가상 요소 사용을 위해 position, content를 입력
1-4) before에 깔릴 이미지보다 앞에 두기 위해 z-index 값을 before보다 크게 지정
1-5) 배경 이미지 사이즈와 동일하게 width와 height값 지정
1-6) positon을 활용하여 중앙에 위치

☑️https://rara-code.tistory.com/6?category=1072320
중앙 정렬하기 참고

2-1) background에 넣을 이미지 경로 지정(같으면 같은 경로로 지정), 사이즈 조정(풀 이미지 설정을 위해 cover사용)
2-2) 가상 요소 after를 사용하기 위해 inline요소 태그 를 display block처리
2-3) 가상 요소 사용을 위해 position, content를 입력
2-4) after 이미지보다 앞에 두기 위해 z-index 값을 after보다 작게 지정
2-5) 흐릿하고 어두운 색상의 이미지를 위해 filter값을 조정

✔️ 가상 요소는 block요소만 사용가는
✔️ 가상 요소 사용을 위해 position과 content 값 입력
✔️ z-index를 화면 구성에 활용