원하는 자료를 선택하여 이용하세요.
기초 학습을 위한 자료로, HTML, CSS를 이용하여 화면을 구성할 수 있습니다.
Lv1 기초 실습을 위해서 다운로드 받으세요.
박스 형태의 레이아웃을 연습하세요.
다양한 기법과 레이아웃, 문자, 이미지 등을 활용하여 하나의 페이지를 완성합니다.
HTML 문법 html head body doctype meta title link style script 요소 특성 h1 h2 h3 h4 h5 h6 div p ul ol li dl dt dd table tr td a span img input 주석 전역속성 경로
CSS 문법 선언 방식 선택자 상속 우선순위(명시도)
width height margin padding border border-width border-style border-color font font-style font-weight font-size line-height font-family color 색상표현 text-align text-indent text-decoration letter-spacing word-spacing float position top bottom left right z-index background background-color background-image background-repeat background-position background-attachment display overflow overflow-x overflow-y opacity
HTML, CSS 를 더욱 심화 학습하고, 자바스크립트와 제이쿼리 라이브러리를 학습합니다.
Lv2 중급 실습을 위해서 다운로드 받으세요.
Fixed Responsive Mobile
일반적인 고정형 사이트 구조와 모바일, 반응형 페이지의 차이점을 이해하세요.
Responsive
더 자세하게 반응형 페이지를 학습합니다.
자바스크립트를 적용하여 완성합니다.
다양한 기법과 플러그인 활용법을 포함합니다.
at-rules @charset @import @font-face @media @keyframes animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state tansition transition-property transition-duration transition-timing-function transition-delay transform translate scale rotate skew matrix transform-origin transform-style perspective perspective-origin backface-visibility flex flex-flow flex-direction flex-wrap justify-content align-content align-items order flex-grow flex-shrink flex-basis align-self columns column-width column-count column-rule column-rule-width column-rule-style column-rule-color column-gap
자바스크립트를 더 편리하게 사용하기 위해서 '제이쿼리' 라이브러리를 활용합니다.
제이쿼리를 배우기 위한 기본적인 자바스크립트 이론을 (선행)학습합니다.
표기법 Zero-based JS 데이터 종류 변수 기명 함수 익명 함수 예약어 length 연산자 jQuery 문법
show hide toggle fadeIn fadeOut fadeToggle slideDown slideUp slideToggle fadeTo animate delay stop finish 애니메이션 대기열(Queue)
css
width innerWidth outerWidth height innerHeight outerHeight
offsetParent position offset scrollTop scrollLeft
hasClass addClass removeClass toggleClass attr removeAttr prop data val
on off one jQuery 이벤트 종류 Event 객체 이벤트 버블링(Bubbling) 이벤트 캡처링(Capturing)
first last eq index find filter not children parent parents prev next siblings prepend prependTo append appendTo html text remove empty each
자바스크립트의 풍부한 활용을 위해 더 많은 기능(기법)들을 학습합니다.
if 조건부(3항) 연산자 else switch for while case default break continue
선언(Declarations) 표현(Expressions) 즉시실행함수(IIFE) 인자(Arguments) 매개변수(Parameters) 함수 종료 arguments 객체 유효범위(Scope) 렉시컬(Lexical) 호이스팅(Hoisting) 콜백(Callback)
String Number Math Date Array Timer