nQuark 버전 2.5 업데이트입니다.


공무원준비로 인해 웬만하면 안하려고 했는데...


깃허브로 소스코드를 공개해도 참여하는 사람이 안보여서 제가 작업해 버렸습니다. ㅠㅠ


* nQuark 2.5 다운로드


tistory000001_rev2.5.zip



* 변경사항(2.5 업데이트 사항) - 


1. 뒷배경 svg로 바뀜. svg로 배경이 바뀌면서 배경 모양도 방사형 그라디언트 -> 사선 직선형 그라디언트로 약간 변경하였음. -> 예상되는 효과 : 스킨 로딩 속도 증가


2. Tablet mode에서 Sidebar 2단 나눔 (CSS3 사용)


3. 티스토리 키워드 기능과 관련된 웹 접근성 문제 해결 -> 키워드 기능과 글자 서식을 같이 썼을 때 글자 색깔이 묻히는 문제 해결





2.4 업데이트 사항 -


1. 티스토리 기본 제공 리스트(ordered li, unordered li) 번호 출력되도록 추가


2. 티스토리 기본 제공 캡션 스타일 추가




2.3 업데이트 사항 -


(스킨 파일은 업데이트 되었으며, 좀 더 자세한 사항은 이 블로그에 새로 글을 써서 올릴 예정입니다.)


1. <p> 태그로 이미 감싸져 있는 유투브(비메오, 네이버동영상 포함) 동영상의 경우 <p> 태그를 새로 감싸지 않도록 jQuery 부분 변경 - 웹표준 관련 기술적 이슈 때문.

(관련 내용 참고 : "p 요소와 같은 블럭 요소는 다른 블럭 요소를 포함할 수 없습니다.")


2. 모바일에서 상단 오른쪽 리스트 길이 제한 후 scroll 되도록 변경.


3. 제목 로고 넣는 부분 추가 - 스킨에서 자유롭게 변경 가능(mlogo.png 파일이 새로 생겼습니다. - 이 블로그의 도용을 막기 위해 스킨 파일에는 이 블로그와는 조금 다른 모양의 로고가 포함되어 있습니다.)


4. 티에디션에서 본문 글이 적을 때 오른쪽 요소가 float 되는 버그 해결.


4번 문제에 대해서는 말로 설명하는 것보단 캡쳐된 파일을 보는게 이해가 더 빠를 겁니다. 티스토리에 새로운 글을 포스팅하면서 그 부분은 추가하겠습니다.


5. selection 기능 추가

http://blog.koyeseul.net/806 참고.



2.2 업데이트 사항 -


http://blog.koyeseul.net/767


1. 유투브 동영상 아무것도 감싸지 않고 넣었을 때 다른 컨텐츠가 가려지는 문제 보완 - 이 부분은 해당 유투브 <iframe> 태그 앞뒤에 <p></p> 태그로 감싸면 해결되는 문제였으나, 유저들이 모든 동영상을 이렇게 일일히 바꾸는 것은 불편하다고 요청하셔서 아무런 태그로 감싸지 않아도 동영상이 반응형으로 자동으로 바뀌도록 수정하게 되었습니다.


2.1 업데이트 사항 - 


http://blog.koyeseul.net/680


1. 티에디션 시스템 변화에 따른 티에디션 변수 업데이트 (최근 티스토리 HTML/CSS 편집 메뉴가 변화하면서 티에디션 시스템에 약간의 변화가 있었습니다. 따라서 최근 티스토리를 쓰면서 nQuark 이전 버전을 사용하시면 티에디션이 제대로 적용되지 않을 가능성이 높습니다.)


2. 글 목록 리스트 클릭 영역 확장 (모바일, 특히 아이패드에서 목록 리스트의 영역이 작아서 선택하기가 불편하더군요. 특히 제목이 짧은 경우에... 그래서 수정했습니다.)


3. 주소가 들어갈 부분 input type="url"로 변경 (따라서 모바일에서 로그인하지 않은 손님이 홈페이지/블로그 주소를 넣기가 더 쉬워졌습니다.)


4. 카운터 부분 width 고정 (앞으로는 기기 해상도가 변해서 스킨의 사이드바 영역 넓이가 변해도 카운터 부분의 넓이는 변하지 않습니다.)


5. 폰트 웹 접근성 개선

5-1. 저시력자 등 특정 장애인이 브라우저상의 폰트 설정을 조절했을 때 폰트의 크기가 쉽게 변경되도록 조정.

5-2. body에 설정된 기본 폰트 사이즈가 12px(0.8em) 인데, 이 사이즈에 line-height가 150%인 것은 너무 좁다는 의견이 있어서 170%로 수정함.










* 구버전 다운로드


tistory000001_rev2.0_p003.zip











