CSS로 목록 리스트 들을 스타일링 해보자
순서 없는 목록 앞의 마커(마크) 모양
마커 모양 속성은 list-style-type: 속성을 쓴다
<body>
<p>순서 없는 목록 앞의 마커 모양 :disc</p>
<ul>
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
</body>
순서 없는 목록 태그인 <ul> 태그를 써서 목록을 만들어 보았다
그러면 이렇게 순서 없는 목록이 만들어 진다
요기서
에스프레소
아메리카노
카페라떼 의 앞에 동그란 점을 disc 모양이라고 한다
<style>
.disc {
list-style-type: disc;
}
</style>
</head>
<body>
<p>순서 없는 목록 앞의 마커 모양 :disc</p>
<ul class="disc">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
</body>
internal 스타일로 클래스 선택자를 만들고
해당 목록에 클래스 선택자를 적용해보면
똑같이 disc 모양의 점이 찍힌다
해당 클래스 선택자에 앞에 ul을 적용해보자
<style>
ul.disc {
list-style-type: disc;
}
</style>
그러면 <ul>태그 안에 있는 disc라는 클래스 값을 가진 친구들에게만 적용이 된다는 뜻이다
이렇게 태그명 + 클래스 선택자를 사용해서 조금 더 완벽하게 CSS선택자를 사용할 수 있다
circle 이라는 마커 모양을 만들어 보자
<p>순서 없는 목록 앞의 마커 모양 :circle</p>
<ul class="circle">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
그러면 해당 클래스 선택자를 만들어 보겠다
ul.circle {
list-style-type: circle;
}
이렇게 채워지지 않은 동그라미가 나오는걸 볼 수 있다
square 마커 모양을 만들어 보자
<p>순서 없는 목록 앞의 마커 모양 :square</p>
<ul class="square">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
ul.square {
list-style: square;
}
꽉 채워진 네모 마커 모양이 생기는걸 볼 수 있다
근데 우리는 이 마커 모양을 내가 원하는 모양으로 커스텀해서 쓸 수 있다
<p>순서 없는 목록 앞의 마커 모양 :dash</p>
<ul class="dash">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
ul.dash {
list-style-type: '-';
}
이렇게 list-style-type : 에서 '따움표' 안에 원하는 마커 모양을 넣으면 된다
나는 - 를 넣어 보았다
그럼 이렇게 내가 - 로 커스텀한 마커 모양이 된다
*(별표)로 마커를 만들어 보자
<p>순서 없는 목록 앞의 마커 모양 :astar</p>
<ul class="astar">
<li>에스프레소</li>
<li>아메리카노</li>
<li>카페라떼</li>
</ul>
ul.astar {
list-style-type: '*';
}
이렇게 똑같이 '따움표' 안에 *(별표) 를 넣어서 커스텀 했다
순서 있는 목록 앞의 마커 모양
/* 순서 있는 목록 마커 스타일 */
/* decimal, lower-roman, lower-greek */
/* lower-latin, armenian, lower-alpha */
순서 있는 목록 마커 스타일 종류이다
이것 이외에도 종류가 많다고 한다
<p>순서 있는 목록 앞의 마커 모양</p>
<ol>
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장프로그램 설치</li>
</ol>
순서 있는 목록 태그인 <ol> 태그로 순서 있는 목록을 만들었다
이렇게 1,2,3 순서대로 목록이 만들어진걸 볼 수 있다
decimal 마커를 만들어 보자
<p>순서 있는 목록 앞의 마커 모양 : decimal</p>
<ol class="decimal">
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장프로그램 설치</li>
</ol>
ol.decimal {
list-style-type: decimal;
}
기본값이랑 똑같은 걸 볼 수있다
decimal 은 기본 마커이다
lower-roman 마커를 만들어 보자
<p>순서 있는 목록 앞의 마커 모양 : lower-roman</p>
<ol class="lower-roman">
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장프로그램 설치</li>
ol.lower-roman {
list-style-type: lower-roman;
}
이것이 lower-roman 마커이다
lower-greek 마커를 만들어 보자
<p>순서 있는 목록 앞의 마커 모양 : lower-greek</p>
<ol class="lower-greek">
<li>Node.js 설치</li>
<li>비주얼 스튜디오 코드 설치</li>
<li>확장프로그램 설치</li>
</ol>
ol.lower-greek {
list-style-type: lower-greek;
}
이것이 lower-greek 마커이다
이렇게 목록 리스트 앞에 마커를 적용할수 있는
list-style-type : 속성을 이용해 앞에 마커들을 바꿀수 있다
