본문 바로가기

분류 전체보기250

(웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명) 무한 슬라이드 만들기 포스팅 요약 1. 결과 영상 2. 코드 3. 동작 원리 4. 깃허브 코드 5. 참고 링크 (일반 슬라이드, 3d슬라이드) 결과영상 * 안되시는 분들은 댓글에서 물어보셔도 됩니다 :) * 댓글에 남긴 메일로 압축파일 보내신 후 물어보셔도 됩니다 :) 코드 main.html ⟨ ⟩ JS/slideShow.js let slides = document.querySelector('.slides'); let slideImg = document.querySelectorAll('.slides li'); currentIdx = 0; slideCount = slideImg.length; prev = document.querySelector('.prev'); //이전 버튼 next = document... 2021. 8. 4.
(React)리액트 설치 및 실행법 상세하게(window & Mac) 리액트 설치 및 실행법 * 리액트 실행하는 방법이 변경되었습니다. * 현재 포스팅 보다는 업데이트 된 아래 포스팅 참고바랍니다. (링크 걸어놓았습니다 :)) 2022.05.05 - [웹/(React)리액트] - (React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준] (React) 리액트 설치 및 실행법 상세하게 이미지로 설명 [2022.05.05 기준] * 이미 node.js가 설치되어 있으신분들은 3번부터 참고해주세요 ^^ 1.node.js 다운 (기존과 같음) 2. 설치가 잘되었는지 확인하기 3. react 실행하기 - 방법 1: 원하는 폴더 이름으로 react 개 eunhee-programming.tistory.com 포스팅 요약 1. 리액트 설치 방법 2. 리액트.. 2021. 8. 3.
(GitHub)깃허브 페이지 404 에러 해결법 총 정리/깃허브 호스팅 404에러 깃허브 페이지 404에러 해결법 총 정리 *깃허브 404 에러가 뜬다면 아래 방법들을 보며 차근차근 문제점을 해결해 보세요. 문제: 1. 호스팅한지 시간이 별로 안지났을때 2. 메인 html 이름이 잘못됐을 경우 3. 이미지, 혹은 어떤 파일의 경로가 잘못됐을 경우 해결 방법 1: 호스팅 한지 몇 분 밖에 안지났을 경우 조금 더 기다려 본다. 소요시간 1분~10분, 그래도 안될 경우 아래 빈 커밋을 넣어준다. $ git commit --allow-empty -m "Trigger rebuild" $ git push 해결방법 2: 처음 시작시 들어가는 html이름이 index.html이 아니면 404 에러가 뜬다. (방법1) 처음 시작 html이름을 index.html로 바꾸던가, (방법2) 배포하는 링크 .. 2021. 8. 1.
(웹) 밑줄치기 효과/ hover시 밑줄 쳐지는 효과 구현하기(매우 간단) 밑줄 효과 주기 오늘은 마우스를 가져다 댔을때 밑줄이 스르륵 생기는 효과를 구현해 보겠습니다. position에 대한 이해도만 있다면, 혹은 슬라이드 구현을 해본적이 있다면, 이해하기 매우 쉬울거에요 :) 포스팅 요약 1. 결과 2. 코드 3. 동작 원리 4. 깃허브 코드 다운 [Result] [Code] HTML 원하는 곳에 밑줄 효과 넣기 밑줄 효과를 어디에 넣을까? 여기에 넣읍시다. 두 번째 밑줄효과는 어디에 넣을까? 요기에 넣읍시다. 세번째 밑줄효과는? 이쪽에 넣을 겁니다. 제 블로그 코드짜는 문과녀 많이 사랑해주세요. 도움이 됐다면 하트를 꾹 눌러주세요~ CSS #menual{ width: 100%; height:650px; padding-left: 400px; margin-top: 50px; .. 2021. 7. 30.
VScode(비쥬얼 스튜디오 코드) 탭간격 설정: 맥북 & 윈도우 VScode 탭간격 설정법 포스팅 요약 1. 맥북 설정법 2. 윈도우 설정법 Mac Os 1. VScode를 열은뒤 단축키 클릭 단축키: 'command' + ',' (cmd와 콤마)를 누르면 VScode설정에 들어가집니다. 혹은, 아래 사진과 같이 Code > Preferences > Settings (VSCode를 전체화면으로 열었을 경우, 위 도구창은 마우스를 화면위에 가져다 놓으면 보입니다. ) 2. tap간격 설정 원하는 탭 간격 숫자를 넣어줍니다. Window * 맥에서는 Code에 Preference가 있지만, 윈도우에서는 File에 Preference가 있습니다. 1. 화면 상단의 File > Preference > Settings 들어가기 2. Tab 간격 원하는 숫자 넣기 2021. 7. 26.
VS Code에서 html, css, 자바스크립트 정렬 단축키/ 단축키 확장프로그램 사용법 VS Code 정렬 단축키/정렬 확장프로그램 1. VSCode 마켓플레이스 들어가기 왼쪽 카테고리에서 빨간박스로 표시한 모양을 클릭하세요! 2. Beauty검색하고 설치하기 3. VS Code껐다 킨 후, 정렬할 파일 열어서 단축키 눌러 정렬하기. Mac Os는, command+Shift+B 를 누르면 되고, Window는, control+Shift+B를 누르면 됩니다. 참고로 HTML, CSS, JS는 정렬이 되는데 SCSS는 정렬이 안됩니다. Beauty말고도 다른 정렬 확장 프로그램이 많습니다. 더 편하고, 자기한테 맞는 프로그램을 찾아서 위와 같이 다운로드후 사용하시면 됩니다. 저는 Beauty가 편하더라구요 :) 도움이 되셨다면, 아래 하트꾹 눌러주세요!! 2021. 7. 23.

티스토리툴바