TIL

군대에서부터 조금씩 시작해온 프론트엔드 공부를 전역 후 3개월만에 제대로 시작해보자 TIL을 작성하기로 했다. 바로 프로젝트를 시작하는것이 아닌 내가 모르는 부분과 잘 이해가 안됐던 부분들 기억이 나지 않는 부분부터 알아가보고자 복습을 먼저 해볼까한다.

function 객체 안에서 함수를 생성하고 그 함수를 console.log( ); 형식으로 사용할 수 있다. 객체 안에 있는 함수를 부를땐 객체명.property명(x); 이라고 적는다. ex) player2.sayhello( ); x에는 객체안에서 만들었던 함

1.AND 연산자 와 OR 연산자AND 연산자 (두 비교값 중 둘 다 true일 경우만 true) true && true === true; true && false === false; false && true === false; false && false === fal

1\. Javascript 안에서 클래스 지정하기 xx.className="YYY"위와 같이 html태그에 직접 클래스를 지정하지않고 Javascript내에서 클래스 지정이 가능하다하나 문제가 된다면HTML태그에서 클래스 지정, 수정을 했을 경우 위 if문을 실행

1.로그인 form로그인 form을 만드는데 HTML을 잘 이용하면 위와같이 javascript 내에서 EventListener을 사용할 필요없이HTML태그를 밑과 같이 변경하면 된다required는 필수라는 뜻인데 form에 무조건 데이터를 입력하게 끔 만들어주는

localStoragelocalStorage → 브라우저에 뭔가를 저장할 수 있게 해준다. 그래서 나중에 가져다가 쓸 수 있다.ex) localstorage.setItem("Item",data)→ Item은 저장될 아이템(저장소) 이름이고 값은 data이다localSt

setInterval setInterval은 지정한 시간마다 반복 하는 함수이다 (똑같은 함수를 여러번 사용하고싶을떄 사용한다) setInterval는 2개의 argument를 받는댜 첫 번째 argument는 실행하고자 하는 function이고 두 번째 argum

