Gwni Lab GwniLab

javascript 수학 메서드중 하나인 Math.random()에 대해서 알아보겠습니다. 랜덤메서드는 0과 1 사이의 난수 값을 반환해주는 메서드로서 불규칙한 값을 뽑아내고 싶을때 사용합니다. Math.random(); 그냥 이렇게만 사용하면 0~1 사이의 난수로 소수점도 많이 나옵니다. 경우의 수가 아주 많아서 좋을 수도 있지만 범위를 조금 좁혀서 사용하는게 편할 듯 합니다. Math.floor(Math.random()*10); 이렇게 사용하게되면 floor를 이용해서 지저분한 소수점을 날려버리고 0.1, 0.2 가 아닌 정수로만 나오게 작업해주기 위해서 10을 곱해서 작업해줍니다. 그러면 1~9 사이의 난수가 나오게 됩니다. 10부터 20까지만 나오게 하고 싶다면 Math.floor(Math.ran..

오늘 학원에서 시험에 나온 문제 중 하나 입니다. function func(){ let i, j = 0; for( i = 0; i

혹시라도 여러분들은 다른 프로그래밍 언어를 사용해 본 경험이 있나요? 저는 처음 배운 프로그래밍 언어가 C++이었는데, 제가 기억하고 있던 this는 클래스로부터 생성되는 인스턴스 중 현재 객체를 가리키는 것으로 알고 있었습니다. 하지만 JavaScript에서는 this의 의미가 기존에 알고 있던 것과는 좀 다르게 사용됩니다. 따라서 이번 포스트에서는 JavaScript에서 this는 무엇이며, 어떻게 사용하는지에 대해 알아보도록 하겠습니다. 그때 그때 달라요 JavaScript에서 this의 값은 결정되어 있지 않습니다. 문맥에 따라 그 값이 바뀌죠. MDN 문서를 보시면 아래와 같은 부분을 확인할 수 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법이 결정합니다. 실행하는 중 할당으로 설정..

이번 스크립트 예제는 카드게임 만들기 입니다. //01. html/css 디자인 구성 //02. 클릭한 카드 뒤집기 //03. 두개의 카드 뒤집기 확인하기(첫번째, 두번째) //04. 클릭한 카드 두개의 이미지 가져오기 //05. 두개의 이미지 비교하기 //06. 틀린 이미지 애니메이션 효과주기 (shake) //07. 빨리 클릭하면 버그 발생 고치기 const cards = document.querySelectorAll(".cards li"); let cardOne, cardTwo; let disableDeck = false; function flipCard(e){ let clickedCard = e.target; if(clickedCard !== cardOne && !disableDeck){ clic..

벤더 프리픽스란? 벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. IE 크롬 파이어폭스 사파리 오페라 -ms- -webkit- -moz- -webkit- -o- 크롬과 사파리는 같은 웹킷 계열 브라우저이므로 같은 벤더 프리픽스를 사용합니다. [브라우저별 벤더 프리픽..

Resetting과 Normalize 최근 외국의 한 블로거를 통해 작업 전 기본적으로 브라우저별 태그에 대한 기본 스타일링을 제어하는 두가지 방법을 비교한 글을 본적 있다. 하지만 국내에서는 대부분 front-end개발의 아버지로 칭하는 Eric Meyer의 Reset.css를 사용하거나, yahoo가 내놓은 Reset.css를 사용 또는 국내 IT대기업인 네이버나 다음의 reset.css를 사용한다. 그리고 본인의 입맛에 맞춰 커스터마이징하여 사용한다. 필자는 다음의 reset.css를 커스터마이징해서 사용한다. 이처럼 국내에서는 아직 Normalize보다는 Resetting을 하는 추세이다. 일단 Resetting은 대충 사용해보았기때문에 알 것 같은데 Normalize는 무엇인가를 정확히 설명 할..

getAttribute() , attr() 둘다 선택한 요소에서 원하는 속성을 가져오고 싶을 때 사용합니다. //자바스크립트 let select = document.querySelector(".class"); let getAttr = select.getAttribute("class"); select.textConetent =getAttr; //제이쿼리 let getAttr = $(".class").attr("class"); $(".class").text(getAttr); 이러한 차이가 있습니다. 제이쿼리를 이용하면 더 간편하게 작업을 할 수 있습니다. 하지만! 제이쿼리의 가장 큰 단점은 속도입니다. 속도가 순수 자바스크립트로 코딩한 것보다 현저히 느립니다. 특히 애니메이션을 할 경우, 브라우저가 지원하는..

CSS 단위 CSS에는 크기를 나타내는 단위가 있습니다. 많이 사용하는 대표적인 크기 단위는 px, em, %이 있습니다. px (픽셀) px(픽셀)단위는 화소 1개의 크기를 의미합니다. 이 px의 크기는 디바이스에 따라 제각각이기 때문에 명확하지가 않습니다. 따라서 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식합니다. em em은 배수 단위로 상대 단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적인 사이즈를 설정합니다. % %는 백분율 단위의 상대단위입니다. 요소의 지정된 사이즈(상속이나 기본값)에 상대적 사이즈를 설정합니다. 다양한 단위의 종류 단위 관련 사항 em em은 상위 요소의 font-size를 정의합니다. ex)1.5em 이런 식으로 정의합니다. rem Root em..