본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기174

#검색결과

총 174개를 찾았어요 ^^b

/

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.
패럴렉스 효과 설명! 패럴렉스 이펙트 구현하기 페럴렉스 이펙트를 구현하기 위해서는 브라우저 상단의 값을 기준으로 스크롤을 내렸을때 각각 요소들과 비교를 하여 변화를 주도록 구현해야하는데요 한번 이번시간에는 그 방법에 대하여 알아보겠습니다! 자바스크립트 : 패럴렉스 이펙트 구현 예제 스크롤 높이 값을 구하기 위해 하단의 스크립트를 작성합니다 브라우저마다 지원여부가 다르기 때문에 "||"을 적어 셋 중 한가지를 선택해 작동하도록 적습니다. let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop 핵심요소 패럴렉스 효과의 구현을 위해서는 하단의 순서 방식으로 작동합니다 1.forEach를 통해 각 .content__item 클..
2022. 9. 6.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바