! 웹 공부하기 ! ! 웹 공부하기 !

widnw (브라우저 창 ) 넓이알아오기 간혹 브라우저의 넓이에 따라서 경고창을 줘야 할 경우가 있다. 이때 사용하는 제이쿼리다. html 코드 jquery 코드 $(function(){$(window).resize(function() { //브라우저 크기 변화에 대한 resize 함수 $('.box').width() // .box 의 width값}) //widow창이 실행 되었을때 보기 $(window).trigger('resize'); })

쇼핑몰 또는 일반 회사 사이트를 보면 스크롤에 따라서 움직이는 광고 베너를 볼 수있다. 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 }) }) })

메뉴 부분을 보면 간혹 햄버거 버튼으로 되어 있는 홈페이지 들이 있다. 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) : 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동한다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수 할 수 있도록 도와준다. (출처 : 위키 백과) 부트스트랩을 사용하면 비교적 페이지를 쉽게 만들 수 있다. 부트스트랩 자체에 내장 되어 있는 css 또는 js가 왠만한 홈페이지에 들어가 있는 기능들을 다 가추고 있기 때문에 css와 js가 익숙 하지 않은 사람들은 사용하기 편할 것이다. 또한 웹 코딩 하기 편한 구조를 가지고 있기 떄문에 12그리드를 생각을 하고 코딩을 한다면 정확한 웹디자인 시안이 아니더라도 코딩을 하는데 무리가 없다. 정확한 사용 ..

홈페이지를 만들다 보면 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 앵커 오프셋 하는 방법 이렇게 이야기 하면 어렵게 느껴지지만 헤더가 고정일 경우 인 페이지 에서 앵커를 할 경우 헤더 페이지 만큼 컨텐츠가 잘려서 나오는 경우가 있다. 이미지로 보면 좀 더 이해 하기 편할 것이다. 이미지를 보면 컨텐츠가 잘려서 나온다. 이때 사용 할 수 있는 jquery코드가 있다. $(document).ready(function(){ $('a').click(function(){ var headerHeight = 100; //header 의 높이 만큼 조절 하면 됨 $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight }, 500); return fal..

OwlCarousel2 : 제이쿼리 라이브러리 중 하나 이며 앞서 말한 bx 슬라이더와 마찬가지로 슬라이드를 만드는 플러그인이다. bx 슬라이드를 쓰다가 어렵다고 느껴지는 사람은 OwlCarousel2 슬라이드를 사용하는 것을 추천한다. OwlCarousel2 옵션은 bx슬라이더 보다 비교적 많다. 링크를 들어가면 바로 확인이 가능하다. tip: 모바일에서 사용하기 편하다.

외국 홈페이지들을 보다 보면 종종 마우스 커서가 다른 것들이 보인다 . 변경 하는 방법은 2가지가 있다. 1. css html{cursor: url(cursor.png), auto} 2. jquery 두 가지 방법 중 편한 방법을 사용하면 된다.