HTML,CSS,JAVASCRIPT
바닐라 자바스크립트로 display : 보이기 , 숨기기 (block,none ) 하기
제이쿼리로 만들어진 예제들을 위주로 사용하다 바닐라 자바스크립트 사용을 지향하여 바닐라로 된 간단한 코드를 작성해보았다. 토글메뉴 햄버거 메뉴 등 응용하여 사용하면 좋을 것 같다. function openclose() { const 숨길것 = document.querySelector("숨길것") if(숨길것.style.display == 'block'){ 숨길것.style.display = "none"; } else{ 숨길것.style.display = "block" } } let tolle = document.querySelector("버튼"); tolle.addEventListener("click",openclose)
제이쿼리 버튼 한개로 디스플레이 와 텍스트 토글 기능
가장 간단한 토글기능 function openclose(){ let statu = $("#post_box"); statu.toggle(); } 디스플레이 와 텍스트 토글 기능 $("#post_box").css("display",'none'); function openclose() { let status = $("#post_box").css('display'); let statu = $("#post_box"); if( status == 'block' ){ statu.hide(); $(".tolle").text("포스트박스열기") } else{ statu.show(); $(".tolle").text("포스트박스닫기") } } html 태그 안에 onclick="openclose()" 를 추가하면 사용가능 ..
스크롤값, 윈도우 높이, 문서 높이 구하기
제이쿼리로 스크롤값, 윈도우 높이, 문서 높이 구하는 방법 $(window).scroll(function() { let 윈도우 스크롤 값 = $(window).scrollTop(); let 문서 스크롤 값 $(document).scrollTop(); let 윈도우 높이 값 $(window).height(); let 문서 높이 값 $(document).height(); }); 윈도우 스크롤과 문서 스크롤 값은 동일함 아무거나 쓰자 윈도우 스크롤(문서) + 윈도우 높이 값은 = 문서 높이와 동일하다 위의 공식을 사용해서 if($(window).scrollTop() + $(window).height() = $(document).height() ) { $('# ).addClass('.'); } else{ $('..
그리드 레이아웃 샘플 코드를 만들어보자
1 2 3 4 5 6 7 8 9 10 11 12 13 Grid layout grid system 1 2 3 4 5 6 7 8 cs .container { width: 1000px; border: 3px solid red; padding: 1rem; } .grid { display: grid; height: 430px; width: 1000px; grid-template-rows: repeat(4,1fr); //가로로 4줄로 쌓인다 ( 1fr = 같은비율로 ) grid-template-columns: 100px 100px 100px 세로로 3줄로 나뉜다 ( 픽셀로도 표현 가능) grid-row-gap: 10px; grid-column-gap: 10px; } .item { background-color: c..
클래스에 innerHTML 로 html 코드 추가하기
var selectedItem = document.getElementsByClassName("app"); for (var i = 0; i < selectedItem.length; i++) { selectedItem[i].innerHTML = ` Hello Vanilla! We use the same configuration as Parcel to bundle this sandbox, you can find more info about Parcel here. `; } var selectedItem = document.getElementsByClassName("app"); for (var i = 0; i < selectedItem.length; i++) { selectedItem[i].innerHTML = ..
bxslider 에 돋보기 기능 구현
html 라이브러리 버전에 신경써서 작업해야합니다. JavaScript import './style.css'; var glass = document.createElement('DIV'); glass.setAttribute('class', 'img-magnifier-glass'); glass.style.backgroundRepeat = 'no-repeat'; function magnify(img, zoom) { var w, h, bw; /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImag..
html 에서 마우스 오버시 이미지 전환하는 코드
img class="sec7_img4" src="./img2/07_1t/005.png" onmouseover="this.src='./img2/07_1t/004.png'" onmouseout="this.src='./img2/07_1t/005.png'" alt="">
제이쿼리로(자바스크립트) HTML에 클래스 추가 OR 삭제하기
$(document).ready(function () { $grid_selectors = $('.grid-filter > li > a'); //선언 $grid_selectors.on('click', function () { //클릭함수 $grid_selectors.parent().removeClass('active'); //먼저 모든 클래스에서 제거 $(this).parent().addClass('active'); // 클릭한 클래스에 엑티비티 클래스 추가 var selector = $(this).attr('data-filter'); return false; }); });
모바일 슬라이드 메뉴 토글 조건문 형식 제이쿼리
// 모바일 슬라이드 메뉴 토글 var giMenuDuration = 300; $(function () { // 토글버튼 함수 $(".menu-toggle-btn").click(function () { // 버튼클릭 if ($('.main_menu_mo').is(':visible') == false) { $(".main_menu_mo").css({ 'display': 'block' }); //모바일 메 $(".main_menu_mo").css({ 'right': '-100%' }); $(".main_menu_mo").animate({ right: '0px' }); } else { $(".main_menu_mo").animate({ right: '-100%' }, { duration: giMenuDurat..
스크롤에 반응하여 내려오는 네비게이션 JavaScript 코드
// 네비게이션 바 function navigo() { const header = document.querySelector('header'); //헤더부분획득 const headerheight = header.clientHeight;//헤더높이 document.addEventListener('scroll', onScroll, { passive: true });//스크롤 이벤트 function onScroll() { const scrollposition = pageYOffset;//스크롤 위치 const nav = document.querySelector('header');//네비게이션 if (headerheight
좌표 이동 애니메이션 무한반복
$(function ccc(){ $('.sec6_img3').animate({ top:800, },1000,function(){ $('.sec6_img3').animate({ top:900, },1000,ccc); }); });