전체 (39) 썸네일형 리스트형 [CSS] Responsive CSS 단위, EM과 REM의 차이 절대적인 단위 px 반응형 웹사이트 제작 시 절대 단위인 px을 사용할 경우 컨테이너의 사이즈가 변경되어도 콘텐츠가 고정된 값으로 유지되고, 사용자가 브라우저에서 폰트 사이즈 설정을 변경해도 전혀 반응하지 않는다. 그래서 반응형 웹에서의 px 사용은 적절하지 않다. 상대적인 단위_em, rem, vw, vh, % EM relative to parent element 타이포그래피에서 현재의 지정된 포인트 사이즈를 나타내는 단위 지금 폰트 사이즈를 나타내는 단위 Parent Child .parent { font-size: 4em; /* 4em= 400% */ } .child { font-size: 0.5em; /* 0.5em= 50% */ } em은 부모 font-size에 상대적으로 계산되어 크기가 결정된.. [Web] Rendering (DOM/CSSOM/Render Tree) DOM(Document Object Model) 브라우저가 Html파일을 읽을 때 브라우저가 이해할 수 있는, 메모리에 보관할 수 있는 object로 변환시킨다. object로 변환된 후 Tree 구조를 생성한다. 이것이 DOM이다. Document Object Model안에는 우리가 정의한 요소들이 tree형태로 구성되어져 있다. 이것을 이용해서 JavaScript로 웹페이지를 제어할 수 있다. MDN DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model CSSOM(CSS Object Model) 브라우저는 html파일을 Domcument Object Model로 만들면서 우리가 정의한 CSS뿐 아니라 브라우저에서 기본적으.. [Web] DOM요소 조작_Document.querySelector( ) Document.querySelector('selectors') 다양한 Selector를 이용해서 DOM의 element를 받아오기 위한 API. document 에서 Selector와 일치하는 첫번째 element를 리턴한다. 일치하는 element가 없으면 null을 리턴한다. selectors는 하나 이상의 CSS Selector를 string type으로 전달 한다. 유효한 CSS Selector가 아닐 경우 SYNTAX_ERR가 발생한다. SYNTAX_ERR가 발생 시 Selector의 철자를 잘 입력했는지, class 선택자는 마침표(.)를, id 선택자는 해쉬(#)를 잘 입력했는지 확인한다. const image = document.querySelector('img') // Tag name .. [Web] window size 및 좌표 관련 속성 Window Size window.screen : 모니터 사이즈 window.screen.width / window.screen.height window.outer : 브라우저 전체 사이즈 window.outerHeight / window.outerWidth window.inner : 브라우저 웹페이지 사이즈(스크롤 바 포함) window.innerHeight / window.innerWidth documentElement.client : 브라우저 웹페이지 사이즈(스크롤 바 제외) document.documentElement.clientWidth / document.documentElement.clientHeight document.documentElement : document를 제외한 DOM 트리 꼭.. [Web] Web API API (Application Programming Interfaces) API (Application Programming Interfaces)는 어려운 코드로 되어있는 복잡한 기능을 쉽게 사용할 수 있도록 간단한 구문의 프로그래밍 언어로 제공하는 것이다. 예를 들어 자판기에서 제공하는 동전 투입구에 동전을 넣고 버튼을 누르면 자판기의 구조나 원리를 알지 않아도 원하는 음료를 먹을 수 있다. 집에서 어떤 기계를 사용하기 위해 콘센트에 전원코드를 연결하면 기계가 작동한다. 전력 공급 장치의 원리나 구조를 알지 않아도 콘센트에 전원코드만 연결하면 된다. 브라우저에서 우리가 사용할 수 있는 API를 제공하고 우리는 그 API를 호출하면서 브라우저에 있는 다양한 기능들을 쓸 수 있다. 이러한 API는 Java.. [JS] Class Ingeritance (클래스 상속) 1. Class 상속과 다양성 class의 반복되는 공통적인 속성들을 한번만 정의하고 (parent class), extends 키워드를 이용하여 class의 property나 method를 추가 정의할 수 있다 (child class). 이것을 class 상속 또는 class 확장 이라고 한다. child class는 parent class의 field와 method를 복사없이 모두 사용할 수 있고, 필요한 property나 method를 추가 또는 오버라이딩 할 수 있다. class 상속의 기본 문법 : class ChildClass extends ParentClass { } Parent Class class Shape { constructor(width, height, color) { this.wi.. [JS] Class 선언과 Object 생성 Class • Class는 Object를 생성하기 위한 템플릿. • 연관 있는 데이터들을 종합적으로 묶어 놓은 것. • 변수 데이터를 fields, 함수 데이터를 method라고 한다. • 들어올 수 있는 데이터를 정의하여 한번만 선언한다. • class는 정의만 한 것이라 data가 메모리에 저장되지는 않는다. • ES6에 추가된 문법이다. class가 도입되기 전에는 function을 이용해서 템플릿을 만들었다. 1. Class declarations (Class 선언) class 키워드를 이용해서 Person이라는 class를 만들고 constructor를 이용해서 object를 만들 때 필요한 데이트를 전달한다. 전달받은 데이터를 class에 존재하는 fields에 바로 할당해준다. class P.. [JS] JavaScript Function & Arrow Function Function 하나의 특별한 목적의 작업을 수행하는 Subprogram 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다. JavaScript Function 자바스크립트에서는 함수도 하나의 datatype이다. 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 또한 다른 함수 내에 중첩되어 정의될 수도 있다. 1. Function declaration(함수 선언) function name(param1, param2) { body... return ; } 하나의 함수는 하나의 기능한 수행 하도록 한다. (one function === one thing) 함수 이름은 함수의 기능을 잘 알 수 있는 것으로 짓는다. (doSomething, command, verb) 자바스크립.. 이전 1 2 3 4 5 다음
