레이어팝업 css 반응형으로 만들기.

레이어 팝업을 띄워야해서 준비했던것 정리

 

1. 기본적으로 레이어 팝업은 아래 블로그에서 그대로 복붙했다.
다만 그대로 복붙하면 주석처리가 이상해졌고, 일부분을 수정했기에 다시 남겨본다.

https://kideagle.tistory.com/85

레이어팝업 공지 (오늘 하루 열지 않기)

	<!-- head에 넣기  -->
	<script language="Javascript" type="text/javascript">
		function setCookie(name, value, expirehours) {
			var todayDate = new Date();
			todayDate.setHours(todayDate.getHours() + expirehours);
			document.cookie = name + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
		}

		function closeWin() {
			if (document.getElementById("pop_today").checked) {
				setCookie("ncookie", "done", 24);
			}
			document.getElementById('layer_pop').style.display = "none";
		}
	</script>
	<!-- head에 넣기  -->

	<!--  body 삽입 -->

	<style>
		.layer_popup {
			position: absolute;
			width: 500px;
			left: 60%;
			margin-left: -480px;
			top: 90px;
			z-index: 9999;
			color: white;
		}

		@media (max-width:800px) {
			.layer_popup {
				left: 100%;
			}
		}

		@media (max-width:500px) {
			.layer_popup {
				left: 130%;
			}
		}
	</style>


	<div class="layer_popup" id="layer_pop">
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<picture>
						<source srcset="<?= DIR ?>/data/popup/editor/2024-1.jpg" width="250" height="300" media="(max-width:800px)">
						<img src="<?= DIR ?>/data/popup/editor/2024-1.jpg" width="500" height="600" border="0" />
					</picture>
				</td>
			</tr>
			<tr>
				<td align="center" height="30" bgcolor="#333333">
					<table width="95%" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td align="left" class="pop">
								<label for="pop_today">
									<input type="checkbox" name="pop_today" id="pop_today">
									오늘 하루 이 창 열지 않음</label>
							</td>
							<td align="right" class="pop">
								<a href="javascript:closeWin();" style="color:white;">닫기</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<script language="Javascript" type="text/javascript">
			cookiedata = document.cookie;
			if (cookiedata.indexOf("ncookie=done") < 0) {
				document.getElementById('layer_pop').style.display = "inline";
			} else {
				document.getElementById('layer_pop').style.display = "none";
			}
		</script>
	</div>
		<!--  body 삽입 -->

2. 블로그 글과 비교하면 알겠지만 일부 css가 추가 되었고 변형된점이 있다.

처음부터 만드는 사이트라면 css 작업이 어렵지 않겠지만 유지보수하는 입장에선 어떤 css를 사용했는지 확인하기 어려워서
내가 강제로 스타일을 입력했다. 예를들면 라디오버튼 글씨체크를 추가했다

https://programmer-study.tistory.com/25

 

3. 일단 내가 업로드한 사이트에서는 반응형 작업이 잘 이루어지지 않았고
해상도에 따라 이미지 크기와 위치를 조절해야 했다.

 

https://blogpack.tistory.com/1000

CSS없이 반응형 웹 이미지를 구현하는 <picture> 태그 기초

기본적으로 크기는 picture를 이용해서 조절했으며, style에 @media 쿼리를 추가하여 화면 사이즈에 맞게 이미지 위치를 조절하였다.

https://mol-gga.tistory.com/14