웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
페이지 숫자에 네이버처럼 사각테두리 씌우기
2008.06.15 12:42
페이지 숫자 나타나는 부분에 아래처럼 사각형을 씌워보겠습니다
1번은 선택되어진 페이지 이고 3번은 마우스 오버(레인보우 링크 때문에 분홍색) 했을때도 사각형이 생깁니다
![1.png](https://xe1.xpressengine.com/files/attach/images/121/363/941/016/1.png)
/zbxe/modules/board/skins/보드스킨/css 열고 아래 빨간색 코드를 수정합니다
1번은 선택되어진 페이지 이고 3번은 마우스 오버(레인보우 링크 때문에 분홍색) 했을때도 사각형이 생깁니다
![1.png](https://xe1.xpressengine.com/files/attach/images/121/363/941/016/1.png)
/zbxe/modules/board/skins/보드스킨/css 열고 아래 빨간색 코드를 수정합니다
/* pageNavigation */
.pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation .current { font:bold 1em Tahoma; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation a:hover { background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
.pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation .current { font:bold 1em Tahoma; text-decoration:none; margin:0 10px 0 0; }
.pageNavigation a:hover { background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
↓
/* pageNavigation */
.pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 6px 0 6px;}
.pageNavigation .current { border:1px solid #e0e1db; padding:2px 5px 2px 5px; background:#F7F7F7; font:bold 1em Tahoma; text-decoration:none; }
.pageNavigation a:hover { border:1px solid #e0e1db; padding:2px 5px 2px 5px; margin: 0 0 0 0; background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
테두리 색은 #e0e1db, 크기는 padding을 자신에 맞게 2개다 수정해 주시면됩니다(↑→↓← 순입니다).pageNavigation { text-align:center; font:bold 11px Tahoma; margin-top:5px;}
.pageNavigation a { font:bold 1em Tahoma; color:#666666; text-decoration:none; margin:0 6px 0 6px;}
.pageNavigation .current { border:1px solid #e0e1db; padding:2px 5px 2px 5px; background:#F7F7F7; font:bold 1em Tahoma; text-decoration:none; }
.pageNavigation a:hover { border:1px solid #e0e1db; padding:2px 5px 2px 5px; margin: 0 0 0 0; background:#F7F7F7; text-decoration:none; }
.pageNavigation a:visited { color:#999999; }
.pageNavigation a.goToFirst img, .pageNavigation a.goToLast img { margin-bottom:2px;}
댓글 8
-
쿠로츠지
2008.06.15 22:37
감사요 ^^ -
존은팁입니다.. 감사하게 사용하겠습니다
-
유우타
2008.06.19 00:12
감사합니다. 적용하니 이쁘군요. ^^ 마음에 쏘~옥 듭니다~ -
LunarDream
2008.06.20 21:37
사이트 방문해 보니 참 이쁘네요^^ -
2008.08.18 17:58
좋은팁 감사합니다. -
적용해봤는데 너무 좋습니다! 클릭영역이 박스 전체였으면 좋겠는데..그게 잘 안되네요..^^;;
-
Lin(린)
2008.10.04 00:58
감사합니다~!
추천 누르고 갑니다 ㅇㅅㅇ -
ㅅㅅㅂ
2008.11.07 14:00
오.. 좋네요...
제목 | 글쓴이 | 날짜 |
---|---|---|
일정 기간이 지난 글에 코멘트 등록 제한
[3]
![]() | 老姜君 | 2008.06.03 |
링크 사이트 제작을 위한 어드바이스 - Planning 1 -
[7]
![]() | Hammer | 2008.06.04 |
링크 사이트 제작을 위한 어드바이스 - MouseOver Preview -
[6]
![]() | Hammer | 2008.06.10 |
페이지 숫자에 네이버처럼 사각테두리 씌우기
[8]
![]() | 탑심 | 2008.06.15 |
페이지 작성이나 수정후 적용이 안돼서 고생하는 많은 분들을 위하여 [1] | cyric | 2008.06.17 |
아이프레임속 링크를 기존페이지에서 이동하기
[1]
![]() | 정다운804 | 2008.06.19 |
php폼메일 관련 한번 올려봅니다. 사용하실분들은 수정하셔서 사용해보세요..
[10]
![]() | 코리아프럼 | 2008.06.26 |
동일한 계정내에서의 포워딩 방법
[2]
![]() | 하이쿠 | 2008.07.01 |
[팁]페이지별 댓글 출력 초간단 팁.. [4] | 키티나 | 2008.07.04 |
1차 메뉴에서 하위 메뉴 없을때 생기는 여백 없애는 방법 [7] | 제로시오 | 2008.07.04 |
최고관리자 이외에는 ''회원정보보기''를 막기 [13] | 비나무 | 2008.07.10 |
최근게시물에 권한주어서 회원만 내용물보게하기 [1] | 팔공산 | 2008.07.11 |
조건별로 스킨 바꾸기
![]() | 라르게덴 | 2008.07.11 |
게시판 가로조절(width) 및 가운데로 이동 태그 [4] | 박상욱860 | 2008.07.12 |
초보 헤메다가 팁//검색기능 보이기 감추기
[3]
![]() | 리히토 | 2008.07.15 |
초보 헤메다가 팁//댓글기능 보이기 감추기 [5] | 리히토 | 2008.07.15 |
winxp IE7 rwapm에서 한글이름파일 업로드
[7]
![]() | 공수래 | 2008.07.15 |
로컬 설치 후 몇가지 문제점에 대해서 - 인덱싱. DB선택 등 | 서정일643 | 2008.07.22 |
본문의 서명과 프로필이미지를 끌어올려보자
[11]
![]() | CL님 | 2008.07.22 |
1.0.3 버전 이상부터 본문 내 이미지 자동 리사이징이 안되는 경우 [1] | kirrie | 2008.08.01 |