반응형 웹사이트 제작 강의소개 및 텍스트 에디터 사용법
반응형 웹사이트 포트폴리오 제작 강의소개(Architecture Agency)
[필독] brackets 편집기 Adobe 지원종료에 관해서(설치파일 다운로드)
블라켓츠(Brackets) 다운로드 및 에밋 설치
블라켓츠(Brackets) 사용법 및 단축키 활용
블라켓츠(Brackets)에서 Emmet 기본 사용법 및 단축키 활용
비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정
비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법
비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지
전체 레이아웃을 제어하는 플러그인 사용법 및 사용자 설정
전체 UI UX를 제어하는 플러그인 사용법 및 필독사항
전체 UI UX를 제어하는 플러그인 다운로드 및 폴더파일 세팅하기
전체 UI UX를 제어하는 플러그인 프로토타입 제작하기
전체 웹사이트 index 파일 구조 설정하고 필수 파일 링크하기
index.html 페이지 로딩시 플러그인으로 생기는 화면 오류 수정하기
전체 레이아웃 와이어프레임 퍼블리싱(PC ver.)
전체 레이아웃 와이어프레임 퍼블리싱(PC) - 기본서식
전체 레이아웃 와이어프레임 퍼블리싱(PC) - 전체레이아웃, 헤더영역
모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)
모바일 네비게이션 퍼블리싱 - Media Query
모바일 네비게이션 퍼블리싱 퍼블리싱 - 기본구조 및 링크 만들기
모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기
모바일 네비게이션 퍼블리싱 - a 앵커 만들고 부드럽게 섹션 찾아가기
모바일 네비게이션 퍼블리싱 - 스크롤되면 헤더 변경하는 자바스크립트
모바일 네비게이션 퍼블리싱 - 우측 하단 hiring 버튼 만들기
섹션 상세 퍼블리싱(Awards Section)
PC 레이아웃 섹션 상세 퍼블리싱 - 섹션별 퍼블리싱 작업순서
PC 레이아웃 섹션 상세 퍼블리싱(Awards Section) - #01
PC 레이아웃 섹션 상세 퍼블리싱(Awards Section) - #02
섹션 상세 퍼블리싱(About Section)
PC 레이아웃 섹션 상세 퍼블리싱(About Section) - #01
PC 레이아웃 섹션 상세 퍼블리싱(About Section) - #02
섹션 상세 퍼블리싱(Location Section)
PC 레이아웃 섹션 상세 퍼블리싱(Location Section) - #01
PC 레이아웃 섹션 상세 퍼블리싱(Location Section) - #02
섹션 상세 퍼블리싱(Contact Section)
PC 레이아웃 섹션 상세 퍼블리싱(Contact Section) - #01
PC 레이아웃 섹션 상세 퍼블리싱(Contact Section) - #02
PC 레이아웃 섹션 상세 퍼블리싱(Contact Section) - #03
섹션 상세 퍼블리싱(Plan Section)
PC 레이아웃 섹션 상세 퍼블리싱(Plan Section) - #01
PC 레이아웃 섹션 상세 퍼블리싱(Plan Section) - #02(Slick.js 다운로드)
PC 레이아웃 섹션 상세 퍼블리싱(Plan Section) - #03(Slick.js 사용법)
PC 레이아웃 섹션 상세 퍼블리싱(Plan Section) - #04(Slick.js 스타일 변경)
섹션 상세 퍼블리싱(Project Section)
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 프로토타입 제작 #01
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 프로토타입 제작 #02
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 탭 콘텐츠 퍼블리싱 #01
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 탭 콘텐츠 퍼블리싱 #02
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - 탭 콘텐츠 퍼블리싱 #03
PC 레이아웃 섹션 상세 퍼블리싱(Project Section) - #06(Slick.js 이미지 슬라이더)
섹션 상세 퍼블리싱(Home Section)
PC 레이아웃 섹션 상세 퍼블리싱(Home Section) - #01(HTML+CSS 구조)
PC 레이아웃 섹션 상세 퍼블리싱(Home Section) - #02(애니메이션 1)
PC 레이아웃 섹션 상세 퍼블리싱(Home Section) - #03(애니메이션 2~3)
PC 레이아웃 섹션 상세 퍼블리싱(Home Section) - #04(애니메이션 4, 파비콘 넣기)
서브페이지 퍼블리싱(Hiring Info)
PC 레이아웃 서브페이지 퍼블리싱(Hiring Info) - #01
PC 레이아웃 서브페이지 퍼블리싱(Hiring Info) - #02
PC 레이아웃 서브페이지 퍼블리싱(Hiring Info) - #03
PC 레이아웃 서브페이지 퍼블리싱(Hiring Info) - #04
PC 레이아웃 서브페이지 퍼블리싱(Hiring Info) - #05
PC 레이아웃 서브페이지 퍼블리싱(Hiring Info) - #06(SNS 아이콘 애니메이션 이펙트)
서브페이지 퍼블리싱(Project Detail)
PC 레이아웃 서브페이지 퍼블리싱(Project Detail) - #01
PC 레이아웃 서브페이지 퍼블리싱(Project Detail) - #02
서브페이지 링크하기(Modal Iframe Jquery Plugin)
서브페이지 링크하기(Modal Iframe Jquery Plugin) #01(모달이 필요한 이유)
서브페이지 링크하기(Modal Iframe Jquery Plugin) #02(모달 아이프레임 플러그인 )
서브페이지 링크하기(Modal Iframe Jquery Plugin) #03(플러그인 CSS 디자인 변경 )
메인페이지 모든 섹션 모바일로 변환하기(index 파일)
메인페이지 레이아웃 모바일 변환(필수 핵심 이론)
메인페이지 레이아웃 모바일 변환 #01(Home Section)
메인페이지 레이아웃 모바일 변환 #02(About Section)
메인페이지 레이아웃 모바일 변환 #03(Plan Section)
메인페이지 레이아웃 모바일 변환 #04(Awards Section)
메인페이지 레이아웃 모바일 변환 #05(Location Section)
메인페이지 레이아웃 모바일 변환 #06(Contact Section)
메인페이지 레이아웃 모바일 변환 #07(Project Section)
서브페이지 모바일로 변환하기(hring, project)
서브페이지 모바일로 변환하기 #01 (hring subpage)
서브페이지 모바일로 변환하기#02 (project subpage)
마치며
중고급 레벨 Jump Up 퍼블리싱 이론과 팁(Tip)
웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(1탄)
웹 퍼블리셔를 위한 크롬 확장 프로그램 추천(2탄)
a태그 앵커 만들고 2가지 방식으로 Smooth Scrolling 하기(제이쿼리 플러그인, CSS 속성)
body 안에 또 다른 html 불러오는 iframe 활용하기
input과 checked를 활용한 확장선택자(인접선택자, 형제선택자, 속성선택자)
인라인 자바스크립트 활용하기(onclick 자바스크립트 이벤트)
퍼블리싱 강사가 강의를 잘하는지 못하는지 구분하기(display 속성의 이해도)
상대적인 폰트 크기 em 단위와 rem 단위 이해하기
부모요소의 값을 상속하는 inherit 이해하기
가상클래스의 꽃(:before :after) 사용법
하드코딩으로 이미지맵(image map) 만들기
반응형 애니메이션 모달(HTML+CSS+JQUERY)
자료 다운로드(단계별 완성본, 비주얼 코드 사용법, 포토샵 UI 디자인)
[섹션 01.단계별 완성본] 전체 레이아웃을 제어하는 플러그인 사용법 및 사용자 설정
[섹션 02.단계별 완성본] 전체 레이아웃 와이어프레임 퍼블리싱(PC ver.)
[섹션 03.단계별 완성본] 모바일 전체 레이아웃 및 네비게이션 퍼블리싱(Mobile ver.)
[섹션 04.단계별 완성본] 섹션 상세 퍼블리싱(Awards Section) - 제작 소스 이미지
[섹션 05.단계별 완성본] 섹션 상세 퍼블리싱(About Section)
[섹션 06.단계별 완성본] 섹션 상세 퍼블리싱(Location Section)
[섹션 07.단계별 완성본] 섹션 상세 퍼블리싱(Contact Section)
[섹션 08.단계별 완성본] 섹션 상세 퍼블리싱(Plan Section)
[섹션 09.단계별 완성본] 섹션 상세 퍼블리싱(Project Section)
[섹션 10.단계별 완성본] 섹션 상세 퍼블리싱(Home Section)
[섹션 11.단계별 완성본] 서브페이지 퍼블리싱(Hiring Info)
[섹션 12.단계별 완성본] 서브페이지 퍼블리싱(Project Detail)
[섹션 13.단계별 완성본] 서브페이지 링크하기(Modal Iframe Jquery Plugin)
[섹션 14.단계별 완성본] 메인페이지 모든 섹션 모바일로 변환하기(index 파일)
[섹션 15.단계별 완성본] 서브페이지 모바일로 변환하기(hring, project)
[다운로드 PDF] 비주얼 스튜디오 코드(Visual Studio Code) 및 에밋(Emmet) 치트키
[다운로드]학습관련 JS 파일 및 JS 플러그인 폴더
[다운로드 PSD] 반응형 웹 제작 포토샵 UI 디자인(메인페이지, 서브페이지, 사용폰트)
[다운로드] display 속성에 대한 이해도 정리 텍스트 파일
[다운로드] px단위를 em단위로 자동 변환 엑셀 파일
CSS에서 변수 var() 사용하기(예제파일)
강의 관련 오류 수정 및 자주 묻는 질문들(FAQ)
[FAQ] 블라켓(Brackets)에서 생기는 표시 오류
[FAQ] Brackets에서 Emmet 코드힌트 안생기는 오류 해결 방법
[FAQ] 블라켓(Brackets) 실시간 미리보기 크롬으로 열리게 하기(기본 브라우저 설정)
[오류수정] 플러그인으로 생기는 초기 로딩 화면 오류 수정하기
[오류수정] 콘솔창 에러 관련([Intervention] Unable to preventDefault...)
[FAQ] HTML 내에 파일 링크할 때 꼭! 상대주소로 하셔야 합니다.
[FAQ] 블라켓(Brackets)에서 에밋(Emmet) 수동 설치하기