CSS21 CSS | ANIMATION | 마우스를 따라 움직이는 눈 마우스를 따라 움직이는 눈동자 애니메이션👀 마우스와 키보드에 따라 눈동자가 움직이도록 애니메이션을 만들어봅시다 ~! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 요리조리 #2. CSS(SCSS) 코드를 확인해보자 * { 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-sty.. 2022. 9. 26. CSS | ANIMATION | 빙빙 돌아가는 로딩 만들기 2022. 9. 26. CSS | ANIMATION | 위아래로 움직이는 글자 효과 만들기 글자가 올라왔다 내려갔다 반복하는 효과 ⇡⇣ 글자가 '점핑저점핑'하는 효과를 만들어봅시다 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 글자마다 span으로 감싸서 만들어줍니다. I ' m G y u p p #2. CSS(SCSS) 코드를 확인해보자 html, body { width: 100%; height: 100%; background: linear-gradient(140deg, black 0%, plum 100%); display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { font-family: .. 2022. 9. 22. CSS | ANIMATION | 입체감 있는 마우스 오버효과 입체감 있는 카드 마우스 오버효과🖱 마우스를 올리고 내릴때마다 입체감 있게 돌아가는 마우스 오버 효과 적용 방법을 배워봅시다 ~ See the Pen MouseHoverEffect by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 Right Mouse Hover Effect 마우스 내리면 Left #2. CSS(SCSS) 코드를 확인해보자 body { font-family: 'LocusSangsang'; background-image: linear-gradient(135deg, #191970 0%, .. 2022. 9. 20. CSS | ANIMATION | 울렁울렁 웨이브 만들기 울렁울렁 웨이브 애니메이션 만들기 ➰ 원 형태의 여러 점에 스핀 효과와 스케일 효과를 적용하여 웨이브처럼 보이게 만들어 보았습니다. 이번엔 Pug와 SCSS를 활용해서 만들었으니 참고해주세요 ! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML(Pug) 코드를 확인해보자 div.circle-wrap - for (var x =1; x 2022. 9. 19. ANIMATION | SVG 텍스트 애니메이션 만들기 SVG ANIMATION SVG 텍스트 애니메이션 만들기 svg Gyupp Gyupp @font-face { font-family: 'Tmon'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot'); url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/t.. 2022. 9. 8. ANIMATION | CSS 애니메이션 만들기 CSS ANIMATION 걸어다니는 하트 만들기 border-radius Start Stop + 먼저 연속되는 이미지를 이어 붙여 하나의 이미지로 저장합니다. Start Stop + 움직이는 애니메이션은 .stepbox에서 만들어주었습니다. .step { height: 700px; background: #351371; position: relative; border-radius: 0 0 10px 10px; } .step .stepbox { width: 800px; height: 600px; background: url(https://kkb75281.github.io/coding2/animation/img/hwalking.jpg); border-radius: 0; position: absolute; lef.. 2022. 9. 8. ANIMATION | SVG 애니메이션 소개 SVG 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 인터넷 익스플로러9 버전 이상부터 지원됩니다. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. 사각형(rect) svg 원형(circle, el.. 2022. 9. 8. ANIMATION | 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 | 통통 돌아다니는 공 만들기 통토도동 돌아다니는 공 🏐 codepen을 사용해서 통통 튕기며 돌아다니는 공을 만들어 봅시다. 첫번째 공이 먼저 가고 뒤따라 연속적으로 가는 것처럼 만들어보았습니다만.. 속도를 빠르게 하니 그냥 공이네요^^! See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 * { box-sizing: border-box; } body { background: linear-gradient(to top, blueviolet 0%, pink 100%); width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: cent.. 2022. 9. 4. CSS | 돌아가는 로딩 표시 만들기 돌아가는 로딩 표시를 만들어 보자 ! codepen을 사용해서 돌아가는 로딩 표시를 만들어 봅시다. 아래 코드를 참고하셔서 직접 만들어 보세요 :D See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 body { height: 100vh; background-image: linear-gradient(-60deg, #ff5858 0%, blue 100%) } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } .loading .circle1 .. 2022. 8. 29. CSS | 굴러가는 네모 만들기 굴러가는 네모를 만들어 보자 ! codepen을 사용해서 굴러가는 네모를 만들어 봅시다. 아래 코드를 참고하셔서 직접 만들어 보세요 :D See the Pen Untitled by kkb75281 (@kkb75281) on CodePen. #1. HTML 코드를 확인해보자 #2. CSS 코드를 확인해보자 body { height: 100vh; background-image: linear-gradient(to top, white, pink) } .box { width: 50px; height: 50px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .box::before { content: ''; width: 50px;.. 2022. 8. 29. CSS | 요소를 숨기는 5가지 방법 요소를 숨기는 방법에 대해 알아봅시다 ! CSS에서 요소를 숨기는 방법은 총 5가지가 있습니다. 하나씩 알아볼까요~? 📌 display: none; display: block / inline-block / inline / none; display 속성은 요소를 어떤 형태로 보이게 할건지 정하는 속성으로, display: none;을 설정하면 요소를 숨길 수 있습니다. 애니메이션 적용X, 영역X 📌 opacity: 0; opacity: number | initial / inherit; opacity 속성은 요소의 투명도를 설정하는 속성으로 아래와 같이 설정이 가능합니다. number : 0(완전 투명) ~ 1(완전 불투명) 사이의 값 initial : 기본값 inherit : 부모 요소의 속성값 상속 애니.. 2022. 8. 26. CSS | 색상 표현(Color) | 16진수, rgba, hsla 🚦 CSS 색상 표현에 대해 알아봅시다 ! CSS에서 색상을 지정하는 세가지 방법(16진수, rgba, hsl)에 대해 알아봅시다. 🚗 16진수 RGB 16진수 RGB : #02798b : hash/pound 기호(#)와 6개의 16진수로 표현 16진수는 0과 f(15) : 0123456789sbcdef : 사이의 값으로 구성되며, 총 256개(16*16)의 색 지정 가능 .one { background-color: #02798b; } .two { background-color: #c55da1; } .three { background-color: #128a7d; } #02798b #c55da1 #128a7d 🚕 RGB값 / RGBA 값 RGB : rgb(빨강, 녹색, 파랑)로 지정 : 각 채널(매개변수).. 2022. 8. 24. CSS | 단위 | 절대길이와 상대길이 CSS 단위에 대해 알아봅시다 ! CSS에서 자주 사용되는 숫자 데이터 형식에 대해 알아보고, 길이 단위에 대해 알아봅시다. 숫자 데이터 형식 데이터 형식 설명 1024 또는 -55 와 같은 정수 10진수, 소수 자릿수도 가능 45deg, 10px과 같이 단위가 붙어 있는 숫자 ,, 및 종류 포함 50%와 같이 퍼센트를 나타냄 요소의 길이는 부모 요소의 길이를 기준으로 함 이 중 형식이 가장 많이 쓰이기 때문에 길이 단위에 대해 알아봅시다. 길이 단위에는 항상 동일한 크기인 절대 길이와 다른 것에 비례하여 조정되는 상대 길이로 나뉩니다. 절대 길이 단위 화면 출력보다 인쇄 시 더 유용합니다. 단위 이름 길이값 cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q.. 2022. 8. 24. CSS | 이미지 스프라이트(image sprite) / ir 효과와 background 표현까지 이미지 스프라이트(image sprite) / ir 효과 / background 표현 이미지 스프라이트(image sprite)와 ir 효과, background 표현까지 알아보도록 합시다. 🖼️ 이미지 스프라이트(image sprite) 이미지 스프라이트 기법이란 아래 사진처럼 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것을 의미합니다. 1. How ? 이미지를 표현하는 방법에는 두가지 방법이 있습니다. 1) html : img 태그 사용 (의미있는 사진일 경우) 2) CSS : background 속성 사용 (장식용 사진일 경우) 이 중 이미지 스프라이트는 background 속성을 사용합니다. background: color/image/repeat/attachment/position/size;.. 2022. 8. 20. CSS | 움직이는 강아지 만들기 🐶 꼬까옷 입은 강아지 같이 만들어 보자 ! pug, scss, animation을 사용해서 움직이는 강아지를 만들어 봅시다. 아래 코드를 참고하셔서 각자 자신만의 강아지를 만들어 보세요 :) See the Pen CSS Dog by kkb75281 (@kkb75281) on CodePen. #1. HTML_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 #2. CSS_scss 코드.. 2022. 8. 18. CSS | SCSS 🤔 SCSS, 그게 뭔데? CSS의 단점 | CSS 는 HTML 태그에 디자인을 넣어줄 때 사용합니다. 하지만 프로젝트 규모가 커지면 커질수록 가독성이 떨어진다거나 유지보수가 어려워지는 일이 발생하게 됩니다. 이러한 CSS의 단점을 보완하여 코드의 재활용성과 효율성을 높이기 위해 나온 개념이 SCSS라고 합니다. Variables(변수) 변수를 지정해놓고 사용하기 때문에 오차 범위를 줄여주며, 디자인 컨셉이 변경되거나 변경사항이 생겼을때도 유지보수가 간편합니다. $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } CSS 확인하기 body { font: 1.. 2022. 8. 18. CSS | 미디어쿼리(media query) 미디어쿼리(media query)에 대해 알아봅시다 ! 다양한 기기에서 웹브라우징을 지원하게 되면서 화면의 해상도에 따라 컨텐츠를 유연하게 배치하는 것이 중요해지고 있습니다. 이러한 반응형 웹사이트를 만들기 위한 미디어쿼리에 대해 알아봅시다. [ ] 1000px 보다 넓은 해상도일 때에 style_pc.css를 연결한다는 뜻 [ @media ] @media all and (min-width: 1000px) { 모든 기기에서 해상도가 최소 1000px 인 경우 적용할 속성들 ... } 로딩 시 성능 저하가 일어나지 않도록 CSS 파일을 하나로 만들고 CSS 내부에서 조건에 따라 분기시키는 것이 일반적인 형태의 반응형 웹 CSS 입니다. all은 Media Type을 나타내며 and 전, 후에 띄어 씁니다... 2022. 8. 15. CSS | 기본 문법 CSS 기본 문법에 대해 알아봅시다 ! CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 그 중 외부 스트일시트를 많이 사용하는 편이지만 간단한 작업은 내부 스타일시트를 활용할 수 있습니다. 인라인 스타일시트는 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. [ 내부 스타일시트 ] CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. * p { color: red;}의 의미는 p 태그 안의 글자 색상을 빨간색으로 설정하라는 뜻 [ 외부 스타일시트 ] 따로 저장한 스타일 속성을 HTML 문서에.. 2022. 8. 15. CSS | 벡터(Vector)와 비트맵(Bitmap) 벡터(Vector)와 비트맵(Bitmap)에 대해 알아봅시다 ! 이미지 저장 포맷 종류인 벡터(Vector)와 비트맵(Bitmap)에 대해 알아보고 어떤 상황에 쓰면 적절할지 확인해봅시다. 벡터(Vector) 벡터는 점과 점을 연결해 수학적인 함수 관계로 이미지를 표현해 선과 면을 만들어 내는 것을 의미합니다. 점과 점이 연결되어 선이 되고, 선이 3개 이상 모이면 면을 만들 수 있습니다. 선은 두께와 색상, 곡률 값을 가지며 면은 색상 값을 가집니다. 이러한 점, 선, 면이 모여 벡터 그래픽을 구성하게 됩니다. #깨짐 현상 없음 벡터의 의미에서 볼 수 있듯이 수학적 좌표값으로 이루어져 있기 때문에 이미지를 줄이거나 늘렸을 때 깨지는 현상이 일어나지 않습니다. #적은 용량 픽셀로 구성되어 있는 비트맵보다.. 2022. 8. 10. 이전 1 다음
