본문 바로가기

티스토리스킨/반응형 2단 스킨

티스토리 반응형 스킨 121 디모드(Dmode) 스킨 배포합니다.

반응형
-----------------------------------
2022-05-22 1.10 패치 안내
모바일 보기 화면에서 글목록 아이템 하단에 불필요한 여백이 발생해서 균형이 안맞아 보이는 현상 개선
모바일 보기 화면에서 검색 입력 필드 활성화를 하면 검색바가 사라지는 버그 패치

-----------------------------------
2022-03-30 1.01 패치 안내
헤더 표시 카테고리를 사이드바로 옮기면 검색바가 표시되지 않던 버그 패치.
기존 사용자는 style.css script.js 재적용 해야 합니다.

 

 

배포 스킨 하단의 저작권 표시와 스킨 소스의 저작권 표시 삭제를 금지합니다.

임의로 저작권 표시를 삭제하는 경우가 자주 눈에 띄어서 명시적으로 공지를 합니다.

 

하단 저작권 표시

 

2022년 배포 스킨부터는 인터넷 익스플로러에 대한 공식 지원을 중단합니다.
인터넷 익스플로러에서 사용하는데 문제는 없지만, 최신 웹 브라우저와 동일한 동작을 보장하지 못하며, 인터넷 익스플로러와 관련된 문의 또한 지원을 하지 않습니다.
옵션 설정으로 따로 켜는 부가 기능 중 몇가지는 인터넷 익스플로러에서 동작하지 않습니다. ("IE미지원"으로 별도 표시)

 

 

121 반응형 디모드 스킨의 주요 특징은 다음과 같습니다.

 

  • 다크모드가 지원됩니다. 토글 버튼으로 방문자가 직접 다크모드를 켜서 사용할 수 있습니다.
  • 블로그 하단에 고정 표시되는 사이드바 영역이 있는 스킨입니다.
  • 하단 사이드바 영역에 표시할 모듈은 자유롭게 설정할 수 있고, 사이드바 또한 왼쪽, 오른쪽으로 배치할 수 있습니다.
  • 사이드바를 감춰서 전체 너비를 모두 사용하는 1단 스킨으로 변경할 수 있습니다.
  • 검색최적화(SEO) 된 스킨으로 빠른 페이지 로딩 속도를 보장합니다.
  • 티스토리 내장 애드센스를 완벽하게 지원합니다.
  • 스킨을 커스터마이징 할 수 있는 90개 이상의 스킨 옵션 설정 항목을 제공합니다.
  • 스킨 수정이 용이하도록 스킨 소스에 풀 코멘트가 작성되어 있습니다.
  • 반응형 레이아웃으로 타블렛과 모바일 기기를 완벽하게 지원합니다.
  • 기본 아이콘으로 CDN 기반의 폰트어썸(FontAwesome) 아이콘 무료버전을 사용합니다.

 


- 웹브라우저 너비를 줄여서 반응형 레이아웃을 확인해볼 수 있습니다.

- 다크모드 버튼을 눌러서 다크모드를 확인해볼 수 있습니다.

 

 

미리보기1

 

미리보기2

 

스킨 다운로드

 


 

 

1. 다크 모드 사용

스킨 기본 설정으로 켜져있기 때문에 스킨을 설치하면 블로그 하단에 다크모드 옵션 항목이 표시됩니다. 해와 달 아이콘으로 표시되는 다크모드 토글 아이콘을 클릭하면 라이트모드 <-> 다크모드가 변경됩니다.

다크모드는 정해진 어두운 단일톤의 색상으로 고정되어 표시됩니다.

다크모드는 반응형 모바일 화면에서도 그대로 적용됩니다.

 

다크모드 토글 아이콘

 

다크모드 사용 옵션은 스킨 옵션 설정 "푸터" 그룹에 있습니다.

 

다크모드 설정 옵션

 

