최씨네 :: 개발공장

active, hover, press 차이 CSS에서 :active, :hover, 그리고 :focus는 요소에 사용자 상호작용에 따라 다르게 스타일을 적용하는 데 사용되는 가상 클래스(가상 선택자)입니다. 이들 각각의 동작과 차이점은 다음과 같습니다: hover : 마우스를 올리고 있는 동안 active : 마우스를 클릭하고 있는 동안 visited : 마우스를 한번 클릭 한 이후 :active: - :active 가상 클래스는 요소가 활성화되었을 때 적용됩니다. ⓐ 이는 주로 클릭한 순간에 발생합니다. ⓑ 예를 들어, 버튼을 클릭하면 버튼이 활성화되어 눌린 상태를 나타내기 위해 :active 스타일을 적용할 수 있습니다. ```javascript button:active { background-col..

다중연산자는 모두가 알고 있다. 그럼 3개 이상은 어떻게 구현해야 할까,,? - 구문 condition ? exprIfTrue : exprIfFalse 조건 연산자는 아래와 같이 연결해 사용할 수 있다. 이는 연결된 if … else if … else if … else와 유사합니다. function example(…) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4; } 위 코드는 아래의 연결된 if ...else 문과 동일하다고 볼 수 있다. function example(…) { if (condition1) { return value1; } else if (cond..

이번 포스팅은 자바스크립트에서 지역변수와 전역변수의 차이에 대해서 포스팅할 것이다. >>> 변수의 유효 범위(variable scope) 자바스크립트에서 객체나 함수는 모든 변수(variable)이다. 변수의 유효 범위 (scope) 란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다. 자바스크립트에서 변수는 유효 범위에 따라 다음과 같이 구분된다. 1. 지역 변수(local variable) 2. 전역 변수(global variable) A. 지역 변수(local variable) 먼저, 지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킨다. 이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다. 함수의 매개변수 또..

이번 주제는 웹 스토리지(localStorage, sessionStorage) 사용 방법에 관하여 포스팅 한다. 자바스크립트로 웹개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생긴다. 그럴때는 대부분 데이터베이스의 서버나, 클라우드에 데이터를 저장하게 되는데, 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방한 데이터 혹은 토큰과 같이 일회성 데이터일 경우 브라우저 내에서 데이터를 저장하도록 한다. 이번 포스팅에서는 브라우저 내에 데이터를 저장하도록 하는 웹 스토리지 기술인 로컬 스토리지, 세션스토리지에 대해서 알아보도록 하자. - 로컬 스토리지(localStorage) - 세션 스토리지(sessionStorage) >>> 로컬 스토리지(localStorage) 와 세션 스토리지(se..

NVM(node version manager)은 node.js 버전 매니저로 시스템에 여러 개의 node.js 를 설치하고, 사용할 버전을 쉽게 전환할 수 있도록 도와주는 유틸이다. node.js 버전 별로 최신 latest 가 가장 선호되기는 하지만 예전에 만들어진 라이브러리들이 최신버전과 호환이 안되는 경우가 많이 있다. 그래서 다수의 버전을 같은 환경에서 사용해야 하는 상황이 있기 때문에 NVM (node version manager)을 통해서 node 를 설치 하도록 하자. 1.Node.js 설치 https://nodejs.org/ko/download/ LTS 버전을 받아 설치를 하다보면 아래와 같이 Tools for Native Modules 를 선택하라는 항목이 나온다. 해당 부분은 나중에 n..

이번 포스팅은 Node.js, Nvm, Npm 에 관하여 알아보자. 1.Nvm - Node Version Manager -node.js의 버전 관리자. node.js의 각 버전을 유지하면서 시스템을 구성해야 하는 경우를 위해 사용한다. 같은 시스템 안에서 여러 node.js를 사용하기 위해 버전별로 Node.js 환경을 격리시키는 역할 -nvm 은 Node.js를 설치하는 툴 2.Npm - Node Package Manager 노드 패키지 매니저. 간단하게 얘기하면 npm 서비스를 통하여 Node.js로 개발된 프로그램을 편리하게 설치, 업데이트 및 삭제를 해주는 프로그램. npm 은 Node.js 를 OS 에 직접 설치하였든 nvm 으로 설치하였든지에 관계없이, Node.js 가 설치된 상태에서(Nod..

border-collapse는 테이블 리스트의 테두리와 셀(td)의 테두리 사이의 간격 처리 방식을 정하는 속성이다. 기본값 : separate 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 border-collapse: separate | collapse | initial | inherit ＊separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둔다. ＊collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 제거한다. 겹치는 부분은 한 줄로 나타낸다. ＊initial : 기본값으로 설정한다. ＊inherit : 부모 요소의 속성값을 상속받는다.

질문 : Javascript 에서 페이지 이동은 어떻게 할것인가? 방법은 대표적으로 2가지의 방법이 있다. location.href 와 location.replace(). location.href에서 href는 객체에 속해 있는 설정으로 현재 접속중인 페이지의 정보를 갖고 있다. 그리고 그 값을 변경할 수 있는 프로퍼티 이기 때문에 다른 페이지로 이동하는데도 사용되고 있다. 현재 페이지 확인 방법 location.href; // https://10.13.10.21:8080/outpage location.href 로 페이지 이동 방법 location.href = "www.naver.com"; //네이버로 이동하게 된다. location.href vs location.replace()의 차이 location..

부트스트랩에는 요소의 모양을 수정하기 위한 다양한 속기 응답 여유 및 패딩 유틸리티 클래스가 포함되어 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음 border : 박스의 테두리 padding : 테두리와 content간의 간격 content : 엘리먼트 안에 포함되는 컨텐츠 ⓐ M/P M : Margin P : Padding ⓑ t , b , l , r ,x , y t : top b : bottom l : left r : right x : x축 -> left , right y : y축 -> top , bottom ⓒ 0, 1, 2, 3, 4, 5, auto 0 : 0 1 : .25rem( font-size가 16px이면, 4px) 크기 2 : .5rem( fo..

자바스크립트에서 변수를 선언하는 종류에는 3가지가 있다. 이것은 항상 다시 찾아보게 된다. 까먹지 않게 기록하여 보자. 1. var var은 변수 선언으로 단점이 존재한다. var carName = 'volvo'; console.log(carName); var carName = 'hyundal'; console.log(carName); --------------------------- volvo hyundal 변수를 재선언 하였더니 에러가 나오지 않고 각기 다른 값이 출력된다. 코드량이 많아 진다면 사용 위치를 파악하기 힘들뿐더러 값이 변경될 위험이 있다. 요새는 var 선언을 잘 사용하지 않는다. 2.const & let ES6 이후, var을 보안하기 위해 새로운 변수 선언 방식이 추가되었다. con..