밀 종합 ٩(`╹ω╹´)و

속성 공간 설명 translateX(x) 2차원(평면) 가로 좌표의 위치를 변경한다. translateY(y) 2차원(평면) 세로 좌표의 위치를 변경한다. translate(x) translate(x, y) 2차원(평면) [값이 단일인 경우] 가로 좌표의 위치를 변경한다. [값이 이중일 경우] 가로, 세로의 위치를 변경한다. translateZ(tz) 3차원(입체) *3D속성 필요 깊이의 좌표의 위치를 변경한다. 양수 값은 요소를 뷰어쪽으로 가깝게 이동하고, 음수 값은 더 멀리 이동한다. translate3d(tx, ty, tz) 3차원(입체) *3D속성 필요 가로, 세로, 깊이의 위치를 변경한다. *3D속성이 붙은 애들은 하드웨어 가속이 보장이 된다. (포퍼먼스가 좋다) *3D속성이란 transform..

차이 perspective perspective() 유형 속성 메서드 작성 위치 부모 자신 사용 방법 perspective: 값 transform: perspective(값) transform: perspective() - 3D 공간에서 요소와 관측 점과의 거리, 즉 원근감을 지정하는 속성이다. - 값이 작을수록 가깝게 보이고, 멀수록 멀게 보인다. perspective는 뷰어와 요소와의 거리를 나타내고, transform-style은 요소의 표현을 나타내고, perspective-origin는 뷰어가 보는 위치를 설정한다. perspective(d) d - 뷰어에서 z = 0 평면까지의 거리를 나타내는 이다. - 0 또는 음수 값은 원근 변환이 적용되지 않는다. [예제] See the Pen [CSS]..

- 뷰어가 보는 위치를 설정한다. (기본값은 가로, 세로 중앙) - Perspective 속성에서 소실점으로 사용된다. - 부모에게 사용하는 속성이다. (자식에게 사용할 경우 에러는 나지 않으나, 적용되지 않는다.) See the Pen [CSS3] perspective-origin by mill (@millfeel) on CodePen. [공부 좌표] perspective-origin

- 2D 또는 3D 중 어떻게 표현할지를 설정한다. - 속성은 부모에게 사용하고, 적용 범위는 자식에게만 적용된다. (자손X) transform-style: flat; //기본값 transform-style: preserve-3d; transform-style flat (기본값) preserve-3d 공간 평면(=2D) 3D 작성 위치 부모 적용 대상 자식에게 적용 *도형에 마우스를 올려주세요. See the Pen preserve-3d의 적용의 차이 by mill (@millfeel) on CodePen. perspective와 transform-style은 상속X See the Pen perspective와 transform-style은 상속X by mill (@millfeel) on CodePen...

- 전역 변수: 전체 영역에서 사용할 수 있다. - 지역 변수: block문 안에서만 사용할 수 있다. 전역 변수를 함수 안에서 수정했을 경우 변수를 수정한 함수를 호출해야만 변수의 값이 수정된다. See the Pen [JS] 함수 - 전역 변수, 지역 변수 예제1 by mill (@millfeel) on CodePen. [주의] 전역 변수를 load 이벤트 함수 안에서 수정했을 경우 load 이벤트 또한 함수를 호출해야만 변수의 값이 수정된다. See the Pen [JS] 함수 - 전역 변수, 지역 변수 예제2 by mill (@millfeel) on CodePen. [공부 좌표] 지역변수, 외부(전역)변수 [학습 필요] 렉시컬 환경

console.time()과 console.timeEnd는 하나의 세트로 묶어서 사용한다. console.time() console.time(label); - 타이머를 시작해 작업이 얼마나 걸리는지 추적할 수 있다. - 한 페이지에 최대 10,000개의 타이머를 설정할 수 있다. - label: 새 타이머에게 설정할 이름. 타이머를 식별한다. 같은 이름으로 console.timeEnd()를 호출하면 타이머가 중단되고 콘솔에 시간을 출력한다. console.timeEnd() console.timeEnd(label); - 이전에 console.time()을 호출하여 시작된 타이머를 중지하고, 웹 콘솔에 경과 시간을 밀리초 단위로 표시한다. - label: 중지할 타이머의 이름. console.time()를 ..

문자열에서 숫자를 추출할 때 사용 속성 설명 parseInt 정수를 반환 parseFloat 부동 소수점 숫자를 반환 *integer: 정수 *floating point: 부동 소수 parseInt('100px'); //100 parseFloat('1.5em'); //1.5 parseInt('1.5em'); //1 parseFloat('12c3'); //12 [공부 좌표] parseInt와 parseFloat

id 추가하는 방법 // 01 document.body.setAttribute('id', 'id 이름'); // 02 document.body.id('id 이름'); id 삭제하는 방법 document.body.removeAttribute('id', 'id 이름'); [공부 좌표] Element.id Element. Attribute() 메서드

load 스타일 시트, 이미지와 같은 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 시작된다. DOMContentLoaded 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않고, 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생한다. 즉, DomContentLoaded가 load보다 좀 더 빠르다. [공부 좌표] DOMContentLoaded load

, , , , , 독립적인 콘텐츠로 분리되기 때문에 outline에 영향을 주지 않는다. Q. outline에 정말 영향을 주지 않을까? "HTML 5 Outliner"에 아래의 코드를 넣고 Outline을 확인 해 보자. 섹션 태그 블록쿼트 태그 sectioning root는 outline에 영향을 주지 않는다. 참고 웹표준 핵심가이드북2 p20 gsnedders.html5.org/outliner/