티스토리

amanda의 공간입니다

검색하기

블로그 홈

amanda의 공간입니다

amanda.tistory.com/m

amanda 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[javaScript] jQuery accordion 제이쿼리로 아코디언 구현 HTML 아코디언 1 아코디언 1 콘텐츠 내용 아코디언 2 아코디언 2 콘텐츠 내용 CSS.acco_conbox { overflow: hidden; border-radius: 32px; -webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 6px 15px 0px rgba(0, 0, .. 공감수 1 댓글수 1 2024. 11. 8.
[javaScript] jQuery로 modal 창 띄우기 HTML 모달 띄우기 모달 팝업 콘텐츠 CSS/* modal */body.ofh { overflow-y: hidden;}#dim { display: none; position: fixed; top: 0; left: 0; z-index: 10001; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}.modal_contents { display: none; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10002; width: 9.. 공감수 0 댓글수 0 2024. 11. 8.
[javaScript] 페이지를 따라다니는 하단 띠 배너 let prevScrollpose = window.pageYOffset; window.addEventListener("scroll", function() { let currentScrollPose = window.pageYOffset; if (prevScrollpose > currentScrollPose) { document.getElementById("bnr_btm").style.bottom = "60px"; // 스크롤 올릴 때 } else { document.getElementById("bnr_btm").style.bottom = "0px"; // 스크롤 내릴 때 } prevScrollpose = currentScrollPose; });} 공감수 0 댓글수 0 2024. 11. 8.
[javaScript] swiper for auto play on tab menu swiper 플러그인을 탭에 삽입했는데탭이 바뀌면 스와이퍼가 작동하지 않는 이슈 발생 구글링하여 아래 코드로 해결 ! // swiper for auto play on tab menudocument.addEventListener('DOMContentLoaded', function () { let tabSliders = document.querySelectorAll('.my_swiper'); tabSliders.forEach(function (slider, index) { let sliderId = index + 1; let mySwiper = new Swiper(slider, { observer: true, observeParents: true, slidesPerView: 1, spaceBetwee.. 공감수 0 댓글수 0 2024. 10. 31.
[js] snow falling effect html css#snow_wrap{ position: absolute; top: 0; left: 0; width: 1920px; height: 100%;}#snow_wrap canvas{ position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);} js// snow animation$(()=>{ (function () { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window... 공감수 0 댓글수 0 2024. 8. 29.
[jQuery] lyrics auto count animation html 3 css.lyrics_count{ width: 345px; margin: 0 auto; text-align: left;}.lyrics_count span{ display: inline-block; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff; color: #000; font-size: 16px; font-weight: 700; vertical-align: middle;}.lyrics_count span + span{ margin-left: 6px;}.lyrics_co.. 공감수 0 댓글수 0 2024. 8. 29.
[jQuery] navigation position sticky scroll event html menu 01 menu 02 menu 03 menu 04 jsfunction tabScroll(){ $('.navi_menu li a').on('click', function(){ let targetId = $(this).data('target'), targetSec = $('#' + t.. 공감수 0 댓글수 0 2024. 8. 29.
[js] 각 section에 스크롤 진입 시 .active 클래스명 삽입 scroll 감지 event html javaScriptfunction secScroll(){ const screenHeight = document.documentElement.clientHeight; $(window).scroll(function(){ $('.item').each(function(){ let crtHeight = $(window).scrollTop(); // current scroll top let t.. 공감수 0 댓글수 0 2024. 8. 29.
[nextjs] Google Analytics GA setting @next/third-parties 설치 src/app/[lng]/layout.tsximport type { Metadata, Viewport } from 'next';import { dir } from 'i18next';import { locales } from '@/i18n';import { NextIntlClientProvider } from 'next-intl';import { getMessages, unstable_setRequestLocale } from 'next-intl/server';import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';import '@/assets/css/glo.. 공감수 2 댓글수 0 2024. 8. 29.
[ASP] 링크 파일 최신화 퍼블 작업하다가 asp에 css나 script 파일 링크할 때 url 맨 뒤에 하단 소스 붙이기 css나 script 코드를 수정했을 때 쿠키 삭제를 안한 PC에서는 이전 코드로 노출되는 경우가 있는데,가장 최근 버전으로 보이도록 버전 관리하는 asp 소스 뒷부분 큰따옴표를 바꾸면 안되기 때문에 url을 작은따옴표로 묶고 그 안에 붙여넣기 ?v= 사용예시'> 공감수 0 댓글수 0 2024. 8. 27.
[next.js] useIntersectionObserver hook & next/dynamic 사용하기 next.js 환경에서 스크롤 이벤트 구현하기 요구사항은 스크롤이 특정 영역에 진입했을 때 canvas로 그린 animation이 구현되는 것이었다 스크롤을 감지하기 위해 JS의 intersection observer 기능을 사용했고next.js 환경에서 사용하고자 useIntersectionObserver hook을 생성했다. 그리고 페이지 초기 렌더링 시에는 해당 canvas animation이 로드되지 않고scroll event가 수행될 때 canvas 컴포넌트가 렌더링 되도록 하기 위해next/dynamic을 import 했다. src > hooks > useIntersectionObserver.tsimport { useEffect, useState, useRef } from 'react';.. 공감수 0 댓글수 0 2024. 8. 12.
[HTML] a 태그로 mail 연결 시 메일 제목, 참조 메일 주소 설정하기 a 태그의 mail to에 메일 주소, 메일 제목, 참조 메일 주소 설정하는 방법 send 메일 제목을 설정하지 않아도 되고 참조 메일 주소가 여러 개인 경우 send 예시)Contact Email *참고https://stackoverflow.com/questions/26509787/mailto-with-multiple-cc-addresses Mailto with multiple cc addressesI would like to know how to include multiple email addresses in mailto link. I am trying this: stackoverflow.com 공감수 0 댓글수 0 2024. 8. 12.
[TIP] 특정 포트 죽이는 방법 port kill 개발 작업을 진행하다가 자주 보는 에러 메시지 Web server failed to start. Port 3000 was already in use. 해당 포트가 이미 사용 중이라 서버를 띄우지 못하는 상황 이처럼 로컬 포트에서 작업하다가 해당 port를 kill 해야 하는 경우가 발생했다면해당 port의 정보를 조회해 pid 번호를 알아낸 뒤 kill 한다 1. MAC 특정 port의 정보를 찾으려면lsof -i:[포트번호]lsof -i:3000 해당 프로세스를 강제 종료하려면kill -9 [PID]kill -9 00000 (+) lsof란?List Open Files의 약자현재 시스템에서 열려 있는 파일들의 목록을 보여주는 유닉스 명령어파일을 열고 있는 프로세스의 PID(프로세스 식별 번호).. 공감수 0 댓글수 0 2024. 8. 12.
[TIP] MAC 단축키 mac 단축키 shift + command + 4 : 지정 영역 캡쳐control + command + space : 특수문자shift + command + z : 실행취소 되돌리기 vs code 작업 시 단축키 shift + option : 한줄 복사control + shift + K : 한줄 지우기control + G : 라인 검색 공감수 0 댓글수 0 2024. 8. 12.
[Git] 커밋 삭제하기 git reset, git revert reset과 revert의 공통점과 차이점 ? 둘 다 이전 커밋으로 되돌리는 명령어라는 점은 동일 reset은 브랜치를 혼자만 사용하는 경우 or 원격에 push 하지 않은 경우revert는 코드 공유를 하는 경우 or 원격에 push를 한 경우 사용 revert는 커밋을 이전으로 되돌린 이력을 남기기 때문에협업을 할 때는 reset보다 revert를 권장 reset 옵션 1) --hard : 돌아간 커밋 이후의 변경 이력 모두 삭제git commit -m "A"git commit -m "B"git commit -m "C"git reset --hard [A 커밋의 hash]git pushA로 되돌렸기 때문에 A 이후에 커밋한 B, C의 변경 내용은 모두 사라지고 코드도 날아감 2) --mixed :.. 공감수 0 댓글수 0 2024. 8. 9.
[Git] 마지막 커밋 취소하기 마지막 커밋을 취소하려면 헤드를 옮겨야함 HEAD란?현재 checkout 된 branch의 가장 최신 커밋을 가리킴 HEAD^헤드의 직전 위치를 뜻함 --soft작업 디렉토리와 인덱스를 보존해 파일이 stage 된 상태를 유지하도록 한다 마지막 커밋을 취소하는 git 명령어$ git reset --soft HEAD^ *참고https://parksb.github.io/article/28.html 공감수 0 댓글수 0 2024. 8. 9.
[react] select box option 클릭 시 페이지 이동 next.js14, typescript로 홈페이지 개발 중 footer 영역의 familysite selectbox에서 option 값 클릭 시 외부 페이지 이동 기능 구현 {/* footer.tsx */}'use client';import '@/assets/css/footer.css';const URL = { NAVER: 'https://www.naver.com', DAUM: 'https://www.daum.net', NATE: 'https://www.nate.com',};function Footer() { const openOutsideSite = (site: string) => { window.open(site); }; return ( { ope.. 공감수 0 댓글수 0 2024. 6. 24.
[Git] Module Not Found 에러메시지 FE 개발자분과 git으로 협업을 하다가 아래와 같은 에러메시지가 발생Module not found: Can't resolve 'zustand' zustand는 react의 상태 관리 라이브러리인데 나에게는 해당 라이브러리가 없기 때문이었다 yarn으로 zustand를 추가하는 터미널 명령어yarn add zustand 구글링 해보고 냅다 터미널창에 타이핑 했는데 실패 ㅠㅠ 우리 회사의 작업 방식은 한 개의 레포지토리에서 다수 프로젝트를 관리하는 모노레포 형식인데내가 가장 바깥 디렉토리에다 zustand를 add 하는 바람에 가장 바깥의 package.json 파일에 zustand가 추가된 것이었다 *모노레포 작업 시 라이브러리 설치하는 방법 (우리회사 한정일지도) 가장 바깥의 package.. 공감수 0 댓글수 0 2024. 6. 20.
[ASP] 날짜 event 준비중, 진행중, 종료 // open : 2024-06-04 17:00// close : 2024-06-15 00:00$(() => { const textBefore = '6/4(화) 17:00 오픈 예정'; const textOngoing = '결과 입력하기'; const textFinish = '자세히 보기'; const slideExam = $('.js_slide_exam'); // 슬라이드 배너 const btnExam = $('.js_btn_exam'); // 슬라이드 배너 btn const popExam = $('.js_pop_exam'); // 팝업 배너 // event 진행중 : 6/4 17:00 ~ 6/14 23:59 = "17") Or fnDateTimeFormat(.. 공감수 0 댓글수 0 2024. 6. 12.
[Git] 브랜치 생성, 이름 변경, 전환, 로컬 삭제 및 원격 삭제 // 브랜치 생성git checkout -b feature/test// 브랜치 이름 변경git branch -m feature/test// 브랜치 전환 (main으로)git checkout main// 로컬 브랜치 삭제git branch -d feature/test// 원격 브랜치 삭제git push origin --delete feature/test *참고https://www.freecodecamp.org/korean/news/git-rename-branch-how-to-change-a-local-branch-name/ Git 로컬 브랜치 이름 변경하는 방법Git을 사용하며 개발 프로젝트를 진행하다 보면 로컬 브랜치의 이름을 변경해야 할 때가 있습니다. 이 기사에서는 Git에서 로컬 브랜치 이름을 변.. 공감수 0 댓글수 0 2024. 6. 11.
[Git] 리액트로 빌드 된 프로젝트 빌드, 배포 - react로 build 된 페이지를 수정 및 재배포- yarn 환경 1. 프로젝트 세팅// 내 로컬로 복사git clone https://github.com/{username}/{repo-name}.git// 로컬 프로젝트 폴더로 진입cd {repo-name} // yarn startyarnyarn start 2. 작업 후 커밋, 푸쉬// 내 branch 체크 (생략가능)git branch // 내 git의 현재 상태 체크 (생략가능)git status // 작업 파일들이 stage에 올라가 있는지 체크git add . // 메시지 작성 및 커밋git commit -m "커밋메시지"// 작업 파일들이 올라갈 url(주소)확인git remote -v// 확인한 주소로 pushgit push orig.. 공감수 0 댓글수 0 2024. 6. 5.
[swiper] 스와이퍼 슬라이드 option swiper 속성 정리function eventSwiper(){ var eventSwiper = new Swiper('.event_swiper',{ slidesPerView : '2', // 노출되는 slide 개수 spaceBetween : 10, // 간격 loop:true, // 반복여부 loopAdditionalSlides : 1, direction: 'vertical', // slide 방향 autoHeight : true, // 높이 자동 조절 centeredSlides: true, centeredSlidesBounds: true, speed: 2500, grabC.. 공감수 0 댓글수 0 2024. 5. 20.
[ASP] 날짜별 event 조건 걸기 "2024-12-31" Then %> // 2024-12-31 이전에 수행할 event // 2024-12-31 이후에 수행할 event 공감수 0 댓글수 0 2024. 5. 17.
[jQuery] 제이쿼리 CDN jQuery CDN 모음 이전 회사에서는 IE까지 맞추느라 1.12.4 버전으로 사용했는데현재 회사에서는 3.6.1 버전으로 사용중 ! *제이쿼리 모든 버전별 CDN 확인하기https://releases.jquery.com/jquery/ 공감수 0 댓글수 0 2024. 5. 17.
[CSS] 특정 style을 safari에서만 적용하기 @media not all and (min-resolution:.001dpcm){ @supports (-webkit-appearance:none) { // css 내용 들어갈 자리 }} 하지만 safari 버전별로 다를 수 있음 ! *참고https://stackoverflow.com/questions/16348489/is-there-a-way-to-apply-styles-to-safari-only 공감수 0 댓글수 0 2024. 5. 17.
[JavaScript] SweetAlert2가 safari에서 제대로 보이지 않을 때 알럿창 버튼에 click event를 추가하기 위해 sweet alert 플러그인 사용 그런데 맥북 safari에서는 알럿창이 보이지 않는 이슈가 있었다찾아보니 해당 페이지의 맨 밑에 알럿창이 뜸.. css가 먹지 않는 것 같아 구글링을 하다가 stackoverflow에서 실마리를 찾음 sweet alert CDN 링크를 아래로 수정하니 해결되었다 ! *참고https://stackoverflow.com/questions/45476045/js-sweetalert2-not-working-in-safari-browser 공감수 0 댓글수 0 2024. 5. 17.
[swiper] 스와이퍼 CDN swiper CDN CSS https://unpkg.com/swiper@8.4.7/swiper-bundle.min.css swiper CDN JShttps://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js 공감수 0 댓글수 0 2024. 5. 10.
[CSS] 반응형에서 폰트사이즈 최소값 최대값 지정 font size clamp font-size: clamp(최소사이즈, 기준점, 최대사이즈); clamp 속성은 부모 요소를 기준으로 상대 크기를 사용해 지정하므로px와 같은 절대 단위값은 사용 불가 /* font-size: clamp(최소사이즈, 기준점, 최대사이즈); */p{font-size: clamp(0.625rem, 1.9444vw, 1rem);} 공감수 0 댓글수 0 2024. 5. 9.
[정보처리기사 실기] 정보보안 🚒보안의 3요소 1) 기밀성 : 인가된 사용자만 접근 2) 무결성 : 인가된 사용자만 수정 3) 가용성 : 언제든 접근 가능해야 🚒시큐어코딩 - OWASP : 오픈소스 웹 애플리케이션 보안 프로젝트 🚒해시함수 보완 1) 키 스트레칭 : 무차별 대입 공격에 대응, 해시를 여러 번 반복 2) 솔팅 : Rainbow Table 공격에 대응, 데이터에 임의값 추가 🚒접근 통제 모델 1) 벨-라파둘라 모델 - 기밀성 강조, No Read Up 2) 비바 모델 - 무결성 강조 3) 클락 윌슨 - 무결성 강조 (업무 처리 과정) 공감수 0 댓글수 0 2024. 4. 26.
[정보처리기사 실기] 네트워크 🛸HDLC(High-level Data Link Control) - 데이터링크 계층에서 사용되는 비트지향 프로토콜 - 구조 : 플래그-주소-제어필드-데이터-FCS 🛸데이터 교환 방식 (축적 후 교환) 1) 패킷 교환 - 데이터그램 : 송신 측에서 전송한 순서와 수신 측에 도착한 순서가 다를 수 있음, 패킷마다 라우터가 경로 선택 - 가상회선 : 데이터 전송 전 논리적 연결 설정해 전송된 순서대로 패킷 도착2) 메시지 교환 🛸다중화 - 하나의 통신 회선을 여러 가입자가 동시 사용 🛸서브넷 - 하나의 큰 네트워크를 작은 네트워크로 분할 🛸NAT - 사설 IP 주소와 공인 IP 주소 간의 변환 🛸DNS - 도메인 이름 IP 주소 간의 변환 🛸QoS - 네트워크 자원을 효율적으로 사용하여 특정 .. 공감수 0 댓글수 0 2024. 4. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.