티스토리 뷰
개요
1) 사진과 문단간의 레이아웃 이해
2) 사진이 멋지게 움직이며 들어오게 해보자
index-START.html
|
전체를 싸주는 클래스는 site-wrap
text-align: justify 가 뭐였더라? - 한글로는 양쪽 정렬. - 왼쪽 오른쪽 끝이 각각 왼쪽, 오른쪽 정렬인 것처럼 만들고 - 중간의 여백 크기를 적절히 조절해주는 것이다.
|
|
.align-left
- float: left - 이미지 박스를 왼쪽에 띄운다. - 그러면 text 는 오른쪽에 위치하게 된다. - 참고링크: https://goo.gl/GyyRsj - margin-right: 20 px 만큼 text 와의 공간을 띄우는 거다.
나머지는 실제 java script 구현부에서 좀더 들여다 보자. |
|
* index-START.html 에서는 아직 이미지가 보이지 않는다.
이미지들이 텍스트와 어떻게 어우러지나 개념만 보자.
p 태그 이어지다가, align-left slide-in 이미지 하나 - 왼쪽에 이미지, 오른쪽에 텍스트가 있다.
p 태그 이어지다가, align-right slide-in 이미지 하나 - 오른쪽에 이미지, 왼쪽에 텍스트가 있다.
|
|
p 태그 이어지다가 align-left slide-in 이미지 하나 그리고, 이번에는 p 태그 안에 align-right slide-in 이미지 하나
p 태그와 동등한 레벨에서 img 가 들어가면 그 다음 p 태그와 어우러지지만 p 태그 내에 img 가 들어가면 그 안에서 왼쪽과 같이 어우러진다.
|
|
p 태그 이어지다가, align-right slide-in 이미지 하나 - 오른쪽에 이미지, 왼쪽에 텍스트가 있다. |
index-FINISHED.html
아래 window scroll event 의 callback 에서
- 바로 checkSlide() 함수를 부르면 너무 많이 실행됨 - debounce() 함수를 거쳐 실행되면 그 횟수 조절이 가능해짐
궁금증. 어짜피 scroll event 는 여전히 같은 회수만큼 반복되고, 그만큼 callback 함수를 호출하는 것이 아닌가?
|
코드 분석 1 1) callNow 는 일단 여기 구현에서는 - immediate 가 디폴트 값인 true 이고, timeout 은 undefined (= false) 이므로 - callNow == true 이다. 2) clearTimeout(timeout) 은 결국 clearTimeout(undefined) 인데 이건 아무 의미도 없다. 3) 여기서 wait 은 20 이니깐 20ms 뒤에 later 함수가 실행되게 해놓고 4) 현재로서는 callNow == true 이니 넣어둔 함수인 func 가 실행된다. func.applay(context, args);
코드 분석 2 이 타이밍에서 한번 더 event 가 발생했다고 해보자. 1) timeout 은 null 이 아니니, callNow == false 가 되어 맨 아래줄이 실행되지 않는다. - event 가 발생하는 줄줄이 여기에 걸려서 20ms 동안은 event 를 흘려보낸다 - wait = 20 이라서 20 ms 2) 그러고 20 ms 이 지나면 timeout 을 다시 null 로 만들어주니 event 가 걸리게 된다. - wait 파라미터에 1 이나 2 정도를 넣어주는 테스트를 해보면 - 이 부분을 이해할 수 있다. 3) immediate 를 false 로 해주면 event 발생후 wait 시간 이후에 동작하게 될 것이다. |
||
아래로 스크롤시 이미지가 절반쯤 나타나고, (AND), 아직 화면에서 사라지지 않았다면, 'active' class 를 먹인다.
scroll event 시에 debounce 를 먹인 checkSlide 를 실행시킨다. |
.slide-in 은 모든 img tag 들이 가지고 있다.
|
||
|
1) 기본적으로 모든 이미지들은
- .slide-in 으로 투명하고, - 모든 transition 발생시 0.5초간 애니메이션 해준다
2) .align-left.slide-in 그리고 .align-right.slide-in
- 두 개의 class 가 붙어서 명시되었는데 별거 아니다. 그냥 AND 로 생각하면 된다. - 즉, .align-left 와 slide-in 이 둘 다 있는 element - 참고링크: https://goo.gl/rVZaWV
3) 마찬가지로 .slide-in.active 는 두 class 를 다 명시한 element 가 된다. |
'javascript30' 카테고리의 다른 글
15 - Local Storage (0) | 2019.03.26 |
---|---|
14 - JavaScript References VS Copying (0) | 2019.03.19 |
12 - Key Sequence Detection (0) | 2019.03.15 |
11 - Custom Video Player (0) | 2019.03.14 |
10 - Hold Shift and Check Checkboxes (0) | 2019.03.12 |
- Total
- Today
- Yesterday
- solid
- go
- 잡학툰
- API
- 오블완
- 영화
- 독서
- bun
- websocket
- clean agile
- Gin
- ChatGPT
- OpenAI
- 제이펍
- github
- 체호프
- 노션
- folklore
- 클린 애자일
- 인텔리제이
- 2023
- Bug
- golang
- agile
- intellij
- 독서후기
- 티스토리챌린지
- 엉클 밥
- notion
- strange
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |