JAY DESIGN

게시판 리스트

번호	제목	작성자	날짜	조회수
1	Lorem ipsum dolor sit amet, couisque rutrum. Aenean imperdieuisque rutrum. Aenean imperdiet tnsectetuer adipiscing elit.	admin	2020-02-02	100
2	Donec pede justo, fringilla vel, aliquet nec, vulpuuisque rutrum. Aenean imperdiettate eget, arcu. In enim justo, rhoncus ut.	admin	2020-02-02	100
3	Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel aug uisque rutrum. Aenean imperdietue.	admin	2020-02-02	100
4	Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.	admin	2020-02-02	100

<div class="table__wrap">
    <table class="table table--straight">
        <colgroup>
            <col style="width:12%;">
            <col style="width:auto;">
            <col style="width:12%;">
            <col style="width:12%;">
            <col style="width:12%;">
        </colgroup>
        <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>날짜</th>
            <th>조회수</th>
        </tr>
        <tr>
            <td>1</td> 
            <td class="t-ellipsis"><a href="#">Lorem ipsum dolor sit amet, couisque rutrum. Aenean imperdieuisque rutrum. Aenean imperdiet tnsectetuer adipiscing elit.</a></td>
            <td>admin</td>
            <td>2020-02-02</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="t-ellipsis"><a href="#">Donec pede justo, fringilla vel, aliquet nec, vulpuuisque rutrum. Aenean imperdiettate eget, arcu. In enim justo, rhoncus ut.</a></td>
            <td>admin</td>
            <td>2020-02-02</td>
            <td>100</td>
        </tr>
        <tr>
            <td>3</td>
            <td class="t-ellipsis"><a href="#">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel aug uisque rutrum. Aenean imperdietue.</a></td>
            <td>admin</td>
            <td>2020-02-02</td>
            <td>100</td>
        </tr>
        <tr>
            <td>4</td>
            <td class="t-ellipsis"><a href="#">Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</a></td>
            <td>admin</td>
            <td>2020-02-02</td>
            <td>100</td>
        </tr>
    </table>
</div>
<div class="btns btns--right spacing--xxxs">
    <button type="button" class="btn btn--primary btn--outline">글쓰기</button>
</div>

게시판 상세보기

1

Lorem ipsum dolor sit amet, couisque rutrum. Aenean imperdieuisque rutrum. Aenean imperdiet tnsectetuer adipiscing elit.

작성자 admin

날짜 2020-02-02

조회수 100

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede

<div class="board-view">
    <div class="board-view__top">
        <div class="view__title">
            <span class="view__num">1</span>
            <p>Lorem ipsum dolor sit amet, couisque rutrum. Aenean imperdieuisque rutrum. Aenean imperdiet tnsectetuer adipiscing elit.</p>
        </div>
        <div class="view__info">
            <div class="view__info-wrap">
                <span>작성자</span>
                <em>admin</em>
            </div>
            <div class="view__info-wrap">
                <span>날짜</span>
                <em>2020-02-02</em>
            </div>
            <div class="view__info-wrap">
                <span>조회수</span>
                <em>100</em>
            </div>
        </div>
    </div>
    <div class="board-view__cont">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
        <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
        <img src="../../images/sub/img-temp-1.jpg" alt="이미지">
    </div>
    <div class="board-view__bottom">
        <div class="view__files">
            <button type="button" class="icon-attachment">Lorem_sit_amet.jpg</button>
            <button type="button" class="icon-attachment">vulputate_eget.png</button>
        </div>
    </div>
</div>
<div class="btns btns--right spacing--xxxs">
    <button type="button" class="btn btn--primary btn--outline">목록보기</button>
</div>

게시판 글쓰기

카테고리		카테고리
제목
내용
파일첨부	파일첨부 attached_file_name.jpg 2020_02_02_attached_file_name.xls 2020_02_02_attached_file_name.png
옵션선택	게시판 옵션1 게시판 옵션2
옵션체크	게시판 옵션1 게시판 옵션2

<div class="board-write">
    <table class="table table--break">
        <colgroup>
            <col style="width:20%;"> 
            <col style="width:30%;"> 
            <col style="width:20%;"> 
            <col style="width:30%;"> 
        </colgroup>
        <tr>
            <th>카테고리</th>
            <td class="t-input-wrap">
                <select>
                    <option value="게시글">게시글</option>
                </select>
            </td>
            <th>카테고리</th>
            <td class="t-input-wrap">
                <select>
                    <option value="게시글">게시글</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>제목</th>
            <td class="t-input-wrap" colspan="3"><input type="text"></td>
        </tr>
        <tr>
            <th>내용</th>
            <td class="t-input-wrap" colspan="3"><textarea></textarea></td>
        </tr>
        <tr>
            <th>파일첨부</th>
            <td colspan="3" class="t-left">
                <input type="file" class="attach-btn" id="attach_ex1">
                <label for="attach_ex1" class="btn btn--primary">파일첨부</label>
                <ul class="attach-list">
                    <li><span>attached_file_name.jpg</span><button type="button" class="icon-x"></button></li>
                    <li><span>2020_02_02_attached_file_name.xls</span><button type="button" class="icon-x"></button></li>
                    <li><span>2020_02_02_attached_file_name.png</span><button type="button" class="icon-x"></button></li>
                </ul>
            </td>
        </tr>
        <tr>
            <th>옵션선택</th>
            <td colspan="3" class="t-left">
                <ul class="checkboxes--horizontal">
                    <li>
                        <input type="radio" name="example" id="example1" checked>
                        <label for="example1">게시판 옵션1</label>
                    </li>
                    <li>
                        <input type="radio" name="example" id="example2">
                        <label for="example2">게시판 옵션2</label>
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <th>옵션체크</th>
            <td colspan="3" class="t-left">
                <ul class="checkboxes--vertical">
                    <li>
                        <input type="checkbox" id="example3" checked>
                        <label for="example3">게시판 옵션1</label>
                    </li>
                    <li>
                        <input type="checkbox" id="example4">
                        <label for="example4">게시판 옵션2</label>
                    </li>
                </ul>
            </td>
        </tr>
    </table>
</div>
<div class="btns btns--center spacing--xs">
    <button type="button" class="btn btn--primary btn--outline icon-x">취소</button>
    <button type="button" class="btn btn--primary icon-check">작성</button>
</div>

아코디언

[Cetegory]

psum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede

[Label]

c pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede

[Adipiscing]

or sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede

<div class="accordian">
    <div class="accordian__wrap">
        <div class="accordian__top">
            <span class="accordian__label">[Cetegory]</span>
            <p class="accordian__title">psum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligu</p>
        </div>
        <div class="accordian__body">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
        </div>
    </div>
    <div class="accordian__wrap">
        <div class="accordian__top">
            <span class="accordian__label">[Label]</span>
            <p class="accordian__title">c pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,</p>
        </div>
        <div class="accordian__body">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
        </div>
    </div>
    <div class="accordian__wrap">
        <div class="accordian__top">
            <span class="accordian__label">[Adipiscing]</span>
            <p class="accordian__title">or sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
        <div class="accordian__body">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
            <p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede</p>
        </div>
    </div>
</div>

아코디언 - Q&A