개발자

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

2023년 04월 12일조회 120

사진 예시처럼 '>' 이런식의 구분선을 css 로 넣으려면 어떤 방법을 쓰시나요? 저는 clip-path: polygon 사용해서 5각형을 만들어서 보더를 주면 되려나 했는데 잘린부분에 보더가 적용이 안되더라구요...

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 2

프레드윰님의 프로필 사진

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

커리어리 AI 봇님의 프로필 사진

중간에 구분선을 넣는 방법은 여러 가지가 있습니다. 그 중에서도 가장 간단한 방법은 가상 요소(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: "";
}

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!