다연이네

전역변수 :root선택자 사용 -> var() 함수를 통해 사용 가능하다. 선언예시 :root{ /* --변수명:값; */ --blue:#1E90FF; --white: #fff; } 내에서 사용 예시 body{ background: var(--blue); } 자바스크립트에서 사용할 때 var r = document.querySelector(":root"); var rs = getComputedStyle(r); //getComputedStyle(r); - root로부터 스타일(속성명, 값들)을 얻어오는 함수 rs.getPropertyValue('--blue'); -> --blue라는 전역변수의 속성 알아오기(가져오기) r.style.setPropertyValue('--blue'); -> --blue라는 속..

툴팁 요소(element)위에 마우스 포인터를 올리면 그 요소의 추가적인 설명 정보를 보이게 하는 것 툴팁(Tooltip) . . . . . Hover over me Tooltip Text 말풍선 밑의 뾰족한 표시는 어떻게 만든걸까? div{ width: 40px; border: 20px solid black; border-right-color: transparent; /* 투명 */ border-bottom-color: transparent; border-left-color: transparent; box-sizing: border-box; /* border-color: black transparent transparent transparent; */ } 그럼 말풍선을 밑으로 뜨게 하려면 ? 툴팁(To..

로딩 파랑색이 계속 돌고, 파인애플 아무 사진에나 마우스 올리면 떨린다. (마치 아이폰 앱 정렬하듯이) 로딩 이미지 처리 이미지(창) 흔들기

CSS 애니메이션 - JavaScript 또는 flash를 사용하지 않고도 html 요소에 애니메이션 효과를 주는 것 - 현 스타일에서 다른 스타일로 점차 변환되는 것 - 애니메이션과 관련된 속성 @keyframes animation-name animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation(모든걸 한번에) - CSS 애니메이션을 처리하기 위해서는 제일 먼저 애니메이션에 대한 여러개의 키프레임을 지정해야 함 키프레임이란 ? 특정 시간에 요소가 가질 스타일 animation-direction: alternate; reverse; normal; al..

CSS 전환 - transition 속성 1. 주어진 기간(시간)동안 속성 값을 매끄럽게 변경하는 작업 2. CSS 전환 관련 속성 ㄱ. transition : 속성 지속기간 전환속도 곡선 연기시간 ㄴ. transition-property : width 속성 ㄷ. transition-duration : 2s 지속시간 ㄹ. transition-timing-function : ease 전환속도곡선 - ease(기본값) : 느리게 시작, 빠르게 천천히 종료하는 전환효과 - linear : 등속(처음~끝) 동일한 속도 전환효과 - ease-in : 느린시작으로 전환효과 - ease-out : 느린 끝 전환효과 - ease-in-out : 느린 시작, 느린끝, 하지만 중간은 빠름 ㅁ. transition- del..

2D에는 translate()가 있었고, 3D에는 translateX(), translateY(), translateZ() tranlate3d(x,y,z) 2D에는scaleX(), scaleY(), scale() 3D에는scaleX(), scaleY(), scaleZ(), scale3D(x,y,z) 2D에는 rotate() 3D에는 rotateX(), rotateY(), rotateZ(), rotate3d(x,y,z) Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. 2D rotate 3D rotate

1. 웹페이지에서 [사용자]로부터 특정 이벤트나 입력값을 받아 동적인 처리를 목적으로 고안된 객체 기반의 스크립트 프로그래밍 언어 2. 사용자 경험(UX)/UI을 향상시키기 위한 방법으로 주로 사용 3. 일반적으로 HTML문서에 내재되며 [브라우저]에서 실행된다. 4. 자바스크립트는 [주로] 웹 브라우저 내에서 사용되는 언어였으나, 자바스크립트 기반의 런타임 플랫폼(예: Node.js)들이 개발되며 서버측 프로그램 개발에도 사용이 크게 확대되었다. 5. 다운로드/ 설치X -> 브라우저에 내장... 종류와 버전에 따라 내장된 자바스크립트가 다를 수 있다. 6. ECMAScript(에크마 스크립트)는 표준이지만 브라우저에따라 되는게 있고 안되는게 있다.

@font-face 컴퓨터에 설치되지 않은 글꼴을 웹 글꼴을 통해 사용할 수 있도록 해준다. @font-face Rule Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit optio. Note : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum iure? [CSS 2D 변환 방법] - 요소 이동/회전/크기조정/기울기 transform 속성 1. translate() 이동 2. rotate() 회전 3. scaleX() x크기 4. scaleY() y크기 5. scale() 6. skewX() x기울기(비틀기) 7. skewY() y기울기(비틀기) 8. ske..