어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.
본문 바로가기주메뉴 바로가기부메뉴 바로가기
현재위치
- HOME
- >배우기
- > 스타일시트(CSS)
본문 영역
박스 리스트 상세보기
리스트 타이틀 종류는
색상표
에 선언된 색상을 이용해서 만들어집니다.
<strong class="box-title 색상명">box-title 색상</strong>
box-title black
box-title grey
box-title
box-title light-blue
box-title yellow
box-title blue
box-title gold
box-title green
box-title olive-green
box-title orange
box-title purple
box-title red
box-title turquoiseblue
box-title violet
box-title deepblue
box-title teal
box-title mauve
box-title pearl
box-title steelblue
box-title coffee
box-title coral
box-title crimson
box-title hotpink
box-title indianred
box-title aqua
box-title white
<strong class="box-title black">box-title black</strong>
<strong class="box-title">box-title grey</strong>
<strong class="box-title light-light-grey">box-title</strong>
<strong class="box-title light-blue">box-title light-blue</strong>
<strong class="box-title yellow">box-title yellow</strong>
<strong class="box-title blue">box-title blue</strong>
<strong class="box-title gold">box-title gold</strong>
<strong class="box-title green">box-title green</strong>
<strong class="box-title olive-green">box-title olive-green</strong>
<strong class="box-title orange">box-title orange</strong>
<strong class="box-title purple">box-title purple</strong>
<strong class="box-title red">box-title red</strong>
<strong class="box-title turquoiseblue">box-title turquoiseblue</strong>
<strong class="box-title violet">box-title violet</strong>
<strong class="box-title deepblue">box-title deepblue</strong>
<strong class="box-title teal">box-title teal</strong>
<strong class="box-title mauve">box-title mauve</strong>
<strong class="box-title pearl">box-title pearl</strong>
<strong class="box-title steelblue">box-title steelblue</strong>
<strong class="box-title coffee">box-title coffee</strong>
<strong class="box-title coral">box-title coral</strong>
<strong class="box-title crimson">box-title crimson</strong>
<strong class="box-title hotpink">box-title hotpink</strong>
<strong class="box-title indianred">box-title indianred</strong>
<strong class="box-title aqua">box-title aqua</strong>
<strong class="box-title white">box-title white</strong>
[박스 리스트 색상표를 이용한 색상 입히기] 예제소스보기
아래의 예제들은 복사하여 색상만 변경하여 바로 사용하시면 됩니다.
하지만 가로로 두개를 넣거나 한다면 반드시
레이아웃 구조 속에 이 코드를 복사하는 것이 정석입니다.
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
<div class="box-out">
<div class="box-list">
<ul>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
</ul>
</div>
</div>
[기본형 리스트] 예제소스보기
타이틀이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
<div class="box-out">
<div class="box-list">
<strong class="box-title">타이틀이 들어가는 부분입니다</strong>
<ul>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
</ul>
</div>
</div>
[기본형 리스트 + 타이틀] 예제소스보기
타이틀이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<div class="box-list">
<strong class="box-title">타이틀이 들어가는 부분입니다</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 class="box-out">
<div class="box-left">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" class="img-1" />
</div>
<div class="box-list">
<ul>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
</ul>
</div>
</div>
[좌측이미지1] 예제소스보기
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<div class="box-left">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" 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>
[좌측이미지2] 예제소스보기
타이틀이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<div class="box-left">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" class="img-1" />
</div>
<div class="box-list">
<strong class="box-title">타이틀이 들어가는 부분입니다</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>
[좌측이미지3] 예제소스보기
타이틀이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<strong class="box-title">타이틀이 들어가는 부분입니다</strong>
<div class="box-left">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" 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>
[좌측이미지4] 예제소스보기
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
- 값이 들어가는 부분입니다
<div class="box-out">
<div class="box-right">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" class="img-1" />
</div>
<div class="box-list">
<ul>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
<li><span class="value">값이 들어가는 부분입니다</span></li>
</ul>
</div>
</div>
[우측이미지1] 예제소스보기
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<div class="box-right">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" 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>
[우측이미지2] 예제소스보기
타이틀이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<div class="box-right">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" class="img-1" />
</div>
<div class="box-list">
<strong class="box-title">타이틀이 들어가는 부분입니다</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>
[우측이미지3] 예제소스보기
타이틀이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
- 항 목값이 들어가는 부분입니다
<div class="box-out">
<strong class="box-title">타이틀이 들어가는 부분입니다</strong>
<div class="box-right">
<img src="http://image.mong9.com/etc_img/logo/logo1_120x120.gif" alt="" 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>
[우측이미지4] 예제소스보기
TOP
등록일:
마지막 수정일:
스타일시트(CSS)
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
| 글순서NO |
*(첨부파일) |
제목 |
추천 |
조회 |
작성일↑ |
| 12 |
없음 |
레이아웃 구조 |
추천:0 |
조회:5866 |
|
| 11 |
없음 |
색상표 |
추천:0 |
조회:5630 |
|
| 10 |
없음 |
버튼 |
추천:0 |
조회:9169 |
|
| 9 |
없음 |
하이라이트 |
추천:0 |
조회:4930 |
|
| 8 |
없음 |
인용구 |
추천:0 |
조회:3637 |
|
| 7 |
없음 |
테이블(표) |
추천:0 |
조회:3797 |
|
| 6 |
없음 |
현재글:박스 리스트 |
추천:0 |
조회:4214 |
|
| 5 |
없음 |
텝박스 |
추천:0 |
조회:4434 |
|
| 4 |
없음 |
아이콘 |
추천:0 |
조회:6793 |
|
| 3 |
없음 |
반응형 기타 |
추천:0 |
조회:3656 |
|
