안녕하세요. 블로그 꾸미기 포스팅은 오랜만에 하는 것 같네요 ㅠ_ㅠ
제 블로그의 꾸미기가 거의 다 끝나버려서.. ㅠ 소재고갈..
혹시나!! 홈페이지나 블로그 꾸미기 궁금한 점이 있으면!! 언제든지!! 방명록 문의하기를 해주시면
저도 열심히 방법을 찾아보도록 할게요. (面ㅅ面)
오늘은 저번에 일정 시간마다 자동으로 페이드인 페이드아웃으로 교체되는 배경화면
http://cocosoft.kr/389 - 배경화면 여러개 바꾸기
에 이어서 배경화면 시리즈 2편!! 랜덤 배경화면 입니다!!
오늘 만들 것은? 랜덤 배경화면!! 시작해보자
오늘 알아볼 것은 블로그의 배경화면을 랜덤으로 바꿔주는 jQuery 코드입니다.
완성된 예제 -새로고침 누를때마다 랜덤으로 배경화면이 바뀜-
jQuery로 배경 랜덤하게 변경하는 것보다.. 완성된 예제 요고 만드는데 시간을 ㅡ_ㅡ 다써버렸네요.. 반응형 ㅠ예제입니다..
랜덤 배경화면 코드(html에 수정)
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var images = ['bg.jpg', 'bg2.jpg', 'bg2.svg'];
$('body').css({'background-image': 'url(./images/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>
</body>생각보다 간단합니다. 배경으로 사용할 이미지 파일을 업로드한 다음, 코드 안 var images부분에 파일명을 적어주고
해당 코드를 </body>에 붙여넣기를 해주면 됩니다. 단, jQuery는 중복으로 붙여넣기 할 필요가 없습니다.
jquery-2.1.3.min.js 스크립트는 꼭 없는 분들만 붙여넣기를 하세요. 찾아보면 보통 대부분 스킨에 포함되어 있습니다.
개인적으로 구글보단 마소cdn을 좋아합니다 +_+ ㅎㅎ
이게 끝이 아닙니다!!! 몇가지 옵션을 더 추가해줘야합니다. 아래 소스를 확인 해주세요!! 맨 마지막 코드가 최종소스입니다.
스크립트 파일은 <head> 또는 <body> 부분에 붙혀 넣기 하면 되고 보통 외부 스크립트 파일은 <head>안에 위치하라고 하는데
스크립트 위치는 크게 상관이 없는 것 같습니다. 다만 코드를 한 곳에 모아두는 습관을 가지는 것이 좋고 페이지에 영향을 주는
외부 스타일 이나 스크립트 파일을 우선 배치시키는 것이 페이지의 내용을 정확하게 표시되고 동작한다는 이론이 있습니다.
하.지.만!!
이대로 바로 사용하기에는 제가 사용하는 스킨에는 몇가지 문제점이 있기 때문에
저는 제 입맛대로 커스터마이징을 해주겠습니다.
첫 번째. 꽉 찬 배경화면 만들기
배경화면이 해상도가 변하더라도 해상도에 따라서 꽉찬 화면으로 나오게 만드려고합니다.
간단합니다. CSS를 추가해주면 되겠죠? background-size:cover 속성을 사용해서 꽉찬 배경화면을 만드려고합니다.
<script type="text/javascript">
var images = ['bg.jpg', 'bg2.jpg', 'bg2.svg'];
$('body').css({'background-image': 'url(./images/' + images[Math.floor(Math.random() * images.length)] + ')',"background-size": "cover"});
</script>
</body>이런식으로 추가 해주면 되겠죠?
두 번째. PC 화면에서만 나오게 만들기
제 블로그 스킨은 반응형 웹이기 때문에 모바일 화면과 태블릿 화면에서는
배경화면 없게 설정이 되어있습니다.
992px 이상의 해상도 에서만 나타나게 되어있죠..
만약 위 코드를 그대로 사용한다면...
아마 모바일 화면에서는 흰 배경.. 사라지고 랜덤 배경화면 이미지가 나타나겠죠..
window.matchMedia('(min-width: 992px)이 코드를 사용해서 감싸 준다면 992px 이상의 해상도에서만 적용 되겠죠?
<script type="text/javascript">
if (window.matchMedia('(min-width: 992px)').matches){
var images = ['bg.jpg', 'bg2.jpg', 'bg2.svg'];
$('body').css({'background-image': 'url(./images/' + images[Math.floor(Math.random() * images.length)] + ')',"background-size": "cover"});
};
</script>
</body>
자 이렇게 하면 대부분의 사이트에서도 깔끔하게 배경화면을 적용 할 수 있을 것이라고 생각합니다.
다음 편에는 카테고리 마다! 다르게 설정되는 배경화면 또는 템플릿 만드는 법으로 포스팅을 하겠습니다!!
