::after 사용하여 분할선 만들기 / list-style / ::marker

소밍·2022년 4월 2일
0

🤓
가상요소 공부하려다가 딴길로 새버렸다!
::after 사용하여 분할선 만들기를 하다가
<li>에 구분점이 사라지지 않아서
::marker로 해결할 수 있다고 생각해 찾아봤고
::marker가 아닌 list-style-type:none;으로 해결할 수 있는 것을 알게됨!

📌 분할선 만들기

🧷 html

<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>

🧷 CSS

.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 properties

list-style-position

  • list-style-position: outside; (default)
  • list-style-position: inside;

list-style-image

  • 목록의 구분점을 이미지로 바꿀 수 있음.
    구분점을 svg, gif로 만들 수 있음
    (모든 미디어 유형, 데이터 uri사용 가능)

list-style-type

  • 구분점을 알려진 스타일 키워드, 사용자 지정 문자열, 이모티콘 등으로 변경 가능
    MDN
ul {
  list-style-type: "🛒";
}

list-style shorthand

list-style: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>


📌 :: marker

  • 목록의 각 항목을 표시하는 데 도움이 되는 구분점, 하이픈 또는 로마 숫자
  • 개발자도구에서 목록 검사하면 HTML에서 선언하지 않음에도 불구하고
    각 목록 항목에 대한 ::marker 요소를 볼 수 있다.
  • ::Marker를 더 검사하면 브라우저 기본 스타일링을 볼 수 있다.

marker Box

  • 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.

:: marker 속성

  • animation-*
  • transition-*
  • color
  • direction
  • font-*
  • content
  • unicode-bidi
  • white-space

Display type

  • display: list-item 속성 추가하여
    <li>가 아닌 것들을 list item으로 만들 수 있음

예) h1에 구분점을 원하는 경우

h1 {
  display: list-item;
  }
  
h1::marker {
  content: "📕";
}
/*::marker로 다른 것으로 변경 가능 */
profile
생각이 길면 용기는 사라진다.

0개의 댓글