제로보드 content 위젯 스킨 제작 [초보질문]

안녕하세요 

제로보드로 사이트 제작을 하고있습니다

완전 초보이어서 많이 배우고싶습니다 

 

 

content 위젯 스킨 을 만들고 있습니다

기존 세로 모드로 나오는걸 스킨으로 가로 으로 나오게 하기위해 아래 소스대로 하였으나...

무지한덕에 1도 안나오게되었습니다

 

디렉토리 

css/widget.css

_소스:

@charset "utf-8";

 

/* 위젯 전체 컨테이너 */

.prideWidget {

    width: 100%;

    overflow: hidden;

    background: #fff;

    padding: 10px 0;

}

 

/* 가로 스크롤 리스트 (핵심) */

.prideHList {

    display: flex; /* 가로 배치 */

    gap: 12px; /* 카드 사이 간격 */

    overflow-x: auto; /* 가로 스크롤 켜기 */

    padding: 5px 15px; /* 여백 */

    margin: 0;

    list-style: none;

    -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */

}

 

/* 스크롤바 숨김 (깔끔하게) */

.prideHList::-webkit-scrollbar { display: none; }

 

/* 카드 1개 디자인 */

.prideHList li {

    flex: 0 0 160px; /* 너비 160px 고정 */

    background: #ffffff;

    border: 1px solid #eee;

    border-radius: 12px;

    padding: 15px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 부드러운 그림자 */

    display: flex;

    flex-direction: column; /* 내부 요소 세로 정렬 */

}

 

/* 링크 스타일 */

.prideHList a {

    text-decoration: none;

    color: #333;

    display: block;

    height: 100%;

}

 

/* 폰트 스타일 */

.p-title {

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 8px;

    line-height: 1.3;

    height: 36px; /* 두 줄 높이 고정 */

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

 

.p-desc {

    font-size: 12px;

    color: #666;

    margin-bottom: 10px;

    height: 3.6em; /* 세 줄 높이 고정 */

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

}

 

.p-author {

    margin-top: auto; /* 바닥에 붙이기 */

    font-size: 11px;

    color: #999;

    text-align: right;

}

 

content.html

_소스:

<load target="./css/widget.css" />

 

<div class="prideWidget">

    </div>

 

nomal.html

_소스:

<ul class="prideHList">

    <li>

        <a href="{$item->getLink()}" target="_blank"|cond="$widget_info->new_window">

            

            <div class="p-title">

                {$item->getTitle($widget_info->subject_cut_size)}

            </div>

 

            <div class="p-desc">

                {$item->getContentText($widget_info->content_cut_size)}

            </div>

 

            <div class="p-author">

                {$item->getNickName()}

            </div>

        </a>

    </li>

    </ul>

 

<div style="padding:20px; text-align:center; color:red; border:1px solid red;">

    [알림] 게시글을 불러오지 못했습니다. 위젯 설정에서 '대상 모듈'을 선택했는지 확인해주세요.

</div>

 

skin.xml

_소스:

<?xml version="1.0" encoding="UTF-8"?>

<skin version="0.2">

    <title xml:lang="ko">PRIDE 가로 카드</title>

    <description xml:lang="ko">가로 스크롤 카드형 위젯 스킨</description>

    <version>1.0</version>

    <date>2026-02-07</date>

    <author>

        <email_address>admin@nowick.xyz</email_address>

        <name xml:lang="ko">PRIDE</name>

    </author>

    <colorset>

        <color name="white">

            <title xml:lang="ko">기본 (White)</title>

        </color>

    </colorset>

</skin>

 

스킨 만으로 세로 인 기능을 가로으로 되는지 모르겠습니다