2023/04 29

Javascript를 이용한 사이트 만들기! - 슬라이드 효과사이트 만들기04

- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다. - 하지만 저번에 했던 것과 다른 점이 있는데 그건 바로 첫번째 것으로 돌아가는 것이 아니라 마지막 사진 뒤에 첫번째 사진을 복사해두어서 끊김이 없게 한다는 것입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 이번에도 필요한 선택자와 전역변수들을 하나로 모아놨습니다. - 오랜만에 보는 것이 있다면 요소의 width 값을 가져오는 clientWidth가 있겠습니다. - 그리고 let sliderClone = sliderInner.firstElementChild.cloneNode(true); 를 사용해서 첫번째 이미지를 복사해주었습니다. Ja..

Javascript를 이용한 사이트 만들기! - 슬라이드 효과사이트 만들기03

- 위의 페이지처럼 시간이 지나면 사진이 상하로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 - 아 이번에는 css에서 바뀐 점이 하나 있는데 바로 사진들을 가로가 아닌 세로로 세워놔야한다는 것입니다. - 그래서 display:flex를 주지 않았습니다. 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. Javascript - 먼저 javascript입니다. - 전에 했던 것과 거의 비슷합니다. 이번엔 X축이 아니라 Y축으로 사진의 높이 만큼이동해주면 됩니다. - setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다. - currentIndex = (currentInd..

Javascript를 이용한 사이트 만들기! - 슬라이드 효과사이트 만들기02

- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. Javascript - 먼저 javascript입니다. - setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다. - currentIndex = (currentIndex + 1) % sliderCount;으로 이미지의 인덱스 값을 구해서, sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)" },sliderInterval);로 sliderInner에게 ..

Javascript를 이용한 사이트 만들기! - 슬라이드 효과사이트 만들기01

- 위의 페이지처럼 시간이 지나면 사진이 바뀌는 스크립트입니다. - javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 Javascript - 먼저 javascript입니다. - setInterval 함수는 정해진 시간마다 함수를 실행시키는 방법입니다. sliderInterval 변수에 3000이라는 값을 주고 3초마다 함수가 실행되어 다음 이미지가 보이도록 합니다. - let nextIndex = (currentIndex + 1) % sliderCount;으로 다음 이미지의 인덱스 값을 구해서, 투명도를 설정하는 opacity 를 이용해서 slider[currentIndex] (현재 보이는 이미지)를 투명도를 0으로 만들어서 안 보이게 합니..

웹디자인 오답노트!!!

- 어제는 정보처리기능사를 했는데 저는 어리석게도 같은 날 다른 시간에 또하나의 시험을 신청했습니다. - 그말은 즉 웹디자인 기능사도 오답노트를 해야된다는 것이죠 - 그래도 조금 더 맞아서 오답노트 할 것은 조금 적습니다. - 하지만 1번부터 틀렸네요.. -2015년 7월19일 시험 문제입니다. 1. 색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? 1. 색상대비 2. 보색대비 3. 명도대비 4. 채도대비 - 정답은 3번 명도대비입니다. - tip! 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. 6. 디자인의 요소에 관한 정의가 틀린 것은? 1. 점 - 위치만 있고 크기는 없다. 2. 선 - 면의 한..

정보처리기능사 오답노트

- 며칠 뒤면 정보처리 기능사와 웹디자인 기능사 필기 시험이 있습니다. - 기출 문제를 풀었는데 오답노트를 해보도록 하시죠 -2011년 4월17일 문제인 11년도 2회차 문제입니다. 5. 다음에 실행할 명령어의 번지를 기억하는 레지스터는? 1. Program Counter 2. Processor Register 3. Instruction Register 4. Memory Address Register - 정답은 3번 Program Counter입니다. - tip! 레지스터MAR : 번지(주소) 기억MBR : 버퍼(임시기억) IR : 명령어레지스터(명령어를 읽어서 저장) PC : 프로그램카운터(다음수행 명령번지 기억) 명령어해독기 : IR 내용 해독 ACC : 누산기(연산결과 일시(임시)저장) 데이터레지스..