coding 34

php $_SERVER 자주쓰는 종류 REMOTE_ADDR SERVER_NAME SCRIPT_NAME

주소가 www.domain.com/folder/index.php?message=hello 라고 가정할때 $_SERVER['REMOTE_ADDR'] 방문자 IP result: 127.0.0.1 $_SERVER['HTTP_HOST'] host 헤더값 result: www.domain.com $_SERVER['SERVER_NAME'] 서버 호스트의 이름 실행 result: www.domain.com $_SERVER['REQUEST_URI'] 도메인을 제외한 뒷부분 주소 result: /folder/index.php?message=hello $_SERVER['SCRIPT_NAME'] 파라미터 값을 빼고 출력 result: /folder/index.php $_SERVER['SCRIPT_FILENAME'] 서버내 ..

coding/web 2023.12.20

javascript 다음섹션이 이전 섹션을 덮기 stacked scroll trigger gsap

다음 섹션이 이전 섹션을 덮는듯하게 보이는 효과입니다. https://unpkg.com/gsap@3/dist/gsap.min.js https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js 두 라이브러리를 사용했습니다. 한 섹션만 덮는 효과를 내고 싶으면 sec3->sec4 sec3을 sec4가 덮는 느낌을 내고 싶다면 let panels = gsap.utils.toArray(".section"); .section 부분에 .sec3 을 넣어줘야합니다. html section 1 section 2 section 3 section 4 css body{ padding:0; margin:0; } .section{ width:100%; height:100vh; position:re..

coding/web 2023.12.18

javascript tab menu 탭메뉴 클래스만 붙여서 만들기

진짜 간단하게 작업했다. 클릭을 하는 탭메뉴와 그 탭에 관한 내용에 active라는 클래스를 붙이는 방식으로 만들었다. html tabmenu1 tabmenu2 tabmenu3 content1 content2 content3 css .section{ margin:50px; width:500px; background:blue; padding:20px; } .tabmenuBar { display:flex; width:100%; align-items:center; padding:0; margin:0; } .tabmenuBar .tabmenu{ list-style:none; padding:15px 20px; color:#fff; font-weight:600; cursor:pointer; } .tabmenu.ac..

coding/web 2023.12.13

javascript typed.js 사용법 텍스트 타이핑 효과

typed.js 버전은 2.1.0 사용했습니다. 아래 링크 들어가셔서 확인바랍니다. https://mattboldt.com/demos/typed-js/ JavaScript Animated Typing with Typed.js | by Matt Boldt Another demo made with love by Matt Boldt. Installation # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower bower install typed.js Setup var typed = new Typed('.element', { strings: ["First sentence.", "Second sentence."], typeSpeed:..

coding/web 2023.12.11

css 햄버거 메뉴버튼 클릭 시 x버튼 (닫기버튼)으로 변경 click 이벤트 close button

주로 사이드바가 열릴때 쓰는 햄버거 버튼을 닫기버튼 (x버튼)으로 변경하는 css 소스 입니다. 버튼을 클릭 시에 클래스가 추가되어 첫번째와 마지막 작대기는 transform의 rotate로 회전시키고 가운데 작대기는 opcity를 0로 변경해 안보이게 처리했습니다. html 소스입니다. css 소스입니다 .menu-wrap{ margin-top:50px; margin-left:100px; position: relative; width: 28px; height: 16px; cursor: pointer; } .menu-wrap .line{ position: absolute; width: 100%; height: 2px; border-radius: 2px; background: #222; left: 0; }..

coding/web 2023.12.11

jquery 부드럽게 흘러가는 marquee 효과 전광판

요즘 심심찮게 자주 쓰이는 marquee 효과다. 아주 간단했고, 쉽게 사용할 수 있다. https://github.com/aamirafridi/jQuery.Marquee GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee jQuery plugin to scroll the text like the old traditional marquee - GitHub - aamirafridi/jQuery.Marquee: jQuery plugin to scroll the text like the old traditional marquee github.com jquery 는 3.7.1 라이..

coding/web 2023.12.08

css 자주쓰는 마우스오버 이벤트 mouse over hover

평상시 작업할때 자주 쓰는 버튼 마우스 오버 css 스타일입니다. 전체 html은 간단히 이렇게 작업했습니다. 버튼디자인 버튼타입1 버튼타입2 버튼타입3 버튼 1번은 간단히 배경색이 바뀌는 css입니다. transtion은 background를 넣었습니다.btn1{ position:relative; display:inline-block; background:rgb(26, 115, 232); padding:10px 20px; color:#fff; cursor:pointer; transition:background .4s; } .btn1:hover{ background:#5AAEFF; } 버튼 2번은 마우스 오버시에 progress bar스타일로 게이지바가 채워지듯이 배경색이 변경됩니다..btn2{ posi..

coding/web 2023.12.07

javascript 스크롤 애니메이션 스크롤 내릴때 선 채우기 progress bar gsap scrollTrigger scroll animation

주로 연혁이나 절차 등에서 스크롤을 내릴때 흐름을 표현할 때 사용하는 스크롤 애니메이션입니다. gsap의 timeline을 이용해서 작업했습니다. 먼저 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.3/gsap.min.js https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js 을 꼭 추가합니다. See the Pen Untitled by baekah (@baekah) on CodePen.

coding/web 2023.12.03

javascript 마우스 따라다니는 트래커, 모형 마우스 효과 mouse move

마우스를 움직일때마다 동그라미 모양의 트래커가 따라다니는 마우스 좌표를 따라다니는 효과입니다! 그리고 cursor change라는 영역에 마우스오버를 하면, 노란색 동그라미 트래커가 하얀색 불투명한 트래커로 변경됩니다. 가장 중요했던 css 속성은 마우스 커서를 따라다니는 트래커에 들어가는 pointer-events:none; 이라는 속성입니다. See the Pen Untitled by baekah (@baekah) on CodePen.

coding/web 2023.12.02