전체 글 썸네일형 리스트형 [jQuery] mousewheel.js 웹 서핑을 하다 보면 간혹 마우스 휠만 위나 아래쪽으로 살짝 움직였을 뿐인데 화면 전체가 스크롤되거나 페이지가 바뀌면서 다음 화면으로 넘어가는 경험을 한 적이 있을 겁니다. 이는 클릭이나 마우스 오버와 마찬가지로 마우스 휠 이벤트를 이용하여 구현한 경우인데, 클릭이나 마우스 오버, 스크롤 등은 jQuery에서 기본으로 제공하는 사용자 이벤트이지만 mousewheel 이벤트를 사용하기 위해서는 mousewheel.js라는 별도의 플러그인 파일을 이용해야 합니다. 이번 절에서는 mousewheel.js 의 사용법에 대해서 알아보도록 하겠습니다. # Contents mousewheel.js # mousewheel.js jQuery의 mousewheel를 다운받아 임포트를 해주고, 아래 JavaScript를 처.. 더보기 [jQuery] jQuery 정리 문서의 구조를 담당하는 것이 HTML이고 디자인적인 표현을 담당하는 것이 CSS라고 한다면 JavaScript가 하는 일은 동적으로 수정하여 웹 화면에 인터랙션을 주는 게 주 목적이라고 할 수 있습니다. 사용자의 행동에 따라 실시간으로 웹에 어떠한 변화가 일어나는 상황을 만들어, 동적인 웹 페이지를 작성하는 것이 목표입니다. # Contents 선택자 css() attr 탐색 구문 이벤트 연결 애니메이션 다양한 명령어들 # 선택자 jQuery로 특정 요소를 선택하는 기본구문은 아래와 같습니다. $("선택할 요소") jQuery 선택자의 쌍따옴표 안의 선택 요소는 기존의 CSS 선택자와 동일합니다. # css() css() 구문을 사용하여 선택된 요소의 CSS 속성을 변경하는 법을 알아보도록 하겠습니다. .. 더보기 [CSS] animation 이전 절에서는 transtion 속성을 활용하여 마우스 오버 시에 모션 효과를 구현하였습니다. 이번 절에서는 animation과 @keyframes를 활용하여 사용자의 별다른 행동 없이도 미리 저장해놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다. animation을 설정하기 위해서는 @keyframes라는 명령어를 이용하여 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 미리 설정했던 모션을 호출하는 방식으로 동작합니다. animation의 경우에는 @keyframse의 설정 등 다소 사용방식이 복잡할 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 animation 구문의 실행 흐름을 살펴보시기 바랍니다. .. 더보기 [CSS] transition CSS3를 처음 접하는 사람들에게 가장 신기한 기능이 무엇인지 물어본다면 아마 대부분 사람들은 transition을 꼽을 것입니다. 이 transition을 사용하면 누구나 간단한 설정만으로도 직관적인 모션을 제작할 수 있고 그 효과 또한탁월하기 때문에 이번 절에서는 CSS3의 꽃이라고도 할 수 있는 transtion, 전환 효과에 대해 알아보도록 하겠습니다. # Contents transtion # transtion transition의 기본 문법은 아래와 같습니다. transtion: 속성명 전환시간 가속도 설정 지연시간 transtion의 구문 위치는 변경 후인 hover이 아니라 변경이 일어나기 전인 원래의 태그 선택자입니다. 먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.html 코드입.. 더보기 [CSS] 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 바로 전 단계에서 transform의 다양한 속성들을 활용하여 평면상에서의 모양을 변형하는 법을 배웠습니다. 이번에는 평면이 아닌 입체적인 공간에서의 요소 변형법을 알아보겠습니다. 기존의 transform 속성들 중 3d로의 변형이 가능한 속성은 translate와 rotate 입니다. # Contents perspective translateZ # perspective 흔히 2d라고 하는 평면공간을 입체적인 3d 공간으로 바꾸는 제일 중요한 요소가 무엇일까요? 기존 x축, y축에 z축을 추가했을 시에 비로소 평면에서 입체공간으로 바뀝니다. 지금부터 우리가 다뤄볼 속성이 바로 이 z축에 해당합니다. 사람의 눈에 더욱 자연스러운 입체공간을 구현하기 위해서는 원근감이라는 요소를 추가해야 하는데 브라우저상에 .. 더보기 [CSS] 특정 요소의 모양을 평면상에서 자유롭게 변형하기 기존 웹 표준에서 모든 HTML 요소의 모양은 사각형이었으며 해당 모양을 변형할 수 있는 방법이 없엇지만 CSS3으로 넘어오면서 포토샵의 기능과 비슷한 변형 속성이 대거 추가되었습니다. 따라서 기존에 불가능하던 다양한 기법이 순수 CSS 기술만으로도 구현이 가능해졌습니다. 다음은 transform에 속성 중 평면상에서 구현 가능한 기능들을 위주로 학습하겠습니다. # Contents translate skew scale rotate transform-origin # translate translate는 현재 요소의 위치 값을 기준으로 x축 또는 y축으로 해당 요소를 이동시킵니다. 아래는 translate의 필수 구문입니다. transform: translateX(x축 이동거리) transform: tran.. 더보기 [CSS] 배경에 그라디언트 색상과 모양 지정하기 특정 요소의 배경에 그라디언트 색상을 지정하기 위해서는 CSS3의 gradient를 이용하면 간단히 CSS의 코드 수정만으로도 원하는 그라디언트의 모양과 색을 자유자재로 변형할 수 있습니다. 다음의 필수 구문 정리를 통해 gradient의 사용법을 알아보겠습니다 # Contents gradient # gradient 아래는 gradient의 필수 구문입니다. background: 그라디언트 모양(방향, 색상1, 색상2); 그라디언트 색상의 개수는 원하는 만큼 추가할 수 있습니다. 그라디언트의 모양에는 선형 그라디언트와 원형 그라디언트가 있습니다. 다음의 예제를 통해서 각각의 gradient 속성 값에 따라 달라지는 모양의 변화를 확인해보겠습니다. 먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.h.. 더보기 plug in Auto Rename Tag Better Comments Code Runner Community Material Theme CSS Navigation IntelliSense for CSS class names in HTML JavaScript (ES6) code snippets jshint Korean(사용법) Language Pack for Visual Studio Code Live Server Material Theme Icons npm Intellisense Power Mode Prettier - Code formatter Visual Studio IntelliCode vscode-styled-components 더보기 이전 1 2 3 4 ··· 14 다음
