개발감성

일반 애니메이션 - show( ), hide( ) show와 hide 메소드는 기본 제공되는 애니메이션 효과로 각각 대상을 나타내고 숨기는 기능을 한다. 6초동안 애니메이션이 일어나고 완료되었을 시 알림창이 나타나도록 했다. hide를 실행했을 시 사진이 6초간 감춰지며 알림창이 나타난다. show를 실행했을 시 사진이 다시 나타나며 알림창이 나타난다. jQuery easing - 애니메이션에 효과주기 jQuery easing의 재밌는 효과 - codeJS jQuery의 easing를 사용하면 시각적으로 한층 더 풍부한 재미를 제공할 수 있습니다. www.codejs.co.kr jQuery에서 애니메이션에 다양한 효과를 주고자 easing기능을 제공한다. jQuery Easing Plugin Please..

스크롤 위치 구하기 - pageOffset 현재 창에 scroll이벤트가 일어났을 때 페이지의 전역위치를 구해주어 스크롤의 위치를 나타낸다. 스크롤의 위치에 따라 페이지의 전역위치를 나타낸다. 스크롤 위치 이동 - scrollTo( ) top버튼에 클릭 이벤트가 일어났을 시 scrollTo를 이용해 스크롤의 위치를 0으로 바꿔준다. 스크롤 위치 이동 - scrollBy( ) 정해진 위치로 이동시키는 scrollTo와 달리 By는 일정 거리만큼 이동시킨다. 스크롤의 위치가 100씩 이동한다.

윈도우 창 생성 버튼에 이벤트를 주어 open을 사용해 크기 500의 새 창을 만들도록 한다. 윈도우 창 크기 변경 - resizeTo( ) 이번에도 다른 버튼에 이벤트를 주어 만약 newWindow가 있다면 resizeTo를 통해 500이었던 크기를 300으로 변경하도록 한다. resizeTo함수는 새 창이 존재할 때만 사용가능하다. 윈도우 위치 이동 - moveTo( ) 생성된 newWindow창을 moveTo를 이용해 200의 위치로 이동시킨다. 창이 어느 위치에 있던 이동버튼을 누르면 200,200의 위치로 이동한다. 윈도우 위치 이동 - moveBy( ) 생성된 newWindow창을 moveBy를 사용해 200만큼 이동시킨다. moveBy는 해당 윈도우를 일정 위치만큼 이동하는 것을 볼 수 있다..

의미 없는 p태그로 가득 체워진 웹 문서에서 크기를 구해보도록 한다. 웹 문서의 크기 - $(document).width( ), height( ) jQuery를 사용해 document를 불러온 뒤 width와 height를 사용한다. width는 화면의 크기에 따라 조절되는 반면 height는 문서 내의 내용에 따라 고정된 값을 보인다. 스크린의 크기 - screen.width, height 스크린이란 모니터의 화면의 크기를 뜻하고 이를 구하기 위해서 screen에 width와 height를 줬다. 제어판의 해상도의 값을 확인해보니 제대로 구해졌다. 유효 스크린의 크기 - availWidth, availHeight 유효 스크린이란 화면에서 작업표시줄을 제외한 크기를 뜻한다. 작업 표시줄의 40px만큼을 ..

스크롤의 위치를 확인할 버튼과 자동으로 스크롤을 이동할 버튼, 300,200의 크기의 컨테이너에 1000크기의 사진을 담았다. 스크롤의 위치 구하기 scrollLeft와 Top 메소드를 사용해 container노드의 현재 스크롤 위치를 리턴한다. 스크롤의 마지막 위치는 717, 321으로 나온다. 이는 스크롤 바의 앞 위치로 스크롤 바의 자체크기, 테두리두께, 컨테이너의 크기 등에 따라 나타난다. ex) (스크롤left위치 717) + (스크롤 창의 크기 300) - (스크롤바와 테두리의 크기 17) 스크롤 이동 시키기 다른 위치함수들과 마찬가지로 left나 top에 값을 넣어줌으로 위치를 이동시킬 수 있다. setInterval함수를 이용해 0.1초마다 오른쪽으로 5씩 이동시키며 스크롤의 위치가 끝에 ..

