본문 바로가기

전체 글

리액트
리액트 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
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
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>원 안에 ..

티스토리툴바