기초 문법 썸네일형 리스트형 [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.. 더보기 [CSS] box-sizing 개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 content-box border-box 둘 다 width 값을 500px로 정하였으나, box-sizing 속성값에 따라 크기기 달라집니다. 첫번째 박스는 콘텐트 영역이 500px이고 테두리.. 더보기 이전 1 2 3 다음
