목록Web/CSS (40)

다연이네

[days06] setTimeout/setInterval

- 작동하게 하는 함수 setTimeout("실행시킬 함수",시간) : 대기 시간이 지난 후 해당 함수를 한번만 실행시킨다. setInterval("실행시킬 함수",시간) : 대기 시간이 지난 후 해당 함수를 반복해서 실행시킨다. - 작동을 중지시키는 함수 clearTimeout() : setTimeout을 중지 clearInterval() : setInterval을 중지 1버튼을 누르면 아무것도 없던 자리에 날짜와 시간이 뜬다. (1초 단위로 계속 업데이트 됨) 2버튼을 누르면 움직이던 시간이 멈춘다. 1. setTimeout, clearTimeout() 사용 setTimeout clearTimeout 2. setInterval, clearInterval 사용 + jQuery로 변경 setInterva..
Web/CSS 2020. 12. 16. 13:48
[days05] CSS 전역변수와 document.querySelector

전역변수 :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라는 속..
Web/CSS 2020. 12. 9. 19:18
[days05] 툴팁(Tooltip)

툴팁 요소(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..
Web/CSS 2020. 12. 9. 18:51
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기

로딩 파랑색이 계속 돌고, 파인애플 아무 사진에나 마우스 올리면 떨린다. (마치 아이폰 앱 정렬하듯이) 로딩 이미지 처리 이미지(창) 흔들기
Web/CSS 2020. 12. 9. 17:55
[days05] CSS 애니메이션

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..
Web/CSS 2020. 12. 9. 13:55
[days05] CSS 전환 - transition

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..
Web/CSS 2020. 12. 9. 13:44
[days05] CSS 3D 변환 - transform

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
Web/CSS 2020. 12. 9. 13:34
[days04] 1) @font-face 2) 2D 변환 방법

@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..
Web/CSS 2020. 12. 8. 22:47
Prev 1 2 3 4 5 Next