홈페이지 무료 자동구축/제작 솔루션:Mong9.com

레이아웃과 응용

박스 색상

박스 모서리

타이틀 색상

타이틀 모서리

항목 색상

항목 모서리

박스 : class="box-out "
타이틀 : class="box-title "
항목 : class="box-title "

레이아웃 - 2칸 컬럼과 사용

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

예제소스보기

타이틀이 들어가는 부분입니다

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

타이틀이 들어가는 부분입니다

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

예제소스보기

타이틀이 들어가는 부분입니다

항 목값이 들어가는 부분입니다
항 목값이 들어가는 부분입니다
항 목값이 들어가는 부분입니다
항 목값이 들어가는 부분입니다

타이틀이 들어가는 부분입니다

항 목값이 들어가는 부분입니다
항 목값이 들어가는 부분입니다
항 목값이 들어가는 부분입니다
항 목값이 들어가는 부분입니다

예제소스보기

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

예제소스보기

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

예제소스보기

타이틀 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

타이틀 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

예제소스보기

타이틀이 들어가는 부분입니다

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

타이틀이 들어가는 부분입니다

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

예제소스보기

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다
값이 들어가는 부분입니다

예제소스보기

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

예제소스보기

타이틀 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

타이틀 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

예제소스보기

타이틀이 들어가는 부분입니다

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

타이틀이 들어가는 부분입니다

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

예제소스보기

레이아웃 - 3칸 컬럼과 사용

타이틀

타이틀

타이틀

예제소스보기

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

예제소스보기

리스트 타이틀

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

리스트 타이틀

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

리스트 타이틀

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

<div class="grid-3"> <div class="column1 column-first"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span> 리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span> 리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1 column-last"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span> 리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> </ul> </div> </div> </div> </div>

예제소스보기

리스트 타이틀

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

리스트 타이틀

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

리스트 타이틀

항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분
항 목값 들어갈 부분

<div class="grid-3"> <div class="column1 column-first"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span> 리스트 타이틀</strong> <ul> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span> 리스트 타이틀</strong> <ul> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1 column-last"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span> 리스트 타이틀</strong> <ul> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> <li><strong class="box-key">항 목</strong><span class="value">값 들어갈 부분</span></li> </ul> </div> </div> </div> </div>

예제소스보기

레이아웃 - 4칸 컬럼과 사용

타이틀

타이틀

타이틀

타이틀

예제소스보기

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

<div class="grid-4"> <div class="column1 column-first"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1 column-last"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> </div>

예제소스보기

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

<div class="grid-4"> <div class="column1 column-first"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1 column-last"> <div class="box-out"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> </div>

예제소스보기

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

리스트 타이틀

주소: 값 들어갈 부분
전화번호: 값 들어갈 부분
팩스: 값 들어갈 부분
메일: 값 들어갈 부분

<div class="grid-4"> <div class="column1 column-first"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> <div class="column1 column-last"> <div class="box-out"> <div class="box-up"> <img src="http://image.mong9.com/etc_img/logo/logo1_100x100.gif" class="img-1" /> </div> <div class="box-list"> <strong class="box-title center"><span class="icon icon-document1"></span>리스트 타이틀</strong> <ul> <li><span class="value"><span class="icon icon-building" alt="주소">주소:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-tel" alt="전화번호" alt_no="2">전화번호:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-fax" alt="팩스" alt_no="3">팩스:</span> 값 들어갈 부분</span></li> <li><span class="value"><span class="icon icon-mail1" alt="메일" alt_no="4">메일:</span> 값 들어갈 부분</span></li> </ul> </div> </div> </div> </div>

예제소스보기