본문 바로가기

전체 글

 (64)
TIL no.9 - let / const / var 차이 Scope는 무엇인가요? -각 상수나 변수 등의 요소들이 허용된 영역, 범위를 말합니다. Hoisting이란 무엇인가요? -모든 선언을 가장 위로 끌어올린다는 의미입니다. 함수를 선언하기 이전에 함수의 값을 사용한다는 것이 안되지만 , var 변수는 hoisting이 가능하기 때문에 변수 선언 이전에 호출하고 이후에 변수를 선언하여도 오류없이 처리되는 것을 볼 수 있습니다. var 변수 : 값을 변경할 수 있을 뿐 아니라 언제든 다시 선언할 수 있습니다. const 상수 : 선언할 때 값을 넣어주어야 하고 한번 넣은 값은 바꿀 수 없는, 상수를 말합니다. let 변수 : 선언과 값 정의 따로 할 수 있다. 넣은 값을 이후 얼마든 바꿀 수 있지만 선언을 다시 하는 건 못하게 되어 있습니다. *const와 ..
TIL no.8 - forEach method :JavaScript forEach는 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) 배열에 대한 반복문이라고 이해할 수 있습니다. 배열의 각 요소에 대해 callback을 실행합니다. 배열을 변형하지 않기 때문에 중간에 break; 문을 사용할 수 없습니다. 중간에 멈춰야 하는 경우엔 forEach()는 적절하지 않기 때문에 for()문을 사용해야 합니다. for 반복문을 forEach() 로 바꾸기 1 let members = ['최하늘', '김지선', '박아인']; for (var i = 0; i < members.length; i++) { member = members[i]; System.ou..
TIL no.7 - appendChild 함수 앞 뒤 html에서 이렇게 구현되게 하기 위해서 이를 javascript로 function cardSetting(row, column) { for (var i = 0; i < row * column; i++) { var card = document.createElement('div'); card.className = 'card'; var cardInner = document.createElement('div'); cardInner.className = 'cardInner'; var cardFront = document.createElement('div'); cardFront.className = 'card-front'; var cardBack = document.createElement('div'); c..
TIL no.5 - Javascript 기초 공부 정리[2] Strings "hi " + "goodbye" -> "hi goodbye" 자바스크립트 이스케이프 문자는 모두 백 슬래시로 시작하며 문자열에서 탈출하여 문자열에 유효하지 않은 특수 문자를 작성하는 방법입니다. "she said \"goodbye! \" " -> "she said "goodbye! " " Variable 변수 var : 가변적이다. 변수를 선언하고 같은 변수에 다른 값을 선언했을 때, 새로운 값으로 덮어 씌워진다. undefined는 아무 것도 뜻하지 않는다는 의미 alert(''); console.log(''); prompt(""); Logical Operators -AND, OR, and NOT &&(AND) 양면이 다 참인 경우 x < 10 && x !== 5 : x가 10보다 작고 ..
TIL no.4 - Javascript 기초 공부 정리[1] wecode 사전 스터디 3주차로 JavaScript 미니게임을 만들기 전에 이론을 더 공부해야겠다고 생각했습니다. 그래서 일단 예시로 주어진 순수 자바스크립트를 이용한 2D 벽돌깨기 게임을 공부하면서 배운 이론을 정리하려고 합니다. 아직 자바스크립트로는 기초적인 이론만 배운 상태라 활용하기가 어려운 실력이라서 그런지.. 코드를 보고 따라하면서도 이 코드를 보지 않았어도 이것을 구현해내기 위해 이 코드를 만들 수 있었을지 의문이 드네요.. 그래도 열심히 알려고 노력하다보면 나중엔 답이 보이지 않을까..싶습니다 🤩💪🏻 setInteval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다. clearInteval 함수를 사용하여 중지할 수 있습니다. setTimeout 함수 : 일정한 시간 후..
TIL no.3 - position tag : CSS position tag의 Default 값은 static이다. relative : 원래 있어야 하는 아이템에서 옮겨간 것. absolute : 내가 담겨있는 상자 안에서 움직인 것. fixed : 상자에서 아예 벗어나서 페이지 상에서 움직인 것. sticky : 스크롤해도 원래 있던 자리에 붙어있는 아이. relative는 상대 위치 지정 요소로 원래 위치에서 세로축(top, bottom), 가로축(left, right)으로 거리를 지정할 수 있습니다. absolute는 절대 위치 지정 요소 중 하나이지만 static 속성을 가지고 있지 않은 부모를 기준으로 상대적으로 배치합니다. #parent { position : relative; width: 500px; height: 500px; } #child ..
TIL no.2 - Element.scrollIntoView() id만 알고 querySelector, getElementId 를 이용해서 그 element를 가지고 오면 그 element 자체에 있는 scrollIntoView를 이용해서 스크롤이 가능하게 해준다. 즉, 엘리먼트 자체에 있는 인터페이스로 엘리먼트의 parent 컨테이너에 스크롤이 된다. 이 기능을 사이트에서 navbar를 만들 때 각각의 section으로 스크롤이 되는 기능을 추가하기 위해 사용할 수 있습니다. Home About Skills Contact 이 엘리먼트를 id로 가져와 스크롤하여 각각의 위치로 가게 하기 위해 이와 같이 script 부분을 작성할 수 있습니다. HTMLElement.dataset 속성도 사용되었는데 이것은 읽기 전용 속성으로 사용자 지정으로 (data-*)을 작성하고 ..
TIL no.1 - flexbox _ css 속성 정리 *flexbox는 container나 각각의 item에 적용 가능한 속성값이 존재합니다. display: flex; (아이템이 자동으로 왼쪽에서부터 오른쪽까지 정렬) flex-direction : row-reverse(반대로 수평) column-reverse(반대로 수직) flex-wrap : nowrap(기본값-한줄에) wrap(꽉차면 다음줄로) flex-flow : column nowrap; (두가지 속성을 묶어서 정의 할 수 있다. justify-content : flex-start(기본값) flex-end(오른쪽축으로 배치) center(가운데로) space-around(박스를 둘러싼다 스페이스로) space-evenly(같은 간격의 스페이스) *아이템을 어떻게 배치해 줄 것인지 align-ite..

티스토리툴바