onclick()이 만능이야? 이미지 꾸미기, 역시 밤파이아는 이렇게 변신을 해야....

기존의 웹툰 보는 기능이 너무 밍숭맹숭 한 것 같아, 업그레이드를 시켰다.

스크롤을 내리면 해당 게시글의 대표사진으로 변습하고, 그것을 누르면 해당 작품을 볼 수 있도록 만들었다.

해보면, 별 것 없다.

아, 코드는 이거다.

 

See the Pen Profile Box by William A. | Keyon (@Keyon) on CodePen.

 

기본적인 기능만 잘 구현 해 놨다면, 꾸미는 것은 걍 덮으면 되는 것이기에 어렵지 않게 구현이 가능하다.

 

웹투니 (tistory.com)

웹투니

참고로, 해당 위의 작품은 식량인류로, 극추한다.(예시는 위 링크 참조)

 

이번 프로젝트를 진행하면서 깨달았는 것이 onclick()이 만능이다라는 것이다.

button에도 들어가고, a태그에도 들어가고, 심지어 div 태그에도 들어간다...

 

다만, button 태그와는 달리 div 태그에서는 마우스를 위에 올려도 손가락으로 변습하지 않는다는 것이다.

 

그리고 또 배운 것은 

$(".img").css("background-Image", "url('" + $("#b-ci").val() + "')");

 

지난번

2022.09.13 - [각 종 it/티스토리 등 프로그래밍] - 티스토리 태그 or 제목 값 가져오기(추출, 브로거든 뭐든 다됨)

티스토리 태그 or 제목 값 가져오기(추출, 브로거든 뭐든 다됨)

getelement 방식이 아닌, 위의 css 방식으로 해도 된다는점!

다만, style에서 width와 height는 적용이 안 되, 옛방식으로 해결 했다는 점이 다르다.

 

$(".box").css("width", "100px");

 

이게 왜 안 되지???

 

 

 

참고로 이것은 모자일버전