* 이번 nQuark 2.0에서의 변경사항


1. xhtml1.0 구조에서 html5 구조로 변경


2. footer 장애인 웹 접근성 개선


3. 긴 주소 본문에서 짤려 보이는 문제 개선


4. ie7에서 태그 부분 겹쳐지는 문제 개선




이 중에서 1번은 굉장히 중요한 업데이트사항입니다. 기존 nQuark 1.x 버전은 xhtml1.0에 css3를 입힘으로써 익스플로러 구버전에 대응해 왔습니다. 그러나 현업에서 업무를 진행하면서 html5로도 익스플로러 구버전에 대응할 수 있는 방법을 알게 되었고, 장애인 웹 접근성 측면, 구글 검색노출 측면에서도 html5가 조금 더 유리합니다. 따라서 html5로 구조를 변경하게 됨으로써 이번 업데이트는 Major Update라고 할 만합니다.





* 익스플로러 구버전에서 이슈가 될 만한 사항


익스플로러 구버전에서는 스크립트 경고창이 한번 뜹니다만, 반응형을 위한 모바일 브라우저에서 반드시 필요한 부분이기 때문에 이 오류를 제거할 수 없었습니다. 양해 바랍니다.





이 스킨은 공식적으로는 익스플로러 7.0부터 지원합니다. 하지만 모든 요소의 모양을 제대로 보려면 익스플로러 9.0 이상을 권장합니다.


자유롭게 수정이 가능하며, 저작권 표시하에 재배포가 가능합니다.


한글 웹폰트를 3개나 사용했으며, 방사형 그라디언트가 적용된 용량이 꽤 큰 배경이미지를 사용하는 스킨이므로, 스킨의 성능이 중요한 상황(ex. 외국에서 티스토리를 사용하거나 외국 사람들이 많이 볼만한 컨텐츠를 제작하는 사람)께서는 이 스킨을 권장하지 않습니다.


