loading

친절한효자손 취미생활

포스트잇 스타일로 연출해 보았습니다. 구글링을 통해서 참고하여 그대로 응용했습니다. 본문 중간 링크 모듈과 팁박스 모듈 대신 포스트잇 모듈로 대처할 수 있을 것으로 기대합니다. 사용 범위가 꽤 넓을 것 같습니다. 친효스킨에서 가장 정상작동하며 타스킨에서는 스타일에 오류가 발생할 수 있습니다. 참고하시기 바랍니다. 먼저 아래는 예시 입니다.





이런 스타일의 포스트 잇 입니다. 가로로 긴 형태이며 포스트잇의 테마 색상인 밝은 노란색을 띄고 있습니다. 안쪽에 텍스트만 따로 넣어도 되며 링크를 넣어서 사용도 가능 합니다. 마우스를 올리면 포스트잇의 말린 끝 부분이 살짝 더 말리는 애니메이션 효과를 연출했습니다. 디테일함을 살리기 위해 그에 따른 그림자 모양도 변합니다.


HTML <head> 세팅

아래의 구글폰트 링크를 스킨의 <head> 안쪽에 삽입해야 합니다. 첨부파일로 올려두도록 하겠습니다.


<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap" rel="stylesheet">


Nanum Pen Script.txt


CSS 세팅

스킨편집에 가셔서 CSS 안쪽에 빈 공간을 확보 후 첨부파일의 모든 매소드를 그대로 붙여넣기 합니다.


친효애드온-포스트잇 모듈 (마크1).txt


사용 방법

친효애드온을 많이 써보셨다면 아마 방법을 아실 것 입니다. 혹시 처음 방문이시라면 아래의 글을 참고하시어 세팅부터 사용 방법까지 자세히 살펴보시기 바랍니다.



결과적으로 글쓰기 에디터에서 포스트잇으로 표현하고자 하는 영역을 <div class="rgyPostIt">감싸줄부분</div> 로 만들어 주기만 하면 됩니다. 지나친 남발은 오히려 가독성을 망칩니다. 그러면 유용하게 사용해 주시기 바라겠습니다. 끝.





공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 포스트잇 메세질 줄이 세개가 기본인가요?? 한 줄 입력했는데 세개가 나오네요
    2020.05.14 20:13 신고
  2. 와 정말 쉽게 잘 적용되네요.
    HTML CSS 초보인 저도 쉽게 따라할 정도로 완벽합니다.
    혼자했으면 절대 못할 것들이네요.
    감사합니다.
    2020.05.16 04:03 신고