,

css 파일에서 중복된 내용 삭제하기

최근 카페24 스킨을 잘못 구매한 덕분에 쓰레기 치우느라(?) 아주 곤욕입니다. CSS 코드를 중복해서 여러번 불규칙적으로 정의해놓은 덕분에 5000여줄의 코드에서 일일이 찾아 지워주고 나니 1000여줄로 줄어드는 상황에 어이가 없는데, 이게 문제는 카페24 솔루션 특징상 CSS 코드가 수십개는 되는데다 만든 놈이 추가한 파일들도 있다는거죠. 그래서 이런 반복 되는 작업을 어떻게 해결할 수 있을까 고민한 끝에 css-purge라는 tool을 발견했습니다. 15800여줄의 코드를 보고 이건 안되겠다 싶어서 찾게 됐는데 간단하게 1700여줄로 줄여주는걸 보면서 감탄과 동시에 스킨 제작자를 저주하게 되더군요. 물론 완전하진 않습니다. 자동으로 중복된 코드를 지우면서 다이어트 하는 과정에서 불필요하다고 판단되는 것들을 지우다보니 지워선 안될 코드들도 일부 지운게 확인 됐습니다.그럼에도 불구하고 이 툴은 정말 쓸만합니다. 누락된 부분은 찾아서 추가하면 되는데 3군데 정도 누락되서 크게 어려움을 겪지 않고 문제를 해결 할 수 있었습니다. 아래에 관련 링크를 걸어두겠습니다. 저처럼 중복된 정의들을 지우기 위해서 애쓰지 마시고 css-purge로 스트레스를 덜 받으시길 바랍니다. http://rbtech.github.io/css-purge/그리고 추가로 minify된 코드를 해제하는 플러그인도 있더군요 atom 패키지 중에서 atom-beautify 를 이용하면 간단하게 해결 가능합니다. install package를 통해서 설치 가능합니다

카페24 메인화면 게시글(공지사항) 목록 노출하기

카페24에서는 게시판 최근 글을 메인화면에 노출할 경우, 게시판 페이지에서 노출할 경우 등 다양한 상황에 맞도록 모듈을 제공하고 있습니다. 제가 겪은 경우는 좀 예외적인 상황이었던 것이 아닐까라고 생각되는데, 혹시라도 같은 문제를 겪고 있을지 몰라 포스팅으로 남깁니다.

일반적으로 게시판 메인 모듈은 아래 링크를 통해 매뉴얼을 참고하면 어떻게 적용할지 확인할 수 있습니다.

제가 작업하고자 했던 목표는 메인화면에 게시판 공지글리스트가 노출되도록 하는 것이었는데, 위의 매뉴얼에서 제공하는 바에 의하면 “board_list_1″이라는 모듈을 호출해야합니다. 하지만 실제로 작동되지 않아서 고객센터에 문의를 남겼더니 “board_notice_1″ 으로 적용하라는 답변이 돌아왔습니다.

매뉴얼에 문제가 있던지, 제가 손보는 스킨 구조상 호출할 수 없다보니 별도 모듈을 구성해서 보내준건지는 모르겠습니다. 일단 저랑 비슷한 경우를 겪으신 분이라면 위의 방법대로 소스를 수정해서 적용해보시길 바라겠습니다.

아래에는 해당 내용을 반영하여 수정된 소스입니다. 필요하신 분은 바로 복사해서 쓰셔도 좋습니다.

 

카페24 상품 이미지 롤오버 기능 켜고 끄기

카페24 롤오버 기능

최근에 관리하기시작한 쇼핑몰 디자인을 새로 바꾸면서 현재 디자인과 어울리지 않는 부분들을 제거하고자 소스를 뒤져보고 있던 중이었습니다. 상품이미지를 선택했을때 롤오버 되는 부분을 수정하려고하는데, 좀처럼 CSS나 JS에서 해당 기능이 적용된 부분을 찾을 수가 없었습니다.

혹시나 싶어서 디자인 수정, 상품관리에서도 관련 메뉴가 있나 살펴보았는데 없더군요. 엉뚱하게도 전혀 연관성없는 메뉴에서 설정해줄 수 있다는걸 발견했습니다.

위와 같이 상점관리 – 화면효과 설정 – 상품이미지 효과 설정을 통해 해당 설정을 켜고 끌 수 있습니다. CSS나 JS를 사용할줄 모르는 사용자를 위해서 제공하는 기능같습니다만, 최소한 해당 메뉴는 디자인관리에서 적용될 수 있도록 되어야 맞지 않나 싶네요. 정말 한참을 헤매고 뒤진 끝에 발견할 수 있었던터라 연관성이 몹시 떨어지는 곳에 메뉴가 위치하고 있어서 아쉬움이 많이 느껴집니다.

더불어서 간단하게 CSS를 이용해서 비슷한 효과를 낼 수 있는 방법이 있습니다. 아래 소스를 첨부했습니다.

