상단에 고정시킨메뉴 fixed 위에 이미지를 띄웠다 없앴다 하려하는데요.. 채택완료
상단메뉴가 고정되어있는데요
고정된 메뉴위에 이미지가 같이 fixed 되어있따가 이미지를 클릭시 이미지를 삭제하려고하는데요..
이렇게 저렇게 하고 잇는데 다 안됩니다..ㅜㅜ 팁같은게 있나요??
목적은 모바일로 접속시에 앱이 아니면 앱으로 이동하라는 이미지를 넣으려고합니다.
현재 만지고 있는 소스는 아래와같습니다
고정메뉴
This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area.
답변 4개
다음과 같이 해보시는건 어떨까 합니다.
이미지가 클릭되었을 때 해당 함수를 호출하도록 onclick 속성을 이미지 태그에 추가하고 이미 작성된 JavaScript 함수 view_close()를 사용하여 이미지를 삭제하도록 하시면 될것 같습니다.
</p>
<p><style>
header {
/* ... (기존 스타일 코드) ... */
}</p>
<p> /* ... (기존 스타일 코드) ... */
</style></p>
<p><div id="view" style="position: fixed; z-index: 2;">
<a href="#" onclick="view_close()"><img src="<a href="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>" target="_blank" rel="noopener noreferrer">https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a></a>
</div></p>
<p><script>
function view_close() {
const viewDiv = document.getElementById('view');
viewDiv.style.display = 'none';
}
</script></p>
<p><header>
<!-- ... (기존 헤더 코드) ... -->
</header></p>
<p><main>
<!-- ... (기존 메인 내용 코드) ... -->
</main></p>
<p>
답변에 대한 댓글 2개
참고하셔서 원하시는 형태로 수정하시면 되겠습니다.
[code]
<style>
header {
/* ... (기존 스타일 코드) ... */
}
/* ... (기존 스타일 코드) ... */
/* 추가 스타일 */
#view img {
position: fixed;
top: 100px; /* 이미지가 고정 메뉴 아래에 위치하도록 조정 */
left: 50%;
transform: translateX(-50%);
z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
display: none; /* 이미지를 기본적으로 숨김 */
}
</style>
<div id="view">
<a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>
</div>
<script>
function view_close() {
const viewDiv = document.getElementById('view');
viewDiv.style.display = 'none';
}
</script>
<header>
<!-- ... (기존 헤더 코드) ... -->
</header>
<main>
<!-- ... (기존 메인 내용 코드) ... -->
</main>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
제가 원하는건 아래화면인데... 도움주신 소스는 자꾸 겹치는것같은데요..
고정메뉴
This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area.
댓글을 작성하려면 로그인이 필요합니다.
고정된 메뉴위에 이미지를 넣으려고하는것입니다.
아래사진보시면 고정메뉴 위에 배너가 있어야합니다.
그런데 배너를 클릭하면 배너가 사라지기때문에 top: 0px; 이걸로 조정하기가 어려워서
어떻게 다른방법이 있는건지 찾아보고 있습니다.
답변에 대한 댓글 1개
position: absolute는 가장 가까운 position: relative를 가진 요소를 기준으로 위치가 결정되기 때문에, header에 position: relative 속성을 추가하여 그 안에 있는 이미지를 조정할 수 있습니다.
[code]
<style>
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* 추가 */
}
/* ... (기존 스타일 코드) ... */
/* 추가 스타일 */
#view img {
position: absolute;
top: 50%; /* 이미지를 수직 가운데로 위치시킴 */
left: 50%; /* 이미지를 수평 가운데로 위치시킴 */
transform: translate(-50%, -50%); /* 이미지의 중심을 기준으로 정렬 */
z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
display: none; /* 이미지를 기본적으로 숨김 */
}
</style>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
말씀해주신대로 넣었는데.. 아래처럼나오는데요...
고정메뉴
This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area. This is the main area.
답변에 대한 댓글 1개
제가 이해를 잘 못 한건가요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
이미지가 고정메뉴 위에 띄워야 하는데 그게 안되고이는것입니다..