컴포넌트 중간에 구분을 ">" 이런식의 경계를 넣는 방법이 궁금합니다.

css after 나 before 가상선택자로 주고 border 로 주면되요 구글링으로 css border triangle 로 검색하면 나와요.

중간에 구분선을 넣는 방법은 여러 가지가 있습니다. 그 중에서도 가장 간단한 방법은 가상 요소(pseudo element)를 사용하는 것입니다. #1 가상 요소를 사용하면 컨텐츠 요소의 내부에 구분선을 넣을 수 있습니다. 예를 들어, 다음과 같이 HTML을 작성하고 #2다음과 같이 CSS를 작성하면 ">" 구분선을 넣을 수 있습니다: 아래 CSS에서 ' .divider ' 클래스에 ' border-right ' 속성을 이용하여 우측에 1픽셀의 검은색 선을 만들었습니다. ' .divider ' 클래스에 ' content ' 속성을 이용하여 가상 요소를 만들고 이를 ' width '와 ' height ' 속성으로 화면에서 숨겨주었습니다. 그러면 HTML에서 ' <div class="divider"></div> '를 사용하여 ">" 구분선을 추가할 수 있습니다. ' clip-path '를 이용해서 다각형을 만드는 방법도 가능합니다. 그러나 이 경우에는 잘린 부분에 보더가 적용되지 않는 문제가 발생할 수 있습니다. 이 때는 ' clip-path ' 대신 ' background-image '를 이용해서 구분선 이미지를 삽입하거나, ' linear-gradient '를 이용해서 CSS로 구분선을 만들 수도 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#1
<div class="container">
  <div class="content">Content 1</div>
  <div class="divider"></div>
  <div class="content">Content 2</div>
</div>


#2
.container {
  display: flex;
  align-items: center;
}

.content {
  padding: 10px;
}

.divider {
  width: 0;
  height: 100%;
  border-right: 1px solid black;
  margin: 0 10px;
  content: "";
}