[CSS] 삽질 금지 도움글

z-index가 먹지 않을 때 

z-index가 먹지 않을 때 position: relative를 줘보자 (상위부모나 자기자신에게).

 

overflow-hidden 이 걸려있는지 확인(해당섹션에 높이값이 걸려있을 수 있음)

 

배경 고정시키는 법 

background-attachment:fixed;

이미지 중앙 정렬

Image는 왼쪽, 오른쪽 margin을 auto로 설정하고 display: block; 으로 설정하면 된다.
img {display: block; margin:0 auto; width: 50%;}

 

swiper slider IE에서 작동하지않을 때

제작사에서 더이상 ie는 지원하지 않는다고 함
 -구버전을 적용하면 작동됨.
 
// CSS link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css">
// JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>

 

 

ScrollTo 스크롤 앵커기능이 IE에서 작동하지 않을 때 

$(".nav_list li").click(function () { 
	var scrollPosition = $($(this).attr("data-target")).offset().top; //해당 메뉴요소 위치정보를 가져와 지정 변수에 담는다.
    
    // IE에서는 작동하지 않는 함수 
    var scrollPosition = $($(this).attr("data-target")).offset().top;//해당 메뉴요소 위치정보를 가져와 지정 변수에 담는다.
    window.scrollTo({top:scrollPosition, behavior:'smooth'}); //ScrollTo함수를 이용하여 지정 위치로 이동
    
    // IE에서도 작동하는 함수 
	$("html, body").dequeue().delay(10).animate({scrollTop: scrollPosition}, 250, function() {
		$(window).scrollTop(scrollPosition); //ScrollTo함수를 이용하여 지정 위치로 이동
	});
    
})

 

 

상단 스크롤 이동버튼

<!-- 상단으로 이동하기 버튼 -->
<a href="#" class="btn_gotop">
  <span class="glyphicon glyphicon-chevron-up">
  </span>
</a>


<style>
.btn_gotop {
	display:none;
	position:fixed;
	bottom:30px;
	right:30px;
	z-index:999;
	border:1px solid #ccc;
	outline:none;
	background-color:white;
	color:#333;
	cursor:pointer;
	padding:15px 20px;
	border-radius:100%;
}
</style>


<script>
$(window).scroll(function(){
	if ($(this).scrollTop() > 300){
		$('.btn_gotop').show();
	} else{
		$('.btn_gotop').hide();
	}
});
$('.btn_gotop').click(function(){
	$('html, body').animate({scrollTop:0},400);
	return false;
});
</script>

 

웹 무료 목업 사이트

www.graphberry.com/products/download/3d-web-presentation-mock-up-psd