자바스크립트 (96) 썸네일형 리스트형 [js] 대상 객체에 마우스 호버 시 적용되는 애니메이션 만들어보기 결과물 - 배율 0.25 추천 HTML 삽입 미리보기할 수 없는 소스 HTML 코드 성인 이신가요? 맞습니다. 아닙니다. CSS 코드 * { margin: 0; padding: 0; color: white; cursor: none; } body { background: linear-gradient(0deg, rgb(127, 131, 204), rgb(132, 33, 74)); position: relative; width: 100%; height: 100vh; overflow: hidden; } /* 모달창 전체 컨테이너 */ .modal_con { position: relative; border-radius: 5px; width: 400px; height: 200px; position: absolute.. [js] 브라우저 화면의 중간값을 구하기(중심축을 이용한 애니메이션) 결과 HTML 삽입 미리보기할 수 없는 소스 구하는 법 clientX, 와, clientY 는 유저가 현재 브라우저 화면을 바라봤을 때 시야에 들어오는 가로축과 세로축 전체를 의미한다. 또한 고정된 값이 아니라 지속적으로 변화된 값을 추적하기 때문에, 유동적이다. 또한 innerWidth 와 innerHeight 도 동일하게 유저가 인지 가능한 시야에 보이는 브라우저 내부 창의 총높이과 넓이와 동일하다. 그래서 최대값만 보았을 때 client 값과 inner 값은 서로 동일하다. 다만, 고정적인 값이기 때문에 브라우저를 새로고침하지 않는 이상 변화된 값이 브라우저에 반영되지 않는다. 이러한 특성을 이용하여, client 축의 시작점, 중간지점, 끝지점의 위치값과 inner 값의 차이를 이용하면 중간지점을.. [js] 간단한 마우스 커서 애니메이션? 만들기 간단하게 만들어볼 결과물 HTML 삽입 미리보기할 수 없는 소스 html 작업 div 박스에 mouse 클래스 속성값을 추가하고, 자식 요소로 span 태그를 두 개 생성한다. CSS 작업 만들어진 커서 이외의 기본 커서는 보이지 않도록 cursor : none 을 전역으로 설정한다. 부모 태그인 div 가 절대위치인 absolute 여야 left, top 등의 position 속성이 적용되므로 주의한다. *{ margin: 0; box-sizing: border-box; cursor: none; } body{ background-color: black; color:white; height: 100vh; width: 100%; } /* 포지션이 절대적 위치여야 left, top 과 같은 포지션 속성을 적.. [간단정리js] 자바스크립트 타입검사 시 == 연산자 대신 === 사용하기 타입 캐스팅 자바스크립트는 동적 언어라서 엄격한 타입 지정을 요구하지 않는다. 따라서 타입을 따로 지정하지 않고 변수 선언과 동시에 값을 할당하게 되면, 그 값의 타입을 알아서 지정해주는 타입 캐스팅(형 변환)이 발생한다. 자바스크립트의 형변환과 === 을 사용해야 하는 이유 자바스크립트에서 형변환은 두 가지로 구분 된다. 하나는 암묵적 형변환 이고, 다른 하나는 명시적 형변환이다. 그 중 서로 다른 타입의 값을 비교할 때 발생하는 형변환을 암묵적 형변환이라 부른다. 예를 들어, 1 과 '1' 은 서로 다른 타입을 나타내지만, 자바스크립트는 문자열 숫자와 숫자형 숫자가 서로 만나면 숫자형 숫자가 문자열로 타입 변환이 생기는 것이 있다. 즉 1 + '1' = '11' 이 되는 신기한 결과가 발생하는 것이다.. [js] typeof 에서 null은 object 다. 흔히 자바스크립트에서 타입검사를 할 때 자주 활용하는 것 중에 하나가 typeof 이다. typeof는 원시값을 검사할 때는 정확한 결과를 반환하지만, null 의 타입을 검사하면 object 가 나온다. let example = null; console.log(typeof example); // 출력 결과: "object" 이는 자바스크립트의 초창기 오류인데, 현재는 이 오류를 고치기에는 많은 제약사항이 따라서 오류를 수정하지 못하고 있다고 한다. 즉, null 이 object 가 아닐 것이라고 생각하고, 접근하게 된다면 예상하지 못한 결과를 만들어 낼 수 있음을 인지하고 활용시 주의해야 한다. [js] 브라우저 렌더링 과정(2) - HTML 파싱 및 DOM 생성 한 번 공부한 내용을 글로 주저리 적어본다. 브라우저가 주소창을 통해 서버에 데이터를 요청할 때 흔히 기본 도메인을 포함한 주소로 GET 요청을 보내면, 아무런 Path 나 query 문자열을 입력하지 않아도 서버는 브라우저에게 파일을 담아서 응답한다. 그 이유는 기본적으로 루트 경로로서 브라우저의 메인이 되는 HTML 파일이 기본값으로 설정되어 있기 때문이다. 보통 기본이 되는 HTML 파일을 index.html 로 정의하는데, 주소창 경로의 끝 부분에 index.html 이 보여야 하지만, 암시적으로 보이지 않도록 디폴트되어 있다. 따라서 브라우저는 도메인 주소로 GET 요청을 보내면 main이 되는 HTML 파일(index.html)을 받아 렌더링한다. 하지만, 응답을 받은 HTML 파일에는 CSS.. [js] 브라우저의 렌더링 과정(1) - 주소창 사용자가 브라우저에 그려지는 화면을 완전히 보기까지의 과정을 브라우저 렌더링 과정이라 한다. 다시 말해, 브라우저가 서버에 화면에 그리기 위한 데이터들을 요청하고, 서버가 요청에 대한 응답으로 데이터를 보내주면, 브라우저는 받은 데이터로 화면을 그리는 일련의 과정을 의미한다. 이 때 브라우저가 서버에 요청하기 위한 창이 존재하는 데 그것이 주소창이다. 즉, 우리는 알게 모르게 서버에 요청을 하고 서버는 우리에게 필요로 하는 정보를 보내주고 있었 던 것이다. 위 예시에는 다 나와있지 않지만, 주소창은 https: 로 흔히 알고 있는 Protocol, www.duklook.com 형태의 Host(도메인) :60 형태의 Port /manage/newpost 와 같이 /로 구분되는 Path ?type=post&.. [javascript] reduce() Array.prototype.reduce(누적값, 배열의 요소, 기타옵션) 배열의 각 요소에 차례대로 접근하여 하나의 결과값을 반환하는 메서드 배열요소의 자리는 콜백함수가 1회 호출 시 마다 처리할 현재값을 나타낸다. 누적값은 실질적으로 배열요소인 현재값을 처리할 시 산출되는 결과이다. 초깃값이 지정되지 않으면, 누적값에는 배열의 0번째 요소가 들어가고, 배열요소(value)는 배열의 1번째 요소부터 차례대로 들어간다. 누적값은 초깃값이 지정되면, 초깃값이 누적값을 대체하며, 배열요소는 기존의 1번째 요소가 아닌 0번째 요소부터 차례대로 대입된다. 초깃값을 5로 지정했으므로 누적값의 자리에는 초깃값이 들어간 것을 확인할 수 있다. 누적값에 별도의 값을 더하면, 그 값이 누적값에 더해지며, 콜백함수가 호출.. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
