친효애드온 : CSS 포스트잇 스타일 모듈 (마크1)
포스트잇 스타일로 연출해 보았습니다. 구글링을 통해서 참고하여 그대로 응용했습니다. 본문 중간 링크 모듈과 팁박스 모듈 대신 포스트잇 모듈로 대처할 수 있을 것으로 기대합니다. 사용 범위가 꽤 넓을 것 같습니다. 친효스킨에서 가장 정상작동하며 타스킨에서는 스타일에 오류가 발생할 수 있습니다. 참고하시기 바랍니다. 먼저 아래는 예시 입니다.
이런 스타일의 포스트 잇 입니다. 가로로 긴 형태이며 포스트잇의 테마 색상인 밝은 노란색을 띄고 있습니다. 안쪽에 텍스트만 따로 넣어도 되며 링크를 넣어서 사용도 가능 합니다. 마우스를 올리면 포스트잇의 말린 끝 부분이 살짝 더 말리는 애니메이션 효과를 연출했습니다. 디테일함을 살리기 위해 그에 따른 그림자 모양도 변합니다.
HTML <head> 세팅
아래의 구글폰트 링크를 스킨의 <head> 안쪽에 삽입해야 합니다. 첨부파일로 올려두도록 하겠습니다.
<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
Nanum Pen Script.txtCSS 세팅
스킨편집에 가셔서 CSS 안쪽에 빈 공간을 확보 후 첨부파일의 모든 매소드를 그대로 붙여넣기 합니다.
사용 방법
친효애드온을 많이 써보셨다면 아마 방법을 아실 것 입니다. 혹시 처음 방문이시라면 아래의 글을 참고하시어 세팅부터 사용 방법까지 자세히 살펴보시기 바랍니다.
결과적으로 글쓰기 에디터에서 포스트잇으로 표현하고자 하는 영역을 <div class="rgyPostIt">감싸줄부분</div> 로 만들어 주기만 하면 됩니다. 지나친 남발은 오히려 가독성을 망칩니다. 그러면 유용하게 사용해 주시기 바라겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
