Moon의 개발 일기

※ 해당 포스트는 http://100dayscss.com/의 4번 글의 설명을 위해 작성자가 다시 재구성한 포스팅입니다.

※ 무단 스크랩은 허용하지 않습니다.

※ 

이번에는 CSS 효과만을 이용해 여러 개의 원이 겹치면서 나타났다 사라지는 효과를 연출해 보겠습니다.

먼저 구현하기에 앞서, 선행적으로 알고 있어야 할 것들이 몇 가지 있습니다.

See the Pen wxxpbJ by Munkyu Yang (@moonformeli) on CodePen.

배경이 되는 .wrapper div를 설정했습니다. 그 안에 3개의 자식 div를 만들었는데요. 얘네들은 이제 각 다른 사이즈의 원이 될 예정입니다! 

그 다음에는 자식 div로 설정된 .circle1, .circle2, .circle3 에 대한 기초 작업을 진행해볼게요.

See the Pen MBBrNX by Munkyu Yang (@moonformeli) on CodePen.

자, 화면 중앙에 원이 3개가 만들어졌습니다! 그림자는 box-shadow: 7px 7px 10px 1px rgba(0,0,0,0.5); 

이 코드가 그림자를 생성하고 있습니다. 이제 여기서 원이 늘어났다 줄어들었다 하는 효과를 넣어보겠습니다.  이 효과는 CSS의 Animation 효과를 사용할 예정이니, 아직 Animation 이 익숙하지 않으시다면 사용법을 먼저 숙지하시고 보시면 더 좋을 것 같습니다. ^^

See the Pen MBBQKq by Munkyu Yang (@moonformeli) on CodePen.

코드를 보시면 @keyframes 를 이용해 애니메이션을 3개를 만들었습니다. 각 애니메이션의 상태는 0 ~ 100%를 기점으로 여러 개의 상태 중단점을 만드실 수 있어요. 예를 들어서@keyframes scale1 을 봅시다! 이 애니메이션은 중단점이 2개가 있네요. 0%는 애니메이션의 시작, 100%는 애니메이션의 끝을 의미합니다. 애니메이션이 시작할 때 transform: scale(0) 으로 시작하고 애니메이션이 끝날 때는 transform: scale(1) 이 될 수 있도록 CSS는 애니메이션에 연결된 DOM의 상태를 조절합니다.

그렇다면 중단점이 3개 이상인 경우는 어떻게 할까요? @keyframe scale2 를 예시로 보시면 됩니다. 0% 일 때와 40% 일 때의 상태값이 같네요? 그리고 그 사이엔 어떠한 중단점도 없습니다. 즉, 0% 일 때 transform: scale(0) 으로 출발했고 그 다음 중단점에 걸려있는 상태 변화값으로 서서히 변하기 시작하려고 하는데, 그 다음 중단점인 40%에 걸려있는 코드가 마침 0%에 걸린 코드와 같습니다. 결국 transform: scale(0) 같은 코드가 계속 실행이 되니 우리 눈에는 변화가 없는 것처럼 보이는 것이죠. 그러다가 40%를 넘어가는 시점부터는 100%에 걸린 코드 내용이 다르다보니 우리 눈에 인지가 되기 시작하는 것입니다.

즉, 애니메이션의 중단점으로 애니메이션 1 cycle의 속도를 조절할 수 있습니다.

그 다음에는 이제 애니메이션을 걸어보겠습니다.

See the Pen LBBQOG by Munkyu Yang (@moonformeli) on CodePen.

짠, 금방 만들어졌죠? .circle1에 걸린 애니메이션을 살펴보겠습니다. 

animation: scale1 2s infinite alternate;

이 코드의 의미는, @keyframes scale1 애니메이션을 2초간 수행하고, alternate는 애니메이션이 정방향으로 실행이 된 후, 그 다음 차례에는 역방향으로 다시 실행한다는 의미입니다. infinite의 의미는 애니메이션을 무한 반복 한다는 뜻입니다. 즉, "scale1 애니메이션을 2초동안 수행하되, 애니메이션을 무한히 반복해서 실행하고, 매번 번갈아가면서 정방향과 역방향으로 애니메이션을 수행한다"는 의미입니다.

이번에 다뤄본 애니메이션은 비교적 쉬운 애니메이션이었습니다. 다음에도 더 재밌는 효과로 풀이를 해볼게요.

제 블로그에 관심 있으시고 JavaScript를 공부해야겠다고 생각되시는 분들은 읽어보시는 것도 좋을 듯 합니다.

JavaScript를 제대로 이해하지 못하고 있는 분들을 대상으로, 기초 내용부터 약간의 심화까지 담아 보려고 합니다.

1. JavaScript 기초

- 변수 Scope, 호이스팅, JavaScript에서의 함수란, 프리미티브 값

- this

- 클로져(closure)

2. Prototype

- 프로토타입의 기초 이해

- 프로토타입 관계도 실습

