클릭 -> 스크롤 이동을 구현해보도록 하겠다. scrollintoview()를 사용하면 간단하다. HTML 클릭하세요 box1 box2 box3 box4 box5 box6 box7 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. 박스6입니다. 박스7입니다. 클릭하여 이동할 수 있게 버튼을 만들어준다. CSS body,div{ margin:0; padding:0; } div{ display: flex; align-items: center; justify-content: center; } .box1{ background-color:red; } .box2{ background-color:orange; } .box3{ background-color:yellow; } .box4{ backg..
자동으로 연도 변경하여 삽입하기
자동으로 연도 변경하여 삽입하기 사이트 하단에 회사 '창립 년도 ~ 현재 년도' 까지 적어두는 부분을 많이 봤을 것이다. 기업들이 보통 많이 작성해두는데, 수동으로 작성하는 곳은 없으리라 믿는다. 캡쳐 : 삼성 홈페이지 자세히 보면 이렇게 ↓↓ HTML 2010~자동 값을 넣으려는 곳 id 값을 주었다. JS const _date = new Date();const _year = _date.getFullYear();const thisYear = document.getElementById('thisYear'); thisYear.innerText = _year;id 값으로 변수를 만들어 그 안에 innerText해서 get한 값을 넣었다. new Date(); 가 궁금하면 MDN을 참고하자! https://d..
마우스 휠로 전체 페이지 영역 넘기기 지난번 마우스 휠로 input 넘버 값 up, down 작업을 했었다.응용해서 작업 하나 더 했는데 올린다. HTML박스1입니다.박스2입니다.박스3입니다.박스4입니다.박스5입니다.박스6입니다.박스7입니다.박스 7개 생성.몇 개를 생성해도 상관없다.하지만 구분을 위해 class로 css 추가했기 때문에 구분을 위한다면 똑같이 추가할 것. CSSbody,div{ margin:0; padding:0;}div{ display: flex; align-items: center; justify-content: center;}.box1{background-color:red;}.box2{background-color:orange;}.box3{background-color:yellow..
three.js 라이브러리 공부하기
three.js 기초 강의글 보고 까먹을까봐 작성하는 글 보고 배운 강의 출처입니다!! : http://binteractive.org/?p=213예제 및 예제코드는 여기서 확인하세요. three.js는 ie10 이하 호환이 안됩니다. [1편]-구도 잡고 화면 만드는 것 Scene-화면 촬영 PerspectiveCamera-화면에 표현 WebGLPenderer 실제 우리 눈에 보여지게 해주는 renderer three에서 생성한 함수이기 때문에 아래와 같이 실행var camera = new THREE.PerspectriveCamera(...); 3d 객체는 표면이 추가되어야 한다.(재질, 색....)재질을 채우기 위해 Mesh를 함수로 만들어야 위 출처에서 설명하기를 Mesh는? Geometry - 점, ..