path로 필요한 선을 그려준 뒤 각각에 class를 줘서 스타일을 적용했다. 회전할 중심점을 잡아주고 화살표의 머리부분은 길이를 줄여주었다.

만들면서 가끔 보이던 한바퀴 빙글 도는 취소버튼도 만들었다.

마우스를 올리면(hover) transition이 실행되게 하고싶은데 각각 따로따로 움직이는 상황이 있었다. (마우스를 올린 막대기만 움직임)

.hambugi 클래스를 가진 요소에 마우스가 올라갔을 때, 그 요소의 자손인 .path1 클래스를 가진 요소에 스타일을 적용하는 방법으로 자손요소가 한번에 재생되도록 바꿨다.

!codepen[ysuwjwgl-the-styleful/embed/qEBaZJX?default-tab=html%2Cresult]

인식 영역의 세로 길이가 짧아 움직임이 적기 때문에 세로(Y)축에는 *0.07, *0.1으로 계산해 가로에 비해 조금더 움직임을 크게 줬다.

!codepen[ysuwjwgl-the-styleful/embed/xbxwVve?default-tab=html%2Cresult]

checkbox로 구현하는데 디자인을 바꾸면서 checkbox의 기능은 구현하기 위해 label태그로 연결한 뒤 labal태그에 디자인을 구현하고 기존 checkbox는 display: none;처리했다..(접근성 측면에서는 이러면 안되던가 좀더 고민)

정확히 버튼을 클릭하지 않아도 동작하도록 라벨 태그를 배경으로 만들고 ::before 요소로 토글 버튼 안쪽을 만들었다.

    #btn:checked + .togle {
        background-color: #70f190;
        box-shadow: 3px 3px 10px 0 #51ac51 inset;
    }

    #btn:checked + .togle::before {
        background-color: white; 
        transform: translateX(40px); 
    }

기능없는 토글버튼은 CSS만 사용해서 구현 가능하기 때문에 #btn:checked + .togle로 체크되었을때의 배경색, 버튼색, 버튼위치를 만들었다.

자연스럽게 바뀌게 하기 위해 기존 디자인에는 transition: background-color 0.3s ease; transition: transform 0.3s ease; 를 작성해서 시간을 줬다.

기존에 배경색과 버튼색을 동일하게해서 달의 파여진면을 표현했는데 박스셰도우때문에 위쪽이 어색하게 남은 부분을 투명도를 주어 제거했다.

토글버튼구현 코드펜

!codepen[ysuwjwgl-the-styleful/embed/raNVBBJ?default-tab=html%2Cresult]

!codepen[ysuwjwgl-the-styleful/embed/LEYVPEq?default-tab=html%2Cresult]

참고한 사이트: https://www.fl-ex.co.kr/

웹사이트를 구경하다가 스크롤에 맞춰서 라인이 생기는게 너무 멋있었다.

svg로 path를만들기 위해 우선 일러스트레이터로 패스를 그렸다. 그린 패스의 앵커포인트 위치를 순서대로 정리하고 그 사이에 있는 핸들의 끝점위치를 찍어 작성했다.

처음 점좌표는 시작점이라서 앞에 M을 붙이고 그 다음으로 오는 좌표에 커브라는 뜻의 C를 붙이고 좌표 3개를 적은다음 반복하면 된당

M시작앵커포인트 C핸들 핸들 앵커포인트 C핸들 핸들 앵커포인트 ... 이런식

M0,168 C12,144 80,82 191,76 C361,67 401,224 258,367 C151,473 101,441 93,420 C85,400 109,348 234,322 C407,286 408,342 412,429 C417,507 463,573 595,554

https://codepen.io/ysuwjwgl-the-styleful/pen/GgRRXVo **아래는 코드펜에서 스크롤값이 작아지기 때문에 end:"top -120px"로 수정해뒀다. 실제로는 웹 사이트 높이에 맞게 넣어야 이쁜것같다.

!codepen[ysuwjwgl-the-styleful/embed/RNwwerr?default-tab=html%2Cresult]

