전체 글 리액트 2024. 9. 5. //부모 컴포넌트의 state는 자식 컴포넌트에서 바로 사용할 수 없다.//props를 통하여 부모 컴포넌트의 state를 자식 컴포넌트에게 전달한다.//props 사용방법//1. 자식 컴포넌트에 이름={state명}//2. 자식 컴포넌트 함수에 props라는 파라미터를 입력 후 사용할 수 있다. //자손변수를 선언하였지만 부모안에 있는 자손변수를 다시 한번 선언해주어야 state를 전달할 수 있고 꼭 props와 함께 선언해주어야 한다. import Logo from './../images/logo.png'function Header(){ function toggleGnb(){ document.querySelector(".gnb_btn").classList.toggle("active.. 리액트 2024. 9. 3. import 로 불러오고 export로 닫아준다. return 안에는 html형식을 넣어주는데 이때 안에 넣어주는 언어를 jss 라고 한다. 여기서 주의할 점은 단일태그를 기존 html에서는 닫지 않아도 되었지만 여기서는 닫는 태그를 넣어 주어야 닫힌다. 이 안에서 해당 내용이 바뀐다고 생각해주고 div 태그는 꼭 유지 해주어야한다.여기서는 css를 사용하는것과 같이 진행해주면 된다.데이터 바인딩으로 데이터를 선언하고 {} 로 jss 언어의 리액트 언어를 사용해서 해당 내용을 넣을수 있는 자바를 실행한다. import './App.css';function App() { let test="JAVASCRIPT"; return ( div className="App"> div classN.. 리액트 2024. 9. 2. https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org선 뒤의 내용을 원하는 폴더명이다. SCSS 2024. 8. 30. 제이쿼리 2024. 8. 27. - 속성 조정 메서드body> div class="container"> nav class="nav"> ul class="gnb"> li> div class="main"> strong>HTML5/CSS3strong> button type="button" class="open"> i class="blind">메뉴열기i> span>span> span>span> .. 자바스크립트 2024. 8. 26. script> let str="ABC" console.log(str.toLowerCase()) script>문자에 대한 메서드로 대문자 소문자 변환하는 메서드이다. 위는 대문자 이기때문에 콘솔에서는 소문자로 나타나게 된다. let str="JAVASCRIPT"; console.log(str.indexOf("V")) indexOf는 변수안에 들어있는 값에서 인덱스 번호를 찾아주는 것이다. let str="JAVASCRIPT"; console.log(str.indexOf("B"))만약 해당 문자가 입력되어있지 않다면 -값으로 표시되지 않는것을 알 수 있다.위의 내용들을 통해서 사이트에서 데이터를 저장하는 변수를 선언하고 해당 변.. 마우스 이벤트 (목업적용) 2024. 8. 23. body> div class="container"> div class="mockup-wrap"> div class="mockup"> img src="./mockup.jpg" alt=""> div> div class="mask"> img src="./site.jpg" alt=""> div> div> div>body>구조 적용할 목업을 위에 두고 마스킹할 영역을 지정하고 그 안에 이미지를 넣어서 구조를 배치해준다. style> *{ margin: 0; padding: 0; .. 문서객체생성 2024. 8. 22. createElement는 html에서 요소를 생성할때 쓰는 메서드로 아래와 같이 변수를 선언하고 그 변수안에 요소를 집어넣고 appendChild로 해당 변수를 자식요소로 만들어서 body에 넣을 수 있다.head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle>head>body> script> const header=document.createElement("h1"); header.textContent="문서객체생성" document.body.appendChild(header); scr.. mousewheel 2024. 8. 21. script> document.querySelector("#box").addEventListener("wheel", (e)=>{ //console.log(e.deltaY); if(e.deltaY>0){//마우스휠을 밑으로 내렸을때 document.querySelector("#box").style.background="skyblue"; document.querySelector("#box").textContent="마우스 휠을 밑으로 내렸습니다."; }else{//마우스휠을 위로 올렸을때 document.querySelector("#box").style.ba.. 마우스이벤트 2024. 8. 20. body> div id="pos">0div> div class="circle">div> script> let pos=document.querySelector("#pos") //객체. 메서드() //객체. 속성 //마우스객체.pageX document.addEventListener("mousemove", (e)=>{ let x=e.pageX; let y=e.pageY; pos.textContent=`x축좌표:${x},y축좌표:${y}`; })//함수안에 영문을 넣으면 해당 영문의 이름이 된 함수의 값을 계속해서 설정한다. script>body>원 안에 .. 이전 1 2 3 4 ··· 7 다음
