공대생 탱지

background: linear-gradient(to top, rgba(6,168,155,0.3) 50%, transparent 50%);

/* header */ const header_main = document.querySelector('header'); document.addEventListener("scroll", function(){ let scroll_top = window.scrollY; if(scroll_top > 0){ header_main.classList.add("on"); }else{ header_main.classList.remove("on"); } }) 헤더 javascript로 스크롤위치 0보다 크면 class = "on" 추가하기

바닐라 자바스크립트를 사용하여 별점만들기 ! See the Pen only javascript star rating by Kim ji yeon (@w1dus) on CodePen. $basicColor, $hoverdColor, $activeColor 를 원하는 색으로 변경해서 적용 가능, starContainer클래스를 가진 div를 추가후, 스크립트를 넣으면 작동함

스크롤 하다가 클래스 ani가 있는 부분(영역)에 닿으면 클래스 on을 붙인다. function scollHandler () { const scroll_y = window.scrollY + (window.innerHeight / 1.5) ; const animationContainer = document.querySelectorAll('.ani') animationContainer.forEach(element => { const itemTop = element.getBoundingClientRect().top + window.scrollY; if((scroll_y) > itemTop){ element.classList.add('on'); }else{ element.classList.remove('on')..

1. github에 접속 후, repository를 생성한다. ( 대문자를 포함해서는 안됨! ) 아래 코드를 터미널창에 입력해 깃에 업로드합니다. 2. 터미널창에 npm i gh-pages를 입력하여 gh-pages를 설치한다. 3. root에 있는 package.json 파일에 scripts 부분을 수정해줍니다. "predeploy": "npm run build", "deploy": "gh-pages -d build" 위의 코드 2줄을 scripts에 추가 후, 마지막에 homepage를 추가해줍니다. https://git아이디.github.io/repository이름 그러면 코드가 위의 이미지처럼 작성이 되어있을겁니다! 4. 배포를 위해 npm run deploy 를 입력합니다. Published로 ..

https://beta.reactjs.org/learn/rendering-lists Rendering Lists A JavaScript library for building user interfaces beta.reactjs.org 렌더링 목록 데이터 컬렉션에서 유사한 여러 구성 요소를 표시하려는 경우가 많습니다. JavaScript 배열 메서드 를 사용하여 데이터 배열을 조작할 수 있습니다 . 이 페이지에서는 filter()및 map()React를 사용하여 데이터 배열을 필터링하고 구성 요소 배열로 변환합니다. 배열에서 데이터 렌더링 콘텐츠 목록이 있다고 가정해 보겠습니다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríq..

https://beta.reactjs.org/learn/conditional-rendering Conditional Rendering A JavaScript library for building user interfaces beta.reactjs.org 조건부 렌더링 구성 요소는 종종 다른 조건에 따라 다른 것을 표시해야 합니다. ifReact에서는 명령문 &&, 및 ? :연산자 와 같은 JavaScript 구문을 사용하여 조건부로 JSX를 렌더링할 수 있습니다 . 조건부로 JSX 반환 PackingList여러 s를 렌더링 하는 구성 요소가 있다고 가정해 보겠습니다. 이 구성 요소 Item는 패킹된 것으로 표시되거나 표시되지 않을 수 있습니다. function Item({ name, isPacked })..

https://beta.reactjs.org/learn/passing-props-to-a-component Passing Props to a Component A JavaScript library for building user interfaces beta.reactjs.org 컴포넌트에 props 전달하기 React 컴포넌트는 props 를 사용하여 서로 통신합니다. 모든 상위 구성 요소는 props를 제공하여 하위 구성 요소에 일부 정보를 전달할 수 있습니다. Props는 HTML 속성을 생각나게 할 수 있지만 객체, 배열 및 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다. 익숙한 Props props은 JSX 태그에 전달하는 정보입니다. 예를 들어, className, src, a..

https://beta.reactjs.org/learn/writing-markup-with-jsx Writing Markup with JSX A JavaScript library for building user interfaces beta.reactjs.org JSX로 마크업 작성하기 JSX 는 JavaScript 파일 내에 HTML과 유사한 마크업을 작성할 수 있는 JavaScript용 구문 확장입니다. 컴포넌트를 작성하는 다른 방법이 있지만 대부분의 React 개발자는 JSX의 간결함을 선호하며 대부분의 코드베이스는 이를 사용합니다. JSX: JavaScript에 마크업 넣기 웹은 HTML, CSS 및 JavaScript를 기반으로 구축되었습니다. 수년 동안 웹 개발자는 콘텐츠를 HTML로, 디자인을..

https://beta.reactjs.org/learn/your-first-component Your First Component A JavaScript library for building user interfaces beta.reactjs.org 리액트 구성요소 export default function Profile() { return ( ) } 1단계 : 구성요소 내보내기 export default접두사는 표준 JavaScript 구문 입니다(React에만 해당되지 않음) . 나중에 다른 파일에서 가져올 수 있도록 파일의 주요 기능을 표시할 수 있습니다. 2단계 : 함수 정의 Profile라는 이름 으로 JavaScript 함수를 정의합니다 . function Profile() { } 🔔 Reac..