ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Letter - Enhanced 스킨 공개.[Ver. 2.0]
    프로그래밍/Web 2018. 10. 31. 06:30

    * 여기는 Letter - Enhanced Ver. 2의 기능을 미리 볼 수 있는 페이지 입니다.

    * 이 페이지에서 보여주는 Letter - Enhanced 스킨은 개발 중인 관계로 미공개 기능이나 코드, 버그가 포함되어 있을 수도 있습니다.


    맨붕.. 내가 만들어놨던 테스트 페이지가 실수로 싹 날라갔다.

    으아망ㄴㅁ리ㅓ;ㅣㅏ 플래시 때문에 자동저장도 안됐어! 너ᅟᅡᆷㄹ;ㅣᅟᅡᆫㅁ얼

    플래시는 나의 적ㄴㅁㅇ;ㅣ러ㅣ;ㅣ망ㄴㄹ댜ㅓ매;


    0. 파일 첨부.

    Ver 2.1

    Letter-Enhanced-2.1.zip



    깃허브에서도 확인할 수 있습니다.

    black7375/Letter-Enhanced

    Tistory's Letter Skin + Font setting, Pretty Blockquote, Math & Code highlighting - black7375/Letter-Enhanced

    수정이 필요한 것이 있으면 깃허브 이슈기능이나 댓글로 알려주세요~


    적용법은 전 글로 대체합니다.

    2018/10/23 - [IT] - Letter - Enhanced 스킨 공개.[Ver 1.52]


    1. 기능들.

    Letter - Enhanced Ver. 2는 기본적인 html 요소들을 더 이쁘게 고치고, 여러가지 요소를 쉽게 추가하도록 돕는 것이 목표입니다.


    그래서 기본으로 표시되는 인용구, 구분선, 더보기, 리스트등을 고치고 각종 요소들을 추가하였습니다.

    2.0에 추가되는 내용은 지속적으로 업데이트되고 있습니다.


    기존의 디자인과 제가 정한 디자인 컨셉을 최대한 지키며 추가하는 중.


    1.1 넓은 화면.

    글의 최대 넓이(800px $\rightarrow$ 900px)를 조정해 PC 환경에서 시원시원하게 볼 수 있도록 하였습니다.


    1.2 인용구.

    현재 기본적으로 표시되는 인용구 외에 2가지를 추가하였습니다.


    - 기본.

    지금은 따옴표 옆에 문자가 바로 나타나는데 신경쓰여서 아래에서 글이 시작되도록 옵션을 바꾸었습니다.

    그리고 지은이(?) 또는 출처 등을 쓸 수 있도록 하였습니다.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.

    Pangram


    - Inline.

    기존 버전입니다.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.


    - simple.

    따옴표가 사라진 심플한 버전입니다.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.


    - mobile.

    티스토리 모바일 버전 스타일 입니다.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.

    - none.

    원래 표시되던 형식의 인용구입니다.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.


    사용법.

    <blockquote>내용<footer>지은이</footer></blockquote>
    <blockquote class="inlne">내용..</blockquote>
    <blockquote class="simple">내용..</blockquote>
    <blockquote class="mobile">내용..</blockquote>
    <blockquote class="none">내용..</blockquote>


    1.3 구분선.

    - 기본.

    우선 기본적으로 표시되는 기본선을 개선하였습니다.


    저 나름대론 감성있게 표현한다고 했는데 어울리나요? ㅎㅎ


    - simple.

    화면 중간에 짧은 선이 나타나는 simple 한 구분선입니다.



    - none.

    역시 기본적으로 제공해주는 구분선입니다.

    혹시 이걸 원하시는 분들이 있을까봐 넣어봤어요.



    사용법.

    <hr class="simple">
    <hr class="none">


    1.4 글상자.

    기본 구분선 스타일과 비슷한 글상자를 추가하였습니다.

    글상자 내용1

    글상자 내용2

    글상자 내용3...


    사용법.

    <div class="border">내용..</div>


    1.5 더보기.

    일반적인 글자랑 똑같이 나와서 구분하기 힘들게 생겼던 더보기에 약간의 강조효과를 줬습니다.


    전후비교.




    1.6 리스트.

    - 버그 수정.

    우선 리스트간 사이가 대문짝만하게 갈라져 나타났던 Letter 스킨 고유의 문제가 2018.10.27 기준으로 해결되었습니다. 짝짝


    전후 비교.

    • $X$는 집합이며, $f$의 '정의역'이라고 한다.
    • $Y$는 집합이며, $f$의 '공역'이라고 한다.
    • $\operatorname{graph}⁡ f$는 곱집합 $X \times Y$의 부분집합이며, $f$의 그래프라고 한다.
    • 단, 임의의 $x \in X$에 대하여, $(x,y)\in \operatorname{graph}⁡f$인 $y \in Y$가 유일하게 존재한다.


    - 정의 목록(dl, dt, dd).

    역시 일반 글처럼만 나왔던 정의목록에 강조하는 효과를 줬습니다.



    전후비교.


    정의1
    정의 내용1
    정의2
    정의 내용1
    정의 내용2
    정의 내용3
    정의 내용4
    정의 내용5


    dl의 class에 colon을 사용하면 다음과 같이도 보여줄 수 있습니다.

    정의1
    정의 내용1
    정의2
    정의 내용1
    정의 내용2
    정의 내용3
    정의 내용4
    정의 내용5


    사용법.

    <dl class="colon">
    <dt>정의</dt>
    <dd>정의 내용</dd>
    </dl>

    1.7 이미지.

    - 이미지 강조 & 그림자 효과.

    마우스를 올리면 이미지를 약간 확대하고, 그림자 효과를 주어 구분할 수 있게 하였습니다.


    - 자동 이미지 배열.

    이미지 요소들을 나열하면 크기와 배열이 자동으로 되는 기능을 추가하였습니다.


    예1. 종류와 크기가 랜덤으로 생성되는 고양이.(첫사진 제외)


    예2. 비율에 따른 예.


    사용법.

    <div class="photos">이미지..</div>


    - 이미지 커버.

    이미지를 배경으로 놓을 수 있습니다.


    예) 3개의 시를 제가 찍었던 사진과 함께 넣어봤습니다.

    시1 - 하얀색 글씨가 기본입니다. 유니코드가 필요한 한글이라 폰트를 다른 걸로 교체했다.

    山에는 ᄭᅩᆺ픠네
    ᄭᅩᆺ치픠네
    갈 봄 녀름업시
    ᄭᅩᆺ치픠네

    山에
    山에
    픠는ᄭᅩᆺ츤
    저만치 혼자서 픠여잇네

    山에서우는 적은새요
    ᄭᅩᆺ치죠와
    山에서
    사노라네

    山에는 ᄭᅩᆺ지네
    ᄭᅩᆺ치지네
    갈 봄 녀름업시
    ᄭᅩᆺ치지네

    山有花, 김소월

    시2 - 밝은 화면에 어울리는 light를 적용하여 검은 글씨가 등장.

    죽는 날까지 하늘을 우러러
    한 점 부끄럼이 없기를,
    잎새에 이는 바람에도
    나는 괴로워했다.
    별을 노래하는 마음으로
    모든 죽어가는 것을 사랑해야지
    그리고 나한테 주어진 길을
    걸어가야겠다.

    오늘 밤에도 별이 바람에 스치운다.

    서시(序詩), 윤동주

    시3 - natural을 적용하여 배경과 상호작용하게 만들었다. 무서운 느낌이 글자의 색 때문에 그대로 전해진다.

    十三人의兒孩가道路로疾走하오.
    (길은막달은골목이適當하오.)
     
    第一의兒孩가무섭다고그리오.
    第二의兒孩도무섭다고그리오.
    第三의兒孩도무섭다고그리오.
    第四의兒孩도무섭다고그리오.
    第五의兒孩도무섭다고그리오.
    第六의兒孩도무섭다고그리오.
    第七의兒孩도무섭다고그리오.
    第八의兒孩도무섭다고그리오.
    第九의兒孩도무섭다고그리오.
    第十의兒孩도무섭다고그리오.
    第十一의兒孩가무섭다고그리오.
    第十二의兒孩도무섭다고그리오.
    第十三의兒孩도무섭다고그리오.
    十三人의兒孩는무서운兒孩와무서워하는兒孩와그러케뿐이모혓소.(다른事情은업는것이차라리나앗소)

    그中에一人의兒孩가무서운兒孩라도좃소.
    그中에二人의兒孩가무서운兒孩라도좃소.
    그中에二人의兒孩가무서워하는兒孩라도좃소.
    그中에一人의兒孩가무서워하는兒孩라도좃소.

    (길은뚤닌골목이라도適當하오.)
    十三人의兒孩가道路로疾走하지아니하야도좃소.

    烏瞰圖 詩第一號, 이상


    사용법.

    <div class="cover" style="background-image: url(이미지);">내용들</div>
    <div class="cover light" style="background-image: url(이미지);">내용들</div>
    <div class="cover natural" style="background-image: url(이미지);">내용들</div>

    이미지라 되어 있는 곳에 이미지 주소만 넣으면 된다.


    • 티스토리 이미지 주소 꿀팁.

    티스토리에서 이미지를 삽입하면 다음과 같이 치환자가 삽입되는데

    [ ##_1N|cfile5.uf@995145415BDDC4212F07E6.jpg|width="900" height="1200" filename="photo_2018-11-04_00-04-30.jpg" filemime="image/jpeg" style=""""|_##]

    995145415BDDC4212F07E6.jpg 중 뒤의 8글자를 자르면 https://t1.daumcdn.net/cfile/tistory/995145415BDDC4212F처럼 바로 이미지 주소를 얻을 수 있습니다.


    1.8 차트.

    네이버의 Billboard.js를 사용하여 손쉽게 차트를 추가할 수 있습니다.

    차트 종류와 사용법은 상대적으로 복잡한 관계로 글을 하나 파서 설명하도록 하겠습니다.


    더 많은 예제를 보려면 데모 페이지를 확인하세요.

    TUI(TOAST UI) Chart도 고려해보긴 했는데 Billboard.js가 취향에 맞아서 선택.


    예)


    사용법.

    2018/11/07 - [IT] - Billboard.js 기초 사용법.

    참고.

    1.9 카드형 링크.

    Embedly를 사용하여 카드 형태의 링크를 제공합니다.


    예) 이 페이지. SEO 최적화 버전과 그냥 버전.

    Letter - Enhanced Ver. 2 프리뷰.

    호흡이 긴 포스팅을 위주로 하고 있습니다.

    Letter - Enhanced Ver. 2 프리뷰.



    사용법.

    <blockquote class="embedly-card"><h4><a href="주소">사이트 제목</a></h4><p>사이트 내용 요약</p></blockquote>
    <a class="embedly-card" href="주소">사이트 제목</a>

    위가 blockquote를 사용한 방법이 SEO 최적화 방식이고, a를 사용한 방법이 일반적인 방식이다.


    1.10 파일첨부.

    보다 깔끔하고 눈에 띄게 파일첨부 UI를 수정하였습니다.


    전후비교.



    Example.txt

    1.11 기타.

    - 부드러운 스크롤(파이어폭스, 크롬, 오페라).

    - 컨텐츠 로딩시 애니메이션.

    - Embedly, '카테고리 글 더 보기' 플러그인과 호환성 개선.

    - 각종 버그 수정 및 업데이트(Letter, Highlight.js, Mathjax).

    - 수식 폰트 개선(한글 Fallback을 Noto Serif KR로. 수식내 한글표현이 자연스러워졌어요!!).

    (참고. A Survey of Free Math Fonts for TEX and LaTex, Which OpenType Math fonts are available?, Math Font)

    등등.


    1.12 2.1 수정

    - 성능향상

    - 2020년에 미작동 되는 기능 수정

    - 티스토리에서 업데이트된 letter 스킨 반영


    2. 배포시기?

    2018년 11월~12월.

    그러니까 올해 말에 배포할 것을 목표로 삼고 있습니다.


    2018-12-27에 배포!!

    3. TODO?

    이 기능들은 추후 버전에 넣는 것을 검토만 하고 있으며,

    언제 들어갈지 저도 모릅니다.


    2년 3년 지나도 안들어갈 수도 있고, 제가 사용하는 스킨을 바꿔서 지원이 끊길 수도 있고..


    그나마 답해드릴 수 있는건 3.0은 내년 언젠가엔 나온다는 것.

    나중에 들어갈 업데이트들 일부는 전반적인 구조 조정이 필요한 큰 공사가 될 수도 있어 지금까지의 업데이트와 달리 시간이 좀 걸립니다.ㅠ


    • 스크롤 시 헤더 표시[내리면 사라짐].
    • 페이지 이동 애니메이션.
    • 아이콘을 벡터인 폰트로 변경(Font Awesome).
    • Font Face Observer를 사용해 글씨 깜박임 제거.
    • multilingual.js를 사용해 자연스러운 영문, 한글 글꼴 로드.
    • 화면 크기에 유동적인 글씨 크기.
    • 반응형 폰트 크기.
    • 목차(TOC) 생성.
    • 마크다운 지원.
    • 글씨 크기 변경 버튼.
    • 홈에서 기본형, 갤러리 변경 버튼.
    • 다크 모드 버튼.
    • 텍스트 요약 버튼.
    • 영상 iframe을 반응형으로.
    • 영상 pip.
    • 와이드 이미지.
    • Auto Link.
    • 댓글에 이미지(https://imgur.com/upload) 영상(https://gfycat.com/ko/upload) 버튼.
    • 위아래 이동 버튼.
    • amp 지원.
    • 404 페이지 꾸미기.
    • 핀터레스트, 텀블러 링크.
    • 단축키
    • 기타 성능향상(  예2)


    결론 에디터 업그레이드에서 플래시 제거 좀 ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ

    -끝-

    댓글 40

    • 프로필사진

      빨리 2.0이 나왔으면 좋겠네요.. :)

      2018.12.02 19:42 신고
      • 프로필사진

        12월 초까지 작업할게 갑자기 생겨서 말쯤에 공개할 거 같아요!!

        2018.12.02 20:51 신고
      • 프로필사진

        2.0 공개했어요~~~

        2018.12.27 04:31 신고
      • 프로필사진

        와!! 새해가 되기 전에 공개가 되었네요!
        소소하게 추가되고 변경된 사항 꼼꼼히 읽어보았습니다.
        항상 감사하게 사용하고 있습니다. :)

        여담이지만, 티스토리측에서 에디터를 개편한다는 소식이 올라왔네요. 드디어 한물 간 플래시를 없애는 것인가..
        (https://notice.tistory.com/2468?category=110385)
        정말이지 네이버 스마트 에디터를 볼때마다 정말 잘만들었다 싶었는데, (무려 깃헙이나 스택오버플로우처럼 인라인 코드삽입 기능이 있더라구요!) 빨리 개편되었으면 합니다. ㅎㅎ

        2018.12.30 21:19 신고
      • 프로필사진

        사실 크리스마스때 열심히 작업을 ㅠㅠㅠㅠㅠㅠ

        https://i.imgur.com/KjQAfOD.png
        현재 티스토리 페이지에 있던 에디터 기반 같은데 인라인 코드 삽입 기능은 이미 구현되어 있어요!!

        2018.12.31 00:07 신고
    • 프로필사진

      스킨 업데이트 해 주셔서 감사합니다
      너무 맘에 듭니다 :)

      2018.12.29 10:33 신고
    • 프로필사진

      B_V님 덕에 난생처음 HTML ,CSS 등 만져보네요... ㅎ

      지금 글들 보면서 이것저것 해보고 있는데

      스킨을 이미 만들어 놓으신거라 저는 적용만 하면 되는거죠?

      아니면 CSS를 수정을 하고 그래야하나요?

      2018.12.30 10:07 신고
    • 프로필사진

      비밀댓글입니다

      2019.01.08 15:15
      • 프로필사진

        음.. 일단 도와드리는 시도는 해보겠습니다만 아직 티스토리 치환자 같은 요소에 익숙치 않아서 시간이 좀 걸릴 수도 있고(ㅠㅠㅠ) 구조적인 부분도 확인해봐야 될거 같네요.

        2019.01.08 21:16 신고
    • 프로필사진

      비밀댓글입니다

      2019.01.09 11:11
    • 프로필사진

      새로나온 버젼 적용시 버그가 생깁니다 ㅠㅠ 기존 버젼에서는 별문제가 없었는데요.
      다름이 아니라 상단 왼쪽 부분에 가로선 세개를 누르면 카테고리가 나오는데요
      이번 버젼을 다운로드 후 적용을 했는데 가로선 세개가 뜨질 않네요 ㅠㅠ
      ---------------------------------------
      다시 설치하니까 나타났습니다.
      좋은 스킨 너무 감사합니다.

      2019.01.12 22:55 신고
    • 프로필사진

      안녕하세요. 버전2.0이 나와서 기쁜 마음으로 적용하고 잘 사용하고 있습니다. 다름이 아니라 문단정렬을 좌우정렬로 바꾸려고 하는데요. text-align:justify을 어디에 입력해야 pc와 모바일 모두에서 좌우정렬이 될지 몰라서... 몇 시간째 여기저기 끼워보고 있지만 잘 안 되네요. 염치불고하고 개발자님께 문의드리러 긴 댓글 남깁니다. 설 명절 마지막날 편안하게 잘 마무리하시기 바랍니다. 감사합니다.

      2019.02.06 17:09 신고
    • 프로필사진

      GOD..!

      블로그를 시작하면서 어떤 스킨을 할까 하다가
      혹시나 싶어 검색했더니 이런 보석 같은 블로그를 발견했네요.

      감사합니다!

      2019.02.21 01:59 신고
    • 프로필사진

      안녕하세요. 클리앙에서 보고 여기까지 왔습니다. 좋은 스킨 공유해주셔서 감사합니다.

      궁금한 점이 있는데, 이 스킨의 배경 색상은 어떻게 변경하는지 혹시 알려주실 수 있을까요.

      제 검색 능력이 부족해서 방법을 모르겠습니다. ㅠㅠ

      2019.03.26 17:43 신고
    • 프로필사진

      스킨을 보기 좋게 개선해 주셔서 배포까지 해 주시니 너무 잘 쓰고 있습니다!
      한가지 제 취향에는 맞지 않는 부분인데, "이미지 강조 & 그림자 효과"가 제 개인적으로는 쉽게 적응되지가 않는군요...ㅎ
      혹시 비활성화하는 방법이 있을까요?? 나머지 부분은 어찌어찌했는데 이 부분은 잘 모르겠군요 ㅠㅠ

      2019.03.28 15:31 신고
      • 프로필사진

        .article_view img:hover {
        transform: scale(1.03);
        -moz-box-shadow: 1px 1px 5px #ACACAC;
        -webkit-box-shadow: 1px 1px 5px #ACACAC;
        box-shadow: 1px 1px 5px #ACACAC;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        }
        를 없애면 될거에요.

        2019.03.29 00:15 신고
      • 프로필사진

        감사합니다! 잘 적용되었네요 :D

        2019.03.29 15:40 신고
    • 프로필사진

      스킨 잘 쓰고있습니다! 혹시 글 제목에 들어갈 글자 크기를 줄이려면 어떻게 해야하는지 아시나요??

      2019.04.08 22:28 신고
    • 프로필사진

      3.0은 언제 나올까요!
      잘 봤습니당 ㅎㅎ :)
      (혹시 돈 받고 작업해주시는지도 궁금해요)

      2019.09.28 14:43 신고
      • 프로필사진

        갑자기 많이 바빠져서 작업을 거의 못하고 있어요 ㅠㅠ
        올해 내에 결과물을 내고는 싶은데 커다란 기능을 많이 못넣고 마이너 업그레이드가 될거 같아요.

        돈받고 작업하는것 역시 바빠져서 힘들것 같네요.

        2019.09.28 17:05 신고
    • 프로필사진

      감사히 잘 쓰겠습니다. 블로그에 추천하는 스킨으로 소개 했습니다. 너무 좋아서^^ 행복하세요~

      2020.01.11 15:58 신고
    • 프로필사진

      잘 사용하고 있던 중 댓글창을 자동으로 펼침으로 되어 있는데,,,
      접기로 사용하려고 합니다. 아무리 관리자 화면에서 설정하는 곳을 찾아봐도 없어서 글을 남깁니다.

      스킨편집에서 설정해야되나요?

      2020.04.02 23:41 신고
    • 프로필사진

      안녕하세요! 레터 스킨 ENHANCED 너무 잘 이용하고 있습니다.
      쓸 때마다 아 이런 깔끔한 스킨이!
      궁금한 점이 있습니다.

      폰트 변경을 좀 하고 싶습니다. 어디서 어떻게 수정 가능한지 여쭙겠습니다.
      감사합니다.

      2020.06.01 14:40
      • 프로필사진

        주말에 상세하게 댓글로 달도록 하겠습니다!!

        2020.06.04 22:52 신고
      • 프로필사진

        답글주셔서 정말 감사합니다!

        주말이 기다려지네요. :) ㅎㅎ

        2020.06.05 10:37
      • 프로필사진

        댓글을 쓰려고 들어왔는데 동작하지 않는 것이 조금 보이더라고요. 수정하느라 늦었습니다.
        일단 성능을 향상 시키고, 미동작하는 것을 일부 수정한 2.1 기준으로 설명드리겠습니다.

        1. 폰트 고르기
        1) 배경지식
        맑은고딕처럼 대부분의 기기에 미리 설치되어 있지 않는한 사용자의 웹브라우저에서 폰트는 다운로드 되어야 합니다.
        이때 다양한 폰트들을 제공해주는 예가 바로 구글 폰트.
        https://fonts.google.com/

        현재 스킨은 Noto Sans KR과 Noto Serif KR폰트를 위주로 사용합니다. (html의 42, 43번 라인)
        그리고 코딩용 폰트로 hack과 D2Coding을 사용 중 입니다. (49, 51번 라인)

        2) 굵기
        400, 700, 900등은 글자의 굵기를 나타냅니다.
        400 => 보통, 700 => 굵음으로 대부분 사용합니다.

        만약 700과 900 스타일의 폰트를 고르지 않으면 굵게 효과를 낼 수가 없겠죠?
        그렇다고 모든 스타일을 다운로드 받으면 느려지니 조심하세요.

        3) serif, sans-serif
        Noto Serif KR처럼 장식이 있는 폰트를 serif
        Noto Sans KR 처럼 장식이 없는 폰트를 sans-serif
        폰트라고 부릅니다.

        2. 폰트 적용
        사용할 폰트를 골랐으면 적용해야 합니다.
        관리자 모드 - 스킨 수정을 사용해야 해요.

        1) HTML에서 다운받을 경로 설정
        구글 폰트에서 폰트를 고르면 오른쪽에
        Selected Family가 뜹니다.

        그 중 Embed를 골라보면
        link로 시작하는 박스가 보일거에요.
        이중 href의 내용을 복사해서 42번과 43번줄을 바꾸어줍니다.

        적용하면 선택한 폰트들이 다운로드 될거에요.

        2) CSS 적용
        다운로드만 하고, 적용을 안하면 안되겠죠?

        CSS에서 폰트를 적용하기 위해 알아두어야 할 것은
        - font-family: 폰트 종류
        - font-size: 폰트 크기
        - font-weight: 폰트 굵기
        입니다.

        고르신 폰트에 맞게 찾아서 기존 폰트를 바꾸어 주시면 됩니다.(컨트롤+F가 검색, 컨트롤+G가 다음 것 찾기이니 단축키를 잘 이용해보셔요.)

        구글 폰트의 link 박스 아래를 보면
        CSS rules to specify families 라고 적힌 박스에 font-family의 종류가 적혀져 있어요.

        2020.06.08 00:09 신고
      • 프로필사진

        넘나 귀찮은 거 BlaCk_Void님! 정말 눈물나게 감사드립니다!!!

        도저히 제가 건들 수 없는 부분이었는데,

        이렇게 귀한 주말 시간내어 자세히 알려주시다니!

        집에가서 열심히 변경해보겠습니다!

        정말 고맙습니다.

        2020.06.08 16:31
Designed by black7375.