워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

티스토리 블로그 스킨을 설치하고나면 잘 안쓰이는 메뉴가 있는데 이를 제거하고 카테고리의 다른 항목을 메뉴에 추가하고 싶을 때가 있습니다. 그런데 어떤 스킨은 메뉴수정이 쉽지가 않습니다. 티스토리 블로그 스킨 메뉴의 일부는 이미지를 사용하여 현재 보여지는 페이지를 표시하고 있습니다. 즉 현재 선택된 메뉴는 다른 색의 이미지로 표시되고 해당 페이지가 열려있죠. 그래서 예를들어 아래처럼 방명록메뉴를 클릭했다면 그에 해당하는 배경이미지가 메뉴에 나타납니다.


이러한 메뉴에 카테고리의 항목을 추가하거나 특정한 포스팅 글이 나오도록 메뉴를 추가할 수가 있습니다. 이것은 자바스크립트를 사용하여 현재 선택된 메뉴에 아이디 선택자를 추가하고 CSS에서 해당 아이디 선택자에 배경이미지 삽입하는 방식입니다. 그래서 기존에 있는 자바스크립트를 그대로 사용하는 것이므로 자바스크립트를 변경하지 않아도 되고 이미지를 만들어서 추가하고 CSS만 수정하면 됩니다. 다만 자바스크립트의 클릭이벤트가 어떻게 이루어지는지 알기가 어렵기 때문에 대부분 수정을 하지 않고 사용합니다.  티스토리 블로거이신 지은님이 사용하는 블로그 스킨을 견본으로 메뉴를 수정하는 방법에 대해서 알아봅니다.


Life Stand II(Brown) 라는 스킨의 메뉴부분입니다. 이 스킨은 선택된 메뉴의 배경색이 흰색의 이미지를 사용하고 선택되지 않은 메뉴는 짙은 갈색의 이미지로 표시되고 있습니다.


구글크롬이나 쿨노보 웹브라우저를 사용하여 태그메뉴의 요소검사를 해보면 CSS에 두개의 이미지를 사용하고 있습니다. 2는 클릭해서 선택됐을 때이고 3은 선택되지 않을 때입니다. 메뉴를 클릭하면 자바스크립트에 의해서 4의 body태그에 id="tt-body-tag"라는 아이디 선택자가 추가됩니다. 만일 포토샵이라는 카테고리 항목의 하나를 메뉴에 추가하고 클릭하면 아이디 선택자가 id="tt-body-category"로 추가되는 것을 볼 수 있습니다. 이는 자바스크립트가 작동하여 클릭시 어떤 아이디를 추가하기 때문입니다. 그 아이디는 메뉴의 href 속성의 값인 url에서 나오게 됩니다. 이렇게 아이디 선택자가 추가되면서 CSS에서 이미 지정해 놓은 body#tt-body-tag라는 속성이 가동되어 2의 흰색배경의 이미지가 나타나고 선택하지 않았을 때는 body 태그에서 해당 아이디선택자가 제외되므로 3의 .blogMenu .tab_taglog a 라는 선택자가 작동되어 짙은 배경의 이미지가 나타나는 것입니다.  Admin과 Write는 클릭하면 다른 화면으로 가므로 하나의 이미지만 사용합니다. 

우선 기존의 이미지를 수정해서 사용하기 위해서 관리센터의 메뉴에서 스킨-스킨업로드를 선택하고  기존의 이미지를 다운로드받아 포토샵에서 수정해줘야 합니다. 스킨업로드 창에서 위의 tab_taglogOn.png 파일과 tab_taglog.png 파일을 선택하면 좌측에 미리보기 창에서 이미지가 나타나고 우클릭하여 다른이름으로 저장을 선택해서 폴더에 저장합니다. 


포토샵에서 두개의 파일을 겹쳐놓습니다. 2의 이미지는 약간 투명입니다. 수정하는 방법은 첨부한 psd파일을 참고하세요. 글자를 새로 넣어야하므로 기존의 글자를 가리는 레이어를 만들고 그 위에 글자를 만듭니다. 두개의 이미지로 해서 저장하는데 tab-photoshop.png와 tab-photoshopOn.png 파일로 저장한 다음 블로그의 파일업로드 창에서 업로드합니다.




html 편집창에서 Ctrl+F키를 눌러 blogMenu로 검색을 해서 사용하지 않는 메뉴를 제거하고 새로운 메뉴를 추가합니다. 클래스 선택자로 tab_photoshop이라고 입력합니다. href 속성의 url은 카테고리의 url을 입력합니다. 각 메뉴에 있는 치환자는 이와같은 url주소일 뿐입니다. title도 수정하고 이미지를 사용하므로 나타나지는 않지만 메뉴이름도 수정합니다. 검색엔진은 인식을 합니다. 이렇게 하고 저장해도 이미지는 나타나지 않습니다. CSS에서 배경이미지 설정을 해줘야하죠.


CSS 편집창에서 body#tt-body-tag로 검색하여 1부분 전체를 블럭설정 복사하여 2에서 클릭 엔터치고 붙여넣은 다음 tag는 category로 taglog는 photoshop으로 수정합니다. 여러개 있으니 다 수정해줍니다. 5와 6의 이미지 파일 이름도 변경합니다. 이부분은 메뉴를 클릭했을때 자바스크립트에 의해 body 태그에 클래스 선택자가 추가되어 CSS에서 작동 되는 부분입니다.

그러면 선택되지 않았을 때도 수정해줘야겠죠. 


.blogMenu .tab_taglog a 로 검색하여 1부분을 복사하여 마찬가지 방법으로 아래에 붙여넣고 taglog는 photoshop으로 전부 수정해주고 파일이름도 수정해줍니다. 선택자는 요소검사할때 CSS창에 나오는 부분을 복사해오면 됩니다. 저장버튼을 클릭하고 블로그 화면에서 Ctrl+R키를 눌러 새로고침하면 메뉴가 나옵니다.


포토샵 메뉴를 클릭하면 흰색배경의 이미지가 나와서 정상작동되고 다른 메뉴를 클릭하면 갈색배경으로 전환됩니다. 요소검사를 해보면 body 태그에 아이디 선택자가 추가되어있습니다. 3의 클릭했을때의 이미지부분의 CSS가 활성화되고 선택하지 않았을때의 CSS는 4처럼 작동하지 않습니다. 메뉴를 더 늘리려면 포토샵 이미지만들때 이미지 폭을 축소하고 축소한 만큼 width의 수치도 수정해줍니다.