CSS - animation 캐릭터가 걷는 애니메이션을 만들어봅시다. HTML border-radius Start Stop CSS .step { height: 700px; background: #43ddf7; position: relative; } .step .stepbox { width: 800px; height: 600px; background: url(img/ani1.jpg); border-radius: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: ani 1s steps(24, start) infinite; } .step .stepbox.start { animation-play-stat..
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 애니메이션 끝..
SGV 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다. 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다. 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다. 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다. 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다. ※ 부트스트랩이란 부트스트랩..
SVG ANIMATION svg에 애니메이션을 적용해 봅시다. HTML CSS .ani1 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; stroke: #880E41; stroke-width: 2px; stroke-dasharray: 50; stroke-dashoffset: 50; animation: ani1 1s infinite linear alternate-reverse; } @keyframes ani1 { 0% { stroke-dashoffset: 50; } 100% { stroke-dashoffset: 0; } } .ani2 { width: 100px; height: 100px; x: 30px; y: 30px; fill: none; st..
패럴렉스 이펙트 - 메뉴 이동 메뉴에 맞는 페이지로 이동되는 패럴렉스를 만들어 봅시다. 원본 소스 보기 원본 사이트 이미지로 설명 html Javascript Parallax Effect01 패럴렉스 이펙트 - 메뉴 이동 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고..
MouseOver, MouseEnter MouseOver, MouseEnter의 차이를 알아봅시다. MouseOver, MouseEnter에 대해서 mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave입니다. 주로 아래와 같이 짝을 이루어 사용합니다. mouseOver mouseOut mouseEnter mouseLeave mouseover mouseover는 지정된 요소에 (자기 자신)을 포함하면서, 밑에 자식요소가 존재한다면 자식영역까지 포함됩니다. mouseenter mouseenter는 지정된 요소(자기 자신)만 해당되며,..
마우스 이펙트 - 마우스 따라다니기 포인터의 좌표값에 따라서 마우스의 움직임과 효과가 있는 마우스 이펙트를 만들어 봅시다. 원본 소스 보기 원본 사이트 html Only those who dare to fail greatly can ever achieve greatly. 크게 실패할 용기있는 자만이 크게 이룰 수 있다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px css /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-con..
사이트 만들기 : 슬라이드 유형01 슬라이드 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../site1/assets/img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; background-col..
사이트 만들기 : 푸터 유형01 푸터 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .footer__menu { display: flex; margin-bottom: 70px; } .footer__menu>div { width: 16%; } .footer__menu>div h3 { font-size: 18px; margin-bottom: 20px; } .footer__menu li a { font-size: 14px; color: #666; margin-bottom: 10px; display: block; } .footer__right { border-top: 1px solid #d9d9d9; text-align: ..
사이트 만들기 : 배너 유형01 배너 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS .banner__inner { background-image: url(../site1/assets/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color: #fff; } .banner__inner .title { font-size: 50px; line-height: 1; font-weight: 300; margin-bottom..
Prettier 설치 및 오류해결 방법 visual studio code(vscode)를 사용하면서 자동으로 코드를 정렬해주는 기능으로 Prettier가 있습니다. 사용하게 되면, ctrl + s만으로 자동을 코드의 줄이 맞춰집니다. 적용하는 방법과 실행되는 않는 경우, 오류를 해결하는 방법을 알아봅시다. 설치 과정 설치과정을 알아봅시다. 검색 Extensions에서 확장프로그램으로 Prettier를 검색합니다. 설치 Install을 눌러서 설치를 합니다. 오류 해결 방법 설치를 했는데, 정렬이 자동으로 되지 않을 경우. 에러를 해결하는 방법을 알아봅시다. editor format on save 설정에 들어가서 "editor format on save"를 검색 후 체크 박스를 선택해줍니다. json js..
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 요소의 css 속성을 변경합니다. }); ... 내용 내용 내용 예제 See the Pen 제이쿼..
jQuery 속성 관련 메서드 jQuery 속성 관련 메서드를 알아봅시다. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성 return attribute(속성) // 각 a..
jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드를 알아봅시다. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className)){ //index는 각 div 요소의 index 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); ... 내용1 내용2 내용3 예제 See the Pen 제이쿼리 클래스메서드 by kimyihyung (@kimyihyung) on CodePen. removeClass() 메서드 요소에 class 속성을 제거..
잔상 공 잔상이 반복적으로 생기는, 움직이는 공 애니메이션을 만들어 봅시다. HTML 공을 5개 만들어 봅시다. CSS linear-gradient : 적용된 HTML 요소에 선형으로 그래디언트(gradient) 효과를 적용시켜 줍니다. ease-in-out 빠르게 시작하여 점점 천천히 동작합니다. alternate : 순방향으로 애니메이션을 시작해 역방향과 순방향으로 번갈아 애니메이션을 진행. keyframes을 만든 뒤, transform으로 움직임을 부여합니다. * { box-sizing: border-box; } body { background: linear-gradient(to top, #E38B29 0%, #FDEEDC 100%); width:100vw; height:100vh; display..
슬라이드 이펙트 - 좌로 움직이기(연속적으로) 연속적으로 이미지가 좌로 변동되는 것을 만들어 보았습니다. 원본 소스 보기 원본 사이트 html css /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 450px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */ display: flex; flex-wrap: wrap; width: 4800px..
자바스크립트 요소 속성(크기) 요소 속성(크기) 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 세로(패딩 포함, 보더/마진 미포함) offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) offsetHeight 요소의 세로(패딩/보더 포함, 마진 미포함) innerWidth / outerWidth 브라우저의 가로 값(스크롤바 미포함 / 포함) innerHeight / outerHeight 브라우저의 세로 값(스크롤바 미포함 / 포함) offsetTop / offsetLeft 요소의 좌표값(문서 기준) offsetParent 요소의 좌표값(부모 기준) pageXOffset / window.scrollX 요소의 가로 스크롤 값 page..
사이트 만들기 : 이미지/텍스트 유형01 이미지/텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weig..
사이트 만들기 : 헤더 유형01 헤더 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: normal..
필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 번째 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. :lt() $("li:lt(2)") inde..
탐색 선택자 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closet("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").nextUntil("p") d..
속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 종류 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나..
사이트 만들기 : 텍스트유형03 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: GmarketSans; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { text-decoration: none; color: #fff; } /* common */ .container { width..
사이트 만들기 : 텍스트유형02 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/gmarket/GmarketSans.css'); .gmark { font-family: GmarketSans; font-weight: 500; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } #textType { width: 1160px; marg..
jQuery 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 기본 선택자의 형식은 다음과 같습니다. $("선택자") | $("#gnb") 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를..
사이트 만들기 : 텍스트유형01 텍스트 유형을 만들어봅시다. 원본 소스 보기 원본 사이트 Figma 코드를 진행하기에 앞서, 피그마를 이용해서 웹사이트를 디자인합니다. CSS /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } img { width: 100%; } h1, h2, h3, h4, h5, h6 { font-weight: norma..
GSAP GSAP(The GreenSock Animation Platform)은 자바스크립트 로 제어하는 타임라인 기반의 애니메이션 라이브러입니다. GSAP을 사용하면 자바스크립트 애니메이션을 좀 더 쉽게 작성할 수 있습니다. GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 공식페이지 : https://greensock.com/get-started/ 사용하기 CDN을 사용합니다. CDN Tween 객체를 만드는 기본 메소드 • gsap.to() • gsap.from() • gsap.fromTo() to 메소드는 타겟을 어디론가 보낸다는 것, from은 어디서부터, fromTo는 어디서부터 어디로 어떻게 애니메이션을 만들지 결정..
jQuery 알아보기 jQuery(제이쿼리)는 웹 사이트를 제작할 때 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리를 말합니다. 복잡한 상호작용을 하는 자바스크립트를 쉽게 추가할수 있도록 해주면서 다양한 웹 브라우저에서 동작하도록 만들어줍니다. 사용하기 CDN 호스트를 사용하는 방법, API 다운 받아 사용하는 방법, url 사용하는 방법 CDN API 다운 받아서 연결 url 제이쿼리 특징 ① 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 이것은 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없다. ② 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 ..
두개의 원이 돌고있는 애니메이션 2개의 원이 돌고있는 애니메이션을 만들었습니다. HTML 원을 두개 만듭니다. CSS keyframes을 만든 뒤, transform으로 움직임을 부여합니다. body { height: 100vh; background-image: linear-gradient(-60deg, #495C83 0%, #C8B6E2 100%); } .loading { position: absolute; left: 50%; top: 50%; width: 20px; height: 150px; animation: loading 1s ease 100; } .loading .circle1 { display: block; width: 20px; height: 20px; border-radius: 50%; b..
박스가 점핑하는 애니메이션 사각형이 움직이는 애니메이션입니다. html 박스를 만듭니다. css keyframes을 이용하여 transform을 부여합니다. body { height: 100vh; background-image: linear-gradient(to top, blue, red); } .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-radiu..
