odada

WAW.js https://wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk CSS3Animate https://jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms a..

sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 중첩 HTML 을 작성할 때 분명히 중첩되고 시각적인 계층 구조가 있음을 알게 될 것입니다. 반면에 CSS 는 그렇지 않습니다. Sass를 사용하면 HTML 의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택기 를 중첩시킬 수 있습니다 . 지나치게 중첩 된 규칙은 유지하기 어려울 수 있고 일반적으로 나쁜 관행으로 간주 될 수있는 CSS 를 초과하게됩니다 . 이를 염두에두고 다음은 사이트 탐색을위..

gitHub에 무료로 기본 웹사이트를 만들어서 올려놓을 수 있는 웹호스팅 또는 미디어 호스팅을 만들 수 있습니다. gitHub도 트래픽 제한과 용량 제한이 있긴 합니다. 저장소 제한 용량은 1GB 입니다. 제한 트래픽은 100GB/월 1. Settings 페이지로 이동 2. 화면을 쭉 내리면 GitHub Pages 섹션이 나옵니다. Choose a theme 클릭합니다. 3. Source에서 Branch: main / (root) 선택 후 저장합니다. 4. 완료하면 기본 사이트가 만들어졌습니다. 웹브라우저로 https://아이디.github.io/프로젝트(저장소)이름/ 접속해보세요. https://아이디.github.io/프로젝트(저장소)이름/ eehd80.github.io/bullbull/index.h..

sass는 css 코딩을 쉽게 할 수 있도록 도와줍니다. sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com SASS(SCSS)를 컴파일하기 위해선 node-sass를 설치해야 하고 node-sass를 설치하려면 node.js가 필요합니다. 아래 순서로 설치해주세요~ 1. node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaSc..

1. EDIT 프로그램 - Vscode 시험장에 설치되어 있는 vscode를 사용해 공부해보겠습니다. 아래 사이트에서 vscode를 설치해주세요. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud appli..

1. git 설치하기 - 많은 선택지가 나오는데 그냥 무조건 next를 누르세요~ https://git-scm.com/downloads Git - Downloads Downloads Mac OS X Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific git-scm.com git을 사용하려면 nodejs가 깔려있어야 합니다. 없으신 분은 깔..

크롬브라우저를 열어 개발자모드를 엽니다. 개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + I 키를 눌러서 열 수 있습니다. 크롬 개발자 도구에서 Console 탭을 열고 입력창에 아래 코드를 입력하세요. console.log 는 콘솔에 특정 내용을 출력하라는 것을 의미합니다. console.log('Hello JavaScript!'); 이번에는 다음 코드를 입력해보세요. console.log(1 + 2 + 3); 우리는 Javascritp를 통해 연산을 할 수도 있습니다. 지금부터는 CodeSandbox 사이트에서 코드를 작성해보겠습니다. https://codesandbox.io/ CodeSandbox: Online IDE for Rapid Web D..

JavaScript 는 뭔가요? JavaScript 는 웹 브라우저에서 사용하기 위하여 만들어진 HTML과 웹의 프로그래밍 언어입니다. 왜 JavaScript를 공부해야합니까? JavaScript는 모든 웹 개발자 가 배워야 하는 3 가지 언어 중 하나입니다 . 1. 웹 페이지의 내용을 정의하는 HTML 2. 웹 페이지의 레이아웃을 지정하는 CSS 3. 웹 페이지의 동작을 프로그래밍하는 JavaScript JavaScript가 사용되는 곳은 웹 페이지뿐이 아닙니다. 많은 데스크탑 및 서버 프로그램이 JavaScript를 사용합니다. Node.js가 가장 잘 알려져 있습니다. MongoDB 및 CouchDB와 같은 일부 데이터베이스도 프로그래밍 언어로 JavaScript를 사용합니다. 이 언어는 90년대부..

Git 저장소의 간단 구조 1. Git 사이트 회원 가입 후 리포지토리 생성하기 아래 사이트에서 회원가입을 해주세요~ https://github.com/ Build software better, together GitHub is where people build software. More than 40 million people use GitHub to discover, fork, and contribute to over 100 million projects. github.com 저장소 생성을 위해 Repositories를 생성합니다. README파일은 내 컴퓨터에서 생성하려하니 여기에선 만들지 않습니다. Initialize this repository with a README를 체크하지 마세요 2. 프..

작업 전 프로그램 설치가 필요합니다. 설치를 위해 아래 페이지를 참고하세요. https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands.. oddcode.tistory.com HTML 코딩 시 중요(★★★★★) 체크포인트 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야..