Skeleton의 세상

JQuery로 CSS인 height를 조절하여 슬라이드 되듯이 늘어나는 효과를 나타냅니다 서서히 커지는 효과라고 생각하시면 될거같네요! 메서드들을 한번 알아볼까요! 슬라이드 효과 slideUp 서서히 올라가면서 사라지는 효과를 보여줍니다 .box { width: 100px; height: 100px; } 이제 스크립트를 알아볼까요 $(".box").slideUp(); // 일반적인 속도로 height가 0으로 변함 $(".box").slideUp(2000); // 2초에 걸쳐 height가 0으로 변함 $(".box").slideUp('fast'); // 빠른 속도로 height가 0으로 변함 $(".box").slideUp('slow'); // 느린 속도로 height가 0으로 변함 이렇게 속도 조절이..

해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현합니다 메서드들을 한번 알아볼까요? 페이드 효과 fadeIn 요소를 점점 나타나게 합니다. opacity 0 -> 1 $("button").on("click", function() { $("target").fadeIn(); }); 속도를 조절할 수 있습니다 $("button").on("click", function() { $("target").fadeIn('slow'); }); $("button").on("click", function() { $("target").fadeIn('fast'); }); $("button").on("click", function() { $("target").fadeIn(2000); // 2초 }); fadeOut ..

연애를 하면 달달한 노래가 가끔 땡길때가 있죠! 제가 개인적으로 듣기 좋아하는 달달한 노래 10가지를 준비해봤습니다 로꼬, 유주- 우연히 봄 가사 더보기 우연히 내게 오나봐 봄 향기가 보여 너도 같이 오나봐 저 멀리서 니 향기가 설레는 코끝에 나의 입술에 괜찮은 느낌 이 떨림 나도 몰래 우연히 봄 어 어느새 겨울 지나 봄이야 여전히 난 너 앞에선 돌이야 난 아직 이게 믿기지가 않지만 내 왼 손은 지금까지도 너의 향기가 미묘하게 흘렀던 분위기에 아직까지 난 가까스로 숨 쉬네 무대 위완 다르게 니 눈을 피해 고개를 돌렸던 내 모습에 한숨 쉬네 오랜만에 느껴지는 이 떨림이 날 단순하게 만들어 딱 너만 아는 거리지 다 고쳤다고 생각했던 버벅임이 또 도져서 준비했던 말을 잊어버리지 난 주워 담지 못할 말은 절대 ..

비가 추적추적 오는날 듣기좋은 노래 10가지만 모아 봤습니다 개인적으로 듣기 좋은 노래만 모았어요 아이유 - Rain Drop 노래 가사 더보기 소나기가 내려온다 내 머리위로 갑자기 말도 없이 젖어버리겠네 추억이 흘러 내린다 따라 눈물도 흐른다 바보처럼 집에가는길 아직도 멀기만한데 우산도 없이 감기걸릴것만 같아 이 길이 너에게로 돌아갈수 있는 길이면 젖어도 좋은데 Oh Rain Drop Oh Rain Drop 사랑이 참 모자라구나 Oh Rain Drop Oh Rain Drop 사랑은 저 빗방울처럼 모두 까맣게 잊어버리고 젖어 버리고선 아파하는 감기같은 걸까요 지난 여름날 햇살아래 짜증내고 뒤돌아 서버린 내 어리석음 예전처럼 우산을 들고 서있는 너를 본다면 참좋을 것같아 Oh Rain Drop Oh Rai..

클래스를 중간에 넣어야하는 경우나 제거해서 CSS를 추가하거나 제거할때 사용하면 유용합니다. 사용할 수 있는 메서드는 4종류가 있습니다 하나씩 하나씩 차례대로 알아봅시다 addClass 인수로 전달받은 클래스를 추가 $(selector).addClass(classname); removeClass 인수로 전달받은 클래스를 제거 $(selector).removeClass(classname); toggleClass 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거 $(selector).toggleClass(classname); hasClass 인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인 $(selector).hasClass(classname);

JQuery로 HTML요소의 CSS를 바꿔보겠습니다 .box { width: 200px; height: 100px; border: 2px solid red; background-color: blue; } 간단하게 css를 작성해 줍니다 HTML또한 간단합니다 그럼 직사각형의 빨간테두리의 파란색배경을 가진 요소가 생성될거에요 스크립트를 작성해봅시다 $(".box").css({ "border": "10px solid blue", "backgroundColor": "yellow" }); 이렇게 작성해주면 테두리가 파란색으로 10px만큼 굵어지고 배경은 노란색으로 바뀝니다!

$(".scrollBox").on('scroll', function(){ console.log($(this).scrollLeft()); // 좌우 스크롤 위치 왼쪽을 기준으로(좌측 0) console.log($(this).scrollTop()); // 상하 스크롤 위치 상단을 기준으로(상단 0) }); 이렇게 적어주면 스크롤의 좌우, 상하 위치를 알 수 있습니다

CSS가 아닌 스크립트로 스타일 변경하는 방법을 한번 알아봅시다 blue red 이러한 HTML 코드가 있다고 가정해봅시다. CSS는 적용되어 있지 않습니다. 그럼 아무것도 없는것처럼 빈 공간만 있겠죠? 이제 자바스크립트를 통해 스타일을 넣어봅시다 const styleBlue = document.getElementById('blue'); const styleRed = document.getElementById('red'); 이렇게 요소를 가져옵니다 styleBlue.style.height = '50px'; styleBlue.style.backgroundColor = 'blue'; styleRed.style.height = '50px'; styleRed.style.backgroundColor = 'red'..

JQuery에서는 요소를 탐색하는 방법이 여러가지가 있습니다. 1. 상위 요소(부모) 탐색 상위 요소를 탐색하는 메서드가 4종류가 존재합니다 parent 선택한 요소의 부모(parent) 요소를 선택합니다. 이때는 부모가 여러 가지가 있더라도 최초로 걸리는 하나의 부모만을 반환합니다. 컨테이너 책상 필통 연필 이런 HTML요소가 있다고 해봅시다 span의 부모를 한번 검색해 볼까요? $("span").parent(); 이렇게 하면 span의 부모인 li가 선택되게 됩니다. 그다음 뭔가 액션이 필요하겠죠? $("span").parent().css({"fontSize": "40px"}); 이 함수를 호출하고 나면 span의 부모인 li에 있는 필통이 폰트 사이즈가 40px 이나 되버린답니다! parents ..

nput 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus { outline:2px solid #d50000; } input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus { outline:none; }