css

css ul li 수직바 쉽게 넣는방법

나쁜천사1004 2024. 6. 12. 14:52

ul 태그 내의 li 요소 사이에 수직 바(Vertical Bar)를 추가하려면, CSS를 사용하여 li 요소 간에 경계를 설정할 수 있습니다. 다음은 그 예입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Bar in List</title>
<style>
  ul {
    list-style-type: none; /* 기본 불렛 제거 */
    padding: 0; /* 기본 패딩 제거 */
    margin: 0; /* 기본 마진 제거 */
    display: flex; /* 가로 방향으로 나열 */
  }
  ul li {
    padding: 10px 15px;
    position: relative;
  }
  ul li:not(:last-child)::after {
    content: '|'; /* 수직 바 */
    position: absolute;
    right: -10px; /* 위치 조정 */
    color: black; /* 바 색상 */
  }
</style>
</head>
<body>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
</body>
</html>
 

이 예제는 ul 요소를 플렉스 컨테이너로 만들고, 각 li 요소의 오른쪽에 수직 바를 추가하는 방식입니다. 마지막 li 요소에는 수직 바를 추가하지 않도록 :not(:last-child) 선택자를 사용했습니다.

 

위 코드에서는 각 li 요소에 수직 바를 추가하고, CSS의 ::after 가상 요소를 사용하여 수직 바를 생성했습니다. position: absolute를 사용하여 바의 위치를 조정하고, right: -10px로 바의 위치를 세밀하게 설정했습니다. 필요에 따라 색상, 위치 등을 조정할 수 있습니다.

반응형