Hello 100A

주소가 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'] 서버내 ..

다음 섹션이 이전 섹션을 덮는듯하게 보이는 효과입니다. 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..

진짜 간단하게 작업했다. 클릭을 하는 탭메뉴와 그 탭에 관한 내용에 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..

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:..

주로 사이드바가 열릴때 쓰는 햄버거 버튼을 닫기버튼 (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; }..

요즘 심심찮게 자주 쓰이는 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 라이..

평상시 작업할때 자주 쓰는 버튼 마우스 오버 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..

가장 문제가 되는 유튜브사용은 운동하는 시간 30분, 모든 일을 다 마친 10시~12시까지만 봤다. (집안 정리도 하면서 유튜브를 봐야되서 1시간채 못봤다 ㅠ) 사실 주말엔 너무 뭔가가 보고 싶어서 한시간 반정도 컴퓨터로 영상을 봤다. 살짝 허무했다. 그래도 꽤 선방한 일주일이었다고 생각한다. 어쩔 수 없이 영상을 보다가도 시간이 되면 screen sen 어플이 "Is this important?"라는 멘트를 띄워버려 폰을 끄고 일찍 자야되서 좋았고, 출퇴근 하는 버스안에서 풍경을 보는것도 좋았다. 핸드폰을 짬짬히 보는 시간동안 내가 해야할 일을 머릿속으로 정리해서 좋았고, 현재 어떤 상황인지 정확히 인지를 하고 자신이 어떤 문제가 있는지 알게되었다. 물론 너무 힘들었다. 그냥 가만히 있는게 너무 힘들고..

주로 연혁이나 절차 등에서 스크롤을 내릴때 흐름을 표현할 때 사용하는 스크롤 애니메이션입니다. 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.

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