CSS23 애니메이션 만들기 - Moving Eye CSS 애니메이션 연습하기 마우스 커서를 따라 눈이 움직이는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen Moving Eye by younghwan12 (@younghwan12) on CodePen. HTML 정육면체를 만들기 위해서 div박스를 6개 만들어줍니다. 무섭지 CSS 사진들을 위치를 잡아주고 눈은 각각 가상변수로 잡아줍니다. * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px;.. 2022. 9. 26. CSS 애니메이션 - Loading ball CSS 애니메이션 연습하기 원이 돌아가면서 로딩되는거같은 효과를 만들어보겠습니다. 결과 See the Pen loading by younghwan12 (@younghwan12) on CodePen. HTML 공을 10개 만들어줍니다 CSS 공을 360도로 애니메이션 효과를 주면서 돌려주면서, 각각 하나에 딜레이를 줍니다. body { background-color: rgba(100,20,240,0.7); } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball {.. 2022. 9. 25. CSS 애니메이션 - 3D cube CSS 애니메이션 연습하기 큐브를 만들어서 3d효과로 입체적으로 만들어보겠습니다. 결과 See the Pen 3D cube by younghwan12 (@younghwan12) on CodePen. HTML 정육면체를 만들기 위해서 div박스를 6개 만들어줍니다. 북극꼼 CSS 배경색을 넣고 z축까지 위치를 설정해서 정육면체를 만들어줍니다. 그리고 각각의 면에 애니메이션을 각각 줘서 위 아래로 커졌다가 작아지는 애니메이션을 만들어줍니다. body { background-color: gray; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: rel.. 2022. 9. 22. CSS 애니메이션 - (기름에튀기는 글자 CSS 애니메이션 연습하기 글씨가 통통 튀는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen bouncing_text by younghwan12 (@younghwan12) on CodePen. HTML 제목 h1태그에 span태그를 각각 세개 넣어줍니다. 북 극 꼼 CSS 각 글자들의 딜레이를 줘서 순서를 다르게 하고, 바닥에 text-shadow로 그림자를 줍니다 html,body { width: 100%; height: 100%; background: linear-gradient(120deg, gray 25%, gold 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 .. 2022. 9. 21. CSS 애니메이션 - 마우스 오버효과(3D첨가) CSS 애니메이션 연습하기 마우스 오버 효과에 3D를 간단하게 첨가해서 멋진 애니메이션 효과를 만들어 보겠습니다. 결과 See the Pen MouseHoverEffect by younghwan12 (@younghwan12) on CodePen. HTML 사진4장을 각각 두장씩 한 태그로 묶어서 만들어줍니다. Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Right Mouse Hover Effect 마우스 내리면 to Left CSS 사진 두장을 앞뒤로 겹치고 뒤집었을때 뒷면을 안보이게 설정합니다. @font-face { font-family: 'LocusSangsang'; font-we.. 2022. 9. 20. CSS 애니메이션 - 꿀렁이는 원 CSS 애니메이션 연습하기 원이 꿀렁이는 애니메이션을 만들어보겠습니다. 결과 See the Pen Wave Animation by younghwan12 (@younghwan12) on CodePen. HTML(PUG) PUG를 사용했습니다. HTML로 보고싶으시다면 코드팬에서 컴파일 해보시기 바랍니다. div.circle-wrap -for (var x = 1; x 2022. 9. 19. CSS 애니메이션 - 걷기 애니메이션 CSS 애니메이션 연습하기 오늘은 걸어가는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen walkingAnimation by younghwan12 (@younghwan12) on CodePen. HTML 버튼을 두개 만들어줍니다. & Start Stop CSS 사진을 쭉 가로로 길게 만들어주고 800px씩 우에서 좌로 이동하는거로 만들어줍니다. .step { height: 700px; background: #43dcf6; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; left: 50%; top:.. 2022. 9. 7. CSS - 애니메이션의 모든것 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. CSS(SVG) 애니메이션 - 글씨 효과 SVG 애니메이션 연습하기 SVG를 이용해 애니메이션 글씨 효과를 연습해보겠습니다 결과 See the Pen Text Animation by younghwan12 (@younghwan12) on CodePen. HTML svg에 박스 크기를1320 300으로 지정해주고, x, y 50프로 middle을 이용해 가운데로 맞춰주고 y축을 따라 40px씩 따라주게 갑니다. 김치치즈스마일 CSS 0퍼 70퍼 80퍼 100퍼로 나누어준뒤 선을따라 그려지면서 글씨 틀을 잡은뒤 마지막에 테두리가 사라지면서 나타나고 안에 색이 차는 애니메이션을 만들어줍니다. @font-face { font-family: 'OKDdung'; font-weight: normal; font-style: normal; src: url('ht.. 2022. 9. 7. SVG - 알아보기 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) 소스보기 원형(circle, ell.. 2022. 9. 7. CSS 애니메이션 연습하기 03 CSS 애니메이션 연습하기 오늘은 간단하게 css 애니메이션을 이용해서 공이 움직이며 잔상이 남기는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen bouncing_ball by younghwan12 (@younghwan12) on CodePen HTML HTML에 wrapper라는 태그를 5개 만들고 그안에 div 태그를 만들어줍니다. CSS 배경색을 넣은뒤 5개의 원을 각자 위치를 잡아주고 애니메이션효과를 주면서 공이 점점 작아지며 흐릿해지게 만들어 잔상처럼 보여주게 만들어줍니다. * { box-sizing:border-box; } body { background: linear-gradient(to top, yellowgreen 0%, pink 100%); width: 100vw; hei.. 2022. 9. 2. CSS - GSAP 알아보기 GSAP 알아보기 GSAP은 웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다.GSAP은 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 프론트엔드 개발자와 디자이너들이 쉽게 사용할 수 있는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있습니다. 사용방법 GASP홈페이지에서 gsap.min.js를 가져와서 사용할 수 있습니다. 예시 아래의 예시는 코드팬에 GSAP에서 아주 잘 만든 예제이기에 한번 보시라고 가져왔습니다. 이처럼 GSAP는 자바스크립트에서 만들 수 없는 부드럽고 섬세한 애니메이션을 훨신 .. 2022. 8. 29. CSS 애니메이션 연습하기02 CSS 애니메이션 연습하기 오늘은 간단하게 css 애니메이션을 이용해서 두개의 원이 돌아가는것을 만들어 보겠습니다. 결과 See the Pen Loading Circle by younghwan12 (@younghwan12) on CodePen. HTML HTML에 로딩태그 안에 원을 두개 만들거니 두개의 서클태그를 span태그로 만들어줍니다. CSS 배경색은 그라데이션을 넣어줍니다. 로딩을 position absolute를 이용해 정 중앙에 만들고, 크기값을 넣어서 영역을 만들어줍니다. 그리고 각각 원을 만들어 로딩 영역 끝에 배치를 해준뒤에 로딩태그에 애니메이션을 넣어서 회전하는듯한 모습을 표현했습니다. body { height: 100vh; background-image: linear-gradient.. 2022. 8. 29. CSS 애니메이션 연습하기01 CSS 애니메이션 연습하기 오늘은 간단하게 css 애니메이션을 이용해서 굴러가는듯한 박스를 만들어 보겠습니다. 결과 See the Pen box by younghwan12 (@younghwan12) on CodePen. HTML HTML에는 뭐 만들거 없이 div태그로 박스를 하나 만들어줍니다. CSS 구조는 어렵지 않습니다. 배경색은 그라데이션 효과를 이용해서 색을 넣었습니다. 박스의 크기값을 50px 50px position absolute를 이용해 가운데에 만들고, before라는 가상변수를 만들어 바닥에 그림자를 만든후에, after라는 가상변수는 애니메이션 효과를 주어 각각 0~100퍼센트 사이에 y축으로 이동하고, 22.5도씩 회전시켜서 굴러가는듯한 이미지를 만들었습니다. body { heig.. 2022. 8. 29. CSS 요소숨기기 요소 숨기기 안녕하세요. 오늘은 css를 이용해서 요소를 안보이게 하는방법을 알려드리겠습니다. display: none display: none 는 렌더링트리와 접근성 트리에서 사라지게 합니다. .button { display : none; } visibility: hidden visibility: hidden은 렌더링트리와 접근성 트리에서 사라지게 합니다. hidden은 별도의 CSS가 없이도 HTML을 통해서 완전히 마스킹할 수 있어서 편리한 점이 있습니다. .button { visibility: hidden; } opacity: 0 opacity: 0은 엘리먼트의 요소를 안보이게 하지만, visibility: hidden과 마찬가지로 빈공간이 남아 있게 됩니다. 이 콘텐츠에 접근할 수 있는지 여부는.. 2022. 8. 25. CSS 색상 표현법 색상 표현법 안녕하세요. 오늘은 CSS에서 색상을 표현하는 방법을 간단히 설명드리겠습니다. 1. 색상명으로 표현 색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다 ex) red yellow brown... colorname : red colorname : green colorname : blue 결과 확인하기 colorname : red colorname : green colorname : blue 2. RGB값으로 표현 rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 결정짓습니다. ex) rgb(255, 255,.. 2022. 8. 23. CSS 단위 CSS 단위 오늘은 CSS의 단위와 값에대해서 설명드리겠습니다. rem(root em) 가장 익숙할 수 있는 단위로 시작해 보자면 em은 현재의 font-size를 정의합니다. 예시로 body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다. 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px의 크기가 됩니다.1.2em씩 크기가 커지는 예제를 보여드리겠습니다. See the Pen rem_ex by younghwan12 (@younghwan12) on CodePen. 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 합니다. 이런 경우 바로 rem 단위를 사용하면 됩니다. rem의 "r"은 바로 "root(최상위).. 2022. 8. 23. 이미지 스프라이트 / 백그라운드 표현 / IR 효과 이미지 스프라이트 / IR 효과 / 백그라운드 표현 오늘은 CSS에서 자주 사용하는 이미지 스프라이트, IR 효과 , 백그라운드 표현에 대해서 알려드리겠습니다. 이미지 스프라이트란? 스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미합니다. 이미지 스프라이트는 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입합니다. 이미지 스프라이트를 이용해서 백그라운드 표현하는 예시를 보여드리겠습니다. 네이버 페이스북 구글 카카오 태그를 작성한 후 가상요소 ::after를 CSS에서 설정합니다. a::after { content: .. 2022. 8. 19. CSS - SCSS SCSS Sass(SCSS)란 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주어 유지보수를 쉽게 해준다. CSS, SCSS의 차이점 SCSS 와 CSS의 차이점에는 CSS는 id,class로 스타일을 선언해 css에 넣어주는 반면에 SCSS는 $기호를 사용해서 직접 변수를 만든뒤 넣습니다. 예시로 확인하겠습니다. body { font: 100% Helvetica, sans-serif; color: #333; } 위의 표현이 CSS에서 사용하는 기본 표현이라면 SCSS에서는 변수를 선언해 아래쪽처럼 표현할 수 있습니다. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { fon.. 2022. 8. 18. CSS 강아지 만들기 CSS 이용해서 강아지 만들기 오늘은 css의 에니메이션 효과를 이용해서 강아지를 만들어보겠습니다 결과 See the Pen CSS Dog by younghwan12 (@younghwan12) on CodePen. HTML(Pug) HTML에서 Pug를 이용해서 만들었습니다. Pug코드와 컴파일한 HTML코드는 다음과 같습니다. .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 CSS(SCSS) CSS에서 S.. 2022. 8. 18. CSS 미디어 쿼리 미디어 쿼리(media query) 뷰포트의 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 ㅇ기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이 (http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 iPhone X 375 812 iPhone 6,7,8 375 667 iPho.. 2022. 8. 13. CSS 기본문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트 만으로 사용할 수도 있습니다. 또한 인라인 스타일시트는 대체로 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한경우 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 예시 // 예시입니다. 우리를 기쁘게 하는 것들. 결과 우리를 기쁘게 하는 것들 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *... 2022. 8. 13. 벡터와 비트맵 벡터와 비트맵 컴퓨터 그래픽에서 이미지 표현방식은 크게 두가지로 구분되는데, 백터와 비트맵 방식입니다. 이 둘에 대해서 알아봅시다. 벡터 벡터 방식은 점과 점을 연결함으로써 수학적 함수관계에 의해 이미지를 표현하여 선과 면을 만들어냅니다. 이렇게 만들어진 선이 두껫값과 색상 값, 곡률값을 갖거나 면이 색상 값을 가지면서 이런 점, 선, 면의 요소들이 모여 그래픽을 만들게 되는 것입니다. 여기서 벡터의 점은 좌표계(x,y)로 구성되기 때문에 비트맵의 픽셀과 달리 이미지의 크기 조절이나 변형 때문에 해상도가 깨지지 않습니다. 돋보기로 봐야 할 만큼 크기를 줄이거나 건물에 붙일 만큼 크기를 키워도 깨짐 현상이 없습니다. 그러므로 크기조절이 자유로워야 하는 로고나 여러 포인트로 조정되어야 하는 서체, 캐릭터 등.. 2022. 8. 9. 이전 1 다음
