🤓
가상요소 공부하려다가 딴길로 새버렸다!
::after
사용하여 분할선 만들기를 하다가
<li>
에 구분점이 사라지지 않아서
::marker
로 해결할 수 있다고 생각해 찾아봤고
::marker
가 아닌list-style-type:none;
으로 해결할 수 있는 것을 알게됨!
<body>
<div id="content">
<ul class="test">
<li><a href="">login</a></li>
<li><a href="">home</a></li>
<li><a href="">sitemap</a></li>
</ul>
</div>
</body>
.test{
list-style-type: none;
}
.test li{
float:left;
margin-right:5px;
}
/* 플로트 left로 왼쪽부터 수평나열 하고 간격주기 */
.test li::after{
padding-left:5px;
content:"|"
}
/* 간격주고 | 넣기 */
.test li:last-child::after{content:""}
/* 맨 마지막 리스트 오르쪽에는 안넣을래 ! */
<li>
요소 검사하면 display: list-item
이 있다는 것을 알 수있으므로 브라우저가 기본적으로 ::marker
를 랜더링한다.
<ol>
은 ::marker
를 숫자로, <ul>
은 ::marker
를 점으로 나타낸다.
위의 예시는 <ul>
에 해당하기 때문에 구분점을 랜더링하지만 list-style-type:none;
을 통해 삭제가 가능했다.
list-style-position: outside;
(default)list-style-position: inside;
ul {
list-style-type: "🛒";
}
list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
::marker
요소를 볼 수 있다. ::Marker
를 더 검사하면 브라우저 기본 스타일링을 볼 수 있다.CSS 레이아웃 모델에서 ::marker
는 각 list item과 관련된 marker box로 표시됩니다. marker box는 일반적으로 구분점이나 숫자를 포함하는 컨테이너이다.
::marker 선택자를 사용하여 marker box 스타일 지정 가능.
(전체 list 기반으로 스타일링하는 대신 marker만 선택)
::marker {
color: red;
}
/*마커 색만 빨간색으로!*/
::marker elements precede any pseudo-elements that you may have inserted using CSS ::before.
display: list-item
속성 추가하여<li>
가 아닌 것들을 list item으로 만들 수 있음예) h1에 구분점을 원하는 경우
h1 {
display: list-item;
}
h1::marker {
content: "📕";
}
/*::marker로 다른 것으로 변경 가능 */