Merged
Conversation
…지 넘어가는 기능 구현 amazon : html 과 css 기본 구조를 작성 / 화살표 버튼과 이미지 버튼 클릭시 이미지 넘어가는 기능 구현
js 버튼 클릭과 메뉴 클릭시의 index 변화를 하나로 통일해서 관리.
Contributor
|
커밋로그를 좀더 신경쓰면 좋겠어요. |
crongro
approved these changes
Feb 13, 2020
|
|
||
|
|
||
| class SlideService { | ||
| constructor(firstIndex, containerTarget, menuList) { |
Contributor
There was a problem hiding this comment.
위 클래스와 같이 매개변수의 순서를 지켜준건 좋고요.
객체를 활용해서 전달하는 방법이 좀더 장점이 많아요.
|
|
||
| left.addEventListener("mousedown", () => { | ||
| this.target.targetIndex--; | ||
| if (this.target.targetIndex < 0) this.target.targetIndex = 3; |
| right.addEventListener("mousedown", () => { | ||
| this.target.targetIndex++; | ||
| if (this.target.targetIndex > 3) this.target.targetIndex = 0; | ||
| console.log("right click!") |
Contributor
There was a problem hiding this comment.
디버깅코드는 남기지 마시고,
디버깅은 개발자도구의 breakpoint를 더 활용하는 습관을 가져보세요.
| } | ||
|
|
||
| handler() { | ||
| this.containerTarget.style.transform = `translateY(${this.targetIndex * (-250)}px)`; |
Contributor
There was a problem hiding this comment.
250이 하드코딩되어 있는것이 아쉽네요.
transform의 다른 속성보다 장점이 많다고 했으니 그 이유를 좀더 찾고 기억해주세요.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
네비게이션 UI 제작.
img 와 text 를 하나의 container 로 묶은 후 크기를 parent보다 네배 크게 줘서 translateY를 이용하여 하나씩 보여줌.
버튼 클릭 시와 상단 메뉴 클릭 시 js 에서 같은 변수를 증감시켜, 둘중 하나만 클릭해도 container 이동과 메뉴 사이즈 변화를 동시에 일어나게 함.
깃 허브 페이지 기능을 이용해서 데모 페이지 제작.