list-style-type (멋진 thumbs up list를 만들고 싶다면..?!)

 

 

 

 

 

넘 귀엽지 않은가..??ㅎㅎㅎ히히힣

 

이 리스트를 만들기 위해, 일일이 저 엄지척 아이콘을 삽입할수는???!!  없.다.

 

왜냐.

 

우리는 개발자니까.

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ (-0년차..지만)

 

개발자는 효율성을 필히 생각해야하며, 

저 리스트가 100, 1000, 100000개일 경우를 고려해서 로직을 짤 줄 알아야 한다.

 

 

그렇다면 우리는 어떻게 저렇게 귀여운 엄지척 리스트를 만들 수 있겠는가!!

 

 

그것은 바로!!

 

list-style-type   요 property 친구가 우릴 도와줄 것이다.

 

css에서 

 

list-style-type: 뒤에 다양한 value값에 따라 리스트의 스타일이 변한다.

 

 

 

list-style-type: circle;

 

이렇게 코드를 치면, 리스트 앞에 빈 동그라미로 각 리스트를 꾸며줄 수 있고

 

list-style-type: square;

square 밸류값을 넣으면 네모로 꾸며줄수 있당.

 

 

upper-roman

• Uppercase roman numerals
• E.g. I, II, III, IV, V…

lower-greek

• Lowercase classical Greek
• alpha, beta, gamma…
• E.g. α, β, γ…

lower-alphalower-latin

• Lowercase ASCII letters
• E.g. a, b, c, … z
• lower-latin is unsupported in IE7 and earlier
• See Browser compatibility section.

upper-alphaupper-latin

• Uppercase ASCII letters
• E.g. A, B, C, … Z
• upper-latin is unsupported in IE7 and earlier

arabic-indic-moz-arabic-indic

• Example

armenian

• Traditional Armenian numbering
• (ayb/ayp, ben/pen, gim/keem…

 

등등 참 다양한 밸류값이 있다.

 

 

그래서, 엄지척 리스트는 어떻게?

 

 

list-style-type: "\1F44D"; // thumbs up sign

 

요롷게:)