Jam's story

스타일 변경 버튼을 클릭하면 demo라는 아이디의 p태그의 스타일 속성을 글자색 빨강 글크기 35px 테두리 1px solid gray 변경 스타일변경 Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur labore suscipit et debitis dignissimos impedit qui, minima perspiciatis delectus eaque atque quos ratione praesentium non. Tempore quasi dolor architecto. Beatae.

버튼한개 Turn On 버튼 두개 ex01_03 html 요소 속성변경 trun on turn off

버튼 두개로 전구 불 키고 끄기 ex01_03 html 요소 속성변경 trun on turn off 버튼 하나로 처리 ex01_04 하나의 버튼으로 불 끄고 켜기 Turn on 스위치변수를 사용하여 전구 불 끄고 키기 삼항연산자 다시풀어보기 ex01_03 html 요소 속성변경 trun on turn off

[미디어타입] CSS2 도입 미디어타입 (유형) ? 다른 미디어 (컴퓨터, 프린터, 스마트폰, TV 등등) 에 서로 다른 스타일 적용 규칙 정의 CSS2 도입 미디어타입 (유형) CSS2 미디어유형 + 확장 (인쇄) [미디어 쿼리] 뷰포트의 너비와 높이 장치의 너비와 높이 방향 (가로/세로모드) 반응형 웹 [미디어 쿼리] 는 여러장치 (미디어) 에 맞춤형 스타일시트를 제공하기 위해서 사용되는 기술... [미디어 쿼리 형식] @media not|only mediatype and (expressions 참, 거짓 - 여러개 표현식) { css 코딩; } mediatype all print screen speech not 특정 미디어타입만 적용 X only 특정 미디어타입만 적용 O all 기본값. 480 미..

로딩이미지 HTML 삽입 미리보기할 수 없는 소스 이미지 흔들기 HTML 삽입 미리보기할 수 없는 소스

한 스타일에서 다른 스타일로 점차적으로 변환되는 것. @keyframes animation-name animation-duration animation-delay animation-iteration-count animation-direction animation-timing-function animation-fill-mode animation 첫 단계: @keyframes 키프레임을 지정 키프레임 - 특정 시간에 요소가 가지는 스타일 속성 예제 4초동안 점차적으로 빨->노 애니메이션 효과 애니메이션 효과 한 스타일에서 다른 스타일로 점차적으로 변환되는 것. @keyframes animation-name animation-duration animation-delay animation-iteration-co..

[2D/3D 변환] 변환: 요소크기 조정/이동/기울기/회전 transform 속성 전환: 주어진 기간동안 속성값을 매끄럽게 변경 transition 속성 transition-delay 전환 연기시간 속성 transition-duration 지속시간 속성 transition-property CSS 속성 transition-timing-function ease 전환속도 곡선 속성 ease(기본값) 천천히(시작) -> 빨라 -> 천천히(종료) linear 등속 (시작~종료) ease-in 천천히 (시작) ease-out 천천히 (종료) ease-in-out 등등 trainsition css 2D/3D 변환작업 css전환 전환: 주어진 기간동안 속성값을 부드럽게 변경 [2D/3D 변환] 변환: 요소크기 조정/이..

2D 변환] 요소를 이동, 회전, 크기조정 및 기울기 transform 속성 2D 변환방법 translate() 요소를 이동 rotate() 요소를 회전 scaleX() 요소의 크기조정 - X축 scaleY() 요소의 크기조정 -Y축 scale() 요소의 크기조정 - X, Y축 skewX() 요소를 기울어지게... X축 skewY() 요소를 기울어지게... Y축 skew() 요소를 기울어지게 matrix() 이동/회전/크기조정/기울어지게 translate() 이동 transform: translate(50px, 100px); -ms-transform: translate(50px, 100px); rotate 회전 transform: rotate(20deg); -ms-transform: rotate(20de..