다크모드 사용 여부를 켜거나 끌 수 있고, 기본 푸터 영역에 표시되는 다크모드 토글 아이콘을 오른쪽 하단에 고정시켜서 표시할 수도 있습니다.

 

우측 하단에 고정된 다크모드 아이콘

 

 

2. 하단 고정 사이드바에 모듈 배치하기

하단 영역에 3개, 또는 4개의 사이드 모듈을 고정 배치할 수 있습니다.

 

 

반응형 레이아웃이기 때문에 대상 기기에 따라 4개->2개->1개로 자동으로 1행에 배치되는 모듈 갯수가 변경됩니다.

 

모듈 3개를 표시하는 하단 사이드바

 

하단 사이드바에 고정배치하는 모듈은 블로그 관리자 화면 사이드바 항목에서 "사이드바2" 그룹에 배치하면 됩니다.

 

블로그 관리자 사이드바 모듈 설정 화면

 

 

3. 사이드바 위치 변경

사이드바 표시 위치를 왼쪽/오른쪽 중에서 선택할 수 있습니다.

스킨 옵션 "레이아웃-사이드바 표시/위치" 에서 왼쪽, 또는 오른쪽을 선택하면 됩니다.

 

 

 

4. 사이드바를 감춰서 1단 스킨으로 변경하기

"레이아웃 사이드바 표시/위치" 항목을 "감춤"으로 선택하면 사이드바가 사라지고, 데스크탑 화면에서도 모바일 기기의 펼침 사이드바 메뉴처럼 동작하게 됩니다.

 

 

 

5. 커버페이지 설정하기

커버페이지는 기본으로 꺼져 있으며, 스킨 설정 화면에서 "커버"를 선택해서 켜야 합니다.

사용할 수 있는 커버 아이템 종류는 8가지입니다.

다양하게 변형을 준 데모 커버 페이지가 미리 구성되어 있으며, 취향에 맞춰 필요한 커버 아이템만 남겨서 컨텐츠를 작성하면 됩니다.

 

 

 

6. "커버 리스트" 만으로 커버 페이지 구성하기

커버 페이지 아이템중 "커버 리스트" 아이템은 조금 특별하게 일반 글목록과 같은 레이아웃을 가집니다.

스킨 옵션 설정에서 설정한 글목록 설정과 같은 모양으로 표시되기 때문에 다른 커버 아이템들을 모두 삭제하고 "커버 리스트" 커버 아이템 만으로 원하는 글을 모아서 표시하는 메인 커버 페이지를 구성할 수 있습니다.

 

 

7. 구글 번역 기능 사용하기

해외 접속자를 위한 블로그를 운영할 경우 구글 번역 기능을 블로그에 추가해서 구글 자동 번역 기능 활용할 수 있습니다.

 

 

스킨에 구현된 구글 번역 기능 화면은 기본 구글 번역 언어 선택 목록 표시 방법과 깃발 아이콘으로 주요 9개 언어를 선택하는 두가지가 가능합니다.

 

 

8. 모바일 화면 설정

반응형 모바일 화면 전용으로 설정할 수 있는 여러가지 설정 옵션을 제공합니다.

 

 

 

9. 테두리와 그림자 효과, 그리고 테마 색상 선택하기

전체 배경색, 그리고 블록 영역들의 배경색과 테두리 색상, 그리고 테두리 두께를 설정할 수 있습니다.

기본으로 켜져있는 블록 영역 그림자 효과 또한 옵션 설정에서 끌 수 있습니다.

 

 

 

10. 사용 가능한 옵션 항목들

 

 

반응형