- 프로토타입을 이용한 상속

3. 성능 향상 / 최적화

- for loops

- DOM

- Event handlers

- 기타

4. 그 외의 이야기

- ES6

- Framework / Libraries

혹시나 질문이 개인적으로 있으신분들은 방명록에 비밀글로 남겨주시면 답변드릴 수 있는 범위 내에선 답변 드리겠습니다~

간단하면서도 쉬운 메뉴 펼치기를 구현해보도록 하겠습니다. jQuery의 클래스 선택자만 이용하면 아주 간단하게 구현할 수 있는 기능입니다.

우선, jQuery의 선택자에 대해 모르시면 잠시 들렀다 오세요.

그럼 시작해보겠습니다.

먼저 틀이 되는 HTML을 작성해보겠습니다.

기본 코드의 바탕은, 네이버 메인사이트의 [더보기]를 참고했습니다. 

아래 사진을 보실게요.

사진에서처럼 두 개의 span 태그가 존재하고, '더보기' 라는 텍스트는 자식 태그에 삽입이 되어 있는 상태입니다. 아래에 적용된 CSS코드를 보겠습니다.

위의 그림은 background-image에 적용된 이미지의 url에 실제로 저장되어 있는 그림 파일입니다. 그림 파일이 많아질 경우에는 저런 식으로 하나의 파일에 모두 담은 후에, background-position을 이용해 원하는 위치에 있는 내역을 잘라서 가져오기도 합니다.

background-position에 대해 모르시면 잠시 들렀다오세요.

.more 클래스에서는 원하는 위치의 그림을 불러오고 display:block, width, height 속성을 적용해 그림 파일이 온전한 제 영역을 가질 수 있도록 설정하였습니다. block이나 inline-block 둘 중에 하나로는 반드시 설정해야 높이와 너비를 설정할 수 있으니 잊지마세요!

block, inline 속성에 대해 모르시면 잠시 들렀다오세요.

.blind 클래스에서는 기존에 존재하는 텍스트를 지워주기 위해 clip 속성을 이용했는데요. 좌표 값을 상하좌우 모두 0으로 설정해서 결국에는 보여지게 되는 영역이 '없게 되는' 원리를 이용했습니다. 어떻게보면 편법같습니다.

clip 속성에 대해 모르시면 잠시 들렀다오세요.

clip속성을 사용하기 위해선 반드시 position:absolute 를 설정해야한다는 점 기억해두세요!

다음으로는 클릭할 때 '더보기'와 '접기'가 번갈아가면서 나오도록 설정해보도록 하겠습니다.

.close 클래스에 대한 속성은 좌표값만 달라졌을 뿐 .more와 동일하게 적용이 되었습니다. 그리고 마우스가 올라갔다는 것을 보여주기 위해 cursor속성을 pointer로 설정을 해주었습니다. 좀 더 직관적으로 변했죠?

그리고 다음으로는 jQuery를 사용했는데요. .more 클래스가 클릭이 되었을 경우에, 각각 경우에 수를 따집니다. hasClass 속성을 이용해 클래스가 있는지 판별을 먼저 하고 그에 따른 값 변경을 해주게 됩니다. 여기서 뭔가 살짝 이상한데, .more에 클릭이 되었을 경우에 클래스 명이 .close로 변경이 되는데 여전히 클릭 이벤트는 .more가 받는다는 것입니다. 이 부분은 저도 왜 그런것인지 정확하게는 모르겠습니다. 혹시 아시는 분이 있다면 댓글로 정정해주시면 감사하겠습니다.

현재까지 완성된 결과물을 확인해보겠습니다.

See the Pen LLrejd by Munkyu Yang (@moonformeli) on CodePen.

다음으로는 펼쳐져서 보여질 메뉴를 만들어보겠습니다.

네이버에서 더보기를 눌렀을 때 나오는 메뉴의 일부분을 가져와 리스트 형식으로 배치를 시켜놓았습니다. 총 3개의 ul은 float:left가 적용이 되어 가로로 나란히 배열이 되어 있는 상태이고, 넓이와 높이는 적당히 설정해주었습니다.

이제 남은 부분은 바로, jQuery 부분에 메뉴를 접었다 펼쳤다 할 때 같이 유동적으로 보였다가 가려졌다가 하는 부분만 추가하면 끝입니다.

우선 .board에는 visibility:hidden이 적용이 되어 있어야합니다. 왜냐하면 이 부분을 건드릴 것이기 때문이죠.

jQuery를 이용하면 아주 간단히 CSS를 건드릴 수 있습니다. 경우에 수에 맞게끔 visibility를 변경해주면 됩니다.

최종적으로 완성된 결과물입니다.

See the Pen WOydgr by Munkyu Yang (@moonformeli) on CodePen.

이상으로 모든 작업이 끝났습니다.

어떻게보면 매우 간단하게 만들 수 있는 것이지만 모르셨던 분들은 제 포스팅이 도움이 되었길 바랍니다.