먼저 스타일 수정을 원하는 텍스트를 정합니다. 가장 자주 문의가 오는 상단 카테고리명을 예시로 수정 방법을 안내해드리겠습니다.
상단에 있는 "의류" 라는 카테고리명은 빨간색으로 바꿔보는 작업을 안내드립니다.
(크롬 기준) 우클릭을 하면 "검사"라는 메뉴명이 보입니다. 이 메뉴를 클릭하여 개발자 도구를 실행합니다.
1. 다음과 같은 창이 띄워졌다면 현재 소스코드 경로를 파악합니다.
2. HTML에디터 또는 FTP를 이용하여 [스킨폴더]/css/user.css 파일의 최하단에 다음과 같은 소스코드를 추가합니다.
/* 상단 카테고리명을 빨간색으로 변경 */ .layout_header .nav_wrap .respCategoryList>li a em {color: #ff0000}
그런데 특정 카테고리명이 아닌 전체 카테고리 색상이 바뀌어 버렸습니다.
이럴 때에는 순서를 지정할 수 있는 가상 선택자를 사용하여 일부분에만 스타일을 적용할 수 있도록 수정합니다.
/* 상단 카테고리명을 빨간색으로 변경 */ .layout_header .nav_wrap .respCategoryList>li:nth-of-type(2) a em {color: #ff0000}
원하는 글자에만 스타일을 적용하였습니다.
참고로 .layout_header .nav_wrap .respCategoryList>li:nth-of-type(1)은 ALL(카테고리 전체보기)이므로 첫번째 카테고리명은 2가 되었습니다.
|
ⓒ GabiaCNS Inc. All Rights Reserved.