CSS 부분을 보시면 위와같이 바로 :hover라는 가상클래스를 이용하는 것인데요. css에서 보통 상태와, 마우스를 올렸을때(hover) 어떻게 변화할 것인지만 새로 기술해주는 것만으로 충분히 사용이 가능합니다.

네이버 블로그 홈페이지형 스킨 디자인 튜토리얼 <프롤로그>

네이버 블로그

네이버 블로그 스킨 제작에 대해서

네이버 블로그 스킨에서 제공하는 기능을 활용하면 배너를 삽입하는것은 물론이고 약간의 트릭을 이용해서 홈페이지처럼 보이게 만드는 것도 가능합니다. 기본적으로 HTML과 CSS에 대한 선행지식이 필요한 관계로 전혀 경험이 없다면, 따라하시는데 다소 생소한 표현때문에 어려움을 느낄 수도 있습니다. 그렇지만 최대한 설명을 덧붙여서 어려움을 덜어드리도록 노력해보겠습니다.

위젯 기능 활용

네이버 블로그 스킨은 위젯이라는 기능을 수 년 전부터 지원하고 있습니다. 하지만 여전히 베타상태로 놔두고 있는 이유는 보안이나 관리상의 이유가 크지 않나 싶은데요. 너무 많은 자유도를 허용하다 자바스크립트 범벅으로 난장판이 됐던 다음 카페의 선례가 있기 때문인가 싶습니다. 지금은 보안상의 이유로 대부분의 커뮤니티에서 스크립트 입력을 허용하지 않고 있습니다.

CSS 활용

네이버 블로그 스킨에서는 CSS도 무조건 인라인 형태로 서술되야합니다. 때문에 반복적으로 같은 내용을 필요로 할때 반복작업으로 인한 피로감이 좀 있습니다. 그리고 일부 태그들은 또 여전히 적용되지 않고 있는 문제도 있고, 네이버에서 임의로 다른 태그로 대체해서 적용하는 경우도 있기때문에, 약간의 시행착오를 감수해야합니다.

홈페이지 처럼 보이게 만드는 트릭

일단 네이버 블로그 스킨을 홈페이지 형태로 만드는 방식에 대해서 간단한 개요를 이야기하자면, 네이버 블로그 상단 부분에 배경이미지를 깔고, 그 위에 투명한 위젯을 올려서 원하는 형태로 버튼이나 배너 같은 요소들을 삽입합니다. 엄연히 이야기하자면, 위젯을 이용해서 레이아웃을 구성한다고 볼 수 있습니다.

테이블 태그 사용 지양

덧붙여서 아직도 테이블 태그를 활용하는 방법을 고수하는 네이버 블로그 스킨 강좌들이 있는데, 테이블 태그를 사용하는 것 자체는 크게 상관 없으나 만드는 사람 입장에서 불필요한 코드를 많이 사용해야합니다. 그리고 버튼이 한 두 개라면 모르겠지만, 많은 양의 버튼을 테이블 태그로 생성하게 되면 그만큼 많은 로딩 시간이 소요됩니다.

테이블 태그로 박스를 만들 경우와 div 태그로 각각 폭 170픽셀, 높이 600픽셀의 박스를 만들 경우를 각각 아래 예시에서 보여드리도록 하겠습니다.

같은 결과물을 보여주지만, 내부에서 돌아가는 모양새는 다릅니다. 한 눈에 보아도 태그의 양이 확연히 차이가 납니다. 테이블 태그는 브라우저가 해석할때 구조적으로 먼저 table을 찾고, tr로 행을 찾고, td로 열을 찾고 그 안에 내용을 불러오는 식이라 3번에 걸친 과정이 필요합니다. 그와 반대로 div 태그는 그냥 한 번에 내용을 불러올 수 있습니다. 버튼 하나 쯤이라면 큰 차이가 안느껴지겠지만, 버튼을 많이 만들수록 이 문제는 더 크게 다가올 수 있습니다.

때문에 위지윅 wyswyg 방식의 나모웹에디터,드림위버를 사용해서 웹사이트를 만들어봤던 분들은 다소 생소할 수 있습니다만, 따라 해보시다보면 어느 정도 이해가 갈 겁니다.

본 튜토리얼은 아래와 같은 과정을 걸쳐서 진행됩니다.

  1. 구상단계
  2. 디자인(포토샵)
  3. 디자인을 스킨에 적용하기(네이버 블로그 관리자 기능, HTML/CSS)
  4. 버튼을 클릭할 때마다 새창으로 뜨는 문제 해결하기
  5. 프롤로그 기능 활용
  6. 포스팅 영역을 활용해서 조금 더 홈페이지처럼 보이게 만들어보자
  7. 에필로그

덧붙여서 말씀드리자면, 본 튜토리얼을 통해 네이버 블로그에 대한 기능적 이해를 돕는데만 활용하시고, 가능하면 홈페이지형 블로그는 만들지 않으셨으면 좋겠습니다. 그 이유는 에필로그에서 설명드리겠습니다.