참고한 블로그 : https://devinus.tistory.com/61

** 🚀이미지가 스크롤에 따라 left:0에서 left:100%까지 이동하는 프로그래스바 로켓은 스크롤 되는 동안 상단에 고정되며 글자보다 위에 있어야한다. 스크롤 진행도에 따라 이미지의 각도가 변경되었으면 좋겠다!**

!codepen[ysuwjwgl-the-styleful/embed/QwLrXpg?default-tab=html%2Cresult]

코드확인 scrollHeight = document.documentElement.scrollHeight - window.innerHeight 전체 웹페이지의 높이 - 브라우저 창의 높이 = scrollHeight로 정의. scrollHeight는 스크롤 하지 않았을 때 브라우저에 보이지 않는 영역의 높이와 같다.

scrolled = (window.scrollY / scrollHeight)100 (스크롤된영역 / 보이지 않던 영역)100 = scrolled로 정의. 스크롤된px만큼을 scrollHeight로 나눈 뒤 *100을 했다 scrolled는 스크롤 된 비율% 과 같다

scrolled를 progressBar.style.width = scrolled + "%";로 속성값에 입력.

대충 전체 웹페이지의 높이가 1500px 브라우저 높이가1000px라고 치면 scrollHeight=500가 된다. *scrollHeight는 스크롤될 수 있는 부분의 높이군 즉 이전엔 안보이던 영역의 높이

window.scrollY/scrollHeight에서 100px만큼 스크롤을 내린다면 100/500=0.2*100 =20이고 progressBar.style.width=20%가 된다.

그럼 윈도우 너비가 1920px일때 width가 384px가 된다. 스크롤 된 % 만큼 너비가 늘어난것.

여기서 로켓 이미지를 추가하고 로켓의 rocket.style.left = r_scrolled + "%";으로 로켓의 위치를 left:scrolled%만큼 이동시켜서 같이 이동하는 모양으로 만들었다!

scrolled100%가 되면 창 밖으로 로켓 이미지가 사라지기 때문에 (window.scrollY / scrollHeight)* 95로 벗어나지 않게했다

이번엔 프로그래스바가 로켓 이미지보다 길어져서 튀어나와서 (window.scrollY / scrollHeight) * 98로 로켓 뒤에 가려지게했다

기존 각도 25deg에 스크롤진행도에 따라 각도를 더 주기 위해 const r_deg = (r_scrolled * 0.3) +25; 로 진행도의 0.3 만큼씩 각도를 더 준 다음 rocket.style.rotate = r_deg + "deg"; 각도에 넣어주었다.

overflow: hidden을 적용한 컨테이너안의 글자를 top:70으로 내려 가려지게 한 뒤 애니메이션을 이용해 나타나게한다.

transform 속성으로 translate(이동), skew(기울이기), scale(크기), rotate(회전)등의 효과를 적용할 수 있다.

!codepen[ysuwjwgl-the-styleful/embed/emOVEqE?default-tab=html%2Cresult]

transform 속성을 이용하여 @keyprames로 애니메이션을 만들수도 있다.

!codepen[ysuwjwgl-the-styleful/embed/OPLQjKJ?default-tab=html%2Cresult]

기존 채팅창에 디자인을 추가한 형태의 CSS

수정한 채팅창 CSS !codepen[ysuwjwgl-the-styleful/embed/NPKwXpx?default-tab=html%2Cresult] 기존 스타일을 초기화 하는 코드를 추가하고 스타일을 수정했다. 텍스트 외곽선을 위한 text-shadow옵션을 수정하기 쉽게 변수로 작성했다.

CSS 변수로 정의한 텍스트 컬러가 !important 적용이 되지 않아 치지직 채팅창의 인라인 스타일이 먼저 적용되는 오류가 있어 변수로 정의하지 않으니 수정됐다.

치지직스튜디오-방송관리-알림의 채팅창 주소를복사한 뒤 obs-소스목록-브라우저 사용자 지정CSS에 해당 CSS코드를 붙여넣으면 적용된다.