Comments

  • 이전 댓글 더보기
  • 감사합니다 .,그리고 넘 잘만드세요..
    프론트엔드.,멋있네요..,
    저 궁금한게 있는데요. 태블릿(아이패드) 에서는 모바일 스킨이 잘 적용이 되는데
    삼성 s20 에서는 티스토리 디폴트 스킨으로 나오는데 제가 정확히 알지는 못하지만
    각 기기 마다 적용시킬려면 많은 수고스러움이 있어서 대표작들만 적용하신걸까요?

    참 넘 맘에듭니다..그리고 반응형 으로 만들기가 고급 기술(?)이라는데.,. .,.진짜 대단하세요.,..

    • 티스토리 관리자 화면의 꾸미기/모바일 기능에서 모바일웹 설정을 모바일웹 자동 연결을 "사용합니다"로 설정하신게 아닌지 확인해보시기 바랍니다.

      반응형 스킨을 사용할 때는 "사용하지 않습니다"로 설정해야 합니다.

      아이패드는 화면이 커서 데스크탑 기기로 인식되서 모바일 화면으로 보이는게 아닐 수도 있습니다.

      "사용합니다"로 설정하면 티스토리 기본 스킨으로 보이며 모바일 기기에서 접근할 때
      블로그주소/m
      경로로 자동 리다이렉트가 걸립니다.

    • 감사합니다 .ㅠㅠ 좋은 봄날 되시기를!! 거의 여름인것 같지만요!!

  • 익명 2022.05.07 00:07 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 블로그를 검색엔진에 등록하기 위해 인증을 하는 몇가지 방법 중에 한가지 방법으로 블로그 헤더 영역 메타태그로 검색엔진에서 등록 과정중에 표시되는 문자열 키를 넣는 항목입니다.

      검색엔진 등록할 때 어떤 방식으로 인증할지 선택할 수 있는데 티스토리는 스킨 html의 헤더 영역에 메타태그를 이용해 인증키를 추가해줘야 블로그가 검색엔진에서 인증이 되고 검색엔진에서 크롤링을 해서 인덱싱을 하게 됩니다.

      초보자를 위해 직접 스킨 html에 메타태그를 추가하는 번거로움 없이 스킨 옵션 설정에서 이 메타태그 값을 입력할 수 있도록 만들어진 항목입니다.

      검색엔진에 등록하지 않을거면 사용하지 않는 항목입니다.

      검색엔진에 등록하지 않으면(특히 구글) 방문자가 거의 늘지 않는 블로그가 되므로 검색 엔진 등록은 필수 입니다.

  • 익명 2022.05.07 16:15 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 같은겁니다. html코드로 붙여넣는걸 플러그인으로 구현하거나 스킨옵션으로 구현한것입니다.

  • 안녕하세요~ 스킨 배포 감사합니다. 잘사용하겠습니다!

  • 푸터에 다크모드 관련 체크하는부분이 안나옵니다 ㅠㅠ 또 배경색상 변경또한 안되는데 혹시 방법이 있을까요?

    • 스킨이 정상 적용되지 않은 것으로 보입니다.

      스킨이 정삭적으로 적용되고 스킨 옵션이 설정되려면 스킨에 포함된 index.xml 파일도 반드시 같이 업로드 되어야 합니다.

      스킨 설정은 다음 글을 참조해 보시기 바랍니다.
      https://blogpack.tistory.com/930

  • 안녕하세요.
    아이폰 사용중인데 실제로 아이폰에서 접속하면 오른쪽 상단 돋보기 모양이 안나옵니다.
    임의로 터치해서 검색어 쓰고 하면 검색은되는데 검색어 글자도 안보이네요..ㅠ

    • 모바일 화면에서 검색 입력바가 표시되지 않는 버그가 있어서 스킨 패치가 되었습니다.
      스킨을 패치해 보시기 바랍니다.

      스킨 패치 후에는 아이폰에서 사파리 브라우저 캐시를 소거해야 스킨 패치된 내용이 즉시 반영되어 보입니다.

      스킨에 포함된 파일들중 style.css, images/script.js 파일 2개가 패치되었습니다.

    • 안녕하세요. 댓글 감사합니다.
      댓글 확인 후 다시 다운로드 받아서 해봤는데 동일한 것 같습니다. 말씀하신대로 캐쉬 다 삭제 후 해봤는데도 마찬가지네요..ㅠ

      1.10 버전은 혹시 다운받는 경로가 다른건가요?

      스킨 다운로드를 통해 다운받은 스킨은 예전에 다운받은 스킨이랑 파일 안에 내용이 똑같아요 ㅠ

  • 안녕하세요!
    1.1 버전은 어디서 다운받으면 되나요?
    위에 스킨 다운로드해서 받으면 예전꺼랑 동일합니다...ㅠㅠ 패치되었다는 파일 두개도 내용을 비교해보니 동일하구요ㅠ

    • 스킨은 패치되어있고, 기존 다운로드 링크 버튼 누르면 새 버전이 다운로드 됩니다.

      서버 인증서 만료로 인해 어제와 오늘 오전 동안은 스킨 파일이 다운로드가 안되었습니다.
      다운로드 받았다는 파일은 아마 이전에 다운로드 받은 파일이 아닌가 싶습니다.

      새로 패치된 파일은
      script.js 129행이 다음처럼 리마크 처리가 되어 있습니다.(검색 입력필드 활성화를 할 때 키보드 활성화가 안되고 풀리는 문제 해결)

      //checkSearchBar();

  • 안녕하세요!
    패치된 버전 잘 다운 받았습니다.
    하지만 아이폰 사파리, 크롬 앱에서 접속하면 여전히 검색(돋보기 모양)이 안보이네요...ㅠㅠ

  • 다크모드 찾고 있었는데 전체적으로 넘 이쁘네요 감사합니다!

  • 감사합니다.^^/

  • 익명 2022.06.14 11:04 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 안녕하세요! 예쁜 스킨 제공해주셔서 감사합니다! 그런데 방금 제가 스킨을 적용하니 포스팅에 있는 구글 애드센스 상단 하단 광고 노출이 모두 안되게 되어버렸는데요...(코드 넣어서 적용한 광고입니다) 조금 기다려보면 나올까요?! 속상하네요ㅠㅜ

    • 코드 자체가 사라진게 아니고 애드센스 코드가 에러없이 실행되고 있는거면 스킨 변경으로 인해 인덱싱이 다시되면서 일시적으로 광고가 안나오고 있는 것일 수 있습니다.
      애드센스 코드 이상 없는지 확인 먼저 해보시고
      하루 이틀 정도 기다려 보시기는 걸 추천합니다.

  • 익명 2022.06.14 11:14 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

  • 얼마 전 교보문구에 갔다가 HTML&CSS 책이 예뻐서 보다가 어포스트님이 쓰신 것을 보고 후다닥 샀습니다. 인스타그램처럼 배치되는 포토블로그 스킨을 사용했었거든요. 그런데 코딩에 재미를 느끼지 못해서 진도가 나가지 않았는데 바로 여기 이렇게도 예쁜 스킨이 나와있지 뭐예요. 적용해보았는데 정말 오밀조밀하고 몽글몽글한 게 기분이 너무 좋아요. 잘 사용하겠습니다!! 멋진 어포스트님에게 복이 깃들기 바라며 항상 건강하세요! 짱짱

    • 감사합니다. ^^; 저렴하게 책을 만들다보니 중간 과정이 좀 생략되서 오타가 좀 있습니다. 감안해서 보셔야 합니다.

  • 안녕하세요 어포스트님! 스킨 정말 감사히 다운받아 사용하고 있습니다.
    다름이 아니라, 블로그 레이아웃 상 블로그 타이틀 부분이 보이지 않고 본문과 사이드바만 노출되도록 하고 싶습니다.
    (예시 이미지에서 Dmode라고 쓰여있는 블로그 제목 부분을 지우고, 신문을 보는 듯한 인상을 주려 합니다.)
    아마 타이틀 부분을 헤더라고 하는 것 같아 레이아웃 헤더 부분을 여기저기 만져보고 있는데 어떻게 하면 블로그 타이틀 부분을 사라지게 설정할 수 있을지요?

    • 간단하게 구현하자면
      skin.html 에서 다음 태그를 찾아서(스킨 원본 기준 332행)

      <div class="title">
      ...
      </div>

      삭제하면 됩니다.

    • 도움 말씀 감사드립니다. 혹시 타이틀을 지운 이후 나머지(본문, 사이드바) 레이아웃을 위로 끌어올리려면 다른 많은 부분을 같이 손봐야 하는 것이지요??

    • 설명을 너무 대충한듯 하네요.


      1.
      skin.html 에서
      <div class="title">
      ...
      </div>
      을 삭제


      2.
      헤더 높이가 최소 값이 설정되어 있습니다.
      style.css 에서 위에서 부터 검색해서 처음 나오는 것만 수정합니다.

      #header > .inner {
      클래스의
      min-height: 205px;
      속성 삭제

      #header {
      클래스의
      min-height: 305px;
      속성 삭제
      옵션 설정에서 레이아웃 너비를 좁게 설정한 경우
      .narrow-header #header {
      .category-side.narrow-header #header {
      두 클래스에서
      min-height
      min-height
      속성 삭제

      를 하면 헤더 영역이 남아있는 헤더 안의 컨텐츠 높이 만큼만 남고 위로 달라붙게 됩니다.

      style.css 원본기준 234 ~ 251 행에 몰려 있으므로 해당 영역의 min-height 값만 없애거나 조정해주면 됩니다.

      높이를 조금 남겨서 여백을 주고 싶으면 위의 클래스 중 #header > .inner { 클래스의 min-height 값을 50px나 60px 정도로 적당히 값을 주면 됩니다.


      3.
      블로그 메뉴와 sns아이콘까지 모두 없애서 깨끗하게 비우고 싶으면 스킨 옵션 설정 헤더-sns아이콘보기, 헤더-블로그 메뉴 표시 두 옵션을 끄면 됩니다.

      sns아이콘과 블로그 메뉴까지 모두 뜨게 되면 헤더 카테고리 영역이 웹브라우 상단에 달라붙어서 조금 어색해 보일 수 있는데 앞서의

      #header > .inner

      클래스에서 min-height 속성을 지우지 말고
      min-height 값을 35px 정도로 변경해주면 상단과 적당히 여백을 두고 헤더 카테고리가 위치하게 됩니다.

    • 선생님! 234~251행이라고까지 알려주신 덕분에 드디어 수정 성공하였습니다. 스킨이 완벽해지니 블로그에 글 올릴 의욕이 샘솟습니다. 바쁘신 와중에도 시간 내어 친절히 답변해주시어 정말 감사드립니다. 좋은 하루 되십시오!!

  • 감사히 잘 쓰겠습니다^^!

  • 안녕하세요!
    예쁜 스킨 공유해주셔서 감사합니다! 예쁘게 잘 쓸게요!ㅎㅎ

  • 안녕하세요 예쁜 스킨 공유해주셔서 감사합니다~~!! 잘 쓰겠습니다!!! ㅎㅎ

  • 하하 저만의 티스토리 스킨 만들면서 디자인 포트폴리오에도 넣어보겠다고 어거지로 티스토리 스킨 만들려고 티스토리의 기반인 코드짜기에 도전했다가 대차게 실패했네요. 그래서 다른 스킨을 보다가 이 스킨을 보게 됬습니다. 제대로 꽂혀서 잘 쓰겠습니다.

    비록 실패해서 한동안은 티스토리 스킨은 손도 못대겠지만, 이 스킨으로 만족해야겠습니다.

  • 스킨찾다 우연히 들어왔는데 정말 좋은거 많네요 ㅎㅎㅎ 감사합니다.


❌ 닫기