위젯만들기 3탄이라고 해야하나.
이번에는 위젯의 뼈대가 되는 list.html과 css 대하여 내가 알고 있는 내용을 이야기 해 볼까 합니다.
처음부터 이야기했지만 저는 함수나 소스의 생성에 대해서는 잘 모릅니다.
그저 이 위젯, 저 위젯 만지다 보니 조립하는 정도의 실력이라고 밝히며 이 글을 시작하므로 큰 기대나 어려운 질문은 삼가해 주세요.
그럼 list.html과 white.css를 한 단락씩 끊어서 보겠습니다.
newest_document의 xe_official스킨을 일단 예로 설명을 해 봅니다.
1. 칼라선택부분
<!-- 설정된 컬러셋의 종류에 따라서 css파일을 import 합니다 -->
<!--@if($colorset=="black")-->
<!--%import("css/black.css")-->
<!--@else-->
<!--%import("css/white.css")-->
<!--@end-->
<!--@if($colorset=="black")-->
<!--%import("css/black.css")-->
<!--@else-->
<!--%import("css/white.css")-->
<!--@end-->
// white칼라를 선택해서 white.css를 불러오던지, black칼라를 선택해서 black.css를 불러옵니다.
한개의 칼라만 만들어져 있다면(카멜레온스킨처럼) 아래와 같이 작성하면 됩니다.
<!--@if($colorset=="normal"||!$colorset)-->
<!--%import("css/normal.css")-->
<!--@end-->
한개의 칼라만 만들어져 있다면(카멜레온스킨처럼) 아래와 같이 작성하면 됩니다.
<!--@if($colorset=="normal"||!$colorset)-->
<!--%import("css/normal.css")-->
<!--@end-->
2. 위젯의 타이틀부분
<div class="latest_{$colorset}"> // 가
<!--@if($widget_info->title)-->
<h2>{$widget_info->title}</h2> // 나
<!--@end-->
<!--@if($widget_info->title)-->
<h2>{$widget_info->title}</h2> // 나
<!--@end-->
.latest_white { width:100%; padding-bottom:15px; overflow:hidden; position:relative;} // A
.latest_white h2 { margin:0; display:block; height:21px; padding:9px 0 0 9px; margin-bottom:12px; color:#000000; background:url(../images/white/lineNotice.gif) no-repeat left bottom; font-size:1em;} // B
.latest_white h2 { margin:0; display:block; height:21px; padding:9px 0 0 9px; margin-bottom:12px; color:#000000; background:url(../images/white/lineNotice.gif) no-repeat left bottom; font-size:1em;} // B
// 가. latest_{$colorset}
- 위젯의 큰테두리를 설정합니다.
여러 위젯들이 한페이지에 구현될때 이곳의 이름이 같으면 서로 충돌이 일으나므로 각 위젯별로 이름을 다르게 하는 것이 포인트입니다. 예를 들면 moon_{$colorset}이렇게 표현해 주면 됩니다.
여기서 {$colorset}은 1번 칼라선택부분에서 선택한 칼라가 입력되는 부분입니다.
// A부분이 가부분의 css부분입니다.
.latest_white과 latest큰테두리의 white칼라의 속성을 나타냅니다.
[속성설명]
padding-bottom:15px - 위젯의 아래에 15px의 공간을 둔다.(위젯과 위젯을 띄우는 역활을 합니다.)
overflow:hidden - 정해진 크기를 벗어나면 튀어나온 부분을 숨기게 하거나 float로 된 div의 세로 높이를 정확히 파악하게 합니다.
position - 박스가 화면에서 어떻게 나타나고 그 위치를 지정하는 방법을 정하는 속성 relative(고정) absolute(좌표 따라 화면 이동)
- 위젯의 큰테두리를 설정합니다.
여러 위젯들이 한페이지에 구현될때 이곳의 이름이 같으면 서로 충돌이 일으나므로 각 위젯별로 이름을 다르게 하는 것이 포인트입니다. 예를 들면 moon_{$colorset}이렇게 표현해 주면 됩니다.
여기서 {$colorset}은 1번 칼라선택부분에서 선택한 칼라가 입력되는 부분입니다.
// A부분이 가부분의 css부분입니다.
.latest_white과 latest큰테두리의 white칼라의 속성을 나타냅니다.
[속성설명]
padding-bottom:15px - 위젯의 아래에 15px의 공간을 둔다.(위젯과 위젯을 띄우는 역활을 합니다.)
overflow:hidden - 정해진 크기를 벗어나면 튀어나온 부분을 숨기게 하거나 float로 된 div의 세로 높이를 정확히 파악하게 합니다.
position - 박스가 화면에서 어떻게 나타나고 그 위치를 지정하는 방법을 정하는 속성 relative(고정) absolute(좌표 따라 화면 이동)
글을 작성해 나가다 보니 어느정도의 지식을 가지고 있는 부류에 맞추어서 작성해야 할지 애매해 지는군요.
초급에 맞출려니 글이 너무 길어지는 것 같고, 중급정도에 맞출려니 글 적는 의미가 별로 없어지는 것 같고...
일단은 초급정도에 맞추어서 작성해 나가고 있는데 글 작성하기가 조금 힘드네요. 휴~~~
조금씩 조금씩 작성해 나갈 생각이니 성질 급하신 분들은 양해 바랍니다.
to be continue.....
