본문 바로가기

Front-End

[CSS] 선택자 우선순위 CSS 선택자 우선순위특정 태그에 스타일 속성이 중복될 경우, 어떤 속성이 적용될까? CSS 선택자 우선순위에 대해 알아보자. - 1순위. 속성 값 뒤에 !important를 붙인 속성- 2순위. HTML에서 style을 지정한 속성- 3순위. id로 지정된 속성- 4순위. class로 지정된 속성- 5순위. 태그 이름으로 지정된 속성- 6순위. 상위 객체에 상속된 속성예시예시1)에서는, div 태그에 class를 주고, css 파일에서 class 선택자로 선택하여 배경을 노란색으로 설정했다. 예시2)에서는 기존 에서 id 선택자를 추가한 것이다. css 파일에서 id 선택자로 선택 후, 배경 색을 빨간색으로 설정했다. class 선택자보다 id 선택자가 더 우선순위에 있으므로 id 선택자가 설정한 배경.. 더보기
[HTML] DOCTYPE DOCTYPE(Document Type Declaration) : 문서 형식 선언어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 본래 DTD에 기반한 SGML 도구를 이용해 문서 해석 가능성과 유효성을 검사하기 위한 목적으로 문서 내에 삽입되었다. DOCTYPE은 HTML 문서의 규격 판 번호를 명시할 때 흔히 볼 수 있다. 웹 브라우저는 문서 형식 선언이 없는 HTML 문서를 커크 모드로 렌더링 하지만, 문서 형식 선언이 있는 HTML 문서를 표준 모드로 렌더링하기 때문에, 문서 형식 선언을 이용해서 어떤 웹 페이지가 모든 웹브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다. 한편 HTML5는 구조적으로 SGML과 호환될 수 없다. 따라서.. 더보기
[JavaScript] 크로스 도메인(Cross Domain) https://jess2.xyz/JavaScript/cross-domain/ 로 이동되었습니다. 더보기
[JavaScript] null과 undefined 비교 https://jess2.xyz/JavaScript/null-undefined/ 로 이동되었습니다. 더보기
[JavaScript] var, let, const 비교 https://jess2.xyz/JavaScript/var-let-const/ 로 이동되었습니다. 더보기
[JavaScript] 이벤트 버블링 / 캡쳐링 https://jess2.xyz/JavaScript/bubbling-capturing/ 로 이동되었습니다. 더보기
[JavaScript] Hosting이란? https://jess2.xyz/JavaScript/hoisting/ 로 이동되었습니다. 더보기
[JavaScript] onclick과 addEventListener 비교 https://jess2.xyz/JavaScript/onclick-vs-addeventlistener/ 로 이동되었습니다. 더보기
[JavaScript] 자바스크립트 엔진, V8 자바스크립트 엔진?개발자가 자바스크립트 코드를 짜면 이 자바스크립트 코드를 해석하고 실행시켜줘야 하는데, 바로 이것이 자바스크립트 엔진의 역할이다. 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하기 위해 만들어진 일종의 프로세스 가상머신인 것이다. Wikipedia에서는 자바스크립트 엔진을 다음과 같이 정의한다. - 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다.- 자바스크립트 엔진은 전통적인 인터프리터일 수 있고, 특정한 방식으로 바이트코드로 JIT 컴파일을 할 수 있다.- 여러 목적으로 자바스크립트 엔진을 사용하지만 대체적으로 웹 브라우저에서 사용된다. 자바스크립트 엔진의 역할자바스크립트 엔진은 어떤 역할을 해주는 걸까?자바스크립트 엔진은 개발자가 작성한 자바스크.. 더보기
[ReactJS] state 내부 배열 처리하기 - Immutability Helper / ES6 spread state 안에 있는 배열에 변화를 주는 방법1. concat- 기존 배열을 그대로 두고 새 배열을 생성한다. 2. Immutability Helper- 객체나 배열을 좀 더 쉽게 수정하게 해준다.- 이것을 사용하기 위해서는 라이브러리를 사전 설치해줘야 한다.- 설치 방법 : npm을 통한 설치- $npm install --save react-addons-update- import update from 'react-addons-update' - 원소 추가12345678this.setState({ list: update( this.state.list, { $push: [newObj, newObj2] } );});cs- (줄 3) 첫 번째 인수 : 처리해야할 객체나 배열- (줄 4~6) 두 번째 인수 : 처.. 더보기