[Self Study] 크래프톤 정글 살펴보기 (1)

오늘은 자율학습 겸해서 지난번 스터디에서 이야기를 나눈 크래프톤 정글을 뜯어보았다.

---

https://jungle.krafton.com/

크래프톤 정글

 

이 사이트를 고른 이유는 간단하게

"사이트가 예쁘기 때문에"

 

코딩을 공부하면서, 

특히 웹을 공부하면서 당연히 

멋진 사이트를 만들어 보고싶고 다양한 애니메이션을 구동해보고 싶다는 생각이 있다.

 

그렇기 위해서 선행되어야 하는 게 또 기초다보니, 

정말 꼬리에 꼬리를 물고 이어지는 것 같다.

(사이트 뜯어볼까? - 이걸 모르네 공부하자 - 다시 사이트를 볼까?의 연속)

 

물론 혼자 하는 것만큼 의미있는건 물어보면서 알아가는거라 

조장님께 도움을 얻었다. 

홈페이지 너무 잘 만들었다고 생각한다.

이제는 자연스러워진 개발자 도구에 들어가서 찾아보았는데

처음에는 꽤 헤맸다. 

 

그 이유는 태그가 많아도 너무 많았기 때문이다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 

진짜 열심히 만들었다 싶긴했다.

 

그래도 아이디어를 계속 공유하다보니 실마리가 풀렸다.

조장님은 개발자 도구를 뜯어보는 편이라서 그 부분에서 도움을 주었고 

나는 그걸 힌트 삼아서 구글링을 했다. 

 

(JS로 카피) document.querySelector("#container") 화면에 보이는 div

즉, #container가 전체 홈페이지를 덮고 있고

그 밑으로 이제 header나 con, footer 등이 들어가 있다.

 

이때 특이한 건 #allMenu 부분이었다.

처음엔 홈페이지 첫화면에 같이 떠서 어떤 기능인가 했더니,

알고보니 화면이 작아져서 그렇지 상단바 부분의 메뉴였다.

 

여기서 알아내고싶은 부분은 여러가지였지만, 

가장 먼저 & 나름 쉽게 해결한 부분은 바로 오른쪽 상단바 부분이었다.

 

코드에 있는 닫는 태그처럼 생겼는데,

마우스를 올리면 화살표 모양으로 변하는 것이었다. 

 

이 실마리는 바로 풀려던 건 아닌데, 

왼쪽의 커서가 들어간 타이핑 애니메이션이 신기해서 그걸 살펴보다가 

얻어걸린 케이스였다.

 

 

swiper-slide를 찾던 중이었는데

구글링을 하니 똑같은 태그가 있는 사이트를 발견했다.

 

 <div class="swiper-slide">Slide 1</div>

https://swiperjs.com/swiper-api

Swiper API

 

그런데 이걸 통해서 당연히 왼쪽 글씨처럼 움직이는 애니메이션을 만들줄 알았는데,

그건 또 다른 CSS (특히 SCSS)에서 해야하는 것이었다. 

이건 동적이니까 당연히(?) JS라고 생각해서 찾는데 좀 오래걸렸다. 

 

 

아무튼, 이렇게 상단바에 마우스를 올려놓는 hover를 했을 때 

원래는 bar 세 줄의 형태이던 것이 조정되도록 만들어보았다.

1. <Slideable menu>

이때 예전에 배웠던 막간 AE 상식을 동원해서 

translateY는 Y축 기준으로 rotate 각도(deg)만큼 돌아간다는 사실도 이해했다.

 

 

2. 가상(추상)클래스

또 몰랐던 부분인 nth 부분도 공부했는데, 

이는 bar의 margin이 적용되는 부분이 특이했기 때문이었다.

이때 분명 bar class에는 이미 margin이 10px로 잡혀있는데,

그 윗줄에 적용된 .bar:nth-of-type은 각 1,3번째 줄에 적용되면서 

 

margin-top 부분과 margin-bottom 부분을 각각 0px로 없애고 있는 모습이었다.

그러면 이때 적용되는 모습은? 

 

margin-top, margin-bottom 0px씩 적용되었다.

 

 

이제 가상클래스를 없애서 누가 상위 클래스로 적용되는지 확인해보면 된다.

그럼, 이렇게 많아진 여백을 볼 수 있다. 

(없었던 10px의 margin이 이제 생긴 것이다.)

 

 

이제 원인은 파악했으니, 이유를 찾아본다.

 

 

---

CSS 우선순위

https://ofcourse.kr/css-course/%EC%A0%81%EC%9A%A9-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

보통은 정말 어쩔수 없는 경우 !important를 붙이고,

나머지 경우에는 위의 순서대로 흘러가게 두는 게 가장 BEST라고 들었다.

 

아무튼, 우리는 .bar에 추상클래스(가상클래스)를 적용해서

margin을 0px로 주는 부분이 우선순위에 있었다는 것을 알게 되었다.

 

---

오늘의 소감 ✍️✍️✍️

그 외에도 오늘은 정말 CSS의 날이었는데, 

저 풀리지 않는 초록글자 때문에 이것저것 찾아보았더니 결론은

직접 (열심히) 만든 코드인 것 같았다.

대신 다른 CSS를 연습했다. 

 

 

1. 크래프톤 정글에도 있던 마우스를 움직일 때 좌표를 계산하는 CSS

Mousemove / Accelerometer tilt effect | Greensock (codepen.io)

Mousemove / Accelerometer tilt effect | Greensock

 

2. 인터넷에서 찾아온 CSS 모음 사이트

Animate.css | A cross-browser library of CSS animations.

Animate.css | A cross-browser library of CSS animations.

 

3. 비슷한듯 아닌듯 flip 애니메이션이 적용된 CSS

Word Swipe Animation (codepen.io)

Word Swipe Animation

 

4. 3줄로 떨어지는 CSS

Pure CSS Text Animation (codepen.io)

Pure CSS Text Animation

 

 

5. 내가 참고하고 싶어서 찾은 타이핑 CSS

10 CSS Typing Text Effects (freefrontend.com)

10 CSS Typing Text Effects

 

오늘 하루도 수고했다 TIL 끝!