[미리보기 & 제작노트] 반응형 앱 오피셜 랜딩사이트
웹사이트 섹션 별 HTML 전체 와이어프레임 설계, CSS 배치, 기능정의
블라켓츠(Brackets) & 비주얼스튜디오코드(Visual Studio Code) 사용법
[필독] brackets 편집기 Adobe 지원종료에 관해서(설치파일 다운로드)
[필독] brackets 편집기 Adobe 지원종료에 관해서(설치파일 다운로드)
블라켓츠(Brackets) 다운로드 및 에밋 설치
블라켓츠(Brackets) 사용법 및 단축키 활용
블라켓츠(Brackets)에서 Emmet 기본 사용법 및 단축키 활용
비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정
비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법
비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지
필수 제이쿼리 플러그인 사용법 및 CSS 필수 핵심이론
앵커 만들고 부드럽게 스크롤해서 찾아가기(플러그인, CSS 속성)
반응형 웹 제작을 위한 미디어 쿼리(Media Query)
폰트 아이콘 사용법(FontAwesome 4,7)
웹 폰트 사용법(구글 웹 폰트, 눈누 한글 웹 폰트)
filter 속성으로 이미지 색상을 자유자재로 변경하기
object-fit과 object-position으로 img를 배경처럼 사용하기
플렉스(Flex) 속성으로 자유롭게 자식요소 정렬하기
탭 메뉴 제작을 위한 input 속성선택자, 인접선택자, 형제선택자
인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트)
[제이쿼리 핵심이론] 기본 구문 만들기, 선택자
[제이쿼리 핵심이론] 효과 메서드 - slideDown, slideUp, fadeIn, fadeOut)
[제이쿼리 핵심이론] 클래스 제어 메서드 - addClass, removeClass, toggleClass)
[제이쿼리 핵심이론] 요소탐색 메서드 - children, siblings)
[제이쿼리 실전예제] if 조건문을 이용한 스크롤 후 헤더 디자인 변경
[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(1)
[플러그인 사용방법] 콘텐츠 슬라이더 Slick Slider 사용법 및 CSS 변경(2)
[플러그인 사용방법] 스크롤하면 시작되는 애니메이션 - Wow.js & AOS.js
웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(1탄)
웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(2탄)
퍼블리싱 강사가 강의를 잘 가르치는지 구분하기(display, position 속성)
상대적인 폰트 크기 em 단위와 rem 단위 이해하기
부모요소의 값을 상속하는 inherit 이해하기
body 안에 또 다른 html 불러오는 iframe 활용하기
서버에 업로드 전 필수적인 이미지 용량 최적화(Image Optimize)
가상클래스의 꽃(:before :after) 사용법
하드코딩으로 이미지맵(image map) 만들기
반응형 애니메이션 모달(HTML+CSS+JQUERY)
반응형 앱 오피셜 랜딩사이트 제작 Start~!
웹사이트 제작 전 폴더구조, CSS 기본서식, Reset CSS 만들기
반응형 앱 오피셜 랜딩사이트 제작 – Header & Welcome 섹션
Header & Welcome 섹션 HTML 기본구조
welcome 섹션 제작(타이핑 텍스트 애니메이션) 01
welcome 섹션 제작(타이핑 텍스트 애니메이션) 02
반응형 앱 오피셜 랜딩사이트 제작 – ceo-access 섹션
ceo-access 섹션 - HTML 구조와 내용
ceo-access 섹션 - CSS 배치 및 상세디자인(1)
ceo-access 섹션 - CSS 배치 및 상세디자인(2)
반응형 앱 오피셜 랜딩사이트 제작 – banner 섹션
banner 섹션 - CSS 탭 메뉴 제작(1)
banner 섹션 - CSS 탭 메뉴 제작(2)
반응형 앱 오피셜 랜딩사이트 제작 – feature 섹션
feature 섹션 - CSS 배치 및 상세 디자인
반응형 앱 오피셜 랜딩사이트 제작 – vision 섹션
vision 섹션 - CSS 배치 및 상세디자인
반응형 앱 오피셜 랜딩사이트 제작 – faq 섹션
faq 섹션 - CSS 배치 및 상세 디자인(1)
faq 섹션 - CSS 배치 및 상세 디자인(2)
faq 섹션 - 어코디언 만들기 제이쿼리 코딩
반응형 앱 오피셜 랜딩사이트 제작 – review 섹션
review 섹션 - CSS 디자인 및 슬릭 슬라이더 제이쿼리
review 섹션 - 슬릭 슬라이더 CSS 수정하기
반응형 앱 오피셜 랜딩사이트 제작 – focus 섹션
focus 섹션 - HTML 구조와 내용 및 CSS 디자인
반응형 앱 오피셜 랜딩사이트 제작 – guide 섹션
guide 섹션 - CSS 배치 및 상세 디자인
guide 섹션 - 슬릭 슬라이더 CSS 상세 디자인
guide 섹션 - 가이드 비디오 모달 CSS 디자인
반응형 앱 오피셜 랜딩사이트 제작 – news 섹션
news 섹션 - CSS 배치 및 상세디자인(news-left)
news 섹션 - CSS 배치 및 상세디자인(news-right)
news 섹션 - CSS 상세디자인(news-right) 및 인라인 자바스크립트
반응형 앱 오피셜 랜딩사이트 제작 – 푸터(footer)
푸터(footer) - CSS 배치 및 상세 디자인
반응형 앱 오피셜 랜딩사이트 제작 – PC 버전 마무리 작업
Header 네비게이션 앵커 만들고 부드럽게 스크롤 하기
스크롤하면 header와 상단버튼 CSS 디자인 변경 자바스크립트
Scroll Reveal Animation 적용하기
반응형 앱 오피셜 랜딩사이트 제작 – 모바일 레이아웃 제작
모바일 레이아웃 변경작업(0) - 필독사항 및 세팅
모바일 레이아웃 변경작업(1) - welcome 섹션
모바일 레이아웃 변경작업(2) - ceo-access 섹션
모바일 레이아웃 변경작업(3) - banner 섹션
모바일 레이아웃 변경작업(4) - feature 섹션
모바일 레이아웃 변경작업(5) - vision 섹션
모바일 레이아웃 변경작업(6) - faq 섹션
모바일 레이아웃 변경작업(7) - review 섹션
모바일 레이아웃 변경작업(8) - focus 섹션
모바일 레이아웃 변경작업(9) - guide 섹션
모바일 레이아웃 변경작업(10) - news 섹션
모바일 레이아웃 변경작업(11) - 푸터(footer)
모바일 레이아웃 변경작업(12) – 헤더(header) & 모달
자료 다운로드(단계별 완성본, 플러그인, 참고 코드, 비주얼 코드 사용법, 포토샵 UI)
[다운로드] 반응형 앱 공식사이트(App Official Landing)-시작하기.zip
[다운로드] 포토샵 UI 디자인(반응형 앱 공식사이트)
[다운로드] 반응형 앱 공식사이트 제작을 윈한 기능 정의서
[다운로드] 반응형 앱 공식사이트(App Official Landing) - 섹션 단계별 완성본
[참고자료] HTML WireFrame, Source Text, CDN, CSS filter Color Generator
[다운로드 PDF] 비주얼 스튜디오 코드(Visual Studio Code) 및 에밋(Emmet) 치트키
[다운로드] display 속성에 대한 이해도 정리 텍스트 파일
[다운로드] px단위를 em단위로 자동 변환 엑셀 파일
[다운로드] CSS에서 변수 var() 사용하기(예제파일)
[다운로드] 인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트)
강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)
[FAQ] 블라켓(Brackets)에서 생기는 표시 오류
[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법
[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)
[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.
[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기