input태그에 입력된 text를 상단의 태그에 그대로 나타내는 방식으로 바인딩을 구현해본다. 틀을 만들어준다. 제목 태그와 input내용이 바인딩 되어 들어갈 div태그를 만들어주고 구분선을 그어준다. input태그는 text타입에 입력된 내용을 this.state.msg를 통해 상태 중 메세지를 값으로 전달하고 handleChange라는 함수를 생성해 바인딩을 구현한다. 변경된 내용을 상태에 전달해줄 handleChange 메소드를 구현한다. setState를 이용해 상태값을 변경해주는데, state중 msg를 이벤트 객체가 타게팅된 곳 (input태그)의 값으로 변경해준다. 기본 상태값은 메세지입니다.라는 text로 설정해주고 handleChange에서 State에 접근해주기 위해 bind를 사용해..

무명 함수 호출 첫 번째 방법은 무명함수를 호출하는 방법이다. 버튼의 온클릭 이벤트에 function을 주고 내용을 적어넣는다. 첫 번째 버튼 클릭 시 무명함수인 function()의 내용대로 콘솔에 내용이 찍힌다. ES6 ES6의 문법을 이용해 함수를 호출한다. 간단한 내용일 때 사용하기 좋다. 두 번째 버튼 클릭시 => 옆의 내용이 실행된다. 함수 직접 호출 함수를 직접 정의해서 넣는 방법이다. 세 번째 버튼 클릭시 정의한 함수가 호출되어 사용된다. 이벤트 내용이 길 때 사용하기 좋다.

하나의 태그에는 여러가지 영역이 있다. 어디서부터 어디까지를 크기의 범위로 가정하는지 각 영역을 포함담당하는 함수를 통해 알아본다. 기본 크기 - width( ), height( ) 제일 안쪽의 크기는 가로에 width, 세로에 height를 사용해서 구한다. 태그의 내용물의 크기만을 구해준다. 기본크기 + padding - innerWidth( ), innerHeight( ) padding을 포함한 크기는 inner를 붙여준다. 기본크기 + padding + border - outerWidth( ), outerHeight( ) 테두리의 크기까지 합한 크기는 outer를 붙여서 표현한다. 기본크기 + padding + border + margin - outerWidth(true), outerHeight(..

라우팅 경로에 컴포넌트를 추가하기 위해 dotnet환경에서 프로젝트를 진행한다. ClientApp내의 Component폴더에 새 컴포넌트를 생성한다. 다음으로 App.js 파일로 이동해서 Route경로를 하나 새로 생성해준다. path의 경로로 라우트 될때 해당 컴포넌트를 호출하는 것이다. Contact를 엔터치면 import가 자동으로 된다. 아마 VSC에서 제공하는 기능인듯 하다. 라우팅을 추가했다면 이번엔 메뉴바를 하나 추가해준다. Component폴더의 NavMenu.js파일로 가서 NavItem을 하나 더 추가해준다. 메뉴를 하나 추가했다면 페이지에서 확인해본다. 마지막 메뉴로 하나가 추가된 것을 볼 수 있다. 해당 메뉴를 클릭하자 /contact경로로 라우팅 되고 아까 생성한 컴포넌트가 호출되..

리액트의 파일구조와 컴포넌트를 생성하고 import하는 것을 알아봤다. 다음으로 스타일을 적용하는 것을 알아본다. [React] CRA 파일구조, 컴포넌트 import시키기 지금까지 dotnet환경에서 리액트를 사용하며 사용법을 알아봤다. [React] 컬렉션 형태의 데이터 출력 컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다. [React developefeel.tistory.com 내부 스타일 적용 제목 부분을 담당하는 컴포넌트인 Title로 이동한다. Title컴포넌트의 제목을 출력하는 h1태그에 style로 내부 스타일을 준다. 제목 색이 스타일 대로 변경됬다. 내부 스타일을 따로 정의해서 적용하는 것도 가능하다. 외부 스타일 적용 외부 스타일 적용을 위해 he..