HTML CSS list-style-type 속성

목록의 항목 표시자의 속성을 설정합니다.

속성 값: disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,upper-latin,hebrew,armenian,georgian,cjk-ideographic,hiragana,katakana,hiragana-iroha,none



 

Tip: CSS 몇가지 방법
1. 임베디드 스타일 시트(Embedded Style Sheet) :
내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) :
외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) :
HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.



 

CSS list-style-type 속성 값

disc : 검정원 원모양 머리표

circle : 원 모양 머리표

square : 네모 모양 머리표

decimal : 넘버링 머리표

lower-roman : 로마어 소문자 머리표

upper-roman : 로마어 대문자 머리표

lower-alpha : 영어 소문자 머리표

upper-alpha : 영어 대문자 머리표

upper-latin : 머리표

hebrew : 히브리어 문자 머리표

armenian : 아르메니아 문자 머리표

georgian : Georgian alphabet 문자 머리표

cjk-ideographic : 중국 한자 머리표

hiragana : 히라가나-이로하 일본 문자 머리표

katakana : 카타카나 일본 문자 머리표

hiragana-iroha : 히라가나-이로하 일본 문자 머리표

none : 머리표 없음



 

1. CSS list-style-type : 링크타입 스타일 시트(External Style Sheet)

링크타입 스타일 시트(External Style Sheet)은 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 태그로 연결하는 방법입니다.

					
					
 
[style.css] 이라는 이름을 가진 별도의 파일입니다.

<style.css> 
 ul{
   list-style-type: disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,upper-latin,hebrew,armenian,georgian,cjk-ideographic,hiragana,katakana,hiragana-iroha,none 속성값입니다.;
 } 
 

별도의 이름을 가진 웹페이지입니다.(예 : sample.html)
HTML CSS font-size 속성의 예제 샘플입니다

<body>
  <h2>CSS 레포드 과제 </h2>
  <ul>
    <li>CSS 속성 예제 만들기</li>
    <li>CSS 속성의 링크타입 스타일 시트(External Style Sheet) 값은?</li>
    <li>팀별 CSS의 프로젝트</li>
  </ul>
</body>




					
					



 

CSS list-style-type 예제 : 임베디드 스타일 시트(Embedded Style Sheet)

임베디드 스타일 시트(Embedded Style Sheet)은 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head>태그 사이에 Style Sheet를 지정하는 방법입니다.

					
					
<head>
         
<style type="text/css"> <!--  
 ul{
   list-style-type: disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,upper-latin,hebrew,armenian,georgian,cjk-ideographic,hiragana,katakana,hiragana-iroha,none 속성값입니다.;
 } 
 
 --> </style>
</head>

<body>
  <h2>CSS 레포드 과제 </h2>
  <ul>
    <li>CSS 속성 예제 만들기</li>
    <li>CSS 속성의 임베디드 스타일 시트(Embedded Style Sheet) 값은?</li>
    <li>팀별 CSS의 프로젝트</li>
  </ul>
</body>




					



 

CSS list-style-type 예제 : 인라인스타일(Inline Styles)

인라인스타일(Inline Styles)은 HTML 웹페이지 내에서 직접 지정하는 방법입니다.
<div style="list-style-type : 여기에 속성 값을 넣습니다;">HTML CSS list-style-type속성의 인라인스타일(Inline Styles) 예제 샘플입니다.<div>



 


WRITTEN BY
white_rabbitstar
html대학에서는 html 태그,html5 신규태그,css등 모든 속성,이벤트,속성값을 정리하여 앞으로 열심히 글을 올리 겠습니다.

,