본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

CSS11

#검색결과

총 11개를 찾았어요 ^^b

/

CSS 애니메이션 : 걸어가는 이미지 만들기! CSS 이미지 애니메이션 각각의 장면을 연속적으로 등장시켜 움직이는듯한 애니메이션을 줄 수 있습니다! CSS 하단의 CSS 백그라운드 포지션이 최대 본인이 적용하려는 이미지의 해상도에 맞게끔 설정해줍니다! .step { height: 700px; background: #7e7e7e; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://github.com/kimsangjunv1/coding/blob/main/animation/img/ani1.jpg?raw=true); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: tr..
2022. 9. 8.
CSS 애니메이션 : 요소의 움직임! SVG로 도형 만들어보기 svg 태그안에 rect를 point로 수치를 조정해 도형을 구현해낼 수 있는데 한번 이번 시간에는 해당 부분에 대하여 학습해봅시다! animation 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝나고 난 뒤 어떤 값을 적..
2022. 9. 8.
svg를 이용해 애니메이션을 구현해보자! SVG ANIMATION svg에 애니메이션을 줄 수도 있습니다 해당 부분에 대하여 학습해봅시다! 기초적인 애니메이션 stroke-width 값을 조정하는 애니메이션을 만들어 기존에 만들어둔 벡터 도형(선)에 애니메이션을 불어넣습니다! HTML 하단의 HTML 코드를 입력하여 기초 뼈대를 잠아주고 대신 stroke-width값이 조절 가능한 애니메이션이 동작 할 수 있도록 stroke-width값을 각각 도형에 알맞게 넣어줍니다. CSS : KEYFRAMES CSS 작성시 stroke-width 값을 조절하는 애니메이션을 만들어 줍시다! .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41; stroke-wid..
2022. 9. 7.
svg로 도형 만들기! SVG ANIMATION svg 태그안에 rect를 point로 수치를 조정해 도형을 구현해낼 수 있는데 한번 이번 시간에는 해당 부분에 대하여 학습해봅시다! 벡터 이미지 벡터 이미지란 아무리 확대하여도 깨지지 않는 이미지를 의미하는데요, 보통 일러스트레이터에서 사용하는 도형이 벡터 이미지 입니다! SVG 클리핑 마스크 포토샵에 클리핑 마스크를 이용하면 변화시키고 싶은 도형에 다양한 변화를 줄 수 있듯, css로도 해당 부분에 대한 처리가 가능합니다 SVG SVG
2022. 9. 7.
728x90
반응형

#HASH_TAGS

-

1

ImageSlideEffect 메서드 scroll-snap-align HTML 오늘도 웹표준은.. 멈추지 않는 ' j ' 시리-즈 오늘 조업 마감했습니다. 선택해주세요 scroll-snap-type 제이쿼리 코딩 숙제가 다양해서 너무 좋아요 JQuery 오징어 두마리 포획 완료 화사한가요? 필터선택자 내일은 즐거운 월요일 오징어 한마리 수확 완료! 오늘은 내가바로 오징어! 이건 또 뭐람 울적하니 꽃을 달아봤습니다 Method 다크모드 코드 슬라이드 결과 : 월요일 오징어 1Kg 당 3000원 공부

티스토리툴바