HTML29 애니메이션 - 텍스트 가 그려지는 효과 SVG Text Animation SVG 를 이용한 애니메이션을 만들어 보았습니다. See the Pen Text Animation by hmm365 (@hmm365) on CodePen. html viewBox 는 svg 요소의 크기를 확대 또는 축소 그리고 위치를 조정할 수 있는 속성 입니다. viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절 됩니다. (viewBox="min-x min-y width height") 요소는 텍스트로 구성된 그래픽 요소를 그립니다. () text = x='50%' y='50%' , text-anchor='middle' 으로 텍스트 를 중간 정렬을 한것입니다. 코드 보기 SyuMay css stroke-dashoffset 은 strok.. 2022. 9. 8. 애니메이션 - Animation Steps | 움직이는 이미지 CSS Animation Steps gif 파일의 프레임을 풀어서 하나의 이미지로 만든후 값을 지정하여 움직이는 애니메이션 효과를 만들었습니다. See the Pen stepAni by hmm365 (@hmm365) on CodePen. html step 클래스는 이미지를 넣을 stepbox 가 넘치지 않도록 영역을 잡아준후 stepbox 에 이미지를 넣습니다. 코드 보기 Start Stop css stepbox 에 해당하는 이미지크기를 원하는대로 조정한후 background 를 이용하여 프레임을 해체한 이미지를 불러옵니다. 여기서 중요한점은 크기를 조정한 결과에 따라 이미지 속도라 달라진다는것을 확인할수있습니다. 따라서 저는 원본이미지크기가 1600 / 1200 사이즈이므로 3배를 줄여 animatio.. 2022. 9. 7. 애니메이션 - CSS Intro animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 7. 애니메이션 - SGV INTRO SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) 원형(circle, ellipse).. 2022. 9. 7. 요소 크기 위치 및 크기를 표현하는 속성 및 메서드 속성 및 메서드 설명 element.clientWidth 요소의 가로값(margin, border 미포함) element.clientHeight 요소의 세로값(margin, border 미포함) element.clientTop 요소의 Y축 값(부모 기준) element.clientLeft 요소의 X축 값(부모 기준) element.offsetWidth 요소의 가로값(border, padding 포함) element.offsetHeight 요소의 세로값(border, padding 포함) element.offsetTop 요소의 Y축 값(문서 기준) element.offsetLeft 요소의 X축 값(문서 기준) element.getBoundingClientRect().. 2022. 9. 1. 사이트유형 - 텍스트 유형 세 번째 사이트 유형 | 텍스트유형 텍스트 유형 은 카드 유형하고 비슷하지만 그안에 텍스트를 넣었습니다. 1.HTML 코드 코드 보기 텍스트 유형 각 유형의 특징을 알아보고, 골고루 사용해보자 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 우르르쾅쾅 곰 동물 자세히 보기 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 곰은 엄청 강해요 강해서 엄청 위험해요 그러니 도망가는걸 추천해요 하지만 곰은 귀여워서 봐줄거에요 엄청 위험해요 그러니 도망가는.. 2022. 9. 1. 이전 1 2 3 4 5 다음 728x90 반응형
