물론 기존 포스팅에 새로운 버전에 대한 업데이트 파일을 올렸고 공지도 진작에 했습니다만,


좀 더 자세한 내용을 이야기하고자 새로 포스팅하게 되었습니다.






* 최신버전(nQuark 2.3) 다운로드


tistory000001_rev2.3_p003.zip






스킨 디자인을 설명하자면 지금 이 블로그에 설치되서 보여지는 스킨과 똑같습니다. 따라서 이 블로그를 참고하시면 스킨에 대한 전반적인 참고가 될 것입니다.




2.3 업데이트 사항 -


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

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


관련 코드는 아래와 같이 바뀌었습니다.


변경 전

if( !($(this).parent().hasClass("embed-container")) ){

if( !($(this).hasClass("p43")) ) {

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

} else {

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

}

}


변경 후

if( !($(this).parent().hasClass("embed-container")) ){

if( !($(this).parent().is("p")) && !($(this).hasClass("p43")) ) {

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

} else if( !($(this).parent().is("p")) ) {

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

} else if ( !($(this).hasClass("p43")) ){

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

} else{

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

}

}


if문에서 is() (처음에는 has()로 이 기능을 수행했습니다만, class name에 p가 포함되어 있을 경우 오동작하여 교체했습니다.) jQuery method를 가지고 p tag로 이미 감싸져 있는 지 체크하는 부분이 추가되었습니다.

덕분에 코드가 조금 복잡해졌지만, 웹표준을 준수하기 위해서 거쳐야 하는 과정입니다.




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


css의 max-height를 추가했습니다. 어차피 모바일에서만 보여지는 부분이므로 익스플로러 구버전 호환 여부는 생각할 필요가 없습니다.

( .blogMenu2 에 max-height:50vh; 가 추가됨. )




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


이 부분은 책 '블로그 브랜딩'에 나온 부분으로, 네이버 블로그처럼 큰 메인 이미지로 제목을 부각시켜 보여주는 것까지는 따라하지 않더라도 로고 정도는 블로그 고유 로고를 쓰는 것이 좋지 않을까 라는 생각에 추가하게 되었습니다.


mlogo.png 그림 파일의 크기는 마음껏 바꿀 수 있으나, 너무 작아지면 아이패드 레티나 디스플레이 등의 높은 해상도를 요구하는 화면에서 이미지가 흐릿하게 출력될 가능성이 높으므로 주의를 요합니다. 가로세로 비율은 1:1(정사각형)이 적당하며, 이 비율을 바꿔서 블로그에 보여주고자 한다면 이미지가 아니라 스킨의 css를 수정해야 합니다.

( 정말 이미지의 비율을 바꾸고자 한다면 #header h1 span 의 width, height 비율을 바꿔야 합니다. 장애인 웹 접근성 등을 이유로 px이 아닌 em 단위로 설정되어 있으므로 유의하기 바랍니다. )




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


이건 어떤 버그였는지 그림으로 보는 게 이해가 더 빠르십니다.


변경 전



변경 후



변경 전을 봤을 때에는 확실히 본문 내용이 적을 때 요소가 딸려 올라가므로 미관상 보기 안좋습니다.


이 부분은 해당 스킨의 버그였지만 제가 본문 내용을 짧게 넣는 경우가 거의 없어서 확인을 못했으며, 지금은 확인 후 수정했습니다.




5. selection 기능 추가

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




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

댓글을 달아 주세요

티스토리 툴바