분류 전체보기
-
widnw (브라우저 창 ) 넓이알아오기! 웹 공부 ! 2018. 5. 1. 15:12
widnw (브라우저 창 ) 넓이알아오기 간혹 브라우저의 넓이에 따라서 경고창을 줘야 할 경우가 있다. 이때 사용하는 제이쿼리다. html 코드 jquery 코드 $(function(){$(window).resize(function() { //브라우저 크기 변화에 대한 resize 함수 $('.box').width() // .box 의 width값}) //widow창이 실행 되었을때 보기 $(window).trigger('resize'); })
-
스크롤에 따라서 움직이는 광고 베너 만들기! 웹 공부 ! 2018. 4. 23. 18:31
쇼핑몰 또는 일반 회사 사이트를 보면 스크롤에 따라서 움직이는 광고 베너를 볼 수있다. position : fixed를 할 수도 있지만 좀 더 동적인 느낌이 나도록 하기 위해서 jquery를 사용 했다. hmtl 코드 css 코드 .fly { position: absolute; top: 0px; left: 90%; width: 80px; height: 200px; background: #f00 } jquery $(function() { $(window).scroll(function(){ var sct = $(this).scrollTop(); //console.log(sct); $('.fly').stop().animate({ top: sct }) }) })
-
햄버거 버튼 만들기! 웹 공부 ! 2018. 4. 18. 16:50
메뉴 부분을 보면 간혹 햄버거 버튼으로 되어 있는 홈페이지 들이 있다. hmtl 코드 css 코드 *{margin: 0; padding: 0; overflow: hidden;} button{background: transparent; border:none;} #menu{position: absolute; width: 50px; right: 20px ;top: 20px} #menu>span{display: block; width: 100%; height: 8px; background: #000; margin: 4px 0 ; border-radius: 10px; transition: all 0.5s;} #menu>.on:nth-child(1) {transform: translateY(15px) rotate(..
-
bootstrap! 웹 공부 ! 2018. 4. 5. 17:02
부트스트랩(Bootstrap) : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수 할 수 있도록 도와준다. (출처 : 위키 백과) 부트스트랩을 사용하면 비교적 페이지를 쉽게 만들 수 있다. 부트스트랩 자체에 내장 되어 있는 css 또는 js가 왠만한 홈페이지에 들어가 있는 기능들을 다 가추고 있기 때문에 css와 js가 익숙 하지 않은 사람들은 사용하기 편할 것이다. 또한 웹 코딩 하기 편한 구조를 가지고 있기 떄문에 12그리드를 생각을 하고 코딩을 한다면 정확한 웹디자인 시안이 아니더라도 코딩을 하는데 무리가 없다. 정확한 사용 ..
-
지정된 html파일 에만 css 주는 방법! 웹 공부 ! 2018. 4. 3. 18:37
홈페이지를 만들다 보면 index.html에는 style을 넣어야 하고 다른 html에는 넣으면 안되는 경우가 있다. 그럴땐 class나 id값을 주면 되지만 html에 직접적으로 줘야 할 경우엔 다른 css를 만드는 방법 밖에 떠오르지 않을거다. 하지만 javascript 와 jquery 코드 몇줄이면 다른 css 파일을 만들지 않아도 된다. var a =location.href; // 파일을 찾아라 var b = a.split("/"); //파일을 찾아서 / 마다 나눠서 배열로 만들어라 //console.log(b); //콘솔로 확인 해서 html파일의 위치를 확인 if(aa[4] == 'index.html'){ //만약 b의 배열 중 4번째가 index.html 과 같다면 $('html').css(..
-
고정 헤더에 맞게 html 앵커 오프셋! 웹 공부 ! 2018. 3. 29. 16:28
고정 헤더에 맞게 html 앵커 오프셋 하는 방법 이렇게 이야기 하면 어렵게 느껴지지만 헤더가 고정일 경우 인 페이지 에서 앵커를 할 경우 헤더 페이지 만큼 컨텐츠가 잘려서 나오는 경우가 있다. 이미지로 보면 좀 더 이해 하기 편할 것이다. 이미지를 보면 컨텐츠가 잘려서 나온다. 이때 사용 할 수 있는 jquery코드가 있다. $(document).ready(function(){ $('a').click(function(){ var headerHeight = 100; //header 의 높이 만큼 조절 하면 됨 $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight }, 500); return fal..