인기포스트 MORE POST

    -

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)


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

    -끝-

    저작자표시 변경금지

    관련글 관련글 더보기

    댓글

Designed by black7375.

티스토리툴바