Math functionMath.random() → 0~1까지 랜덤한 숫자를 제공한다Math.random() \* 10 → 0~10까지 랜덤한 숫자를 제공한다random함수를 통해 제공받는 숫자는 float(소수점을 가지는)이다우리가 필요한 숫자는 integer(

Randomnessquotes를 랜덤 배정했을때와 같이배경화면도 Math.Random을 이용하여 삽입해볼려고한다일단 quotes를 설정했을때와 같이 코드는 똑같이 작성한다.createElement여태 html을 javascript로 불러 왔다면 이번엔 javascri

![](https://velog.velcdn.com/images/sunghyun1014/post/1a0f5ba8-6a5c-4d77-9008-6e5152f4b

1.navigator를 호출하면 브라우저에서 위치 좌표를 준다 (user의 위치정보를 얻는다, wifi나 gps 등등)위 함수는 2개의 argument를 갖는데하나는 모든게 잘 수행 됐을때 실행되는 함수다른 하나는 에러가 발생 했을때 실행되는 함수이다.위치 정보에서는

1.Object하나의 주제로 여러가지 값을 잘 정리할 수 있게 해준다2.user.age / user"age"console.log(user) => user를 통으로 보여준다 (name과 age와 fat)console.log(user.name) => user의 name만

123

오늘은 문제를 풀다가 새롭게 알아본것과 까먹을 것들을 작성해보았다.1.object에서 함수 넣기예전에 object 공부할때 무심코 지나간 함수 호출object내에서도 함수를 호출할 수 있다는것을 까먹고 있었다.obeject ABC에서 일반적으로 name을 선언해보았고특

오늘은 문제를 풀다가 classList 복습차원에서 인강을 겸하지 않고 혼자서 글자색이 내가 지정한 색일때 배경색을 바꿔주는 코드를 짜 보았다. 코드를 올리고싶지만 문제를 배포해주는곳에서 수업내용과 비슷한 종류의 내용은 배포금지. 개인블로그에 작성 금지라고 하셔서 안타

오늘도 여김없이 문제를 풀다가if문에서 게임을 하나 만드는데최대값을 정하고 내가 원하는 숫자가 나오면 종료되게끔 하는 게임이였다.문제는 위와 같은 코드를 예를 들어 설명하자면만약 최대값이 10 이고 원하는 숫자가 4라고 했을때원래대로라면 최대값이 더 크기 때문에 ale

어제 풀던 문제를 보완하다가form 태그안에 있는 input태그의 value 즉 input 태그의 type을 number로 지정하고 maxlength를 적용했는데웹에서는 적용이 되지않던것이다그래서 input태그에서 type을 number로 주었을때 maxlength를

Date 함수는 우리가 날짜로 무언가를 하기위해 많이 사용하는 함수이다1.Datenew Date() = 함수코드 기준시점의 날짜를 반환한다.now.getFullYear() 주어진 날짜의 연도를 네 자리를 반환한다.now.getMonth() 주어진 날짜의 월 값을 반환한

오늘 문제를 풀다가 만들고싶은게 생겨서 만들어보았다내가 만든것은 해당 버튼을 클릭할때 배경색이 바뀌는것을 만들었는데일반 단색을 표현한 것 뿐만 아니라 그라데이션 효과를 넣은 색도 삽입하게끔 만들어보았다하지만 중간에 함수에서 함수를 호출하는 것과 함수안에 객체를 넣고 객

CSS이전에 javascript를 공부하다가 마지막으로 css를 적용시키는 단계에서 활용한 속성들이다.1\. transitionCSS property값이 변화할때 일정시간에 거쳐 일어나도록 만드는 것이다.나는 transition을 유저의 이름을 받아오는 input 태그

1. grid-start , end area를 사용하지않고 gird-start AND end 로 요소들의 크기와 위치를 자유롭게 정렬할 수 있다. grid-column start AND end 는 첫번째 컬럼에서 시작하여 다섯번째 컬럼에서 끝나는게 아닌 첫번째 li

1\. grid grid는 대부분 부모클래스에서 사용한다grid 사용법은 flexbox와 비슷하다grid에는 여러가지 방법을 통하여 정렬할 수 있다.grid-template-columns: grid column을 정의 (열과 크기)grid-template-rows: g

\*\*코드를 좀 더 정확하게 해준다정확하게는 타겟하는 element를 더 정확하게 해준다위를 예시로 class box 안에 있는 h1의 color를 변경하고싶은데css에서 변경할려면처럼 작성해야할 것이다.하지만 Nesting을 이용하면 조금 더 쉽게 작성하면서 비슷

\*\*compile 하거나 transform 해주는 node.js packge 이다.새로운 코드를 오래된 코드로 바꾸거나 scss, sass를 평범한 css로 바꿔준다.1.variables=> scss에서 variables를 이용한땐 scss폴더에서 variables

\*\*1\. scss functionality를 재사용할 수 있게 해준다.2\. Mixins은 compile 될 수 없다.variables과 마찬가지로 앞에 밑줄(\_)을 사용하여 파일을 만들어야한다.맨처음에 @mixin ${name} <=(mixin의 이름)

\*\*=>같은 코드를 중복하고 싶지 않을때 사용한다. (객체와 비슷하다?)Mixins은 상황에 따라 다르게 코딩을 하고싶을때 사용하는거라면Extends는 말 그대로 다른 코드를 확장(extends)하거나 코드를 재사용 하고싶을때 사용한다.page에서 분리해야하는 el

Awesome Mixins and Conclusionsmixins에는 @content 라는 것이 있다.○ @content 1\. \_Awesome Mixins.scss2\. style.scssExample1\. \_Awesome Mixins.scss2\. style.c

글이 올라오지 않은 공백기엔 따로 내가하는 작업물에 대해서 어떻게 적어야할지 감이 안잡혀서 완성된 결과물을 올리기로 했다1.SCSS2.Site