본문 바로가기

2024/08

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>원 안에 ..
GSAP 플러그 - 스크롤 트리거
GSAP 플러그 - 스크롤 트리거 2024. 8. 19. 애니메이션에서 중간단계를 사용하도록 하는 메서드https://gsap.com/gsap.to() : 애니메이션의 끝나는 속성을 지정body>    div class="box">div>        script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js">script>    script>        //gsap.to("타겟", {        //    속성값,        //    속성값, //필요한 속성값은 사이트에서 찾아 넣는다.        //}) 어떻게 변하라고 명령을 넣는것.        //gsap.to()는 애니메이션의 끝나는 속성을 지정        gsap.to(".box", {            x: 6..
svg
svg 2024. 8. 14. body>        svg width="300" height="300" viewBox="0 0 300 300">        text font-size="30" font-family="Times New Roman" x="30%" y="40%" fill="yellow" >Hyper Linktext>        text font-size="30" font-family="Times New Roman" x="30%" y="60%" fill="none" stroke="blue" font-weight="900"           letter-spacing="5" >Hyper Linktext>    svg>body>텍스트 또한 만들어 낼 수 있으면 css에서 적용한 color는 fill로 지정하고 글자의 라인만..
객체 설명
객체 설명 2024. 8. 12. 객체기반 언어 - 객체.메서드 - 객체.속성 BOM - window,alert() - window.scrollY - history.back() DOM - document.querySelector().offsetTOP - document.querySelectorAll() 내장객체 - let aa=new Date() - 날짜정보객체 - aa.getFullYear();  - Math.floor() 함수 - 식이나 변수를 저장하는 곳으로 반복되는 식을 적용할 때 사용한다. 선언적 함수function 함수명(){        스크립트} 함수호출함수명() 익명함수 선언 (충돌을 줄이고자 설정)let fun=functon(){     스크립트}fun();매개변수가 있는 함수 - 외부에서 전달되는 데이터를 반듣 매개변..

티스토리툴바