CSS15 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 코드를 확인해보자 정육면체 면 6개를 만들어줍니다. 코딩하자:9 #2. CSS(SCSS) 코드를 확인해보자 body { background-color: #333; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3.. 2022. 9. 22. 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. SITE | 모든 유형을 합쳐서 SITE를 완성해보자 :9 사이트 제작부터 반응형 적용까지 해보자:9 지금까지 배운 헤더, 배너, 슬라이드, ... 등의 타입들을 조합하여 반응형 사이트를 만들어봅시다. ✔︎ 결과 확인하기 전체 소스 보기 실제 사이트 보기 #header 💡 햄버거 메뉴를 사용해주었습니다. 화면 크기 1300px부터는 헤더 메뉴를 보이지 않게 처리하고 햄버거 메뉴로 대신하게 만들었습니다. * 햄버거 메뉴 : 주로 앱 상단 모퉁이에 위치하며, 메뉴를 토글하거나 네비게이션 바의 역할을 합니다. ⚠ 햄버거 메뉴를 열었을 때 스크롤이 생기는 현상을 막아주었습니다. script로 햄버거 메뉴를 클릭했을 때, body에 class="fixed"를 추가시켜 해결해주었습니다. ⚠ 햄버거 메뉴를 열어놓은 상태에서 화면크기를 최대로 키웠다가 다시 줄였을 때 메뉴가 .. 2022. 9. 15. 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. jQuery | 스타일 메서드 📁 jQuery 스타일 메서드에 대해 알아봅시다 ! 📂 css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 함수 $("div").css("width", function(index, .w) { // index는 각 div 요소의 index 0,1,2 // w는 각 div 요소 width 속성 return css 속성 // 각 div 요소의 속성을 변경 }); ... 내용 내용 내용 📢 직접 적용하면서 이해하자 ! 내용1 내용2 내용3 See th.. 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 | 이미지 스프라이트(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 | 기본 문법 CSS 기본 문법에 대해 알아봅시다 ! CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 그 중 외부 스트일시트를 많이 사용하는 편이지만 간단한 작업은 내부 스타일시트를 활용할 수 있습니다. 인라인 스타일시트는 거의 사용하지 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용할 수 있습니다. [ 내부 스타일시트 ] CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 우리를 기쁘게 하는 것들. * p { color: red;}의 의미는 p 태그 안의 글자 색상을 빨간색으로 설정하라는 뜻 [ 외부 스타일시트 ] 따로 저장한 스타일 속성을 HTML 문서에.. 2022. 8. 15. 이전 1 다음
