아바타 아래선?

개발
1

여러분 안녕하세요, 아바타 아래에 줄을 표시하는 방법을 아시는 분이 있을까요? Figma 포럼에서 본 적이 있는데 꽤 멋져 보였거든요.

2

paranoya님, 안녕하세요!

(참고용 시그마 예시 링크: https://forum.figma.com/t/introduce-yourself/102/2)

정말 멋진 커스텀 기능입니다.

아래 가이드를 통해 그들이 어떻게 구현했는지 확인할 수 있습니다:

이 가이드를 통해 포럼의 다양한 시각적 커스텀 작업을 수행하는 데 도움이 될 것입니다.

Figma에서는 다음과 같이 line 요소를 타겟팅할 수 있습니다:

image
image2498×1440 288 KB

그들은 테마 CSS에 다음 코드를 추가했습니다:

.topic-body:before {
    background-color: var(--surface-high-contrast);
    content: "";
    display: block;
    position: absolute;
    top: 64px;
    left: -26px;
    height: calc(100% - 72px);
    width: 2px;
}

하지만 각 포럼에서 가장 잘 보이도록 일부 값은 조정해야 합니다.

그들의 세로선이 멋져 보이는 이유는 각 게시물 사이의 가로선도 제거했기 때문입니다.

.topic-body, .topic-avatar {
    border-top: 0;
    padding-top: 12px;
}

조금만 다듬으면 다음과 같은 결과를 얻을 수 있습니다:

image
image825×1179 60.3 KB

3

이렇게 빨리 답변을 받을 줄은 몰랐어요. 정말 감사합니다!

4

천만에요! 저희는 도움을 드리기 위해 여기 있습니다! :hugs: