더보기 기능을 잘 사용하고 싶었는데 너무 안 예뻐서 꾸미고 싶었다!
구글에 검색해보니까 다들 블로그 설정에서 CSS를 수정하는 방법을 추천해줬다
근데 이상하게도 나는 CSS에서 moreLess를 찾을 수도 없었고 (ctrl+F로 검색해도 안 나왔음 ㅜ)
사람들이 공유해준 CSS를 추가해도 변화가 없었다.. 그래서 우울하게 포트폴리오 업로드를 하고 있는데
'접은 글'에다가 썼던 글을 복사해서 붙여 넣기 했더니
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p style="font-size: 1.12em;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">이렇게 접은글에다가 썼던 글을 복사해서 붙여넣기했더니</span></p>
</div>기본 모드 -> HTML로 바꾸고 보니까 원래 이랬던 코드가
<div style="margin: 20px 0px; caret-color: auto; background-color: #fafafa; padding: 20px 20px 22px; border: 1px dashed #c5c5c5; color: #333333; font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><a class="btn-toggle-moreless">더보기</a>
<div class="moreless-content">
<p style="font-size: 1.12em;" data-ke-size="size16"><span style="font-family: 'Nanum Gothic';">이렇게 접은글에다가 썼던 글을 복사해서 붙여넣기했더니</span></p>
<p style="font-size: 1.12em;"><span style="font-family: 'Nanum Gothic';">이렇게 접은글에다가 썼던 글을 복사해서 붙여넣기했더니</span></p>
</div>이렇게 변해있었다
원래 '글 쓰는 화면'에서만 사용하던 기능을 '더보기'라는 글씨 자체에도 사용하게 된 것이다!
이때다 싶어서 이 상자에다가 둥근 네모 모양도 넣고, 테두리도 바꿔서 지금의 더보기가 되었다~!
더보기
원래 더보기 모양
더보기
바뀐 더보기 모양
내가 혹시라도 까먹을까봐 걱정되기도 하고!
혹~시 나랑 비슷한 문제를 갖고있는 누군가가 좋은 꿀팁을 얻어가길 바라는 마음에 열심히 적어봤다😁
반응형