HTML 특수문자 사용하기     페이지 넘길때 사용하는 , >>등 이러한 특수문자를 어떻게 사용하는지 서치 해보았다.나같은 경우 span 태그안에 ex) ‹ 이렇게 작성하면 해당 문자의 특수문자가 나온다 ❗️사이트 공유https://www.digitalmediaminute.com/reference/entity/index.php HTML EntitiesThis page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by the W3C. If you find it helpful we'd really a..

HTML input 태그 readonly 속성    정의 및 특징 태그의 readonly 속성은 요소의 입력 필드가 읽기 전용임을 명시합니다. 읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다.따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값을 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있습니다. disabled 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만, readonly 속성이 명시된 입력 필드의 값은 서버로 제출됩니다. readonly 속성은 불리언(boolean) 속성입니다.불리언 ..

JavaScript 현재 페이지 새로고침하는 방법     ❗️location 객체에서 제공하는 reload() 메서드를 사용하는 것입니다.location은 전역 객체인 window의 프로퍼티이므로 아래 두 가지 방법으로 reload() 메서드를 호출할 수 있습니다.location.reload();window.location.reload(); 매개변수 존재하지 않습니다.반환 결과 존재하지 않습니다. 참고로 reload()대신 replace()를 사용하고 가로안에 위치를 지정해주면 해당위치로 이동한다.   🔥참고자료https://developer.mozilla.org/ko/docs/Web/API/Location/reload Location.reload() - Web API | MDNLocation.relo..

CSS 미디어 쿼리 문법    only | not의 위치에는 말 그대로 only 키워드 또는 not 키워드가 들어가게 되는데  only 키워드는 뒤의 조건 만 , not 키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only 키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only 키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다. ❗️미디어 타입의 종류 ( 많지만 자주 쓰이는 것만 적어 봤습니다.)- all : 모든 미디어 타입- print : 인쇄 용도- screen : 컴퓨터 스크린 ❗️미디어 쿼리문의 속성과 속성 값 - width: 웹페이지의 가로 길이를 판단합니다.- height: 웹페이지의 세..

JavaScript - undefined, null의 차이   undefined 변수나 인수를 선언하고 초기값을 할당하지 않은 상태의 값이다. 즉, 자료형이 없는 상태를 말한다. null 변수를 선언하고 빈 값을 할당했다고 지정한 상태를 말한다. 자료형은 object가 나온다. typeof null; //'object'typeof undefined; //'undefined' typeof를 찍어봐도 이런 차이가 있지만 null의 경우  object가 나와서 타입을 체크하는 경우 아래와 같은 문제가 발생할 수 있다. typeof []; //'object'typeof null; //'object' 배열을 체크하고 싶을 때, 배열도 object로 구분된다. 배열인지 체크를 하고 있지만 null인 경우에도 체크가..

CSS의 Cascading    Cascading이란?최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 걸 말합니다. 우선순위가 높은 규칙일수록 우선적으로 속성을 적용합니다. 규칙선택자마다 명시도 점수가 있고 명시도를 고려한 우선 적용되는 순서는 아래와 같습니다. - !important (명시도와 무관하지만, 명시도에 직접 영향을 미침, 다른 선언보다 우선함) - 인라인 스타일 정의 (인라인 스타일은 항상 외부 스타일시트의 모든 스타일을 덮어쓰기때문에 가장 높은 명시도를 갖는다고 생각할 수 있음)- 명시도     - 아이디 선택자      - 클래스 선택자, 속성 선택자, 가상(pseudo)클래스 선택자      - 태그 선택자, 가상(psuedo)..

CSR vs SSR vs SSG    Client Side Rendering (CSR)CSR은 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링하는 방식을 말합니다.👍장점▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.👎단점▪️ SPA(Single Page Application)의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를..

JavaScript Event Handler 모음    onabort이미지의 다운로드를 중지할 때 (브라우저의 중지버튼)onactivate개체가 활성화될 때 발생(태그의 기능이 작용할 때 발생하는 이벤트로 예를 들어 링크를 누를 경우 링크가 옮겨질때 발생하는 것을 감지하는 이벤트 핸들러)onafterprint문서가 출력되거나 혹은 출력하기 위해 출력미리보기를 한 후에 발생onafterupdate데이터영역 개체에서 발생하는 이벤트로 데이터 소스 오브젝트내의 데이터가  업데이트 되었을 때 발생(데이터 개체부분 참조)onbeforeactivate개체가 활성화 상태로 되기 바로 직전에 발생 (onactivate 참고)onbeforecopy선택 영역이 시스템의 클립보드로 복사되기 바로 직전에 발생onbeforec..

배열 메서드 - (6가지 요소 조작 메서드)   1. push배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];arr1.push(4);console.log(arr1); // [1, 2, 3, 4] 만약 이때, 여러개 요소를 추가 하고 싶다면 , 를 사용하면 됨let arr1 = [1, 2, 3];arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7] 하나 더! push 메서드는 요소들을 추가하고 난 다음에 변환된 배열의 길이를 반환함let arr1 = [1, 2, 3];let arrLength = arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7..