오늘도 조으네💜

HTML5 , CSS3

pointer-event 속성을 사용하면 css hover/active 상태, javascript의 click/cursor/mouse 등의 이벤트에 응답하는 방식을 제어할 수 있다. .avoid-clicks { pointer-events: none; } pointer-event 속성은 11개의 가능한 값을 사용하지만 몇가지를 제외한 모든 값은 SVG와 함께 사용하도록 예약되어 있다. HTML 요소에 유효한 값은 다음과 같다. /*키워드 값*/ pointer-events: auto; /*비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.*/ pointer-events: none; /*HTML 요소에 정의된 클릭, 상태 등 커서 옵션들을 비활성화시킨다.*/ pointer-events: visiblePai..

2022. 9. 1.

Javascript

기존에는 prototype 기반으로 클래스를 만들었는데, ES6에서 class 라는 문법이 새로 추가가 되었다. 👀 class 선언식 // 기존 function User(first, last) { this.firstName = first; this.lastNmae = last; } User.prototype.getFullName = function() { return `${this.firstName} ${this.lastName}` } // ES6 class User { constructor(first, last) { this.firstName = first; this.lastNmae = last; } getFullName() { return `${this.firstName} ${this.lastName..

2022. 9. 1.

Javascript

ES6에서 새로 나온 문법으로 굉장히 중요하면서 강려크한 기능이다.😍 전개 연산자는 마침표 3개 ...로 배열이나 객체를 목록으로 펼칠 수 있는 기능이다. 기존 배열 요소를 다룰 때는 index를 사용해 풀어쓰거나 내장 메서드를 사용해야 했었는데, 전개 연산자를 사용하면 아주 간단하게 내용을 전달하고 표현할 수 있다. (신세계 👍) 정확한 사용법은 아래에서 살펴보자! //기존 방식 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [7, 8, 9]; const arrWrap = arr1.concat(arr2, arr3); console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9] //ES6 const arr1 ..

2022. 8. 28.

Javascript

개발을 하다보면, 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 있다. 이럴 때, 객체나 배열을 변수로 '분해'하여 사용할 수 있게 해주는 특별한 문법이 바로 '구조 분해 할당'이다. 📌 객체 분해하기 할당 연산자 우측에는 분해하고자 하는 객체를, 좌측에는 이에 상응하는 객체 프로퍼티의 '패턴'을 넣는다. const userInfo = { name: 'eunhye', age: 29, email : 'masimel33@gmail.com', address: 'Korea' } const {name, age, email, address} = userInfo; console.log(`사용자의 이름은 ${name}입니다.`); //사용자의 이름은 eunhye입니다. console.log(`사용자의 ..

2022. 8. 28.

React

리액트 공식 홈페이지에서는 리엑트를 다음과 같이 정의하고 있다. '사용자 인터페이스를 구축하기 위한 Javascript 라이브러리' 리액트는 페이스북, 인스타그램 개발자들이 만들었으며, 2013년에 처음 공개되었다. 리액트는 'MVC(Model View Controller) 패턴'에서 V(View)를 담당하고 있으며, 뷰(view)와 관련된 UI 컴포넌트(Component)를 만드는 일을 한다. 컴포넌트 시스템(조각화)이 잘 되어있기 때문에 재사용성이 매우 높아 효율적으로 웹을 구현할 수 있다. 1️⃣ node.js 설치하기 우선, 리액트 프로젝트를 만들기 위해 가장 먼저 Node.js와 npm을 설치해주어야 한다. Node.js는 아래의 링크에서 설치가 가능하다. Node.js는 크롬 V8 자바스크립트..

2022. 8. 28.

Javascript

ES6에 새롭게 등장한 변수 친구들이다! 😁 기존의 'var'은 유연한 변수 선언 방식이었다. 예를 들어, 변수를 한번 더 선언했음에도 불구하고 에러가 나오지 않는다. var age = 28; //결과 : 28 (초기 변수 선언) age = 18; //결과 : 18 (변수값 재할당) var age = 'old'; //결과 : 'old' (변수 재선언) 이러한 유연한 점이 편리할 수 있겠으나, 코드량이 많아지거나 다른 사람들과 협업을 하는 과정에서는 파악이 힘들뿐더러 값이 바뀔 가능성이 있다. 그래서 이러한 점을 보완하기 위해 등장한 것이 바로 let과 const이다! 위의 소스에서 변수 선언 방식을 let으로 바꾸면 다음과 같이 에러가 발생한다. let age = 28; age = 18; let age ..

2022. 8. 27.

웹표준, 웹접근성

IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 의미한다. 태그 alt 속성 내에 작성하기에 텍스트가 너무 길 경우에, 텍스트 태그를 따로 분리하고, visually_hidden 클래스를 css로 숨김 처리한다. .visually_hidden1 { /* 스크린 리더가 읽을 수 있도록 */ height: 1px; width: 1px; /* 레이아웃에 영향을 끼치지 않도록 */ position: absolute; /* 이하 눈에 보이는 부분을 제거 */ overflow: hidden; margin: -1px; /* 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성. 포토샵의 mask 효과와 같다고 한다. position 속성 값이..

2022. 8. 26.

웹표준, 웹접근성

웹접근성이란? 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 동등하게 웹사이트를 이용할 수 있도록 보장하는 것이다. 웹 접근성 준수는 법적 의무사항이다.「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항으로 모든 웹사이트는 웹 접근성을 준수해야 한다. 장애유형의 이해 장애유형에 따라 상황 및 특징에 대한 이해와 그에 대한 보완 대책을 제공해 주어야 한다. 웹접근성 향상의 기대 효과 ✅ 장애인, 고령자 등을 포함한 사용자층 확대 장애인, 고령자 등과 같은 정보 소외 계층이 원하는 정보를 자유롭게 접근 및 이용할 수 있게 해주며, 이러한 잠재적인 계층을 사용자 계층으로 끌어내어 새로운 고객층을 발굴하는 기회로 확대될 수 있다. ✅ 규정..

2022. 8. 25.