css22 애니메이션 만들기 09 애니메이션 09 애니메이션 만들기 아홉번째 시간입니다. 오늘은 좀 복잡한 코드가 들어간 애니메이션을 만들어보겠습니다. 사진의 눈동자가 마우스를 따라서 움직입니다. 01. HTML { 안녕 } 02. 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; height: 547px; transform-style: preserve-3d; } .me { position: absolute; width: 369px; h.. 2022. 9. 26. 간단한 애니메이션 08 간단한 애니메이션 08 간단한 애니메이션 만들기 여덟번째 시간입니다. 뱅글뱅글 돌아가는 로딩 애니메이션을 만들어보겠습니다. 01. HTML { } 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(-50%, -50%); height: 100%; a.. 2022. 9. 25. 간단한 애니메이션 07 간단한 애니메이션 07 간단한 애니메이션 만들기 일곱번째 시간입니다. 회전하면서 길쭉하게 늘어났다가 줄어드는 상자를 만들어보겠습니다. 01. HTML { 코딩대원 } 02. CSS { body { background-color: #0B2C81; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotat.. 2022. 9. 22. 간단한 애니메이션 06 간단한 애니메이션 06 간단한 애니메이션 만들기 여섯번째 시간입니다. 팔딱팔딱 뛰는 글자를 만들어보겠습니다. 01. HTML { w e b s t o r y a } 02. CSS { html,body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: '궁서체'; font-size: 80px; color: #fff; position:relative; top: 20px; display: inline-block;.. 2022. 9. 21. 간단한 애니메이션 05 간단한 애니메이션 05 간단한 애니메이션 만들기 다섯번째 시간입니다. 수업시간에 배운 마우스오버 효과를 이용해서 예제를 만들어보겠습니다. 01. HTML { Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Left Mouse Hover Effect 마우스 내리면 to Right } 02. CSS { @font-face { font-family: ‘LocusSangsang’; font-weight: normal; font-style: normal; src: url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot’); src.. 2022. 9. 20. 간단한 애니메이션 04 간단한 애니메이션 04 간단한 애니메이션 만들기 네번째 시간입니다. 웨이브 애니메이션을 만들어보겠습니다. 01. HTML Pug를 컴파일시켰습니다. 너무 길어서 접어놓겠습니다. 결과보기 { } 02. CSS SCSS를 컴파일 시켰습니다. { body { display: flex; align-items: center; justify-content: center; height: 100vh; background-image: linear-gradient(45deg, #00DBDE 0%, #FC00FF 100%); } .row { display: flex; } .row .circle { width: 10px; height: 10px; border-radius: 50%; margin: 5px 10px; backgr.. 2022. 9. 19. 애니메이션 속성 정리 / 예제 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 애니메.. 2022. 9. 8. SVG 텍스트 애니메이션 SVG 텍스트 애니메이션 SVG 텍스트에 stroke효과와 애니메이션 효과를 입혀서 예쁘게 만들어보겠습니다. 01. HTML { kimdaewonn } 02. CSS { @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.w.. 2022. 9. 8. Walking 애니메이션 Walking 애니메이션 걷는 애니메이션을 만들어보겠습니다. 01. 포토샵 포토샵을 이용해 프레임을 나눠서 저장해줍니다. 02. 완성본 step과 stop을 이용해 걸어가는 애니메이션을 완성해줍니다. See the Pen Untitled by kimdaewonn (@kimdaewonn) on CodePen. 2022. 9. 7. SVG Intro SVG intro SVG 에 대해 알아보는 첫번째 시간입니다. 01. SVG란? 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. ● 인터넷 익스플로러9 버전 이상부터 지원됩니다. ● XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. ● 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. ● DOM 단위로 컨트롤이 가능하지만 문서 복잡.. 2022. 9. 7. 간단한 애니메이션 03 간단한 애니메이션 03 간단한 애니메이션 만들기 세번째 시간입니다. 잔상을 남기며 통통 튀는 공을 만들어보겠습니다. 01. HTML { } 02. CSS { *{ box-sizing:border-box; } body{ background: linear-gradient(to top, #A18CD1 0%, #FBC2EB 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; margin : 0; padding: 0; } .wrapper{ position: absolute; animation: x 1s ease-in-out alternate infinite 0s both; } .wrapper>.. 2022. 9. 2. 간단한 애니메이션 02 간단한 애니메이션 02 간단한 애니메이션 만들기 두번째 시간입니다. 빙글빙글 돌아가는 조그만 두개의 공을 만들어보겠습니다. 01. HTML { } 02. CSS { body { height: 100vh; background-image: linear-gradient(-60deg, #ff5850 0%, #f09819 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; background: transparent; animation: loading 1s ease infinite; } .loading .circle1 { display: block; width: 20px; height: 20px; border-.. 2022. 8. 29. 간단한 애니메이션 01 간단한 애니메이션 01 간단한 애니메이션 만들기 첫번째 시간입니다. 둥근모서리의 굴러가는 사각형을 만들어보겠습니다. 01. HTML { } 02. CSS { body { height: 100vh; background-image: linear-gradient(to top, skyblue, pink); } .box { width: 50px; height: 50px; position:absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content:''; width: 50px; height: 5px; background: #000; position: absolute; top: 58px; left:0; border-radi.. 2022. 8. 29. 요소 숨기기 요소 숨기기 오늘은 요소 숨기기 방법에 대해 알아보겠습니다. 01. display: none display: none은 렌더링트리와 접근성 트리에서 사라지게 합니다. 애니메이션도 안되고 영역도 사라진다. { .button { display: none; } } 02. opacity: 0 opacity: 0은 엘리먼트의 요소를 안보이게 하지만, 빈공간이 남아 있게 된다. 애니메이션이 되고 , 영역도 존재함 { .button { opacity: 0; } } 03. visibility: hidden visibility: hidden은 레이아웃에 영향을 미치지 않고 엘리먼트를 감춘다. 사라진 공간은 빈 공간으로 남으며, 리플로우가 일어나지 않는다. 애니메이션도 안되고 영역도 사라진다. { .button { vis.. 2022. 8. 25. 색상 표현 방법 색상 표현 방법 CSS로 색상을 표현하는 방법에는 여러가지가 있습니다. 이에 대해 알아보는 시간을 가지도록 하겠습니다. color, background-color로 텍스트, 배경색을 지정합니다. 01. 색상 이름으로 표현 { color: blue; color: red; } 02. RGB 색상 값으로 표현 { color: rgb(0,0,255); } 03. RGBA 색상 값으로 표현 RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값입니다. 알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 가집니다. { background-color: rgba(0,255,0,0.35) } 04. 16진수 색상 값으로 표현 { color: #1111ee; color: #d1d1.. 2022. 8. 23. CSS 단위 CSS 단위 CSS에서 자주 사용하는 단위에 대해 알아보는 시간을 가지겠습니다. 글자 크기를 명시하지 않을 경우 기본 값은 16px 입니다. ▶ px 해상도에 따라 상대적으로 달라지는 기본단위로서, 아래와 같이 표현. font-size: 12px; ▶ % 부모 요소의 글자 크기를 100% 기준으로서 계산한 % 단위로서, 아래와 같이 표현. font-size: 150%; ▶ em 부모 요소의 글자 크기 100% 기준으로 계산한 100 분의 1 단위로서, 아래와 같이 표현. font-size: 1.5em; 특별한 설정이 없다면 16px가 1em이 되므로, 1.5em은 24px( 16px * 1.5 = 24px ) 가 된다. 부모가 10px일 경우 1.5em는 24px가됨. ▶ rem rem은 em과 비슷하지.. 2022. 8. 23. 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현 이미지 스프라이트 / IR 효과 / 백그라운드 표현에 대해 알아보는 시간을 가져보도록 하겠습니다. 01. 이미지 스프라이트 스프라이트(Sprite)이란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는 기술을 의미한다고 한다. 웹의 경우에서는 "여러 개의 이미지를 하나의 이미지로 만들어 놓는 것"을 의미한다. 예를 들어, 아래의 이미지처럼 6개의 로고를 하나의 이미지를 합치는 것이다. 01-1. 사용법 이미지 스프라이트는 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용해서 삽입한다. { 유튜브 디스코드 인스타 크롬 페이스북 트위터 } { .image__sns a{ width: 36px; height: .. 2022. 8. 20. SCSS SCSS SCSS에 대해 알아보는 시간을 가지겠습니다. 01. 사용법 웹에서는 CSS에서만 동작합니다. CSS는 불편하니 일단 배제하고 우선 전처리기로 코딩합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산 등 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있습니다. 단, 웹에서는 직접 동작하지 않으니 이렇게 작성한 전처리기를 웹에서 동작 가능한 표준의 CSS로 컴파일합니다. 전처리기로 작성하고 CSS로 컴파일해서 동작시키는겁니다. 02. 사용 이유 보통 전처리기 3대장으로 Less, Sass(SCSS), Stylus가 있습니다. 기본적으로 모두 비슷하지만 Less의 경우 기능적 한계가 있으나 진입 장벽이 낮습니다. Stylus 같.. 2022. 8. 18. SASS / Pug 강아지 애니메이션 강아지 애니메이션 이번 시간에는 SCSS와 Pug를 이용해서꼬리를 흔드는 강아지를 만들어보겠습니다. 01. html HTML은 Pug로 컴파일 시켜줍니다. body 안에 tail(꼬리) 8개를 넣어줍니다. torso(몸통), head(머리)를 만들어주고 그안에 알맞게 정렬을 맞추어 ears(귀),ear,eyes(눈),eye,muzzle(주둥이),tongue(혀)를 넣어줍니다. 코드 보기 { } 02. CSS CSS는 SCSS로 컴파일 시켜줍니다. animation 효과를 주어 꼬리를 흔들며 움직이게 해주고, 취향에 맞게 색과 모양을 맞춰줍니다. 코드 보기 { body { display: flex; flex-direction: column; justify-content: center; align-items.. 2022. 8. 18. 미디어 쿼리(media query) 미디어 쿼리(media query) 오늘은 미디어 쿼리에 대해 알아보는 시간을 가지겠습니다. 뷰포트 해상도에 따라 CSS를 분기시키는 미디어쿼리는 반응형 프로젝트에서 반드시 필요한 기법입니다. 01. { } 최소 가로폭이 1000px, 즉 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻입니다. 태블릿이나 모바일 기기마다 가로폭이 다른데, 크롬 브라우저에서 개발자 도구를 열고 Toggle device Toolbar를 누르면 기기마다의 해상도도 확인할 수 있고 기기 모델도 추가할 수 있습니다. 또한 다음 트로이(http://troy.labs.daum.net/)에서는 기기별 해상도를 제공하고 실제 작동 화면을 확인할 수 있는 VIEW를 제공합니다. 모바일 기기 가로 세로 iPhon.. 2022. 8. 15. 기본 문법 CSS 기본 문법 CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일만으로도 가능합니다. 또한 인라인 스타일스트는 거의 사용하지 않지만, 우선순위가 가장 높아서 꼭 필요한 경우에 편리하게 사용할 수 있습니다. CSS에서 주석은 /* */로 표현합니다. 01. 내부 스타일시트 CSS 를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. { 안녕하세요 코딩대원 입니다. } 결과 02. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 *.css 확장자를 가진 별도의 파일로 저장.. 2022. 8. 13. 비트맵 방식 / 벡터 방식 비트맵(Bitmap)과 벡터(Vector) 벡터 방식과 비트맵 방식에 대해 알아보겠습니다. 01. 비트맵(Bitmap) 방식 비트맵은 비트의 지도란 뜻으로 각 픽셀에 저장된 일련의 비트 정보 집합을 말합니다. 디스플레이는 픽셀의 배열로 구성되어 있습니다. 픽셀들의 배열 방식과 픽셀의 숫자와 비율이 디스플레이의 해상도를 결정한다고 할 수 있습니다. 1920x1080의 해상도를 가진 디스플레이의 경우 가로 1920개, 세로 1080개의 픽셀들로 구성되어 있다고 생각하면 됩니다. 비트맵 이미지는 크기를 늘이거나 줄이게 되면 원본 이미지에 손상이 가게 됩니다. 흔히 이것을 '이미지가 깨졌다'라고 표현합니다. 비트맵 방식의 확장자로는 JPG, PNG, GIF, WebP 가 있습니다. # 픽셀이란 이미지를 구성하는.. 2022. 8. 10. 이전 1 다음
