Javascript (7) 썸네일형 리스트형 Swiper 슬라이드 라이브러리 Swiper는 슬라이드 구현할 때,가장 많이 사용하는 js라이브러리이다.웹 접근성 면에서도 괜찮아서 따로 정리해보려고 한다. 1. 설치 방법먼저 설치 방법은 공식 사이트에 잘 나와있다. Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 가장 간단한 방법은 CDN을 이용하는 것이다.자동으로 가장 최신 버전이 적용되기때문에 추천한다.단, 실제 사이트를 구축할때는 따로 다운로드 받아 연결하는 방식을 추천한다 아무튼 요지는 가장 최신버전을 유지하.. ClassList 총정리 (className과 비교) ClassList는 이전 글에서도 종종 언급하고 실제로도 자주 사용하는 속성이다. 여러 메서드 중, classList.toggle에 대해서만 정리를 한적이 있다. 토글 버튼 구현하기 (+ 'X'자 버튼 만들기) 1. 토글의 유래 먼저 토글의 뜻을 알아보자. 단어의 시작은 의류에 용어였다. 토글은 더블 코트의 달린 길다란 단추를 의미하는 단어였다. 흔히 떡볶이 코트라고 불리는 외투의 단추를 자세히 보 yurim99.tistory.com 이번에는 다른 메서드도 알아보자. 1. add() 하나 이상의 클래스를 추가하는 메서드이다. const box = document.querySelector('.box') // 1개의 class추가 box.classList.add("class1") // 1개 이상의 class.. 윈도우 창 크기 알아내기 1. 윈도우 창 개념 가장 먼저 window가 무엇인지 알아보자. 윈도우는 viewport와 상단바를 포함한 브라우저 창 전체를 말한다. 반응형 작업시 media qurey로 작업하고 그 외 특수한 경우에 사용하는 것을 추천한다. media qurey 반응형 📘 media qurey 미디어 쿼리는 참 또는 거짓을 나타내는 조건문으로, 이를 활용하여 화면 크기에 따라 다른 효과를 줄 수 있다. 아래는 미디어 쿼리에 기본 문법이다. @media 타입 (조건문) {실행코드} yurim99.tistory.com 2. 값 구하기 그렇다면 자바스크립트로 윈도우의 크기를 구하는 방법을 알아보자. 바로 dom중에 window의 인스턴드 속성을 사용하면 된다. innerWidth는 viewport의 넓이, 즉 가로 너비.. 토글 버튼 구현하기 (+ 'X'자 버튼 만들기) 1. 토글의 유래 먼저 토글의 뜻을 알아보자. 단어의 시작은 의류에 용어였다. 토글은 더블 코트의 달린 길다란 단추를 의미하는 단어였다. 흔히 떡볶이 코트라고 불리는 외투의 단추를 자세히 보며 알 수 있다. 이와 비슷하게 생긴 on/off스위치를 토글 스위치라 불렀으며 현재는 두가지 상태를 하나의 버튼으로 제어할 수 있을 때 '토글'이라 불린다. 2. 토글 버튼 구현 이제는 토글 버튼을 가장 많이 사용하는 메뉴버튼을 만들어보자. 제작할 버튼은 아래와 같다. 햄버거 버튼을 클릭할 경우, 하단으로 메뉴가 내려온다. 다시 한번 클릭할 경우 하단 메뉴이 올라가면서 숨겨진다. html LOGO menu1 menu2 menu3 CSS body {font-size: 10px; background-color: #eef.. JS로 말 줄임 표시 구현하기(+CSS 구현) 지정된 글자 수 만큼 표시하고 이후엔 말줄임표로 나타내고 싶을 때, 2가지 방법으로 구현할 수 있다. 가장 먼저 Js로 나타내는 방법을 알아보자. 📒 JS로 구현하기 length()을 사용하여 문자열의 길이를 구한다. 이때 결과값의 공백도 포함된다. 만약 빈 문자열이라면 0을 반환한다. str1 = 'abc'// 결과값 = 3 str2 = 'a b c'// 결과값 = 5 str3 = ''// 결과값 = 0 문자열의 길이를 구했다면, 결과값과 원하는 길이의 값을 비교하고 원하는 만큼 잘라내야한다. 이때 문자열을 잘라내는 함수로는 substr(), substring(), slice()가 있다. 주의 사항으로는 문자열은 배열이기때문에 0부터 시작한다는 점을 기억하자. substr() : '시작위치'와 '길이'.. 모달 팝업 만들기 (240105 주의 사항 추가) 📒 모달과 팝업, 모달팝업? 퍼블리싱을 하다보면 모달과 팝업을 구현해야 할 경우가 많다. 현재는 모달과 팝업창을 특별히 구분하지않으며 함께 사용하여 모달팝업이라 부르기도 한다. 구분 시켜보자면, 모달은 사용자가 버튼을 클릭할 경우 뜨는 창을 말하며 팝업은 특정 페이지의 방문할 경우 즉시 뜨는 창을 뜻한다. 팝업창은 alert(), prompt(), confirm() 함수를 사용해 구현할 수도 있다. alert()은 단순 알림창이며 확인을 누르면 해당 창이 닫힌다. prompt()은 내용을 입력하는 팝업창이다. confirm()은 확인을 누르면 true값을 전달하고, 취소를 누르면 false값을 전달한다. 🔎 예시 alert('팝업창 입니다.') prompt('성함을 작성해주세요','홍길동') // pro.. javascript로 현재 날짜와 시간 구하기 📒 Date() javascript로 현재 날짜와 시간을 구할 때, 공통적으로 쓰이는 함수가 Date()이다. 이 함수는 국제 표준시(1970년 1월 1일 0시 0분 0초)를 기준으로 현재 날짜와 시간을 알려준다. 🔎 예시 const today = new Date(); console.log(today); // 결과 Tue Dec 26 2023 13:07:12 GMT+0900 (한국 표준시) 여기에 추가 메서드를 사용하면 특정 결과 값을 가져올 수 있다. 아래는 주로 사용하는 메소드이다. const year = today.getFullYear();// 연도 console.log(year); // 결과 2023 const month = today.getMonth();// 월 console.log(month).. 이전 1 다음
