외워.

making web/xhtml / css 2008.05.13 15:01


신고

'making web > xhtml / css' 카테고리의 다른 글

외워.  (7) 2008.05.13
Tistory SkinWizard  (3) 2008.03.04
[w3c: TR/REC-CSS2 ] Backgrounds > background-attachment  (0) 2008.02.15

Tistory SkinWizard

making web/xhtml / css 2008.03.04 23:32
CSS의 주석을 활용하여
블로그의 특정 영역(19개)을 스킨위저드 메뉴를 이용하여 변경할 수 있다.

예를 들어,
블로그 제목의 경우를 보면 이러하다.

.blog_title {
                    font-size: 16px;
                    font-family: verdana;
                    color: #333;
                    height: 150px;
                  }


스킨위저드가 알아챌 수 있게 하려면 아래처럼 CSS expression에 주석을 감싸주면 된다.
주황색 속성명은 이미 정해진 이름이다.

.blog_title {
                   font-size: /*@title-font-size=*/ 16px /*@*/;
                   font-family:
/*@title-font-family=*/verdana/*@*/;
                   color:
/*@title-color=*/#333/*@*/;
                    height:
/*@title-height=*/150/*@*/;
                 }


offset 값을 사용하면 본문 영역을 늘이고, 줄일 때 영향을 받는 element의 width 조절이 손쉽게 된다.
기본적인 본문 영역의 width를 500px로 정하였다면 아래와 같다.

.article {
               width: /*@post-width=*/ 500px /*@*/;
             }


본문의 width를 스킨위저드에서 조정을 한 뒤에
댓글 입력 창이나, 개별 포스트 제목바의 width가 함께 변경되어야 하는 경우는
각 element의 CSS expession에 다음과 같이 정의해주면 된다.

.article .reaction textarea {
                                             width: /*@post-width:-30=*/ 470px /*@*/;
                                         }


위 박스에 따르면 댓글을 입력하는 textarea는 post-width보다 30px이 항상 작게끔 계산된다.
이렇게 정의만 해놓으면 나머지는 스킨위저드가 알아서 한다는 말이다.

만약, post-width를 700px로 늘렸다면, textarea에 대한 expression은...

.article .reaction textarea {
                                            width: /*@post-width:-30=*/ 670px /*@*/;
                                        }


어렵지 않다. ^^;

스킨위저드에서 사용하는 속성 이름, 19가지는 다음과 같다.
  • 블로그 배경 관련
    • background-image /배경 이미지 url
    • background-image-position /배경 이미지 위치
    • background-image-repeat /배경 이미지 반복
    • background-color /배경색
  • 블로그 제목
    • title-height /제목 영역의 height
    • title-font-family /제목 폰트
    • title-font-size /제목 폰트의 사이즈
    • title-color /제목 폰트의 색
    • title-background-image /제목 영역 배경 이미지 url
    • title-background-image-position /제목 영역 배경 이지미 위치
    • title-background-image-repeat /제목 영역 배경 이미지 반복
    • title-background-color /제목 영역 배경색
  • 블로그 본문
    • post-width /본문 너비
    • post-title-font-family /본문 제목 폰트
    • post-title-font-size /본문 제목 폰트 크기
    • post-title-color /본문 제목 폰트의 색
    • post-body-font-family /본문 내용 폰트
    • post-body-font-size /본문 내용 폰트 크기
    • post-body-color /본문 내용 폰트의 색
신고

'making web > xhtml / css' 카테고리의 다른 글

외워.  (7) 2008.05.13
Tistory SkinWizard  (3) 2008.03.04
[w3c: TR/REC-CSS2 ] Backgrounds > background-attachment  (0) 2008.02.15

[w3c: TR/REC-CSS2 ] Backgrounds > background-attachment

making web/xhtml / css 2008.02.15 00:31
  • Background properties:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
      • value: scroll(initial) | fixed | inherit
      • 이미지가 fixed되었다고 해도 배경 또는 element의 padding 영역 내에 있을 경우만 보이게 된다. 따라서 background-repeat: repeat로 하지 않는 이상에는 보이지 않게 된다.
    • background-position
    • background
    • background-color
* 배경 이미지를 fixed로 고정해두었다고 해도 해당 element에 배경 이미지보다 width/height가 넘치는 내용이 들어가면, 배경 이미지가 보이지 않게 된다는 겁니다. 밀려서 점점 사라져서 안보이죠.

* 배경 이미지가 width: 200px이고 fixed로 설정이 되어 있는 상태에서 padding-right: 300px을 주었다면, 그 안에 (수치상으로는) width가 500px 이하인 내용이 들어가야 말 그대로 배경 이미지가 fix되어 계신다는 겁니다.

신고

'making web > xhtml / css' 카테고리의 다른 글

외워.  (7) 2008.05.13
Tistory SkinWizard  (3) 2008.03.04
[w3c: TR/REC-CSS2 ] Backgrounds > background-attachment  (0) 2008.02.15


티스토리 툴바