eunyo의 it이야기

계산된 프로퍼티 (Computed property )란? 자바스크립트ES6에서는 객체의 속성명을 동적으로 계산하여 정의할 수 있는데, 이를 "계산된 프로퍼티(Computed Property)"라고 합니다. 계산된 프로퍼티를 활용하면 변수 값을 활용하여 객체의 속성명을 동적으로 지정할 수 있습니다. 아래는 간단한 예제 코드와 함께 설명합니다. let n = "name"; let a = "age"; const user = { [n] : 'Mike', // 계산된 프로퍼티: 속성명은 n에 할당된 값인 "name" [a] : 30, // 계산된 프로퍼티: 속성명은 a에 할당된 값인 "age" } console.log(user) 계산된 프로퍼티의 활용 동적인 속성명 정의: 변수나 표현식을 사용하여 객체의 속성명을..

생성자 함수와 new 연산자 자바스크립트는 동적이고 유연한 언어로, 객체 지향 프로그래밍을 지원합니다. 특히 회원 정보나 상품 정보와 같이 다양한 속성을 가진 객체를 다룰 때, 생성자 함수는 유용한 도구 중 하나입니다. 이번 포스팅에서는 생성자 함수를 사용하여 객체를 만드는 방법에 대해 알아보겠습니다. 객체 지향 프로그래밍과 생성자 함수 객체 지향 프로그래밍은 현실 세계의 개념을 코드로 모델링하는 방법입니다. 자바스크립트에서 객체를 생성하는 방법에는 객체 리터럴과 생성자 함수가 있습니다. 각각의 특징과 활용법을 비교해보겠습니다. 객체 리터널 let user = { name : 'kim', age : 30, } 가장 간단한 방법 중 하나는 객체 리터럴을 사용하는 것입니다. 위에서 제시한 user 객체가 그..

ES6이란? ES6(ECMAScript 2015)은 ECMAScript 표준의 여섯 번째 버전으로, JavaScript 언어의 표준을 정의하는 규격입니다. ES6는 이전 버전의 ECMAScript에 비해 많은 새로운 기능과 개선 사항을 도입했으며, 모던 JavaScript 개발에서 널리 사용되고 있습니다. ES란? ES는 ECMAScript의 약자로, JavaScript 언어의 표준을 정의하는 규격을 가리킵니다. ECMAScript는 언어의 코어 부분을 정의하며, 웹 브라우저에서 실행되는 JavaScript 엔진과 같은 환경에서 어떻게 동작해야 하는지에 대한 규칙을 제공합니다. ECMAScript 표준은 ECMA International이라는 국제 표준화 기구에 의해 관리되고 있습니다. ES6를 사용하는..

간단한 화면 GIF 캡쳐 가능한 무료프로그램 안녕하세요. 오늘은 간단하게 GIF 캡처가능한 프로그램에 대해 알려드리겠습니다. 프로그램 이름은 ScreenToGif로 공식사이트는 아래와 같습니다. 1. 다운로드 https://www.screentogif.com/ ScreenToGif - Record your screen, edit and save as a gif or video Free screen recorder tool. Record, edit and save as a gif or video. www.screentogif.com 공식사이트로 접속 후, Installer 버튼을 눌러 다운로드받아줍니다. 2. 설치 공식사이트에서 프로그램 설치를 해줍니다. 설치가 끝나고 파일을 열면 gif 캡처할 수 있는 ..

안녕하세요. 오늘은 풀페이지 스크롤 이벤트 소스를 공유해드리겠습니다. fullPage.js를 통해 간단하게 구현이 가능하지만, 유료 라이센스입니다. 그럼 fullPage.js를 대체할 소스를 알려드리겠습니다. [HTML] Item 1 Item 2 Item 3 Item 4 [CSS] div { position: relative; height: 100vh; width: 100%; color: #fff; display: flex; align-items: center; justify-content: center; } div:nth-child(1){background: red} div:nth-child(2){background: yellow} div:nth-child(3){background: green} div..

[HTML,CSS] 별점 만들기 안녕하세요. 오늘은 html와 css 만으로 별점기능 구현하는 소스에 대해 알아보겠습니다. 우선, 별점 선택이 안되는 동적인 별점 css입니다. 배경이되는 div에 회색 bg 이미지를 깔아준 뒤, span에 별점이 표시되는 빨간색 이미지를 넣어주면 됩니다. [html] [CSS] .rate{background: url(https://aldo814.github.io/jobcloud/html/images/user/star_bg02.png) no-repeat;width: 121px;height: 20px;position: relative;} .rate span{position: absolute;background: url(https://aldo814.github.io/jobcl..

이미지맵 반응형 적용방법 이미지에 링크를 삽입할 때, 이미지맵(image map)을 사용합니다. 이때 이미지맵은 css로 반응형 제작이 어렵기 때문에 스크립트로 수정해줘야하는데요. 플러그인으로 간단하게 처리하는 방법에 대해 알아보겠습니다. [github] https://github.com/stowball/jQuery-rwdImageMaps GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin Responsive Image Maps jQuery Plugin. Contribute to stowball/jQuery-rwdImageMaps development by creating an account on GitHub. github..

이미지 흑백처리 하기 css를 사용해서 이미지를 흑백처리 할 수 있습니다. 바로 css에서 filter라는 속성을 이용해서 흑백처리를 할 수 있습니다. [css] img {filter: grayscale(100%);} filter:grayscale(100%)을 흑백처리 하고자 하는 img에 넣어주시면 됩니다. 0은 기본이미지이며 100%은 완전한 흑백이미지로 보여집니다.

안녕하세요. 오늘은 버튼을 클릭했을때 div의 style이 변경되는 방법에 대해 알아보겠습니다. 그리고 jquery로 css를 하나씩 바꿀 때, 여러개 바꾸는 방법에 대해 알려드리겠습니다. style 속성 하나씩 바꿀때 $(div).css("background-color","yellow"); style 속성 여러개 바꿀때 $('div')css({"background-color":"yellow","width":"100px"}); jquery로 css를 여러개 변경할 때는 ({})안에 속성을 넣어주시면 됩니다. 다음은 버튼을 클릭할 때, div style이 바뀌는 간단한 예제입니다. html 클릭 [css] div{width: 200px;height: 200px;background: red;} [js] $(..

안녕하세요. 오늘은 웹페이지에서 자주 쓰이는 반응형 드롭다운 메뉴 소스를 공유하려고 합니다. 필요에 따라 커스텀해서 사용하시면 될거같아요. gnb에 마우스 hover할 시 전체 하위메뉴가 나타나는 예제입니다. [결과] [HTML] LOGO services test sub test sub test sub test sub offers test sub test sub test sub portfolio test sub test sub test sub test sub test sub test sub test sub gallery test sub test sub test sub test sub test sub [CSS] @import url(//fonts.googleapis.com/earlyaccess/notosa..