front-end50 [css] 가상 클래스(pseudo-class)와 가상 요소 선택자 (pseudo-element) 가상 선택자CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용해서 html 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 html 문서에 쓸데없는 태그를 사용하여 화면 리더기 등에 쓸데없는 정보가 읽히거나 불필요한 클래스를 남발해 코드 가독성을 낮추지 않게 한다. 선택자:가상클래스 { property: value; } 앵커 가상 클래스앵커 가상 클래스는 화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀준다.앵커 가상 클래스에서 가장 자주 쓰이는 패턴이다. :link는 아직 방문하지 않은 링크를 나타낸다. 다음을 사용해서 아직 방문하지 않은 링크를 파란색으로, 방문한 링크는 밑줄.. 2020. 1. 31. [css] 자식요소가 float / absolute 일 때 부모 요소 height, width 주기 자식 요소가 float일 때 자식 요소가 float 되어 있으면 (말 그대로 자식 요소가 떠 있는 상태이기 때문에) 부모 요소(상위 요소)의 height가 0이 될 수 있다. 이 때 주요 해결방법은 두가지이다. 사실 첫번째 방법으로 어지간하면 해결 가능. 부모 요소에 overflow:hidden .parent{ overflow: hidden; /* 또는 overflow: auto; */ } 부모 요소의 가상 선택자에 clear:both .parent::after { content: ""; display: block; clear: both; } 자식 요소가 position : absolute 일 때 부모 요소와 자식 요소의 크기가 같아야 하는데 자식 요소가 position:absolute 일 때 (예를들어.. 2020. 1. 30. [javascript] 바나나 문제 / 0.1+0.2 === 0.3이 틀린 이유 자바스크립트 :: 바나나 자바스크립트를 헷갈리게 하는 몇가지 문제들을 소개해본다. console.log('b' + 'a' ++ 'a' + 'a').toLowerCase(); //banana 첫 글자 b 와 a 는 문자열이므로 쉽게 ba 로 변환된다. 그러나 그 다음 ++ 'a' 에서 첫번째 + 기호는 이전 문자열 더하기와 같은 기능을 수행하지만 뒤에 있는 +는 문자열을 숫자로 바꾸는 unary operator로의 역할을 한다. 그러나 뒤에 따라 붙는 a는 숫자로 변환할 수 없으므로 NaN 이 반환되게 되는데 이것이 toLowerCase() 에 의해 소문자로 변해 최종적으로 banana 가 출력된다. 배열 더하기 console.log([1, 2, 3]+[4, 5, 6]); //1, 2, 34, 5, 6 이.. 2020. 1. 29. [html/javascript] CANVAS 알아보기 / 기본 사용법 & svg와 성능 비교 HTML5 : Canvas canvas 는 페이지에 그래픽적인 요소를 그릴 때 사용되는 html5 의 새로운 태그이다. 먼저 html 문서에 다음과 같이 를 삽입한다. 위의 요소를 js를 통해 찾아 제어하는 것이 canvas 의 기본적인 동작이다. const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); 캔버스에 어떤 요소를 그리기 위해서 가장 처음으로 getContext()를 사용하여 위치를 정의할 필요가 있다. 기본적으로 2d로 정의되며, 위 요소를 사용하면 canvas에 2d 좌표로 위치를 지정할 수 있게 된다. beginPath(); 도형을 그리기 전에 지정해줌 closePath() : 도형의 .. 2020. 1. 23. [CSS] 반응형 박스 만들기 / 화면의 크기가 변해도 모양이 망가지지 않도록 css는 아무리 해도 어렵다.... 반응형 박스 만들기 화면크기에 따라 가진 네모 박스는 만들기 쉽다. 일정 고정값을 가진 박스를 만들면 된다. PC 화면에서는 이렇게 만드는 게 낫지만, 반응형 웹이나 모바일 UI를 제작할 때는 디바이스 크기에 따라 콘텐츠 크기가 조절되어야 한다. .square { width: 100px; height: 100px; } 비율(%)에 맞춰서, 만약 다음처럼 작업을 한다면 어떻게 될까? 이럴 경우 상하-좌우 크기가 모두 변할 때는 정사각형 모양이 깨지지 않겠지만, 좌우 또는 상하만 변할 때는 모양이 찌그러지게 된다. 이것을 헤결하기 위한 방법은 무엇일까? .square { width: 50%; height: 50%; } 해결 width :100%만 준 후 다음과 같이 가상 .. 2020. 1. 22. [vue-trello] TIL 1 :: webpack이란? / 라우터와 플러그인 webpack SPA(단일 페이지 어플리케이션)이 많아지면서 하나의 파일에서 자바스크립트 코드를 관리할 수 없을 만큼 그 양이 증가하게 되었다. 그래서 파일을 UI 및 기능별로 분리하여 개발하고 webpack을 통해 하나의 js파일로 번들링하여 웹페이지를 불러오는 방식을 사용하게 되었다. webpack.config.js파일에 들어가면 entry point를 확인할 수 있는데, 이는 로딩하는 모듈의 시작점이 되는 파일을 말한다. module.exports = { entry: { main: './src/main.js', } } webpack은 이 entry point를 기점으로 필요한 모듈을 로딩해 하나로 묶는다. (번들링) 번들링이 완료되면 이 결과물을 처리할 위치를 output에 기록한다. module... 2020. 1. 21. [javascript] ES6 클래스와 Prototype / 왜 Object instanceof Function은 true인가 ES6 Class와 Prototype #dev 자바스크립트는 프로토타입 기반 객체지향 언어다. 프토로 타입 기반이므로 클래스가 없고, 따라서 상속 개념이 존재하지 않는다. ES5까지는 프로토타입 체인과 클로저 등으로 상속이나 캡슐화 등을 흉내내어 구현해왔다 프로토타입 프로토타입은 프로토타입 링크와 프로토타입 오브젝트로 구성된다. 프로토타입 객체 객체는 언제나 함수로부터 생성된디. 객체 뿐만 아니라 함수와 array도 모두 함수로 장의되어 있다. function CreateItem(){}; const NewItem = new CreateItem(); // 함수를 통한 객체 생성 const obj = {}; //다음과 같이 객체를 선언하는 것은 const obj = new Object(); // Object.. 2019. 11. 9. [javascript] ES6 export vs NodeJS module.exports와 exports의 차이 모듈 NodeJS에서의 모듈 모듈이란 관련된 코드를 하나의 코드 단위로 캡슐화 하는 것을 말한다. 여러개의 코드로 분할하여 관리하고 index.js 파일 하나에 전부 import 시켜 효율적으로 코드를 관리할 수 있다. module.exports = { hello: function() { return "HELLO"; }, bye: function() { return "BYE"; } }; 위와 같이 모듈을 작성하면 메안 파일에서 다음 코드를 통해 const greeting = require(‘./greeting’); 작성한 모듈을 import 시킬 수 있다. 여기에서 require 코드는 object를 반환한다. 또한 module.exports와 exports는 동일 객체를 바라보고 있고 반환 값은 항상 .. 2019. 10. 25. [javascript] 자바스크립트 Drag&Drop 구현하기 서론Html 드래그 앤 드롭 api는 돔 이벤트 모델에서 정보를 가져와 정보를 업데이트 하는 방식으로 이루어진다. 드래그 앤 드롭을 구현하는데는 여러 방법이 있는데 드래그 된 아이템의 CSS 스타일을 업데이트 할 수도 있고 아니면 드래그 할 아이템을 복사해서 드롭하는 장소에 붙여넣기 할 수도 있다.구현먼저 html을 통해 드래그 할 요소와 드롭할 요소를 만들자. draggable='true'를 추가하여 요소를 드래그 가능하게 만들 수 있다. 처음 알았음 태그 중에 디폴트로 draggable한 요소가 몇가지 있는데 는 가본적으로 드래그 가능하고, 은 드래그 불가능하다. drag dropzone 드래그 앤 드롭 이벤트 핸들러는 최소 세가지 요소로 구성된다. (전부 함수로 지정된다!!)ondragstart :.. 2019. 10. 6. 이전 1 2 3 4 5 6 다음
