SeaPlus

[구현] 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미한다. - SVG태그는 SVG그래픽을 담기 위한 요소이다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있다. - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그이다. 2. SVG의 stroke 속성 - stroke : 선색 속성 - stroke-width : 선 굵기 속성 - stroke-linecap : 선의 양쪽 끝 모양 속성 - stroke-dasharray : 점선처리 속성 ( 홀수번째 적은..

[구현 효과] 360도 회전하는 원형 모양의 요소 3개를 생성한다. 약간 찌그러진 원형의 모양은 Fancy Border Radius Generator 라는 사이트를 이용해 쉽게 구현할 수 있다. [ https://9elements.github.io/fancy-border-radius/#49.69.55.31--. ] Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io [HTML] Loading... [css] * { box-sizing: border-box; margin: 0; padding: 0; } body { display: flex; justify-conten..

[구성요소] - h2 두개로 구현된 애니메이션 - content h2:nth-child(1) 는 water 문자를 표현하는 역할 - content h2:nth-child(2) 는 water 내부의 물결치는 애니메이션으로 만든다. [Clippy - CSS clip-path maker] Clippy 사이트 ( https://bennettfeely.com/clippy/ ) - clipy-path 함수는 shape을 생성하는 함수이고 지정 값을 통해 원하는 모양을 만들 수 있다. - 사이트를 통해 물결모양을 생성한다. [HTML] Water Water [CSS] @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;5..

하단부 에서 bubble 효과가 나타났다가 사라지는 애니메이션 - 버블 요소를 하단부에 정렬 배치 - 각 버블에게 "하단 -> 상단" 으로 움직이는 animation 적용 - 각 버블이 하단->상단으로 움직일때 하단부분과 상단부분 keyframes 에서 opacity 값 조정 - 각 버블에게 적용되는 animation delay값을 조정하여 다른속도로 실행된다. [HTML] Sign UP Welcome to our World's Creative Studio Take a tour [CSS] * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: sans-serif; color: #fbfcfd; } button { display: b..