전체 글 (367) 썸네일형 리스트형 [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 가 아닐 것이라고 생각하고, 접근하게 된다면 예상하지 못한 결과를 만들어 낼 수 있음을 인지하고 활용시 주의해야 한다. [CSS] rem, em 의 차이 rem "html 태그의 기본 font-size : 14px 에 비례하여 증가하는 단위" rem 은 HTML 태그 중에서 태그 자체에 적용된 font-size를 기준으로 결정된다. 현재 2023년을 기준으로 font-size는 기본 14px 가 암묵적으로 적용되어 있는데, 이 때 rem을 2rem 으로 설정한다면, 실질적으로 적용되는 px은 14px 에서 2를 곱한 28px 가 된다. 예를 들어, width : 5rem 으로 설정한다면,14px 에서 5를 곱한 70px 가 적용된다. 즉, width : 70px 가 되는 것이다. html { font-size : 14px } div { width: 5rem; -> 실질적으로 5 * 14px = 70px 적용 } em "em 단위를 적용한 해당 태그에 설정.. [HTML] <details> 및 <summary> 태그 "드롭다운이 가능한 HTML 태그" 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 이 기능을 사용하면 숨겨진 메뉴를 드롭다운 형식으로 나타나게 할 수 있다. 구글 바로가기 티스토리 바로가기 다음 바로가기 굳이 힘들게 드롭다운을 구현하지 않아도 간단한 것은 이 태그들을 이용하면 간단한 드롭다운 메뉴는 구현할 수 있을 듯 하다. 다만, 이 태그 내에 숨겨진 태그 요소들은 비디오 판독기를 필요로 하는 사람에게 친화적인 요소가 아니라고 하므로 사용에 주의가 필요해 보인다. -- 자세한 사용법은 아래 링크 참고 하자-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary : The Disclosure Summ.. error TS18003: No inputs were found in config file (지정된 경로에서 입력을 찾을 수 없다.) => 개발도구 재시작, rootdir 경로 파일 확장자 확인 만일 영문으로든 한글로든 '지정 경로에서 입력을 찾을 수 없다' 라는 에러가 뜬다면, 1. 일반적으로 현재 사용하고 있는 IDE 를 껐다가 키면 해결 된다. 이는 tsconfig.json 파일에서 설정된 옵션이 프로젝트에 곧바로 적용되지 않아서 생기는 경우 간혹 있기 때문 이다. 만일 위 방법을 해도 똑같은 에러가 생긴다면 2. 자신이 rootDir 로 설정한 경로에 파일의 확장자를 확인 해보자 백아니면 만퍼센트 .js 일 가능성이 높다. 만약에 .js 파일을 그대로 쓰고 싶어서 그런거라면, allowJs 이 옵션을 true 로 활성화 하자. 그럼 .js 파일도 컴파일 지원을 해준다. (이는 타입/바닐라 자바 두 프로젝트를 동시에 병행해야 하는 상황에서 유용할 수 있다. ) [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&.. 이전 1 ··· 32 33 34 35 36 37 38 ··· 46 다음
