Gwni Lab GwniLab

컬러 사용과 용도 상호작용(interaction) 및 상태표현(state) 컬러는 사용자에게 상호작용 가능성을 안내하는데 가장 강력한 도구입니다. 컨트롤을 할 수 있는 포지션 또는 버튼등의 선택기능영역을 사용자가 인지 가능하도록 컬러를 통해 표현할 수 있으며, 결과적으로 사용자가 원하는 행동(명령)을 실행시킬 수 있도록 도와줍니다. 또한, 컬러는 상태표현을 하는데 있어서도 중요한 역할을 합니다. 사용자의 조작결과에 따른 컨트롤의 상태변경을 컬러로 표현할 수 있으며, 이를 통해 사용자는 컴퓨터가 어떤 명령을 실행중인지 알 수 있습니다. 때에 따라 브랜드컬러, 시스템컬러 모두 적용가능합니다. 토글스위치에 system color, brand color를 사용하여 상태를 나타냅니다. brand color의 활용..

//설명. 참고사항. //커서의 길이값 속성들을 객체 데이터로 불러오기 const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e){ //마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 설정 let centerPageX = window.innerWidth/2 - e.pageX; let centerPageY = window.innerHeight/2 - e.pageY; //좌표의 최대값 최소값 구하기 //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정. //max 값에 Math.min을 한..

//설명. 참고사항. const circle = document.querySelector(".cursor").getBoundingClientRect(); //커서의 길이 속성을 가져온다. //가운데 이미지 내에서 움직이는 함수 설정 document.querySelector(".mouse__img").addEventListener("mousemove",(e)=>{ //커서 움직이는 애니메이션를 gsap로 설정 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //마우스 좌표값 let mousepageX = e.pageX; let mousepageY = e.pageY; //전체 가..

시스템 컬러 시스템 컬러란 시스템 컬러는 상태의 의미를 전달하는 컬러로 사용자에게 직관적으로 시스템의 상태를 알려주는데 효과적 입니다. 웹 접근성적인 측면에서도 아주 필요하다고 볼 수 있습니다. 시스템 컬러의 의미해석 컬러의 해석은 문화나 경험에 의해서 달라질 수 있으나 UNESCO 도로표지판 및 신호에 대한 비엔나협정에서 다음과 같은 색상들의 상태의미를 국제적으로 표준화시켰습니다. 국내에서는 교통관련정보 외에도 UI 디자인(인터페이스 디자인)에 이러한 표준을 사용하여 사용자에게 직관적으로 시스템 상태를 보여줍니다. 일상 속에 녹아 들어있는 색들이죠! 그러나 웹접근성에 따르면 색상으로만 의미를 전달하기보다는 아이콘이나 바와 같은 형태 또는 글을 같이 기재해주는 것이 좋습니다. 이때 모양도 상징적인 의미를..

mouseover, mouseout, mouseenter, mouseleave mouseover는 마우스가 요소 또는 그 자식 중 하나에 들어갈 때 트리거됩니다 . 그것의 상대는 mouseout입니다. mouseenter는 마우스가 설정된 요소에 들어갈 때만 트리거됩니다. 상대 이벤트는 mouseleave 입니다. mouseenter및 mouseover이벤트는 요소 위로 마우스를 이동하면 트리거됩니다 . move your mouse move your mouse 0 0 move your mouse move your mouse 0 0 왼쪽이 mouseover, 오른쪽이 mouseenter인데요. mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만 mouseenter는 오로지..

//설명. 참고사항. 커서 스타일 .cursor { position: absolute; left: 0; top: 0; width: 200px; height: 200px; z-index: -1; border-radius: 50%; background-image: url(img/image22.jpg); background-size: cover; background-position: center center; background-attachment: fixed; //background-attachment 속성을 고정으로 이용해서 배경이미지 뒤에 투명도 없는 선명한 이미지가 있는것 처럼 작업합니다. border: 5px solid #fff; } 스크립트 //background-attachment: fixed; ..

//설명. 참고사항. const cursor = document.querySelector(".cursor"); const follow = document.querySelector(".cursor-follower"); window.addEventListener("mousemove", (e) => { //커서에 좌표 값 할당 // cursor.style.left = e.pageX -5 + "px"; // cursor.style.top = e.pageY -5 + "px"; // follow.style.left = e.pageX -15 + "px"; // follow.style.top = e.pageY -15 + "px"; //gsap 플러그인을 사용해서 좌표값 할당한 애니메이션 적용 gsap.to(cursor..

//설명. 참고사항. //출력용 window.addEventListener("mousemove",(event)=>{ document.querySelector(".clientX").innerText = event.clientX; //브라우저 기준 x좌표 document.querySelector(".clientY").innerText = event.clientY; //브라우저 기준 y좌표 document.querySelector(".offsetX").innerText = event.offsetX; //요소 기준 x 좌표 document.querySelector(".offsetY").innerText = event.offsetY; //요소 기준 y 좌표 document.querySelector(".pageX"..