# 푸터 섹션에 로고 추가

**URL:** <https://meta.discourse.org/t/adding-logos-in-footer-section/267365>\
**Category:** Development\
**Created:** [6월 6, 2023, 8:00오전 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365 "2023-06-06T08:00:57Z")\
**Posts on this page:** 12\
**Page:** 2

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [6월 7, 2023, 4:57오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/21 "2023-06-07T16:57:39Z")

</div>

제 포스트를 조금 업데이트했습니다. 다시 시도해 보세요. 이미지를 원하는 크기로 보이게 하려면 이미지 크기를 직접 조정해야 합니다. 어떤 크기를 원하시는지 저는 모르지만, 저는 모두 300으로 설정했을 때 문제가 없었습니다. 이미지 크기는 결국 취향의 문제입니다.

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [6월 7, 2023, 4:58오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/22 "2023-06-07T16:58:43Z")

</div>

해결책에 거의 다가갔습니다 … 이건 크롬의 문제입니다…  
 ![Angry Inside Out GIF by Disney Pixar](https://media3.giphy.com/media/11tTNkNy1SdXGg/giphy.webp?cid=04a688a2fcks8va4yjyczhksvact0i0tknwmwmfyl5bsu50i&ep=v1_gifs_search&rid=giphy.webp&ct=g)  
사파리에서는 완벽하게 보입니다 - 도움을 주셔서 감사합니다

 ![Screenshot 2023-06-07 at 18.59.46](https://global.discourse-cdn.com/meta/original/4X/5/0/0/500ece8386cbbf03e7cf25dd97ab814ae600b886.jpeg)

이제 질문은: 왜 크롬이 이런 행동을 하는 걸까요?

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [6월 7, 2023, 4:59오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/23 "2023-06-07T16:59:59Z")

</div>

저는 윈도우 크롬이나 iOS 사파리에서 아무 문제 없이 잘 사용하고 있습니다. 스크린샷과 게시글도 이 두 브라우저로 작성했습니다. 제가 올린 업데이트된 코드를 시도해 보세요. 문제가 해결될 수도 있습니다.

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [6월 7, 2023, 5:03오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/24 "2023-06-07T17:03:12Z")

</div>

> [@Lilly](#):
>
> ```plaintext
> <div class="footer_align">
> <a href="https://www.wur.nl/en.htm" target="_blank">
> <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image" width="300">
> </a>  
> <a href="https://www.uni-goettingen.de/en/1.html" target="_blank">
> <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image" width="300">
> </a>  
> <a href="https://algorithmicbotany.org/" target="_blank">
> <img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image" width="300">
> </a>
> </div>
> 
> ```

같은 문제입니다…

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [6월 7, 2023, 5:03오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/25 "2023-06-07T17:03:43Z")

</div>

어떤 문제인가요? 크롬 크기 조정 문제인가요?

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [6월 7, 2023, 8:11오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/26 "2023-06-07T20:11:07Z")

</div>

불분명하게 말씀드려서 죄송합니다. 문제는 메인 브라우저(Chrome)를 사용할 때 푸터에 로고가 보이지 않는다는 점입니다. Safari를 사용하면 푸터에 로고가 정상적으로 표시됩니다. 여자친구의 MacBook에서 Chrome을 사용해 보았는데, 그쪽에서는 문제가 없이 로고가 잘 보였습니다. 제 Chrome에 뭔가 이상한 문제가 있는 것 같은데, 원인을 알 수가 없습니다.

또한 모바일에서는 포맷이 올바르게 축소되지 않는 것 같습니다. 수정 방법을 아시는 분 있으신가요?

 ![c2238603-d674-4892-b3af-512699cad10d](https://global.discourse-cdn.com/meta/original/4X/7/2/5/725b8a4a28af28e42636b32c4e92768d689628f7.jpeg)

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [6월 7, 2023, 9:45오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/27 "2023-06-07T21:45:41Z")

</div>

화면 크기에 맞춰 이미지가 축소되고 확장되기를 원하시나요? 모바일 뷰용 다른 푸터를 만들거나, 푸터를 데스크톱 뷰에만 배치하는 방법도 있습니다. HTML/CSS 편집 화면에서 데스크톱과 모바일 섹션이 있으며, 공통 섹션과 동일한 탭이 있는 것을 확인하실 수 있습니다.

이미지 크기를 지정하는 HTML을 직접 실험해 보셔야 할 가능성이 높습니다. 상대 크기(백분율)를 사용하는 것이 좋을 것 같지만, 모든 이미지의 크기가 다르므로 모든 이미지가 동일한 크기가 아닌 한 어려울 수 있습니다. 정확히 무엇을 원하시는지 제가 잘 이해가 되지 않습니다.

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [6월 7, 2023, 10:33오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/28 "2023-06-07T22:33:26Z")

</div>

여기 나보다 훨씬 더 똑똑한 누군가가 확장 프로그램으로 인한 문제를 배제하기 위해 브라우저의 시크릿 모드에서 확인해보라고 제안했습니다.

저는 이미지가 작업하기에 비슷한 크기로 리사이즈한 후, 데스크톱과 모바일 뷰의 CSS와 FOOTER 섹션을 활용해서 원하는 결과를 얻으라고 제안합니다.

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [6월 8, 2023, 7:37오전 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/29 "2023-06-08T07:37:02Z")

</div>

네, 명확하지 않아서 죄송합니다. 데스크톱과 모바일 모두에서 로고가 창 크기에 따라 자동으로 조절되기를 원합니다.

(시크릿 모드를 사용하라는 건 정말 좋은 아이디어였어요 🙂 )

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [6월 8, 2023, 10:09오전 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/30 "2023-06-08T10:09:31Z")

</div>

미케레,

아래 코드를 시도해 볼 수 있을까요?

HTML (이미지의 `width` 속성을 제거하고 컨테이너에 `wrap` 클래스를 추가했습니다):

```html
<div class="wrap custom-footer-image">
    <a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
    <a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
    <a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>

```

CSS:

```css
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    a {
    flex: 1;
    text-align: center;
        img {
            max-width: 100%;
        }
    }
}

```

데스크톱에서 표시되는 모습:

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/d/3/9d3a38c97de2c519bbe7928f3dccd2823d84bdd6.png)

모바일에서:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/7/217373f01cd919f0d118f6f8706dadbfa9ab684c.png)

어떻게 생각하시나요?

모바일에서 이미지가 너무 작게 보인다면, 모바일 레이아웃을 2열로 나누어 각 열에 두 개의 이미지를 배치하도록 변경할 수 있습니다.

---

<div class="post-metadata">

**Author:** ![Michele\_Butturini](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/michele_butturini/32/295242_2.png) [@Michele\_Butturini](https://meta.discourse.org/u/Michele_Butturini)\
**Post date:** [6월 8, 2023, 6:47오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/31 "2023-06-08T18:47: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:** [7월 8, 2023, 6:48오후 UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/32 "2023-07-08T18:48:04Z")

</div>

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

[이전 페이지](https://meta.discourse.org/t/adding-logos-in-footer-section/267365.md?page=1)