티스토리 스킨 설치 초보자에게는 <티스토리 초보자 스킨 설치 가이드>를 참고해 주시기 바랍니다. 특히 이 스킨으로 티에디션을 사용할 때에는 주의사항이 있습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. 두발여행 2015.10.06 18:52 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다! 제가 이미지를 안넣은게 맞네요! 다시 해보니 정상적으로 적용되네요! 멋진 스킨 잘 쓰겠습니다!

  3. 2015.10.25 23:00  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 2015.10.26 14:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 책덕후 화영 2015.10.26 14:23 신고  댓글주소  수정/삭제

      흰색/짙은 푸른색 배경인 부분 바꾼다는 뜻이죠? 배경색을 바꾸려면 그림파일의 색깔을 바꾸셔야 합니다. images 폴더 안에 mdivbackground 라는 파일이 있을거에요. 그 파일의 왼쪽/오른쪽 부분 색깔 바꿔주시면 적용됩니다. 다만 모바일의 경우에는 색깔이 코드로 덮여씌워지므로 또한번 색깔을 바꿔줘야 하는데,

      @media screen and (max-width: 800px)
      #content {

      부분 찾으셔서 background-color 부분 바꾸시구요,

      @media screen and (max-width: 800px)
      #sidebar {

      부분 찾으셔서 background-color 부분 바꾸시면 모바일 부분 적용됩니다.

    • 책덕후 화영 2015.10.26 14:24 신고  댓글주소  수정/삭제

      그게 아니라 그라디언트 적용된 뒷배경 바꾸시는 거라면 body 태그 찾으셔서 background-image 라고 되어 있는 부분 바꾸시면 됩니다. 그럼...

  5. 달곰이야기 2015.11.02 22:49 신고  댓글주소  수정/삭제  댓글쓰기

    이런 좋은 스킨 배포 감사합니다 저도 스킨을 적용해서 쓰려는데 제가쓴글 중에서 표를 만든것들은 반응형으로 반응을 하지 않아서 짤리는 현상이 있는데 어떻게 방법이 없을까요? 짤리는 현상때문에 다른 스킨사용중에 있습니다 ㅠㅠ

    • 책덕후 화영 2015.11.03 00:44 신고  댓글주소  수정/삭제

      표가 이미지로 된 표라면 자동으로 리사이징 될 것입니다. 짤렸다는걸 보니 님이 말씀하시는건 table 로 짠 html 코드를 말씀하시는 것 같은데... 그 부분 링크로 보내주시면 제가 조언해 드릴 수는 있을텐데, 스킨에서 바꿔야 하는 부분도 있지만 대부분 table 태그 내에서 고쳐야 할 것들이 많습니다.

  6. 2015.11.03 13:58  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 책덕후 화영 2015.11.03 14:05 신고  댓글주소  수정/삭제

      링크면 됩니다. ^^ 지금 보여주신 표가 반응형이 안되고 짤리는 이유는 표에서 자체적으로 width값을 고정 픽셀로 주었기 때문입니다. 고정 픽셀로 된 width 값을 없애고 대신 % 값을 넣어주셔야 합니다. 아무래도 저렇게 고정픽셀값으로 들어간 이유는 티스토리 자체 내장 기능으로 표를 삽입했거나, 아니면 드림위버 등의 에디터로 작업하면 저런 현상이 일어납니다. <table width="100%"> 로 주시고, <td width>는 영역 모양에 따라 25%, 50%, 75% 중 하나를 주시면 해결될 것으로 보입니다. 그리고 height 값을 되도록이면 없애주세요. 표를 반응형으로 만들려면 세로길이가 고정적이지 않고 내려와야 한답니다. 좋은 답변 되었는지요.

      제일 위쪽 테이블만 예를 들어서 바꿔보면 다음과 같이 변경해야 합니다.

      <table class="txc-table" style="FONT-SIZE: 9pt; BORDER-TOP: medium none; FONT-FAMILY: 돋움; BORDER-RIGHT: medium none; BORDER-COLLAPSE: collapse; BORDER-BOTTOM: medium none; BORDER-LEFT: medium none" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
      <tbody>
      <tr>
      <td style="BORDER-TOP: #7c84ef 1px solid; BORDER-RIGHT: #7c84ef 1px solid; WIDTH: 100%; BORDER-BOTTOM: #7c84ef 1px solid; BORDER-LEFT: #7c84ef 1px solid" colspan="2">
      <p style="TEXT-ALIGN: center"><span style="FONT-SIZE: 12pt"></span><span style="FONT-FAMILY: 굴림; BACKGROUND: #ffffff; mso-fareast-font-family: 굴림"><span style="FONT-SIZE: 12pt; FONT-FAMILY: Gulim,굴림,AppleGothic,sans-serif">운영체제</span></span></p></td></tr>
      <tr>
      <td style="BORDER-RIGHT: #7c84ef 1px solid; WIDTH: 50%; BORDER-BOTTOM: #7c84ef 1px solid; BORDER-LEFT: #7c84ef 1px solid">
      <p style="TEXT-ALIGN: center"><span style="FONT-SIZE: 12pt; FONT-FAMILY: Gulim,굴림,AppleGothic,sans-serif">&nbsp;</span><span style="FONT-SIZE: 12pt; FONT-FAMILY: Gulim,굴림,AppleGothic,sans-serif; BACKGROUND: #ffffff; mso-fareast-font-family: 굴림">운영체제</span></p></td>
      <td style="BORDER-RIGHT: #7c84ef 1px solid; WIDTH: 50%; BORDER-BOTTOM: #7c84ef 1px solid">
      <p style="TEXT-ALIGN: center"><span style="FONT-SIZE: 12pt; FONT-FAMILY: Gulim,굴림,AppleGothic,sans-serif">&nbsp;</span><span style="FONT-SIZE: 12pt; FONT-FAMILY: Gulim,굴림,AppleGothic,sans-serif; BACKGROUND: #ffffff; mso-fareast-font-family: 굴림">운영체제</span></p></td></tr></tbody></table>

  7. 2015.11.03 18:42  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 책덕후 화영 2015.11.03 22:52 신고  댓글주소  수정/삭제

      <table> 태그 속성은 모든 글을 수정하지 않더라도 스킨에서 css로 수정이 가능합니다만, <td> 태그에 들어가는 속성은 스킨에서 일괄적으로 바꾸기가 힘듭니다. 왜냐하면 모든 테이블의 td width 값이 다 달라야 논리적으로 맞기 때문입니다. td의 크기를 자동적으로 인식하는 기능이 현행 css에는 없습니다. 그런 경우 가장 최선의 방법은 td태그에 들어가는 width값을 아예 지워버리는 것입니다.

      <table> 태그 속성의 width를 일괄적으로 100%로 바꾸는 방법은 스킨마다 조금씩 다릅니다만, 님의 스킨의 경우 css 속성에서

      .article table{width:100%;}

      로 넣어주시면 됩니다. 만일 이렇게 해도 안된다면 다음 방법을 사용해 보세요.

      .article table{width:100% !important;}

      하지만 td속성을 스킨에서 일괄적으로 바꾸는 것이 어려우므로 실질적인 효과는 느껴지기 어려울 겁니다.

    • 책덕후 화영 2015.11.04 22:44 신고  댓글주소  수정/삭제

      생각을 좀 해봤는데 일괄적으로 처리하는 방법이 있기는 하네요. css 넣는 부분에 다음과 같은 코드를 삽입해 주시기 바랍니다. 티스토리 블로그 스킨에서는 style.css 에 넣으시면 됩니다. 참고로 두번째 줄의 코드가 td 태그에 들어가는 width 값을 초기화 시키는 역할을 합니다.

      .article table{width:100% !important;}
      .article td{width:auto !important;}

  8. 스티브잡숴 2015.11.26 23:55 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 스킨 감사합니다.
    혹시 사용하다 질문 있으면 해도 되겠습니까?

    • 책덕후 화영 2015.11.27 07:45 신고  댓글주소  수정/삭제

      넵 질문은 언제든지 가능하지만 회사일을 해야하므로 바로바로 피드백이 오지 않을 수 있습니다.

    • 스티브잡숴 2015.11.29 09:51 신고  댓글주소  수정/삭제

      안녕하세요..
      음...바탕화면하고 옆에 사이드바 색상 조정은 어떻게 하는지요...
      바탕화면은 제가 대충 해보니 조정은 가능하겠던데, 사이드바는 줄만 한줄 처져 있던데...ㅠ.ㅠ

      어떻게 수정하면 되죠?

    • 책덕후 화영 2015.11.29 12:20 신고  댓글주소  수정/삭제

      1. 바탕화면 조정

      style.css 11줄부터 보시면 body 의 속성이 기재되어 있을 겁니다. 이 부분의 소스코드를 바꿔서 바탕화면을 조절합니다. 대략 지금은 이렇게 되어 있지요.

      body {
      background-image:url(images/mbackground.jpg);
      background-repeat:no-repeat;
      background-position:center center;
      background-attachment:fixed; background-size:cover;
      }

      유의할 점은 그림파일을 넣는 것이기 때문에, 다른 그림파일을 삽입할 경우 images 경로 내에 파일 이름을 맞춰서 넣어 주셔야 한다는 겁니다.

      2. 사이드바 색상 조정
      사이드바의 경우 PC환경/mobile 환경의 색상이 나누어져 있으므로, 2번 바꾸셔야 합니다.

      2-1. PC환경
      style.css 72줄에 보면 #container1 { 다음에

      background-image:url("images/mdivbackground.gif");

      라는 부분이 보이실 겁니다. 이 부분을 변경하거나, 또는 mdivbackground.gif를 찾아서 이미지를 변경해야 합니다.
      이 이미지는 세로로 반복되는 이미지로, 왼쪽의 흰색과 오른쪽의 짙은 파란색으로 이루어져 있습니다. 이 이미지 모양을 바꾸셔야 색깔이 바뀝니다.
      이렇게 블로그 스킨을 제작한 이유는 아래 글을 참고해 보시기 바랍니다.
      http://blog.koyeseul.net/348
      http://blog.koyeseul.net/340

      2-2. 모바일 환경
      style.css 408줄, 414줄의 background-color 값을 바꾸시면 됩니다.

      @media screen and (max-width:800px) {
      ...
      #content{
      float:none;
      width:86%;
      padding:2.625% 7%;
      background-color:#fff;
      }
      #sidebar{
      float:none;
      width:92%;
      padding:4%;
      background-color:#2c3e50;
      }
      ...
      }

      이런 부분이 있을 텐데, 여기서 background-color를 바꿔주시면 되어요.

    • 스티브잡숴 2015.11.29 14:09 신고  댓글주소  수정/삭제

      헉!....이렇게나 복잡합니까?
      저는 그냥 mbackground.jpg 파일을 똑같이 다른 색상으로 만들어 업로드하면 될줄 알았는데...

    • 책덕후 화영 2015.11.29 16:18 신고  댓글주소  수정/삭제

      바탕화면 바꾸시려면 mbackground.jpg를 다른 색상으로 만들어서 업로드하셔도 됩니다. 하지만 바탕화면의 근본적인 속성을 바꾸지는 못하죠. 일례로 지금 바탕화면은 화면이 고정되어 있어 스크롤해도 바탕화면이 변하지 않는데 이런 속성을 그림만 바꾼다고 변화시키지는 못해요. 좋은 답변 되었는지요 ^^

    • 책덕후 화영 2015.11.29 16:19 신고  댓글주소  수정/삭제

      마찬가지로 PC 환경에서 메인/사이드바 색상 조절하는 가장 쉬운 방법은 mdivbackground.gif 파일의 색상을 교체하는 것입니다. ^^

  9. 이하늘e 2015.12.04 16:50 신고  댓글주소  수정/삭제  댓글쓰기

    2.0 적용해볼라구 하는데요! 가이드 따라 했는데
    티에디션 적용시 html 편집 부분이 달라진거 같은데 어찌해야되나용

  10. SONYLOVE 2015.12.04 23:29 신고  댓글주소  수정/삭제  댓글쓰기

    능력자셨군요..스킨도 만드시고.. 부러워요.
    원하는대로 블로그를 꾸밀 수 있다는건 너무 멋진일 같아요.

  11. 공대우냉이 2016.02.04 13:33 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 ^^ 정말 이쁜 스킨입니다. ㅎㅎ

    제가 유투브 동영상을 올렸는데 이게 글에 속해있는게 아니라 웹브라우저의 왼쪽 상단에 딱 달라 붙어있는거에요

    원래 글 안에 귀속되어 있어야 되는데.. ㅠ.ㅠ 이게 자꾸 버그처럼 되네요

    이거 말곤 정말 제가 찾던 스킨이에요!! 정말 짱짱!! ㅎㅎ ^^잘쓸게요 !

    앗 이거 글에 귀속하는 방법을 알아냈습니다. 수정창에서
    동여상 부분을 글상자에 가둬 놓으니까 해결되네요
    이렇게 동영상 업로드 하면되겠어요 ㅎㅎ

    잘쓰겠습니다 꾸벅!

    • 책덕후 화영 2016.02.04 13:33 신고  댓글주소  수정/삭제

      그 부분을 해결할 수 있는 방법은 크게 2가지입니다.

      1. 유튜브 포스팅 <iframe> 태그 앞에 <p></p>로 감싸줍니다.

      2. 1번을 포스팅마다 일일히 하고 싶지 않으시다면
      스킨의 html 코드 부분 찾아 들어가셔서 다음 구문을 찾습니다.

      $(this).parent().addClass("embed-container");

      위의 코드 없애고 그 자리에 대신 이 코드를 넣습니다.

      $(this).wrap("<p class='embed-container'></p>");

      이 방법으로 해결되실 겁니다.

      사실 좀 더 수정해 놓은 소스코드는 지금 갖고 있는데, 조만간 좀 더 손보고 올릴 예정입니다. 그럼...

  12. 언젠간날고말거야 2016.02.29 01:34 신고  댓글주소  수정/삭제  댓글쓰기

    스킨에 대해 한가지 질문드릴 것이 있어요.
    헤딩요소에서 사이트제목을 H1, 포스팅제목을 H2를 주셨는데요,
    검색엔진 포스팅 검색부분에 대한 SEO관점에선 포스팅제목 H1을 준것과 차이가 혹시 있을까요?
    요즘 로고 H1이냐 포스팅제목 H1이냐 고민이 많아서 의견을 듣고 싶어요.

    • 책덕후 화영 2016.02.29 07:37 신고  댓글주소  수정/삭제

      그 부분은 seo라기보단 장애인 웹 접근성과 관련있는 부분입니다. 장애인 웹 접근성을 지키려면 h1인 요소는 반드시 하나여야 합니다. html5의 웹표준 규칙에 의하면 더이상 h1이 하나일 필요는 없지만, 이를 지원하지 않는 장애인 보조기기들이 아직 많기 때문에 지금도 h1 요소가 페이지에서 하나만 들어가는게 권장사항입니다.

    • 책덕후 화영 2016.02.29 10:39 신고  댓글주소  수정/삭제

      마찬가지로 포스팅 제목에 h1을 준 것도 seo보다는 장애인 웹 접근성 또는 관례적인 이유 때문인 게 큽니다. 인터넷 하는 시각장애인 같은 사람에게 h1을 다른 요소에 주게 되면 요소를 파악하기가 어렵기 때문입니다.

  13. 2016.05.26 23:05  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  14. 미쑝 2016.06.13 02:44 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 스킨이 너무 맘에 들어서 어제 바로 바꾼 초보 블로거입니다.
    위에 달린 댓글 보고 글자크기도 조금 바꿔보고 본문 사이즈도 조금 늘리고.. 거기까진 성공했는데.. 해결안되는 문제가 생겼습니다.

    현재 본문의 가로 사이즈를 CSS에서 'content' 부분을 680으로 수정해서 잘 적용이 됐습니다. 그런데 정작 '글쓰기'모드에 들어가면 가로사이즈가 500픽셀로 고정되어 있습니다. (글꼴도 '고딕'으로 고정되어 있더군요) 아무튼 그 상태에서 글을 쓰면 출력되는 화면에서는 지정해놓은 '나눔고딕'으로, 680픽셀로 잘 나오는데 문제는 이미지입니다.

    500픽셀로 고정되어 있다보니 '사진추가'를 하면 사진 크기가 500픽셀로 맞춰져서 적용이 됩니다. 즉 본문사이즈는 680인데 사진은 500픽셀인 셈이죠..

    어디서 수정을 해야 이것을 잡을 수 있을까요?? (제가 티스토리를 처음 써봐서 다른 옵션이 있는지도 잘 모르겠고, 프로그램은 문외한이라서요..)

    스킨 공유해주시는 것만으로도 너무 감사한데 이렇게 초보적인 질문까지 드리게 되어 송구스럽습니다.

    • 책덕후 화영 2016.06.13 09:22 신고  댓글주소  수정/삭제

      그건 스킨의 html이나 css를 바꾸는 게 아니라 티스토리 설정을 바꾸셔야 합니다. 티스토리 블로그 관리자모드에서 글 관리 - 글 설정 - 가로폭 값을 바꾸셔야 합니다. 혹시나 이래도 못찾겠으면 캡쳐해서 링크로 보여드릴게요.

    • 미쑝 2016.06.13 10:00 신고  댓글주소  수정/삭제

      와.. 그렇군요. 말씀대로 티스토리 관리자모드에서 바꿨습니다. 너무 감사드립니다^^ 덕분에 좋은 스킨도 얻고 배움도 얻었네요. 복 많이 받으시고요. 하시는 일 잘 되시길 늘 기원하겠습니다^^

  15. 미쑝 2016.06.30 02:14 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 또 댓글 답니다
    글쓰기 모드 메뉴에 '리스트' (LI 태크) 기능을 이용해 글을 작성하려고 합니다.
    글쓰기모드에서는 적용이 되지만(잘 보이지만)
    실제 미리보기를 통해 보면 '말머리'가 안보입니다.
    어디를 수정해야 하는지요.
    아무튼 스킨 너무 잘쓰고 있어 다시한번 감사드립니다^^

    • 책덕후 화영 2016.06.30 06:42 신고  댓글주소  수정/삭제

      음... 나중에 저녁에 집에서 컴퓨터 작업해놓은거 보면서 말씀드려야겠지만 그 기능을 사용하려면 지금 제 예상으로는 css3의 not 선택자로 스킨을 약간 변형시키는게 제일 빠를 것 같습니다. 이따 저녁에 제대로 답변드리겠습니다.

    • 책덕후 화영 2016.06.30 10:33 신고  댓글주소  수정/삭제

      그 부분은 소스코드를 바꿔야 하는 부분이라, 그냥은 안되고 따로 변형한 스킨을 보여 드리겠습니다.

      https://www.dropbox.com/s/04ddjwrztne73u6/tistory000001_rev2.3_customized001.zip?dl=0

      위의 링크 들어가셔서 다운 받으시고, 방법은 다음과 같습니다. style.css(티스토리 CSS 부분)에 아래 코드를 추가시켜야 합니다.

      #content .entry .article ul{list-style-type:initial;list-style-position:initial;list-style-image:initial;list-style-position:inside;}
      #content .entry .article ol{list-style-type:initial;list-style-position:initial;list-style-image:initial;list-style-position:inside;}
      #content .entry .article ul li, #content .entry .article ol li{list-style-type:inherit;list-style-position:initial;list-style-image:initial;list-style-position:inside;}

      이런 코드를 추가해야 하는 이유는, html 기본의 경우 리스트가 보이게 되어 있는데, 그 설정을 그대로 쓸 경우 위 메뉴 등 메뉴 스타일이 어그러지게 됩니다. 그래서 위 코드와 같이 따로 다시 끄집어내는 css가 필요합니다. 만약 이렇게 작업하지 않으면 메뉴의 list 구조를 변경해야 하는데, 그런 경우 장애인 웹 접근성 위반이죠... 알아두시면 도움이 될 것입니다.

      만약 다운로드가 안되신다면 비밀글로 메일주소 남겨주시면 파일 쏴드리겠습니다.

    • 미쑝 2016.06.30 21:19 신고  댓글주소  수정/삭제

      감사합니다. 다운잘 받았고요. style.css를 열어서 맨 마지막 부분에 말씀해주신 코드를 추가시키고 새로 스킨을 적용했습니다.
      그 결과 리스트 적용이 잘 되고 있습니다. ^^
      그런데 에디트 모드에서 '리스트'(LI) 적용시키면 자동으로 '들여쓰기'가 같이 되는데 이 들여쓰기가 안먹어요..

      물론 에디트 모드에서는 자동으로 들여쓰기가 먹는데 미리보기에서는 적용이 안되어 있어요.. 그래서 '리스트' 버튼옆에 '들여쓰기' 버튼을 적용시켜서 다시 미리보기에서 봐도 역시 그대로여요..

      지금 '리스트'기능만 잘 적용된거도 사용하는데 큰 불편은 없고 감지덕지 합니다.

    • 책덕후 화영 2016.06.30 21:52 신고  댓글주소  수정/삭제

      아... 들여쓰기는 안하는 이유가 있습니다. 리스트 보일때의 들여쓰기는 사용자의 브라우저 환경마다 다르게 보이거든요... 브라우저마다 다르게 보이는 걸 코드만으로 제어하는게 쉽지 않기 때문에 아예 들여쓰기를 없앤겁니다. 좋은 답변 되었는지요...

    • 미쑝 2016.06.30 22:59 신고  댓글주소  수정/삭제

      아.그런뜻이 있는줄 몰랐습니다. 많은 도움이 되었습니다.
      제게 알려주신 코드만으로도 충분히 잘 사용할 수 있습니다.
      다시한번 진심으로 감사드립니다.^^

  16. harryTheGreat 2016.08.10 01:36 신고  댓글주소  수정/삭제  댓글쓰기

    잘만 꾸미면 물건될거같은데요 ㅎㅎ 꾸미고 후기 꼭 보여드리겠습니다!

  17. 요원009 2016.08.18 10:56 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ 스킨 잘 이용하고 있습니다.

    다름이 아니라, 이미지를 추가하고, 그 이미지에 자막을 넣으면 본문글의 색, 크기와 동일합니다.

    더 작고, 색도 다르게 넣고 싶은데 어디를 고쳐야 하나요??~~

    • 책덕후 화영 2016.08.18 11:15 신고  댓글주소  수정/삭제

      아... 자막은 제가 안쓰는 기능이라 놓쳤나 보네요. 아무래도 코드를 봐야할 거 같은데 지금은 밖이라 모바일로는 코드를 볼 수가 없으니 집에 가서 말씀드릴게요

    • 책덕후 화영 2016.08.18 17:44 신고  댓글주소  수정/삭제

      네... 방법은 간단합니다. CSS(style.css) 부분에 이 코드를 추가시켜 보세요~

      #content .imageblock .cap1{font-size:85%;background-color:#444;color:#fff;font-weight:bold;}

      여기서 background-color, color 부분을 바꾸면 색이 바뀌고, font-size를 바꾸면 폰트 크기가 바뀝니다. 이 스킨의 경우 좀 어둡고 강한 느낌이 나는 스킨이라 일단은 진한 회색 바탕에 흰 글씨로 넣었는데, 입맛에 맞게 수정하시면 됩니다.

      있으면 사용자 입장에서도 유용한 기능이라 다음 버전부터 이 부분은 적용시켜야 겠습니다.

    • 요원009 2016.08.18 18:00 신고  댓글주소  수정/삭제

      답변주셔서 감사합니다. 근데 자막이 왼쪽으로 가길래 아래 코드를 넣어 봤습니다.

      float:center;

      근데 반응이 없네요. right를 주면 오른쪽으론 가는데 가운데로는 왜 안 갈까요?

    • 책덕후 화영 2016.08.18 18:29 신고  댓글주소  수정/삭제

      박스 배경 자체를 가운데로 오게 만든다는 얘기죠? float:center; 는 원래 없는 속성이고 html 표준이 아닙니다. 이 경우에는 cap1이 block 요소이므로, #content .imageblock .cap1 속성의 괄호 안쪽에 float 말고

      margin:0 auto;

      를 넣어 주셔야 중앙으로 올 겁니다~

  18. 용소야 2016.08.23 14:16 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~?
    어제 blog@koyeseul.com로 문의 메일을 보냈었는데 아직 확인을 안하신 것 같아서 같은 내용을 댓글로 남깁니다.^^;

    공개해주신 티스토리 반응형 스킨 nQuark2.3을 적용해서 잘 사용하고 있습니다.
    사용 중에 문의사항이 있어서 문의드립니다.

    게시글에 올린 모든 이미지를 클릭해도 레이어가 뜨면서 원본 이미지가 표시되지 않는데요, 심지어 이미지 위에 올린 마우스 커서가 손 모양으로 바뀌지도 않습니다.

    그리고, 모바일 웹스킨을 OFF로 설정해서 티스토리에서 기본 제공하는 모바일 웹스킨을 적용한 뒤 모바일로 접속해도 이미지 클릭과 크게 보기가 여전히 작동하지 않습니다.

    티스토리 플러그인 설정에서 'Light TT EX (이미지 크게보기)' 기능을 활성화/비활성화 해봐도 소용이 없어서 원래 이 스킨이 '이미지 크게보기' 기능을 지원하지 않는 걸로 생각하고 그냥 넘어갔었는데 최근에 이 블로그(화영의 인생교향곡)에 들어와서 게시글을 읽다가 이미지를 클릭했더니 레이어가 뜨면서 이미지 크게 보기가 되는군요. 이 블로그도 nQuark2.3 스킨을 적용한 것 같은데 왜 제가 적용한 블로그는 이미지 크게 보기 기능이 안될까요?

    혹시 포스트 작성시 다음 에디터 이미지 업로드와 스킨과의 호환성 문제 때문에 그런 걸까요?
    해결하려고 노력해봐도 도무지 방법을 찾을 수가 없네요..

    nQuark2.3 스킨을 적용한 제 티스토리 블로그는 http://ssiyagi.tistory.com입니다.^^
    확인해보시고 해결 방법을 알고 계시면 알려주시겠어요~?
    그럼 답변 부탁드립니다..

  19. 요원009 2016.08.30 08:18 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요~ 궁금한 게 하나 또 생겨서 질문 드립니다.

    제가 본문 폭을 넓히고 싶은데, 가령, 가로를 680 정도로 수정하려면 어디를 고쳐야 할까요?

    • 책덕후 화영 2016.08.30 09:46 신고  댓글주소  수정/삭제

      본문 폭을 늘리는 건 이미 작업해 놓은 게 있습니다. 이 문서 참조하셔서 작업하셔요~

      http://blog.koyeseul.net/552

      익스플로러 구버전 호환을 염두하고 만든 스킨이라 본문 폭 늘리는게 생각처럼 쉽지는 않습니다~ ^^;

  20. 용소아 2016.08.31 00:50 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요?
    nQuark2.3 스킨 적용한 티스토리 블로그의 이미지 클릭이 안되고 원본사진이 뜨지 않는 문제로 일주일 전에 문의드렸었던 스킨 사용자입니다.

    답변 주신대로 관리모드의 글설정에서 가로폭을 640px로 변경했는데도 기존 이미지들의 상태가 여전히 그대로여서 그 설정으로 새 글을 올려봤는데 역시 마찬가지입니다. 혹시 다음 이미지 에디터로 사진을 업로드할 때 설정을 잘못해서 그런 걸까요?^^;

    그 후로 시도해본 것으로는, 이미지 이름이 영문자로만 되어있고 가로폭이 640px보다 큰 이미지를 올리면서 다음 이미지 에디터 보정을 전혀 하지않은 채 올려봤지만 역시 해결이 안되네요.
    혹시나해서 이 블로그(화영의 인생교향곡) 글의 이미지 부분 소스를 제 블로그 글의 이미지 소스와 비교해보니 차이가 있습니다.

    [화영의 인생교향곡 - 이미지 소스]
    <span data-url="http://cfile29.uf.tistory.com/attach/267BE35057C2EEDA1FD734" data-lightbox="lightbox"><img src="http://cfile29.uf.tistory.com/image/267BE35057C2EEDA1FD734" style="cursor: pointer;max-width:100%;height:auto" width="640" height="360" filename="maskedsinger019.jpg" filemime="image/jpeg" /></span>

    [제 블로그 - 이미지 소스]
    <img src="http://cfile9.uf.tistory.com/image/274CAF4857C466880B93B6" style="max-width:100%;height:auto" width="307" height="447" filename="김국진.jpg" filemime="image/jpeg"/>

    핵심 소스를 비교해보니 제 블로그 소스에는 img 태그의 속성 style="cursor: pointer"가 없고 img 태그를 싸고있는 <span data-url="..." data-lightbox="lightbox"></span>가 없어서 그런 것 같은데요, 같은 다음 이미지 에디터로 이미지를 업로드했는데 왜 소스가 다를까요?

    혹시 해결방법을 아시는지요..?

    • 책덕후 화영 2016.08.31 12:23 신고  댓글주소  수정/삭제

      TT 라이트박스 플러그인 기능을 켜도 기존에 이미 작성된 글의 소스코드는 바뀌지 않아서 그런거 아닐까요? 플러그인 기능 켜고 새로 이미지 넣어서 글 작성해서 확인해보셔요... 물론 소스코드가 제일 정확한 방법이긴 한데 앞으로 쓸 모든 글을 소스코드 수정할 순 없잖아요. 무엇보다 귀찮은 일이고... 마찬가지로 기존 글의 이미지도 TT 라이트박스 플러그인 기능 킨 후에 다시 작성하면 들어갈 것 같습니다. 해보셔요. 저도 이런 경우는 처음이라 좋은 답변을 못드려서 죄송합니다. 코드가 아니라 티스토리 시스템에 대해서는 아직 잘 모르는지라... ㅠㅠ

  21. 빅에너지™ 2017.05.31 01:45 신고  댓글주소  수정/삭제  댓글쓰기

    스킨감사합니다. 쓸데없는 소리이긴 한데, 공무원 준비를 하신다니 IT업계를 떠나시는 것 같아 안타깝습니다. ㅜㅠ

    • 책덕후 화영 2017.05.31 08:01 신고  댓글주소  수정/삭제

      IT업계 떠나는거 맞아요. 회사에서 임금체불 당했고 장애인인 현실상 그런 근로환경을 바꾸는 게 어렵다고 봐서... ㅠㅠ 좋아하는 일을 하는 것도 좋지만 최소한 굶주리지 않고 먹고사는 건 되야죠... ㅠㅠ

티스토리 툴바