웹 개발 공부 컨텐츠134 박스 회전 애니메이션 박스 회전 애니메이션 CSS를 사용해 통통 튕기는 박스를 회전시키는 간단한 애니메이션 효과 입니다. See the Pen rotate box by mbynae (@mbynae) on CodePen. 이번 애니메이션은 절대 위치로 위치를 잡고 가상요소를 이용해 박스와 그림자를 따로 만들어줘야 합니다. 애니메이션의 속도 요소중 linear는 일정한 속도로 진행하도록 해줍니다. 그리고 애니메이션 동작 설정의 rotate는 요소의 회전을 나타내며 "*deg"로 각도를 조절할 수 있습니다. 2022. 8. 29. 원 회전 애니메이션 원 회전 애니메이션 CSS를 사용해 두개의 원을 회전시키는 간단한 애니메이션 효과 입니다. See the Pen circle rotate by mbynae (@mbynae) on CodePen. 이번 애니메이션은 길다란 막대 블록을 만든 후 position: absolute로 양 끝에 원을 배치시켜 회전시키면 되는 간단한 애니메이션 효과 입니다. 색상을 넣을 때 그라디언트 효과를 넣을 수 있습니다. 그라디언트 효과는 gradient 요소로 사용하며 시작 위치, 색상, 끝나는 위치, 색상 형태로 적용이 가능합니다. linear-gradient : 선형 그라디언트 radical-gradient : 반지름형 그라디언트 repeating-gradient : 반복형 그라디언트 2022. 8. 29. GSAP GSAP GrennSock에서 개발한 애니메이션 효과를 쉽게 사용할 수 있도록 제공하는 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다. 일반적으로 애니메이션은 CSS를 사용해 만들지만 GSAP를 사용하면 더욱 간편하며 복잡한 애니메이션을 구현할 수 있습니다. 또한 Jquery가 저물어가는 요즘 GSAP는 떠오르는 자바스크립트 라이브러리이기도 합니다. ▶ 설치 방법 GreenSock 사이트에서 다운 받아 적용할 수 있습니다. 또는 홈페이지에서 제공하는 cdn 링크를 스크립트에 적용하면 사용이 가능합니다. ▶ 사용 예시 스크립트로 cdn 링크를 건 후 GSAP의 프로퍼티를 선언하여 사용한 예 입니다. 이런 식으로 선언 후 적용할 클래스를 지정해 적용할 수 있습니다. 사용 가능한 GSAP의 프로퍼티 .. 2022. 8. 29. JQUERY Jquery jQuery는 HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리입니다. 지금은 Angular, React, Vue 같은 화면을 다루는 여러 가지 기술들이 있어 화면 개발을 보다 쉽게 할 수 있지만, 화면과 관련된 기술이 발전하기 전에는 화면 개발을 쉽게 해 주는 라이브러리는 거의 존재하지 않았습니다. 하지만 jQuery가 등장하면서 전세계 많은 개발자들이 사용한 라이브러리가 되었습니다. 다만, 요즘엔 점점 사용하지 않는 추세가 되고 있습니다. ▶ 설치 방법 JQuery 사이트에서 다운 받아 적용할 수 있습니다. 또는 홈페이지에서 제공하는 cdn 링크를 스크립트에 적용하면 사용이 가능합니다. JQuery는 상당히 유명한 라이브러리이기.. 2022. 8. 29. 슬라이드 이펙트 - 로테이션 효과 01 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 02 - 좌로 이동하는 효과 일정 시간 간격으로 이미지가 좌측으로 이동해 자동으로 바꿔 출력해주는 효과입니다. 슬라이더 이펙트 01은 이쪽에서 볼 수 있습니다. 이번 효과는 자바스크립트와 GSAP를 활용한 2가지 방식이 있습니다. ▶ HTML 파트 01 유형과 같지만 이번 유형은 사진 전체가 좌측으로 이동해야 하기 때문에 한번 더 블록을 만들어 이동하는 파트를 주었습니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img.. 2022. 8. 29. 슬라이드 이펙트 - 트랜지션 효과 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 01 - 트랜지션 효과 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다. ▶ HTML 파트 5장의 이미지가 일정 간격으로 바뀌므로 우선 5장의 이미지를 img 태그를 활용해서 추가합니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 600px; } .slider { position: absolute; left: 0; top.. 2022. 8. 29. 요소 숨김 기능 요소 숨김 기능 CSS에서 사용할 수 있는 5가지의 요소 숨김 기능입니다. CSS는 숨기고 싶은 문자나 블록 등을 화면에 안보이게 처리할 수 있습니다. 방식에 따라 영역을 인식하거나 애니메이션을 적용할 수 있는 차이점이 있습니다. 방식 설명 특징 display: none; diplay는 요소를 화면에 어떻게 보여줄지 정해주며 none는 안보이게 처리합니다. - 영역 인식X - 애니메이션X opacity : 0; opacity는 요소의 불투명도를 설정하며 0으로 갈수록 투명해집니다. - 영역 인식O - 애니메이션O visibility: hidden; visibility는 요소의 가시성을 나타내며 보이거나 숨기거나 겹쳐보이게 해줍니다. hidden은 숨겨줍니다. - 영역 인식O - 애니메이션O width: .. 2022. 8. 26. 퀴즈 이펙트 만들기 06 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 06 이번 퀴즈는 객관식 슬라이드 유형입니다. 이번 유형은 보기를 선택시 바로 정답 여부를 알려주고 다음 화면으로 넘어가도록 하는 슬라이드 유형입니다. 1. 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2009년 05회", answerNum: "1", answerAsk: "다음 중 커뮤니케이션 디자인의 설명으로 틀린 것은?" , answerChoice: [ "라틴어 'Communicare'를 어원으로 한다.", "두 개 이상의 개체가 기호를 매개로 무언가를 공유하는 것이다.", "운동과 시선을 중시하는 디자인이다.", "사람과 사람사이에 기호에 의해서 의미를 전달하는 과정이다.", ], an.. 2022. 8. 25. 퀴즈 이펙트 만들기 05 퀴즈 만들기 자바스크립트 함수를 활용하여 퀴즈 만들기입니다. 퀴즈 만들기 05 이번 퀴즈는 퀴즈 유형04의 심화 버전으로 여러개의 객관식 문항 만들기 입니다. 이번 유형은 모든 문제를 html이 아닌 스크립트로 출력하고 추가로 전체 문제 수와 정답인 문제 수를 알려주는 방식이 추가됩니다. 1. 문제 정보 const quizInfo = [ { answerType: "웹디자인기능사 2009년 05회", answerNum: "1", answerAsk: "다음 중 커뮤니케이션 디자인의 설명으로 틀린 것은?" , answerChoice: { 1: "라틴어 'Communicare'를 어원으로 한다.", 2: "두 개 이상의 개체가 기호를 매개로 무언가를 공유하는 것이다.", 3: "운동과 시선을 중시하는 디자인이다.. 2022. 8. 25. 꽃사슴 그리기 2022. 8. 25. 색상 표현법 색상 표현 방법 CSS에서 사용할 수 있는 5가지의 색상 표현 방법입니다. CSS는 폰트, 배경, 블록, 테두리 등에 색상을 넣을 수 있으며 각 요소 혹은 요소 뒤에 -color 을 붙여 색상을 적을 수 있습니다. 표현법 설명 예시 색상명 색상의 이름으로 표현하는 방법으로 약 140가지의 이름이 정의되어 있습니다. 표현 가능한 색상명은 여기에서 확인 가능합니다. color: red; color: GreenYellow; rgb 표현 rgb(red, green, blue) 표현은 각 색의 0에서 255사이의 정수를 입력하여 색을 표현하는 방법입니다. color: rgb(255, 0, 0); color: rgb(154, 205, 50); 16진수(HEX) 표현 rgb 색상값을 각각 16진수로 변환하여 표현한 .. 2022. 8. 24. CSS 단위 CSS 단위 CSS에서 사용하는 단위입니다. 단위 설명 px 가장 기본적인 단위입니다. em/rem em은 각 부모 요소의 폰트 크기를 기반으로 한 단위이며 1rem은 해당 폰트 픽셀 크기입니다. rem은 최상위 요소의 폰트 크기를 기반으로 한 단위입니다. vw/vh 뷰포트를 100개로 나눠 기준을 정한 단위입니다 vmin/vmax 뷰포트 너비 또는 높이를 기준으로 하는 최대, 최소 값 1920x1080px 일때 1vmin = 10.8px / 1vmax = 19.2px ch/ex 폰트 사이즈의 특정 수치에 기반하는 단위 ch : 제로 문자인 0의 너비값의 고급 척도 (width:10ch 0의 10개만큼의 길이) ex : 현재 폰트의 x-높이 값 or em의 절반 값 2022. 8. 24. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
