kebab00's

- 마지막 패럴럭스 모드 입니다. - 가로와 세로를 합친 모습입니다. - 가로만 있는 것은 8번에 있습니다. Javascript parallax Effect09 페럴럭스 이펙트 : 가로 세로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04-1 04-2 04-3 05 06 07 08 09 scrollTop : 0px - 전체 코드 입니다. - 기본적인 개념은 섹션4에 있는 4-1 ~ 4-3 들을 position을 fixed 즉 고정시켜 놓았습니다. - z-index의 차이를 주어서 눈에는 보이지 않지만 사실 맨 윗쪽부터 4-1 ~ 4-3들이 있는 것입니다. - 그리고 섹션4의 z-index만 4-1 ~ 4-3보다 낮게 주어서 섹션4에 오면 4-1 ~ 4-3들이 보이게 해주었습니다. - 그리..

- 스크롤을 할 때마다 정해둔 위치에 오면 사진과 함께 흰색/ 주황색 효과가 나타났다 사라집니다. - 코드를 보시죠 - CSS와 스크립트 부분입니다. - 오늘은 특히 CSS부분이 많은데 천천히 보시죠 - 우선 스크립트 입니다. - reveal 이라는 클라스가 있는 p태그 안의 글자를 span태그로 감싸주었습니다. - 그리고 scroll이라는 함수를 만들고 requestAnimationFrame을 주어 첫 실행후 scroll이라는 함수가 초당60번 재생되게 만들어 주었습니다. - 그리고 reveals라는 선택자를 만들어 모든 reveals를 선택한 뒤 forEach를 통해 함수를 실행시켜주었습니다. - 먼저 reveal들 안에 있는 이미지 태그들의 높이 값을 구했습니다. - 그냥 오프셋값을 넣으면 부모태그..

REACT - props란? 리액트의 props는 컴포넌트 간의 데이터 전달에 사용됩니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달함으로써 자식 컴포넌트는 전달받은 데이터를 사용하여 동적으로 UI를 생성하거나 작업을 수행할 수 있습니다. props는 다양한 타입의 값을 전달할 수 있습니다. 문자열, 숫자, 불리언, 객체, 배열 등을 props로 전달할 수 있으며, 필요에 따라 다양한 데이터를 전달할 수 있습니다. 또한, 함수나 콜백을 props로 전달하여 자식 컴포넌트에서 이벤트 핸들링이나 상태 변경과 같은 작업을 부모 컴포넌트로 전달할 수도 있습니다. 부모 컴포넌트에서 props를 전달할 때는 JSX 문법을 사용합니다. 태그 속성으로 props를 지정하거나 중괄호 {} 안에 JavaScrip..

REACT란 - React는 JavaScript를 사용하여 사용자 인터페이스(UI)를 구축하기 위한 오픈 소스 프론트엔드 라이브러리입니다. - React는 가상 DOM(Virtual DOM)을 사용하여 효율적으로 UI 업데이트를 관리합니다. 가상 DOM은 메모리에 존재하는 가벼운 복사본으로, React는 실제 DOM과 비교하여 변경된 부분만 업데이트합니다. 이를 통해 성능이 향상되고 빠른 UI 렌더링이 가능해집니다. REACT설치하기 - React는 Node.js 환경에서 동작하므로, Node.js를 먼저 설치해야 합니다. Node.js는 공식 홈페이지에서 다운로드할 수 있습니다. npm create-react-app react1 - 터미널에서 설치하고 싶은 문서로 이동한 뒤 위의 문구를 입력합니다. C..

- 이번사이트는 가운데에 있는 네모 사진 안에 커서를 놓으면 사진이 커지면서 커서가 바뀌는 페이지 입니다. Javascript Mouse Effect04 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 We first make our habits, then our habits make us. 처음에는 우리가 습관을 만들지만 그다음에는 습관이 우리를 만든다. - html입니다. - 자바스크립트입니다. - gsap 라이브러리를 사용해서 만들었습니다. - 가운데이 있는 이미지에서 마우스커서를 만들어줄 것이기 때문에 좌표의 기준이 화면의 끝이 아니라 중앙으로 잡는 것이 키포인트입니다. - 전체 화면을 2로 나눈 값을 기준으로 잡아서 만든 것이죠 - 그리고 커서를 만들어서 가운데의 사진안에 넣어주고 마우스를..

- 오늘은 오전에 한 포트폴리오 연습에 대해서 적어 볼까 합니다. - 가장 중요한 것은 바로 폰트!! font! 폰트! 굵기! 간격! 아무튼 이런 것들이 포트폴리오의 많은 부분을 좌우합니다. - 매우매우매우 중요하죠 그래서 틈틈히 사이트를 돌아다니며 폰트도 구경하고 수집하는 것이 중요합니다. - 하지만 저는 잘 못하는 것이죠.. 하지만 제가 눈여겨 본 것이 하나 있었습니다. - 아래에 배경이 보이시나요?? 저 그림?? 저건 iframe을 사용한 것입니다. - 이미 있는 사이트의 코드를 그대로 가져온 것이죠 - 저걸 사용하면 복잡한 코드들을 힘들게 이해하지 않아도 페이지에 넣을 수 있는 것이죠 - 물론 이쁘고 자연스럽게 하기위해선 어느정도 코드를 이해하기는 해야되지만 말이죠.. - 하는 방법도 어렵지 않습..