본문 바로가기
loading Animation loading Animation codepen에서 로딩하는 애니메이션을 만들었습니다. 01. HTML 총 10개의 ball을 만들어줍니다. 02. css 정 가운데로 오게 만들고 애니메이션 딜레이를 주어 하나씩 움직이게 만들어줍니다. body{ background-color: rgb(105, 54, 199); } .loader { position: absolute; top: 50%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top:50%; left:50%; transform:translate.. 2022. 9. 26.
Text animation Text animation codepen에서 글자들이 하나씩 통통 튀는 애니메이션을 만들었습니다. 01. HTML html은 간단합니다. h1 에서 글자 수 만큼 span을 만들어 한 글자씩 적어줍니다. C U T E C A T ♥ 02. css 이후에 배경을 지정해주고 원하는 font-family로 지정해준다음, text-shadow로 그림자의 강도를 높여줍니다. 그리고 글자에 animation-delay를 지정해 하나씩 움직이게 만들어줍니다. html, body { width: 100%; height: 100%; background: linear-gradient(140deg, rgb(80, 97, 255) 0%, rgb(54, 7, 131) 100%); display: flex; justify-con.. 2022. 9. 22.
box Animation box Animation codepen에서 box가 늘어났다 줄어드는 애니메이션을 만들었습니다. 01. HTML 정육면체인 만큼 6개의 빈칸을 만들어줍니다. 마뇽 02. css 원들 에게 애니메이션을 줄 때, 한번에 많은 수를 움직이는 것을 해야하니 scss로 for문을 사용해 여러개의 nth-child를 한 문장으로 해결할 수 있게 하였습니다. body { background-color: #000; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style:.. 2022. 9. 22.
Mouse Hover Effect Mouse Hover Effect 마우스를 올려놓거나 내렸을 때 3D 효과가 나오는 애니메이션을 공부했습니다. 01. HTML 위, 아래와 오른쪽,왼쪽인 두가지 버전을 하였습니다. 🐇 HTML 코드 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Left Mouse Hover Effect 마우스 내리면 to Right 02. Css 중요한 코드는 transform-style : preserve-3d; = 3D 효과를 주는 css backface-visibility: hidden; = 뒤로 돌리면 사라지게 하는 css 입니다. 🐇 css 코드 body { font-family: 'LocusS.. 2022. 9. 20.
Wave Animation Wave Animation codepen에서 원들이 웨이브를 하는 애니메이션을 만들었습니다. 01. HTML pug를 사용해 for문으로 많은 박스를 만들어줍니다. div.circle-wrap - for (var x =1; x 2022. 9. 19.
애니메이션 만들기 뚜벅뚜벅 나의 길을 걷는다. 애니메이션 Start Stop css 보기 .step { height: 700px; background: #3b0670; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(https://github.com/Packsunhye/coding/blob/main/aniamation/img/20220907_GIP.jpg?raw=true); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: ani 1.4s steps(31, start) infinite; .. 2022. 9. 8.
css intro 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.. 2022. 9. 8.
SVG animation SVG animation 텍스트 애니메이션을 준비해보았습니다. See the Pen Untitled by Packsunhye (@packsunhye) on CodePen. html svg viewBox="0 0 1320 300"> 해파리 2022. 9. 8.
SVG Intro SVG Intro 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 예제 보기 사각형(rect) svg 원.. 2022. 9. 8.
두 원이 돌아가는 애니메이션 두 원이 움직이는 애니메이션 codepen에서 두 원이 한 방향으로 움직이는 애니메이션을 만들어보았습니다. 01. HTML 두 원과 애니메이션을 주기 위한, 부모박스가 있습니다. 02. css 동그란 두 원을 만들고 위치값을 설정해준 뒤, rotate로 빙빙 돌아가게 만들어줍니다. body { height: 100vh; background-image: linear-gradient(-60deg, #f973b5 0%, #f1dcff 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100 ; } .loading .circle1 { display: blo.. 2022. 8. 29.
박스가 움직이는 애니메이션 박스가 움직이는 애니메이션 codepen에서 굴러가는 박스를 만들어보았습니다. 01. HTML 정직하게 정말 박스 하나만 있습니다. 02. css 박스와, 그림자에 부여하는 것 빼고는 키프레임으로 움직임을 부여하면 되는 간단한 애니메이션입니다. body { height: 100vh; background-image: linear-gradient(to top, #9048d4,#18cfd7); } .box { width: 50px; height: 50px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px; height: 5px; background-colo.. 2022. 8. 29.
요소를 숨기는 방법 요소를 숨기는 법 요소를 숨기는 법은 총 다섯가지가 있습니다. 한번 살펴봅시다. 01. display를 사용하는 방법 요소가 있는 블럭을 건드리는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다. .원하는 영역 { display : none; } 02. opacity 사용하는 방법 투명도를 조절하는 방법 입니다. 영역도 살릴 수 있고 애니메이션도 사용할 수 있습니다. .원하는 영역 { opacity : 0; } // 투명도를 0으로 만듬 03. visibility 사용하는 방법 레이아웃을 변경하지 않고 요소를 보이거나 숨기는 방법입니다. 영역을 없애버리면서 애니메이션도 쓸 수 없게 만듭니다. .원하는 영역 { visibility : hidden; } //숨긴다 04. whidth와 he.. 2022. 8. 25.
css 색상 표현 CSS의 색상 표현 방법들 css로 색상을 표현하는 방법은 여러가지가 있습니다. 어떠한 방법이 있는지 알아봅시다. 01. 색상의 이름으로 표현 white나, black, red등 색상의 이름으로 결정해줄 수 있습니다. 그러나 세세한 채도나 명도의 변경을 할 수는 없어 잘 쓰이진 않습니다. color : blue; background-color : red; 02. 색상의 코드로 표현 #RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법이다. RR, GG, BB는 각각 red, green, blue를 나타내는 값이며 16진수 00에서 FF사이의 값으로 결정됩니다. color : #0099a4; background-color : #8f31ea; 03. RGBA로 표현 RGB 표현의 확장으로, 불투명.. 2022. 8. 23.
CSS의 단위 CSS의 단위들 01. CSS의 절대 길이 단위들 단위 설명 cm 센티미터 mm 밀리미터 in 인치 px 픽셀 02. CSS의 상대 길이 단위들 단위 설명 예시 em 폰트 크기를 설정하는 값 중 em은 동적으로 변경되는 사이즈를 가집니다. 아무런 적용이 없다면 16px가 보통이 됩니다. font-size : 1em rem rem은 합성 문제를 해결하기 위해 만들어졌습니다., rem은 부모 엘리먼트가 아닌 최상위 엘리먼트에 기준을 둡니다. font-size : 1rem vh 반응형 작업을 위해 뷰포트의 사이즈의 높이에 맞춰 퍼센트로 작업하기 위해 만든 단위입니다. height: 100vh; vw 반응형 작업을 위해 뷰포트나 사이즈의 넓이에 맞춰 퍼센트로 작업하기 위해 만든 단위입니다. font-size: .. 2022. 8. 23.
이미지 스프라이트 이미지 스프라이트 란? 스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미"한다 아래는 예시입니다. 장점 단점 이미지 로딩 속도 향상(최적화)된다. 상황에 따라 유지보수가 어려울 수 있다. HTML 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다. 데이터 관리에 문제가 생기면 이미지의 로딩이 불가능하다. 하나의 파일만 관리하면 된다. - 이미지 스프라이트 사용하는 법 //사용하는 html 링크 /* ir 효과 */ .ir { display: block; overflow: hidden; font-size: 0; line-height: 0; text-inden.. 2022. 8. 20.
Sass Sass 란? Sass는 컴파일 과정을 통해 CSS 파일을 생성해 주는 CSS의 확장 언어이자 전처리기(preprocessor)로써, 이 기능들은 코드 작성에 드는 시간을 줄여주고, 코드를 유지 관리하는 데 도움이 됩니다. Sass는 CSS의 확장 언어이고, 이는 결국 CSS 코드를 생산해내기 위해 사용하는 일종의 도구인 셈입니다. Sass가 제공하는 문법을 기반으로 코드를 작성한 다음, 이를 컴파일해 CSS 파일을 빌드하는 것이 Sass를 통해 스타일시트를 생산하는 절차입니다. Sass를 사용하는 이유 01. 호환성: 모든 버전의 CSS와 완벽하게 호환됩니다. 02. 기능성: 다양한 기능을 제공하고, 거의 모든 면에서 뛰어납니다. 03. 안정성: 오랜 기간 적극적인 지원 아래 관리되어 왔습니다. 04... 2022. 8. 18.
강아지 애니메이션 강아지 애니메이션 코드펜에서 pug나 sass 언어를 사용해 열정적으로 꼬리를 강아지를 만들어보았습니다. 01. pug 코드 펜에서는 html을 pug로 탭만을 이용하여 부모와 자식의 관계를 설정할 수 있습니다. 강아지의 구조를 pug로 디자인 해보았습니다. .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue html로 변경했을 때에 sass sass 확인하기 &$dog-width: 100px; $interva.. 2022. 8. 18.
미디어 쿼리 미디어 쿼리 뷰포트의 해상도에 따라 css를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 01. 최소 가로폭아 1000px, 즉 1000px보다 넓은 해상도일때 style_pc.css를 연결한다는 뜻이다. 또한 아래는 트로이에서 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPhone 6,7,8 plus 414 736 iPhone 5 320 568 Galaxy S5,.. 2022. 8. 15.
CSS 기본 문법 CSS 기본 문법 css(cascading style sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일 시트 등이 있습니다. 실제로는 외부 스타일 시트를 많이 사용하는 편이지만 간단한 스타일은 내부 스타일 시트 만으로 사용할 수 있습니다. 또한 인라인 시트는 거의 사용하지 않지만 가장 우선 순위가 높아서 꼭 필요한 경우는 간단하게 사용할 수 있습니다. 01. 내부 스타일 시트 CSS를 HTML 문서 안에 태그를 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태 우리를 기쁘게 하는 것들 확인하기 우리를 기쁘게 하는 것들 02. 외부 스타일 시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 .. 2022. 8. 15.
벡터와 비트맵 백터란? 그래픽의 형태들이 수학적 공식으로 이루어져 있습니다. 다시말해 벡터 방식의 그래픽은 고정된 비트맵을 가지고 있는 것이 아니라, 수학적 공식으로 이루어진 오브젝트들이 그때그때 디스플레이에 비트맵화 되어 스크립에 표시 됩니다. 벡터의 장점과 사용하는 곳 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않습니다. 보기로 봐야 할 만큼 크기를 줄이고, 건물 외벽에 붙일 만큼 크기를 키워도 깨짐현상이 없습니다. 그래서 벡터 방식은 여기저기 적용하는 부분이 많아, 크기조절이 자유로워야 하는 로고나 여러 포인트로 조정되어야 하는 서체, 다양한 크기로 여러 곳에 응용되어야 하는 캐릭터 등을 제작할 때 사용합니다. 그리고 픽셀로 구성되는 비.. 2022. 8. 9.
고양이 고양이
고양이 고양이
고양이 고양이

티스토리툴바