강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

List 아이템을 그림으로 바꾸기
작성자 : 99 단국강토
등록날짜 : 2009.02.19 10:49
2,066

이해인 님의 시

  • 나의 별이신 당신에게
  • 말을 위한 기도


List 태그를 사용하시면 위처럼 텍스트를 일목요연하게 정리해서 보일 수 있습니다.
아주 유용한 태그인데도 불구하고, 어지간한 개인홈에서는 사용되지 않고 있습니다.
List 태그 앞에 붙는 아이템을 위처럼 그림으로 대체할 수도 있습니다.

icon_home.gif키스미의 원숭이섬 의 'My Episode' 가 이런 식으로 구성되어 있습니다.

t.gif

Unordered List - Disc

  • 첫번째 줄은 이렇게
  • 두번째 줄은 이렇게
  • 세번째 줄은 이렇게
rt_lefttop.gif t.gif rt_righttop.gif
t.gif

<ul type="disc">
  <li>첫번째 줄은 이렇게</li>
  <li>두번째 줄은 이렇게</li>
  <li>세번째 줄은 이렇게</li>
</ul>

t.gif
rt_leftbottom.gif t.gif rt_rightbottom.gif
ul 태그의 기본값은 type="disc" 입니다. 따라서 위에서는 type="disc" 은 생략해도 됩니다.

 

t.gif

Unordered List - Square

  • 첫번째 줄은 이렇게
  • 두번째 줄은 이렇게
  • 세번째 줄은 이렇게
rt_lefttop.gif t.gif rt_righttop.gif
t.gif

<ul type="square">
  <li>첫번째 줄은 이렇게</li>
  <li>두번째 줄은 이렇게</li>
  <li>세번째 줄은 이렇게</li>
</ul>

t.gif
rt_leftbottom.gif t.gif rt_rightbottom.gif
목록 앞의 아이템을 사각형으로 만들어줍니다.

 

t.gif

Unordered List - 그림으로 대체하기

  • 첫번째 줄은 이렇게
  • 두번째 줄은 이렇게
  • 세번째 줄은 이렇게
rt_lefttop.gif t.gif rt_righttop.gif
t.gif

<ul style="list-style-image:url(kissofgod.gif)">
  <li>list 태그를 사용하면 이렇게 됩니다.</li>
  <li>두번째 줄은 이렇게</li>
  <li>세번째 줄은 이렇게</li>
</ul>

t.gif
rt_leftbottom.gif t.gif rt_rightbottom.gif
목록 앞의 아이템을 텍스트형태가 아닌 이미지로 바꿀 수 있습니다.
스타일시트를 화일로 만들어 연결해 사용하고 계신다면,
스타일시트 화일 안에 ul {list-style-image:url(kissofgod.gif)} 이런 줄을 추가하시면, 문서마다 ul 태그 안에 style="list-style-image:url(kissofgod.gif)" 를 하나하나 타이핑해 넣지 않아도 되겠죠.
kissofgod.gif 는 목록 앞에 보여질 그림의 경로 및 이름.

 

t.gif

Ordered List - 순서대로 번호붙이기

  1. 첫번째 줄은 이렇게
  2. 두번째 줄은 이렇게
  3. 세번째 줄은 이렇게
rt_lefttop.gif t.gif rt_righttop.gif
t.gif

<ol>
  <li>첫번째 줄은 이렇게</li>
  <li>두번째 줄은 이렇게</li>
  <li>세번째 줄은 이렇게</li>
</ol>

t.gif
rt_leftbottom.gif t.gif rt_rightbottom.gif

번호를 굳이 따로 적지 않아도 저절로 줄마다 번호가 들어갑니다.
순번을 줘야할 항목을 나열할 때 요긴하겠죠.

Oldered List 도 위의 Unordered List 에서 <ul>안에 type="값" 을 넣었던 것과 같은 이치로, 여기서는 <ol> 안에 type="값"을 넣어서 <ol type="1"> 등의 형태로 하면 됩니다. 그러면 아래처럼 다양한 모양으로 정렬할 수 있습니다. 기본값은 type="1" 입니다. 기본값은, 위의 예제처럼 생략하셔도 됩니다.

 

type="i"

  1. 첫번째 줄은 이렇게
  2. 두번째 줄은 이렇게
  3. 세번째 줄은 이렇게

type="I"

  1. 첫번째 줄은 이렇게
  2. 두번째 줄은 이렇게
  3. 세번째 줄은 이렇게

type="a"

  1. 첫번째 줄은 이렇게
  2. 두번째 줄은 이렇게
  3. 세번째 줄은 이렇게


type=
"A"

  1. 첫번째 줄은 이렇게
  2. 두번째 줄은 이렇게
  3. 세번째 줄은 이렇게

출처 : Tong - ddakzzi님의 CSS통

"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
자세히보기

Comments

번호 제목 글쓴이 날짜 조회
3195 투명 테이블 99 단국강토 02.19 2075
3194 이미지 사용하지 않고, HTML문서에 그라데이션 표현하기 99 단국강토 02.19 2118
3193 HTML 문서에서 데스크탑용 커서 사용하기 99 단국강토 02.19 2677
3192 테이블로 입체버튼 만들기 99 단국강토 02.19 2363
3191 html 문서에 테두리 넣기 99 단국강토 02.19 2513
열람중 List 아이템을 그림으로 바꾸기 99 단국강토 02.19 2067
3189 프린트 할때 폰트 다르게 표현하기 99 단국강토 02.19 2395
3188 media-print CSS 를 아시나요? 99 단국강토 02.19 2141
3187 스타일시트 99 단국강토 02.19 2444
3186 한줄 Tip 99 단국강토 02.19 2707
3185 [css] 텍스트 / 폼 / 테이블 / 버튼 / 체크박스 99 단국강토 02.19 2606
3184 link색 바꾸기 99 단국강토 02.19 3138
3183 버튼 미디어 플래이어를 구현해 보자 99 단국강토 02.19 3029
3182 CSS 사용방법 - 폰트표현 99 단국강토 02.19 4768
3181 CSS 사용 표현 - 위치표현 99 단국강토 02.19 2691
3180 레이어(Layer) 팝업 만들기 99 단국강토 02.19 3178
3179 문자열 체크 99 단국강토 02.19 1785
3178 onUnLoad 이벤트 제어하기 99 단국강토 02.19 2714
3177 onUnLoad 이벤트 제어하기 99 단국강토 02.19 2896
3176 Input Box의 readOnly 속성 제어하기 99 단국강토 02.19 2990
3175 Input Box의 readOnly 속성 제어하기 99 단국강토 02.19 2655
3174 iframe 속성 설명 99 단국강토 02.19 2352
3173 iframe 속성 설명 99 단국강토 02.19 2413
3172 Textare 에 이미지 넣기 99 단국강토 02.19 1643
3171 Textare 에 이미지 넣기 99 단국강토 02.19 2080
3170 form enctype (encoding) 조절하기 99 단국강토 02.19 2380
3169 form enctype (encoding) 조절하기 99 단국강토 02.19 2864
3168 new Image() 사용하기 99 단국강토 02.19 1662
3167 new Image() 사용하기 99 단국강토 02.19 2053
3166 특수문자 입력 방지하기 99 단국강토 02.19 3341
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취