본문으로 바로가기

 

 

스킨을 변경하고 나면 새로 넣고 싶거나 약간 변경시키고 싶은 곳이 생기곤 하는데요.

 

반응형 웹 스킨 CCZ-CROSS 스킨으로 변경하니 몇가지 손보고 싶은 부분이 보이더라구요.

 

 

CCZ-CROSS 스킨에 대한 기본구조부터 정리도 해놓을겸 몇가지 옮겨봅니다.

 

 

CCZ-CROSS 스킨 기본 구조

 

 

참고한 사이트주소 : http://ccz-cross.tistory.com/30

 

 

CCZ-CROSS 스킨 영역 사이즈 넓이

 

 

 

참고한 사이트 주소 : http://cocosoft.kr/407

 

 

Html이나 CSS 수정시에 몇가지 속성을 알아야지만 수정을 할수 있는 부분들이 있답니다.

 

어려운건 아니고 많이 변경하는 속성 몇가지만 간추려 보았네요.

 

 

속성 몇가지에 대한 간단한 설명

 

margin 속성

 

개체의 바깥쪽 여백을 지정하는 속성

개체의 기본크기는 유지되면서 바깥쪽으로 여백이 생긴다.

단 예외적으로 body 태그에서만 안쪽 여백을 지정하는 속성으로 쓰임

 

 

예1) margin : 값1(상하좌우) ;

      값을 1개만 지정할 경우, 상하좌우에 모두 같은 여백을 설정

 

예2) margin: 값1(상하), 값2(좌우)

      값을 2개 지정할 경우 값1은 상하의 여백을, 값2는 좌우의 여백을 설정

 

예3) margin : 값1(상하), 값2(좌우), 값3(하) ;

      값을 3개 지정할 경우 값1은 위, 값2는 좌우, 값3은 아래 여백을 설정

 

예4) margin : 값1(상), 값2(우), 값3(하), 값4(좌);

      값을 4개 지정할 경우, 상-우-하-좌의 순으로 값을 준 개체기준 시계방향으로 돌아가며 여백이 지정

 

 

특정위치에만 바깥쪽 여백을 설정하고 싶은경우

 

위쪽 여백     margin-top: 값 ;   

왼쪽 여백     margin-left : 값 ;   

오른쪽 여백  margin-right : 값 ;

아래쪽 여백  margin-bottom :값 ; 

 

 

padding 속성 

 

요소의 안쪽 여백을 설정하는 속성으로

브라우저 종류/버전에 따라 여백에 의해 이미지가 커질수도, 그대로 일수도 있다

 

값을 주는 방법은 margin과 동일 예1)~예4)

 

 

 

ccz-cross 스킨은 기본적으로

 

사이드바 모듈이 대부분 hidden-xs hidden-sm으로 설정이 되어있답니다.

 

예를 들자면 공지사항 모듈이 그러한데요.

 

html 소스를 보면

 

<div class="module module-notice hidden-xs hidden-sm"> 이렇게 되어있죠.

 

 

위의 사진을 참고하여 보면

 

hidden-xs는 매우 작은 기기에서 공지사항 모듈이 보이지 않고 숨겨진다는 것이고

hidden-sm은 작은기기에서 보이지 않고 숨겨진다는 것이랍니다.

 

 

그럼 반대로 매우 작은 기기와 작은 기기에서 보여지게 할때는

 

visible-xs visible-sm 을 사용하면 중간기기에서나 큰 기기에서 다 보여진다는 것입니다.

 

공지사항을 매우 작은 기기와 작은 기기에서 보여지게 할때는

 

예) <div class="module module-notice visible-xs visible-sm">

 

 

공지사항을 모든 기기에서 다 보이게 하려면 hidden이나 visible부분을 지워버리면 된답니다.

 

예) <div class="module module-notice">

 

 

알고보면 별로 어렵지 않은? ㅎㅎ

 

스킨 변경할때 참고하세요~!! ^^*