IS Base 0.33 스킨의 라운드형 모서리를 직각으로 바꾸기

 

 

IS Base 0.33 스킨을 사용중입니다.

 

심플하게 정리되는 좋은 스타일의 스킨입니다.

 

개인적으로 한가지 아쉬운 점은 콘텐츠와 사이드바의 테이블의 모서리가 곡선화(라운드) 되어 있습니다.

 

곡선과 직선 두가지 스타일이 만나게 되니 조금은 신경이 쓰여서, 곡선화된 꼭지점은 직각형태로 바꾸었습니다.

 

 

 (수정전)

 

 

 

 

(수정후) 

 

 

 

 

 

수정작업

 

1. css 변경 : 아래와 같이 css 를 수정해줍니다. (같은 해당부분에 적용)

 

#content .notice,
#content .keylog,
#content .localog,
#content .taglog,
#content .entryNotice,
#content .entryProtected,
#content .guestbook,
#content .searchList,
#content .searchRplist,
#content .entry { padding:18px 18px 0px 18px; border:1px solid #999999; background:url("images/bg_entry_top.jpg") repeat-x 0px 0px; background-color:#ffffff; }

 

 

 

2. 콘텐츠 테두리 html 수정 ('<' 표시를 '['으로 대체)

 

html에서 콘텐츠의 라운드가 적용된 rtop, rbottom 부분을 삭제합니다.

여기서 rtop, rbottom 만 제거하는 것이 아니라, rtop, rbottom 이 포함된 줄 전체를 삭제합니다.

아래와 같은 줄 전체를 삭제 (rbottom 도 같은 방식으로 줄 전체를 삭제해주면 됩니다.)

 

[b class="rtop"][b class="r1"][/b][b class="r2"][/b][b class="r3"][/b][b class="r4"][/b][/b]

 

 

 

 

3. 사이드바 css 변경

 

사이드바는 ntop, nbottom 의 부분을 수정하면 됩니다.

하지만 여기서 콘텐츠의 라운드가 적용된 부분을 전체 삭제하듯이 수정하면, 위와 아래의 선이 보이지 않습니다.

그렇기 때문에 css를 수정하여 적용할 수 있는 라인을 만들어주어야 합니다.

 

css에서 ntop 과 nbottom을 찾으면 아래와 같은 부분이 있습니다.

여기서 r1만 수정해주면 됩니다.

r1~r4가 r1의 긴줄을 중심으로 도트형태로 분산되어 원형태를 만듭니다.

이중 r1만 살리고, r1의 제한된 줄길이를 확장시키고, r2~r4를 사용하지 않는 방법입니다.

 

 

(수정전)

.r1{margin:0 5px; background:#999999}
.r2{margin:0 3px; border-left:2px solid #999999; border-right:2px solid #999999;}
.r3{margin:0 2px; border-left:1px solid #999999; border-right:1px solid #999999;}
.r4{margin:0 1px; height:2px; border-left:1px solid #999999; border-right:1px solid #999999;}

 

(수정후)

.r1{margin:0px; background:#999999}
.r2{margin:0 3px; border-left:2px solid #999999; border-right:2px solid #999999;}
.r3{margin:0 2px; border-left:1px solid #999999; border-right:1px solid #999999;}
.r4{margin:0 1px; height:2px; border-left:1px solid #999999; border-right:1px solid #999999;}

 

 

 

4. 사이드바 html 수정  ('<' 표시를 '['으로 대체)

 

 

이후 html 에서 윗줄과 아래줄에 적용되는 r1 만 살립니다.

(변경전)
[b class="ntop"][b class="r1"][/b][b class="r2"][/b][b class="r3"][/b][b class="r4"][/b][/b]

(변경후)
[b class="ntop"][b class="r1"][/b][/b]

 

(변경전)
[b class="nbottom"][b class="r4"][/b][b class="r3"][/b][b class="r2"][/b][b class="r1"][/b][/b]

(변경후)
[b class="nbottom"][b class="r1"][/b][/b]

 

 

* 이상입니다. 끝으로 수정작업에 도움을 준 'sawearl'님께 감사드립니다.