js-study 코드스피츠 css rendering 6회차 (step 48) - display , flexbox display 속성 키워드 1) outside : 요소의 외부 디스플레이 유형 설정 5) box : 요소의 디스플레이 박스 생성하는지 지정 display : contents 속성 => display:contents 부분의 태그가 없어지는 효과 display : contents 예시 1) display : contents 주지 않았을 때 2) display : contents 주었을때 over... js-studyjs-study 코드스피츠 86 객체지향 자바스크립트 - 2회차 part3 (step 31) ViewModel binder scanner client 1. ViewModel 2. Binder 해당 Binder에서 필요한 기능을 추가하거나 처리하는 기능을 수행한다. 3. Scanner 4. Client Client 변형 간단히는 우리는 필요한 viewmodel만 수정함으로써 해당 style, events, properties와 관련한 내용들이 알아서 추가되고 핸들러가 등록되고 styl... js-studyjs-study 스크롤2 (step 28) 과제2 해야할 것 숫자들 중앙에 일정크기로 배치 일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기 왼쪽에 고정된 위치에 버튼 보이게 하기 클릭시 맨위로 보내기 1. 숫자들 중앙에 일정크기로 배치 margin:0 auto로 중앙배치를 시키고 width를 설정하여 그 크기 안에서 숫자가 출력되게 만든다. 2. 일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기 스크롤 시 window.inner... js-studyjs-study JavaScript: What is the meaning of this? (step 35) this의 일반함수와 화살표함수 EventListener 객체의 메소드에서 this use strict에서의 this this 그리고 화살표함수 화살표함수는 안에잇는 this가 변하지않는다. 일반함수 화살표함수 즉, this를 계속 유지하고싶다면 화살표함수를 써야한다. 또 다른 예시 일반함수 화살표함수 EventListener 이벤트핸들러에서 조차 this는 일반함수로 쓰게되면 코드를 이해하... js-studyjs-study 코드스피츠 css rendering 3회차 part2 (step 41) - style 클래스 생성 CSS 관련한 프레임워크를 만들어보기 목표 vendor prefix 해결 => 웹브라우저 마다 prefix를 붙여야 그나마 다른 방식의 지원을 막을 수 있는 것 같다. css 동적 조정 vendor prefix란? 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미 html과 다르게 css는 웹표준이... js-studyjs-study 드래그 앤 드롭과 마우스 이벤트 (step 25) 절대 위치는 left, top, bottom, right 프로퍼티 값으로 정하며, 이 값들은 부모 태그 안에서의 상대 좌표이다. 1. 기본적인 공 태그 구현 ball.style.position = 'absolute';로 객체인 ball을 자유롭게 이동시킬수 있게 만든다. ball.style.left = event.pageX ball.style.top = event.pageY의 경우 마우스가 ... js-studyjs-study 코드스피츠 css rendering (step 36) Normal Flow 각각의 요소들이 배치되는 순서 (주로 static relative와 연관) 일반적인 상황에서 각각의 요소들이 배치되는 순서 브라우저는 웹 페이지에 나타난 순서대로 HTML 태그를 배치 페이지 레이아웃을 제어하는 어떠한 것도 하지 않으면, 브라우저가 기본적으로 HTML을 레이아웃하는 방법 ex) block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 ... CSSjs-studyCSS
코드스피츠 css rendering 6회차 (step 48) - display , flexbox display 속성 키워드 1) outside : 요소의 외부 디스플레이 유형 설정 5) box : 요소의 디스플레이 박스 생성하는지 지정 display : contents 속성 => display:contents 부분의 태그가 없어지는 효과 display : contents 예시 1) display : contents 주지 않았을 때 2) display : contents 주었을때 over... js-studyjs-study 코드스피츠 86 객체지향 자바스크립트 - 2회차 part3 (step 31) ViewModel binder scanner client 1. ViewModel 2. Binder 해당 Binder에서 필요한 기능을 추가하거나 처리하는 기능을 수행한다. 3. Scanner 4. Client Client 변형 간단히는 우리는 필요한 viewmodel만 수정함으로써 해당 style, events, properties와 관련한 내용들이 알아서 추가되고 핸들러가 등록되고 styl... js-studyjs-study 스크롤2 (step 28) 과제2 해야할 것 숫자들 중앙에 일정크기로 배치 일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기 왼쪽에 고정된 위치에 버튼 보이게 하기 클릭시 맨위로 보내기 1. 숫자들 중앙에 일정크기로 배치 margin:0 auto로 중앙배치를 시키고 width를 설정하여 그 크기 안에서 숫자가 출력되게 만든다. 2. 일정 스크롤이후의 위치에서 고정 버튼 보이게 만들기 스크롤 시 window.inner... js-studyjs-study JavaScript: What is the meaning of this? (step 35) this의 일반함수와 화살표함수 EventListener 객체의 메소드에서 this use strict에서의 this this 그리고 화살표함수 화살표함수는 안에잇는 this가 변하지않는다. 일반함수 화살표함수 즉, this를 계속 유지하고싶다면 화살표함수를 써야한다. 또 다른 예시 일반함수 화살표함수 EventListener 이벤트핸들러에서 조차 this는 일반함수로 쓰게되면 코드를 이해하... js-studyjs-study 코드스피츠 css rendering 3회차 part2 (step 41) - style 클래스 생성 CSS 관련한 프레임워크를 만들어보기 목표 vendor prefix 해결 => 웹브라우저 마다 prefix를 붙여야 그나마 다른 방식의 지원을 막을 수 있는 것 같다. css 동적 조정 vendor prefix란? 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미 html과 다르게 css는 웹표준이... js-studyjs-study 드래그 앤 드롭과 마우스 이벤트 (step 25) 절대 위치는 left, top, bottom, right 프로퍼티 값으로 정하며, 이 값들은 부모 태그 안에서의 상대 좌표이다. 1. 기본적인 공 태그 구현 ball.style.position = 'absolute';로 객체인 ball을 자유롭게 이동시킬수 있게 만든다. ball.style.left = event.pageX ball.style.top = event.pageY의 경우 마우스가 ... js-studyjs-study 코드스피츠 css rendering (step 36) Normal Flow 각각의 요소들이 배치되는 순서 (주로 static relative와 연관) 일반적인 상황에서 각각의 요소들이 배치되는 순서 브라우저는 웹 페이지에 나타난 순서대로 HTML 태그를 배치 페이지 레이아웃을 제어하는 어떠한 것도 하지 않으면, 브라우저가 기본적으로 HTML을 레이아웃하는 방법 ex) block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 ... CSSjs-studyCSS