# 특정 페이지에 CSS를 추가하는 방법? 피드

**URL:** <https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613>\
**Category:** Support\
**Created:** [11월 30, 2021, 11:47오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613 "2021-11-30T23:47:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [11월 30, 2021, 11:47오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/1 "2021-11-30T23:47:28Z")

</div>

피드 페이지에만 몇 가지 변경 사항을 적용하고 싶습니다. 현재 기본 테마만 사용 중입니다.

사용자의 댓글이 확장된 상태이고 이미지가 포함된 경우, 사파리 모바일 브라우저에서 이미지가 반응형으로 동작하지 않아 페이지 밖으로 흘러나가는 문제가 발생합니다.

아래 코드로 해결되는 것 같지만, 다른 페이지에서 문제가 발생할지는 확실하지 않습니다.

```plaintext
.lightbox-wrapper img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: auto;
}

```

둘째, 소개(about) 섹션을 제거하고 싶습니다. 이 섹션은 사용자의 정보 자체를 표시하는 것이라, 사용자가 상단에 자신의 정보를 보는 것이 의미가 없다고 생각합니다.

이 섹션에 display none을 적용했습니다.

`.user-main .about`

셋째, 가능하면 기본적으로 확장된 상태로 표시되도록 변경하고 싶습니다. 그래야 피드가 일반적인 피드처럼, 팔로우한 사용자의 댓글을 바로 볼 수 있을 것 같습니다.

---

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [12월 2, 2021, 10:28오전 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/2 "2021-12-02T10:28:39Z")

</div>

모바일에서 해당 섹션을 제거할 수 있는지 혹시 아시나요?

---

<div class="post-metadata">

**Author:** ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)\
**Post date:** [12월 2, 2021, 10:32오전 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/3 "2021-12-02T10:32:34Z")

</div>

모바일 섹션에 CSS를 추가하여 이를 숨길 수 있습니다.

---

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [12월 2, 2021, 10:35오전 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/4 "2021-12-02T10:35:58Z")

</div>

네, 하지만 그렇게 하면 `.user-main .about`를 사용하는 다른 페이지들에서도 해당 섹션이 숨겨지게 됩니다.

작은 모바일 기기를 사용하는 경우, 사용자는 피드 페이지 상단에 자신의 소개 섹션을 볼 필요가 없으므로 피드 페이지를 간결하게 만들고 싶습니다.

---

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [12월 2, 2021, 10:37오전 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/5 "2021-12-02T10:37:35Z")

</div>

그리고 피드에서 주제를 자동으로 확장하는 기능도 시도해 보세요. 그러면 사용자가 하나씩 열어보지 않고도 주제를 읽을 수 있습니다.

---

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [12월 2, 2021, 11:19오전 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/6 "2021-12-02T11:19:21Z")

</div>

원하시는 결과를 보여줄 수 있는 스크린샷을 올려 주실 수 있을까요? 적어도 저는 정확히 어떤 뷰를 어떻게 변경하고 싶으신지 이해가 되지 않습니다.

---

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [12월 2, 2021, 1:30오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/7 "2021-12-02T13:30:04Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/9/9/991933d368dfb04c54b8f051cf0fdb91accbe0c7.jpeg)

감사합니다. 모바일 피드 페이지에서 상단 섹션을 제거하고 싶습니다. 해당 섹션은 사용자 자신의 정보이기 때문이죠. 확장 기능이 있다는 점은 알고 있지만, 사용자가 팔로우하는 사람들의 게시물을 보는 페이지에서는 정말로 필요하지 않습니다.

기본적으로도 접힌 상태로, 하나씩 확장해야 합니다. 그리고 게시물에 이미지가 있는 경우, 열리기 전까지 URL이 표시됩니다. 접힌 상태가 아니라 피드가 표시되도록 변경하고 싶습니다.

---

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [12월 2, 2021, 3:36오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/8 "2021-12-02T15:36:45Z")

</div>

Follow 플러그인을 사용 중인 것 같습니다. 저는 해당 플러그인을 설치하지 않아 일반적인 의견만 드릴 수 있습니다:

각 사용자 페이지는 body 요소에 고유한 클래스를 추가합니다:  
 ![Screenshot from 2021-12-02 15-27-04](https://global.discourse-cdn.com/meta/original/3X/2/5/25d28f905965928cb1eaa87858af6796a741fb48.png)  
예를 들어, 활동(Activities) 페이지에서는 `.user-activity-page`입니다. 메시지(Messages) 페이지에서는 `.user-messages-page`입니다. 따라서 Follow 페이지에서는 아마도 `.user-follows-page`일 것입니다. 이 클래스를 사용하여 해당 페이지에서만 상단 섹션을 숨길 수 있습니다. 단, 한 가지 뷰에서만 숨기면 인터페이스가 뛸 수 있다는 점을 고려해야 합니다.

게시물의 확장 또는 접힌 상태에 대해서는 CSS로 이를 표적화할 수 없다고 생각합니다. 해당 뷰의 플러그인 템플릿은 기본적으로 접힌 게시글 요약(post-excerpt)으로 설정되어 있을 가능성이 큽니다. 따라서 템플릿에서 기본값을 직접 변경해야 합니다.

---

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [12월 2, 2021, 4:26오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/9 "2021-12-02T16:26:38Z")

</div>

이것은 사용자 자신의 팔로우 페이지에서 상단의 소개 섹션을 제거합니다. 제가 올바르게 이해했다면, 원하시는 작업은 다음과 같습니다. 🙂

이 내용을 모바일 CSS 섹션에 붙여넣으세요.

```plaintext
body.user-follow-page {
  .viewing-self {
    .user-main .about {
      display: none;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [12월 2, 2021, 4:30오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/10 "2021-12-02T16:30:28Z")

</div>

감사합니다. 이렇게 해서 해결했어요.

```plaintext
.user-follow-page .user-main .about{
    display: none;
}

```

하지만

> [@Don](#):
>
> 이렇게 하면 사용자 본인의 팔로우 페이지 상단 ‘소개’ 섹션이 제거됩니다.

이 방식이 더 좋은 것 같아요. 그러면 다른 사람들의 페이지도 볼 수 있으니까요. 그 부분은 생각하지 못했네요 ㅋㅋ

---

<div class="post-metadata">

**Author:** ![flash](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flash](https://meta.discourse.org/u/flash)\
**Post date:** [12월 2, 2021, 4:33오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/11 "2021-12-02T16:33:30Z")

</div>

플러그인을 클론해서 이걸 어떻게 만져보고 기본값으로 모든 것을 확장해볼지 알아볼게요. 🤔

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [1월 1, 2022, 4:34오후 UTC](https://meta.discourse.org/t/how-to-add-css-to-certain-pages-feed/210613/12 "2022-01-01T16:34:18Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
