인프런 커뮤니티 질문&답변
작성한 질문수
인스타그램 실습
작성
·
147
0
강의를 듣고 인스타그램 실습을 진행하였습니다.하지만 위 사진처럼 사이드바가 컨텐트박스와 겹쳐보이는 문제가 발생하였고, 강의를 여러번 보면서 오류를 확인하고 있지만 길이가 길고 제 눈으로 확인이 안되어 질문드립니다...
위가 side.css일부, 아래가 main.css일부입니다
.side-menu{
max-width: 290px;
position: fixed;
left: 50%;
top: 84px;
transform: translateX(calc(-50%+322px));
display: none;
flex-direction: column;
}.main-container{
background-color: #ffffff;
margin-top: 44px;
margin-bottom: 44px;
display: flex;
}
.content-container {
width: 100%;
max-width: 935px;
padding: 0 0 8px;
margin: 0 auto;
display: flex;
}
.content {
width: 100%;
max-width: 614px;
margin: 0 auto;
display: flex;
flex-direction: column;
}<main class="main-contaniner">
<section class="content-container">
<div class="content">
<div class="stories">
<div class="stories_content">
<button class="story">
<div class="story_avatar">
<div class="story_border">
<svg width="64" height="64">
<circle r="31" cy="32" cx="32" />
</svg>
</div>
<div class="story_picture">
<img src="assets/images/avatar.png" alt="user picture">
</div>
</div>
<span class="story_user">user1</span>
</button>
</div>
</div>
<div class="posts">
<article class="post">
<div class="post_header">
<div class="post_profile">
<a href="#" class="post_avatar">
<img src="assets/images/avatar.png" alt="user picture">
</a>
<a href="#" class="post_user">user1</a>
</div>
<button class="post_more-options">
<img src="assets/icons/more.svg">
</button>
</div>
<div class="post_content">
<div class="post_medias">
<img src="assets/images/picture.jpeg" alt="post content" class="post_media">
</div>
</div>
<div class="post_footer">
<div class="post_buttons">
<button class="post_button">
<img src="assets/icons/heart.svg" alt="heart">
</button>
<button class="post_button">
<img src="assets/icons/comment.svg" alt="comment">
</button>
<button class="post_button post_button--align-right">
<img src="assets/icons/bookmark.svg" alt="bookmark">
</button>
</div>
<div class="post_infos">
<div class="post_likes">
<a href="#" class="post_likes-avatar">
<img src="assets/images/avatar.png" alt="user picture">
</a>
<span>Liked by
<a href="#" class="post_name--underline">user2</a>and
<a href="#">33 others</a>
</span>
</div>
<div class="post_description">
<span>
<a href="#" class="post_name--underline">
user
</a>
description
</span>
</div>
<span class="post_date-time">30 minutes ago</span>
</div>
</div>
</article>
</div>
</div>
<div class="side-menu">
<div class="side-menu_user-profile">
<a href="#" class="side-menu_user-avatar">
<img src="assets/images/avatar.png" alt="user picture">
</a>
<div class="side-menu_user-info">
<a href="#">user1</a>
<span>nickname</span>
</div>
<button class="side-menu_user-button">
Switch
</button>
</div>
<div class="side-menu_suggestions-section">
<div class="side-menu_suggestions-header">
<h2>Suggestion for you</h2>
<button>See All</button>
</div>
<div class="side-menu_suggestion-content">
<div class="side-menu_suggestions">
<a href="#" class="side-menu_suggestions-avatar">
<img src="assets/images/avatar.png" alt="">
</a>
<div class="side-menu_suggestion-info">
<a href="#">
user11
</a>
<span>Followed by user2, user3 and others</span>
</div>
<button class="side-menu_suggestion-button">Follow</button>
</div>
<div class="side-menu_suggestions">
<a href="#" class="side-menu_suggestions-avatar">
<img src="assets/images/avatar.png" alt="">
</a>
<div class="side-menu_suggestion-info">
<a href="#">
user11
</a>
<span>Followed by user2, user3 and others</span>
</div>
<button class="side-menu_suggestion-button">Follow</button>
</div>
</div>
</div>
<div class="side-menu_footer">
<div class="side-menu_footer-links">
<ul class="side-menu_footer-list">
<li class="side-menu_footer-item">
<a class="side-menu_footer-link">About</a>
</li>
<li class="side-menu_footer-item">
<a class="side-menu_footer-link">Help</a>
</li>
<li class="side-menu_footer-item">
<a class="side-menu_footer-link">Press</a>
</li>
<li class="side-menu_footer-item">
<a class="side-menu_footer-link">Phone</a>
</li>
<li class="side-menu_footer-item">
<a class="side-menu_footer-link">API</a>
</li>
</ul>
</div>
<span class="side-menu_footer-copyright">© 2023 instargram from facebook</span>
</div>
</div>
</section>
</main>답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
사이드바 겹침 문제는 주로 CSS의 위치 설정에 관한 문제로 생기곤 합니다. 요그리님의 .side-menu 클래스에는 position: fixed;와 transform: translateX() 속성이 사용된 것을 볼 수 있는데요, 해당 설정은 .side-menu를 브라우저 창에 고정시키고 가로 방향으로 이동시킵니다. 만약 .side-menu가 다른 컨텐츠와 겹친다면, left와 translateX 값을 조정해야 할 수도 있습니다.
문제를 해결하기 위해 여러 가지 방법을 시도해 볼 수 있습니다.
.side-menu의transform: translateX(calc(-50% + 322px));값을 조정하여 사이드바의 위치를 조정해 보세요.322px의 값을 줄이거나 늘려서 컨텐츠와 사이드바의 간격을 조정할 수 있습니다..main-container와.content-container설정에max-width나margin,padding값이 영향을 미치고 있는지 점검해 보세요. 특히.content-container에width가100%이고max-width가935px로 설정되어 있는데, 브라우저의 너비에 따라 사이드바와 겹칠 수 있으므로max-width값을 조정해 볼 수 있습니다..content의max-width를614px로 설정하여 주고 있는데, 이것이 중앙의 가로 길이를 결정합니다. 만약 컨텐트의 너비가 사이드바의 너비보다 넓어 겹친다면,.content의max-width를 조정해주는 것도 방법입니다.미디어 쿼리(Media Queries)를 이용해 화면의 크기가 변경될 때 사이드바와 컨텐츠 사이의 레이아웃이 자동으로 조정되도록 설정하는 것입니다. 작은 화면에서는 사이드바를 숨기고, 충분한 공간이 있을 때만 사이드바를 표시하는 방식으로 바꿀 수 있습니다.
위 방법들을 차례로 시도해보며, 문제를 해결해 나가시길 바랍니다. 여전히 해결이 어려우시다면 추가 질문해 주세요.
도움이 필요하시면 언제든지 문의하기 부분을 이용해주세요. 최대한 빠르게 답변드리도록 하겠습니다!