반응형

이 이야기는 (여러 퍼블리셔들과 개발자들이 그러하듯) 스크롤을 통한 마우스휠 풀페이지의 대명사 fullpage.js를 대체하기 위한 삽질을 뜨면서 시작되었습니다. 

fullpage.js는 아시다시피 라이센스가 있는 라이브러리라서 상업적 이용은 오직 구매로써 가능해집니다. (구매가 한 큐에 되는 거였으면 이런 개고생도 안 했겠지) 결과적으로 fullpage를 구현하기 위해서는 라이브러리를 사용하기보다 직접 만드는 수 밖에 없었는데요.

처음에는 scroll snap css로 어떻게든 해보자 싶었지만 섹션과 섹션 사이에 넘어가는 애니메이션 속도를 조절하기 어려웠고 또 메뉴를 넣었더니 메뉴 링크대로 넘어가지도 않는 대환장 파티가 벌어졌습니다. 

(서치해보니 이미 저와 같은 사람이 있었다는 것에 눈물이.. https://ethansup.net/blog/scroll-snap-instead-fullpage 나는 왜 다 하고서 이걸 발견했는가)

우선 제가 구현하고자 하는 풀페이지의 기능은,

1. 전체 스크롤(마우스휠) 풀페이지일 것
2. 상단 메뉴가 fixed이고 스크롤 넘어갈 때마다 메뉴 배경이 유동적일 것
3. 풀페이지로 넘어갈 때 우측에 navigation dots가 있을 것
4. 마지막 섹션에 다다르면 footer가 올라와줄 것


인데... 이게 되면 저게 안 되고 저게 되면 이게 안 되고 결국 온갖 오만 삽질을 혼자 다 하다가 swiper.js로 fullpage.js를 어느정도 구현할 수 있다는 내용을 발견하게 되었습니다. 철이 없었죠. 이걸로 다 땡칠 줄 알았다는게... (이 이후로 ing는 계속..)

여하튼, 아래 내용은 온갖 삽질 끝에 나온 결과물입니다. 저와 같은 피해자가 없길 바라며 잡소리는 끝. (풀페이지도 끝!)

(구현결과는 꼭 codepen에서 fullpage screen으로 보세요)

 

 

See the Pen fullpage (swiper.js) by ivory (@imivory) on CodePen.

반응형
반응형

실무에서 pdf를 직접 수정하는 일이 생겨, 아크로뱃DC로 수정을 하는데 글자가 깨지는 현상이 있었습니다.

 

이렇게 아크로뱃DC 자체 내에서 깨지는 현상이 있고,

 

pdf를 열 때 연결프로그램이 인터넷(크롬,엣지)일 경우 깨지는 현상이 있는데, 전자의 경우는 아크로뱃DC에서 자체적으로 지우면 되지만 후자의 경우는 아크로뱃DC 내에서는 글자가 정상적이게 뜨는 경우가 있을 수 있습니다.

 

저의 경우에는 수정할 내용을 워드와 메모장에 옮겨놓고 복사, 붙여넣기를 해서 벌어진 문제였는데 이는 아크로뱃DC에서 복사, 붙여넣기가 아닌 수기로 작성 하면 쉽게 해결이 가능합니다.

 

(인터넷으로 열어도 정상적으로 보입니다.)

이외에 pdf를 열어보니 글자가 깨져보이는 경우가 있을 수 있는데, 이 때에는 edit > preferences(설정)으로 가셔서 좌측 page Display를 클릭, Rendering의 Smooth Text를 For Monitor로 설정을 바꿔주시면 해결됩니다.

 

 

반응형
반응형

좁은 폼 안으로 input, 특히 type이 date인 input을 넣을 때에는 안에 있는 글씨가 길 경우, 잘리는 현상이 있을 수 있습니다. 잘리는 것 정도는 어쩔 수 없다해도 date안에 든 아이콘의 공백이 너무 길어서 당황스러울 때가 있었는데요.

 

이럴 때, css로 단순하게 해결할 수 있는 방법이 있습니다.
아래 소스를 참고해주세요.

 

 

 

* 참고: 
https://stackoverflow.com/questions/65409348/html-input-date-how-to-decrease-space-between-date-and-icon

반응형