기록 :-)

6.1 저번 시간에는 명언을 랜덤으로 배치했다면 이번에는 배경이미지를 랜덤 배치해볼거다. 개념이 조금 겹치니 참고하실 분은 참고하세요 !! 2022.06.16 - [웹 개발/javascript] - 바닐라 js 2주 챌린지 6.0강 정리 ✨

6.0강은 명언파트다 ! 홈페이지를 새로고침할때마다 다양한 명언들이 랜덤으로 뜨는 걸 구현해볼거다. 우선 html에 명언과 작가의 이름을 넣게끔 , 태그를 생성해준다. const quotes = [ { quotes: "이 세상에 위대한 사람은 없다. 단지 평범한 사람들이 일어나 맞서는 위대한 도전들이 있을 뿐이다.", author:"윌리엄 프레데릭 홀시", }, { quotes:"해보지 않고는 당신이 무엇을 해낼 수 있는지 알 수 없다.", author: "프랭클린 아담", }, { quotes:"위대한 업적은 대개 커다란 위험을 감수한 결과이다", author:"헤로도토스", }, ]; // 명언 준비 실제로는 명언을 한 10개 정도 준비했는데 다 적기에는 많아서 세개만 적어줬다 ! const quot..

5.0 setInterval과 setTimeout 에 대해서 본격적으로 배운다. const clock = document.querySelector("#clock"); function sayHello(){ console.log("Hello"); } setInterval(sayHello, 1000); // 1초마다 sayHello가 반복 setInterval : 원하는 코드를 바로 실행하지 않고 지정한 시간마다 반복적으로 실행하는 함수 시간은 밀리초 (ms) 단위를 사용한다. const clock = document.querySelector("#clock"); function sayHello(){ console.log("Hello"); } setTimeout(sayHello, 1000); // 1초마다 sa..

if문과 length를 사용하여 글자수를 제한둘 수 있다. --> 근데 html에 이미 기능이 있으니 그 기능을 이용하자 input, button은 form태그로 감싸야한다 ! 하지만 버튼을 누르거나 enter를 치면 자동으로 submi되는게 기본동작이기때문에 그걸 막기 위해서는 preventDefault()를 사용하면 된다 ! function onLoginSubmit(e){ e.preventDefault(); } //기본동작을 막아서 submit을 지연시킴 쓰는 법은 간단하다 ! 함수 첫줄에 적고 그 다음줄에 변수를 저장하거나 보관하는 코드를 적으면 된다 백택 (``) h1.innerText = `Hello ${username}`; h2.innerText = "Hello" + username; 백택을 ..

3.0 document console에 document를 입력하면 작성한 html을 확인할 수 있다. document는 쉽게 설정하자면 브라우저에 존재하는 object ! 콘솔에 document.body 입력시 body 호출 가능 --> js를 통해서 html, css에 접근가능하다. 3.1 - 3.2 document라는 함수 중에는 getElementById라는 함수가 존재하는데 이 함수는 html에서 id를 통해서 element를 찾아주는 함수다. 이 element를 찾으면 id, className, innetText등 의 값들을 변경하거나 가져올 수 있다. getElementById : html에서 id를 통해서 element를 찾아주는 함수 getElementByClassName : classNa..

6월 6일부터 시작한 바닐라js 2주 챌린지 ! 더 원활한 공부를 위해 기록 시작 :) function : 함수 계속 반복해서 사용할 수 있는 코드 조각이라 생각하면 이해하기 쉽다. function 함수명 (argument){ 실행코드 } argument(인수)는 소괄호안에 위치하며 함수를 호출할 때 전달되는 값이다. const player = { age: 20, sayHello: function(myName){ console.log("Hello " + myName); } }; player.sayHello("seYeon"); //Hello seyeon argument는 myName이고 seYeon을 넣어줬다 결과는 Hello seYeon object안에 function을 넣어서 가벼운 계산기도 만들 수 ..

$ pwd /c/Users/SY git bash에 들어가서 pwd를 입력하면 현재 파일 위치를 파악가능하다. cd /n/nn/nnn cd를 통해서 원하는 위치로 이동해준다. n은 파일명 ! $ git config --global user.name [github 이름 ] $ git config --global user.email [github 이메일] 이름과 이메일을 입력하고 $ git init git init을 입력하면 폴더안에 .git이라는 폴더가 생성된걸 확인 할 수 있다 $ git add . $ git commit -m "커밋메시지입력" 들어갈 메세지를 입력해준다. $ git push -u origin master origin은 Repository로 이동 후 , HTTPS의 url의 값을 복사해서 ..

어떤것부터 다시 공부를 할지, 뭘 만들지 고민하던 와중에 노마드 코더의 클론코딩으로 크롬 만들기를 발견하였다. 근데 더 자세히보니 2주 완성 챌린지가 있길래 얼른 신청하였다. 다시 시작한거 처음부터 빡세게하는게 나을거같다는 내 판단이다 졸업하는게 은근 어렵다는데,,, 졸작까지 잘 만들어서 무사히 수료 후에 티스토리에 후기써야지 ! 일주일뒤인 6월 6일부터 시작하니까 그전에 예습많이 해둬야지 ✨

다시 공부하려고 정리하는 뒤죽박죽 css 기초 개념 text-decoration-line none : 꾸밈 없음 underline : 텍스트 아래 밑줄 overline : 텍스트 위에 줄 line-through : 텍스트 중간 선 text-decoration-color 라인의 색 text-decoration-style 선의 모양 solid: 굵은 선 wavy : 물결모양 dotted : 점선 dashed: 짧은 막대선 double: 이중선 font 크기 font-weight: normal; 과 font-weight: 400; 과 같고 font-weight: bold; 과 font-weight: 700;은 같음 굵기는 100 ~ 900 까지 있음 ( 100 단위 ) 폰트에 따라 지원되는 크기는 다름 div..

[1]에 이어서 github.io 블로그 만들기 시작 ! 원래는 다운받은 테마를 약간만 수정해서 내 사이트를 만드려고 했는데 처음부터 끝까지 직접 만들어보고 싶은 욕심이 생겨서 다시 시작하기로 했다 :-) 원래 존재하던걸 삭제 후 다시 Repository 생성 ! (새로운 마음으로 해야지,,) git clone HTTPS 주소 복사 후 git clone 주소 를 입력해서 복사해주기 ! index.html을 추가했다. 가볍게 구성한 틀을 적어봤다. 잘 되는지 확인 완료 ! css, js를 이용해서 계속 꾸며야지 :-)