Programmer's Progress

JavaScript와 JQuery를 배우면서, 애니메이션 구현하는 방법 또한 접하게 되었다. 실제로 사용해보니 드롭다운 내비게이터 같은 정말 홈페이지에서 쓸법한 애니메이션을 구현할 수도 있었다. 그렇기 때문에 더 이상 CSS3를 사용한 애니메이션 구현은 필요 없을 줄 알았다. 이를 증명이라도 하려는 듯, 나는 다른 사람의 블로그에 있는 공 튀기기 CSS3 애니메이션의 동작을 보고서 JavaScript와 JQuery를 사용해 구현하고자 했다. 공 튀기기 모션이 어느 정도 구현이 된 것을 확인할 수 있다. 왜 "완벽하게"가 아니라 "어느 정도"구현이 됐다고 말하는지는 동작을 하다 보면 생기는 오류에서 찾을 수 있다. 우선 처음 delay( )를 설정할 때 각각의 공마다 서로 다른 시작 delay( )를 주어..

지난번에 수평 내비게이터를 구현하면서 Mouseenter와 Mouseleave이벤트를 사용했다. 이 둘은 하위요소에 마우스를 올리거나 치워도 발생하는 특성이 있기 때문이었다. 그러나, hover를 사용하면, 이 두 이벤트에 대한 처리를 동시에 할 수 있다는 사실을 깨달았으며 불필요하게 div#wrapper 같은 랩핑 요소를 추가할 필요가 없다는 것을 알았다. 또한, 마우스 오버시에 하위 메뉴가 slideDown( )되는 것뿐만 아니라, 삼각형 표시를 추가하여 시각적으로 자신이 어떤 상위메뉴에 포커스 하였는지 쉽게 알아볼 수 있게 설계했다. 그러나 ::before, ::after 같은 가상 요소는 제이쿼리에서 메서드로 동작을 제어하기 힘들다. 그래서 생각한 것이 특정클래스를 가진 요소에만 이 가상 요소를 ..

애니메이션 구현을 배웠으니 본격적으로 애니메이션을 활용한 내비게이터를 구현해보았다. 구현에 앞서 내비게이터 설계의 감을 잡기 위해 이미 구성된 소스코드를 차근차근 분석했다. 기본적으로 ul, li, a 태그를 적절히 조합한 후에 float:left 속성을 적용해 수평으로 배치하였다. 대략적인 원리를 설명하자면, 우선 학과 소개, 교육과정, 입학안내 등의 텍스트에 마우스를 올리면(Mouseenter) slideUp( ) 되어있던 인사말, 연혁, 수행사업 등의 하위 메뉴가 slideDown( )된다. 이때 페이지에 처음 방문했을때나 새로 고침 했을 때 slideDown( )을 통해 하위 메뉴를 집어넣고 시작하면 잠깐 동안은 하위 메뉴가 노출되는 문제가 발생한다. //하위메뉴는 처음에 hidden 상태임 $(..

지금껏 나는 애니메이션을 구현할 때 CSS3에서 animation과 keyframes를 활용하고 이벤트 발생은 :hover, :active 같은 가상 클래스를 이용하는 방법밖에는 할 줄 몰랐다. 그러나 Java Script와 JQuery를 배우고 있는 이상, 이제는 좀 더 동적이고, 다양한 방식으로 애니메이션이나 이펙트를 부여할 수 있게 되었다.

라이브러리 이벤트 등록 방식은 기존의 방식과는 다른 점이 있다. 기존 방식은 HTML5 소스코드에 미리 작성된 태그에서만 이벤트 등록이 가능했는데 라이브러리 이벤트 등록 방식은 제이쿼리의 append, prepend, after, before등의 메소드로 새롭게 생성된 요소에도 이벤트를 등록할 수 있다.

HTML5 + CSS3를 독학하면서 웹페이지의 뼈대를 구성하고 고정된 스타일을 지정하는 등 정적인 요소들을 표현하는 방법을 배웠고, 이제 Java Script + JQuery를 배우면서 동적인 요소를 표현하는 방법을 배우기 시작했다. Java Script를 공부하면서 느낀 것이지만, id나 class, value, name 등의 속성들이 그다지 쓸모가 없다고 생각했던 나 자신의 모습이 조금 무신경하지 않았나 싶고, 중요성을 제대로 이해하지 못한 채 대충 아무렇게 작명했던 스스로의 안일함에 반성하게 되었다. 또한 이 속성들은 기초중의 기초기 때문에 확실히 익혀야겠다는 생각이 들었다. HTML5 : Source Code 내용 1 내용 2 내용 3 옵션 1 옵션 2 옵션 3 옵션 4 옵션 5 옵션 6 옵션 7..

#include #include #include typedef struct node { int data; struct node *p_next; }NODE; int tokenize(char ***str) { //***str : 초기화된 2차원 포인터의 주소를 받는다. //temp : 임시로 문자열을 저장할 배열 char temp[201]; //*p_temp, *p : 임시로 사용할 포인터 변수 char *p_temp, *p; //cnt : 토큰 개수를 저장할 변수 //len : 분리한 문자열의 길이를 저장할 변수 int cnt = 0, len = 0; //문자열을 입력받는다. temp 배열에 저장한다. gets_s(temp, sizeof(temp)); //p_temp 포인터변수에 메모리 할당을 한다. p_..

#include #include #include typedef struct node { int data; struct node *p_next; }NODE; void push(NODE **p_head, NODE **p_tail, int data) { //**p_head : 노드의 시작 포인터 주소를 받는다. //**p_tail : 노드의 끝 포인터 주소를 받는다. push 작업을 할때 반복문을 사용하지 않고 //바로 추가하기 위해서 필요하다. //data : 추가하고자 하는 정보 //헤드포인터가 널이 아니라면 이는 이미 데이터가 하나 이상은 추가되었다는 의미다. if (*p_head != NULL) { //맨 마지막 노드의 다음 노드를 위한 공간을 확보한다. (*p_tail)->p_next = (NODE*..