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

리스트 스타일
작성자 : 99 단국강토
등록날짜 : 2009.02.10 10:07
1,935

* 리스트 스타일의 형식 지정 *

<HTML>

<HEAD>

   <TITLE> 리스트의 기호와 형식 지정 </TITLE>

   <STYLE TYPE="text/css">

   <!--

      .disc {list-style-type: disc;}

      .circle {list-style-type: circle;}

      .square {list-style-type: square;}

      .decimal {list-style-type: decimal;}

      .lower-roman {list-style-type: lower-roman;}

      .upper-roman {list-style-type: upper-roman;}

      .lower-alpha {list-style-type: lower-alpha;}

      .upper-alpha {list-style-type: upper-alpha;}

      .none {list-style-type: none;}

   -->

   </STYLE>

</HEAD>

<BODY BGCOLOR="white">

   <CENTER>

   <H2> 리스트의 기호와 형식 지정 </H2>

   </CENTER>


   <UL CLASS="disc">

   <LI> 검은 원형으로 지정

      <UL CLASS="circle">

      <LI> 흰 원형으로 지정

         <UL CLASS="square">

         <LI> 사각형으로 지정

            <LI CLASS="none"> 마크를 표시하지 않게 지정

         </UL>

       </UL>

   </UL>

   <OL CLASS="upper-roman">

   <LI> 대문자 로마자로 지정

      <OL CLASS="lower-roman">

      <LI> 소문자 로마자로 지정

         <OL CLASS="upper-alpha">

         <LI> 대문자로 지정

            <OL CLASS="lower-alpha">

            <LI> 소문자로 지정

               <OL CLASS="decimal">

               <LI> 숫자로 지정

               </OL>

            </OL>

         </OL>

      </OL>

   </OL>

</BODY>

</HTML>








* 리스트 스타일의 색 시정 *

<HTML>

<HEAD>

   <TITLE> 리스트의 기호와 형식에 색 지정 </TITLE>

   <STYLE TYPE="text/css">

   <!--

      .disc {list-style-type: disc; color: blue }

      .square {list-style-type: square; color: red}

      .decimal {list-style-type: decimal; color: green}

      .upper-roman {list-style-type: upper-roman; color: navy}

      .black { color:black }

   -->

   </STYLE>

</HEAD>

<BODY BGCOLOR="white">

   <CENTER>

   <H2> 리스트의 기호와 형식에 색 지정 </H2>

   </CENTER>


   <UL>

      <LI CLASS="disc"> <SPAN CLASS="black">원형 기호에는 blue 지정 </SPAN>

      <LI CLASS="square"><SPAN CLASS="black"> 사각형 기호에는 red 지정 </SPAN>

   </UL>

   <OL>

      <LI CLASS="decimal"> <SPAN CLASS="black"> 숫자에는 green 지정 </SPAN>

      <LI CLASS="upper-roman"> <SPAN CLASS="black"> 대문자 로마자에는 navy 지정 </SPAN>

   </OL>

</BODY>

</HTML>

출처 : Tong - 드렁크수달스님의 ■ CSS ■통

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

Comments

번호 제목 글쓴이 날짜 조회
3045 색깔별로 분류 99 단국강토 02.10 1961
3044 선택자(Selector) 99 단국강토 02.10 1646
3043 HTML 강좌 STYLE SHEET 문단제어 99 단국강토 02.10 1690
3042 문서내에 작은 스크롤상자 만들기(iframe 대신) 99 단국강토 02.10 2497
3041 이미지 정중앙 99 단국강토 02.10 1746
3040 마우스 커서 변경 99 단국강토 02.10 1593
3039 make flexible width(example) 99 단국강토 02.10 2253
열람중 리스트 스타일 99 단국강토 02.10 1936
3037 테이블,이미지 테두리 스타일 99 단국강토 02.10 1975
3036 테이블 넓이보다 긴 텍스트 처리(자동 줄 바꿈) 99 단국강토 02.10 3424
3035 마우스 올렸을때 사각테두리 만드는 법 99 단국강토 02.10 2244
3034 서로 다르게 CSS소스 적용하는 방법 99 단국강토 02.10 2974
3033 마우스 On 시에 표 색상 바꾸기 99 단국강토 02.10 3351
3032 해상도 상관 없이 팝업 중앙에 위치시키기 99 단국강토 02.10 3418
3031 해상도 상관 없이 팝업 중앙에 위치시키기 99 단국강토 02.10 2349
3030 EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 99 단국강토 02.10 2297
3029 EclipseLink를 사용하여 JPA에서 반복 불가능한 읽기 방지 99 단국강토 02.10 2694
3028 자바스크립트의기본 99 단국강토 02.10 1439
3027 자바스크립트의기본 99 단국강토 02.10 2939
3026 table 태그를 알자 99 단국강토 02.10 1421
3025 table 태그를 알자 99 단국강토 02.10 2789
3024 레이어를 제대로알자 99 단국강토 02.10 2452
3023 레이어를 제대로알자 99 단국강토 02.10 1602
3022 다음부터..창띄우지않기[쿠키이용] 99 단국강토 02.10 2546
3021 다음부터..창띄우지않기[쿠키이용] 99 단국강토 02.10 2955
3020 프린트관련스크립 99 단국강토 02.10 1527
3019 프린트관련스크립 99 단국강토 02.10 2012
3018 원하는 창 크기 ,즐겨찾기등록하기 99 단국강토 02.10 1833
3017 원하는 창 크기 ,즐겨찾기등록하기 99 단국강토 02.10 2199
3016 새창,새창내려온후진동 99 단국강토 02.10 1342
마케팅
특별 마케팅자료
다운로드 마케팅자료
창업,경영
기획,카피,상품전략
동기부여,성취