NEW
개발 · 프로그래밍

/

웹 퍼블리싱

모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting

19페이지, 총 22가지 다양한 모바일 레이아웃 제작하면서 퍼블리셔 취업과 퍼블리셔 실무에서 가장 경쟁력이 있는 모바일 웹 제작 능력을 향상할 수 있습니다. 퍼블리셔로서 모바일 웹을 제작하기 위한 거의 모든 제작 방법과 노하우를 다질 수 있습니다. 모바일 웹 퍼블리싱 수업에서 가장 강점인 부분인 HTML 와이어프레임 상세한 작성법을 모든 페이지 하나하나 상세하게 설명합니다. 강의를 통해 HTML 와이어프레임 제작 능력이 크게 향상될 것입니다. 특히 CSS 중첩(Nesting) 방식을 충분히 학습할 수 있습니다. Flex 레이아웃을 중심으로 중상급 CSS 실전 능력을 충분히 갖추시게 됩니다.

6명 이 수강하고 있어요.

모바일 디자인HTML/CSSwireframeslick-slideriframes
Thumbnail

초급자를 위해 준비한
[웹 퍼블리싱, 웹 개발] 강의입니다.

이런 걸
배워요!

  • 순수 CSS 중첩(Nesting) 방식 퍼블리싱 능력

  • Flex & Grid 레이아웃을 중심으로 중상급 CSS 실전 코딩

  • 19페이지, 총 22가지 다양한 모바일 레이아웃 제작

  • 모바일 웹 퍼블리싱 제작 필수 이론과 노하우, 실전 제작

  • CSS 변수(Var) 활용한 모바일에 최적화된 레이아웃 제작

  • 경력자처럼 퍼블리싱하는 클린 코딩(Clean Coding)의 정석

  • 슬릭 슬라이더(Slick Slider) 사용법 및 CSS 변경 노하우

  • HTML+CSS 모바일 목업(Mockup) 제작 후 iframe 활용

css-nesting-content-01

"CSS Nesting 방식 모바일 웹 퍼블리싱 제작
필수 이론과 노하우, 체계적인 실전 제작"

Step 01. 총 19개페이지, 총 22가지 다양한 모바일 레이아웃 HTML 와이어프레임 상세 제작
Step 02. CSS 중첩(Nesting) 방식을 활용한 다양한 레이아웃 퍼블리싱 제작
Step 03. 완성된 퍼블리싱 결과물을 더 완벽하게 하는 퍼블리싱 마무리 작업

코딩웍스가 지금까지 수많은 오프라인 학원 학생들에게 수업한 모바일 웹 퍼블리싱 제작 노하우가 담겨 있습니다. 완강 후 한층 향상된 퍼블리싱 실력을 갖게 되실거라고 확신합니다. 특히, CSS Nesting 방식 코딩에 큰 자신감을 갖게 됩니다.

SCSS(SASS)에서만 사용할 수 있던
CSS 중첩 방식 코딩을 일반 CSS에서 코딩합니다!


해당 강의 [모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting]는 일반 CSS 코딩 방식이 아니라 최신 기술인 CSS 중첩(Nesting) 방식의 코딩으로 제작되었습니다. CSS Nesting은 1년 전까지는 SCSS(SASS)에서만 사용할 수 있었지만 지금은 SCSS(SASS)를 사용하지 않고 사용할 수 있습니다. CSS Nesting으로 모바일 웹 프로젝트를 퍼블리싱하면서 꽤 성장하실거라 생각합니다.

기존의 SCSS(SASS) 사용하기 위한 준비가 필요합니다. 준비와 함께 컴파일(compile)이라는 과정도 거쳐야 브라우저가 인식하는 CSS가 됩니다. SCSS(SASS)를 사용하는 대부분의 이유는 바로 선택자 중첩(Selector Nesting)입니다. 물론 SCSS(SASS)만의 더 다양한 기능은 있지만 가장 중요한 기능이 중첩인데 이제 SCSS(SASS)를 사용하지 않고 CSS 중첩으로 코딩할 수 있습니다.

css-nesting-content-06
css-nesting-content-02

강의 주제 📖

코딩웍스의 <모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting>을 통해서 퍼블리셔 취업과 퍼블리셔 실무에서 가장 경쟁력이 있는 모바일 웹 제작 능력을 향상할 수 있습니다. 그리고 퍼블리셔로서 모바일 웹을 제작하기 위한 거의 모든 제작 방법과 노하우를 다질 수 있습니다.

  1. 순수 CSS 중첩(Nesting) 방식 퍼블리싱 능력

  2. Flex & Grid 레이아웃을 중심으로 중상급 CSS 실전 코딩

  3. 모바일 웹 퍼블리싱 제작 필수 이론과 노하우, 실전 제작

  4. HTML+CSS 모바일 목업(Mockup) 제작 후 iframe 활용

  5. CSS 변수(Var) 활용한 모바일에 최적화된 레이아웃 제작

  6. 슬릭 슬라이더(Slick Slider) 사용법 및 CSS 변경 노하우


  7. 경력자처럼 퍼블리싱하는 클린 코딩(Clean Coding)의 정석

모든 브라우저에서 완벽하게 지원하는
CSS Nesting 방식 코딩

▲ 녹색으로 표시되면 브라우저에서 완벽 지원한다는 표시입니다.

Can i Use 웹사이트에서 자세히 보기 : https://caniuse.com/?search=css%20nesting

▲ 개인 포트폴리오 용도로 모바일 목업(Mockup) 제작 후 iframe 활용

▲ 총 19개페이지, 총 22가지 다양한 모바일 레이아웃 HTML 와이어프레임 상세 제작

다양한 파일 제공 🗂

📝 디자인 파일, 소스 파일, 퍼블리싱 완성본, 강의노트

  1. [CSS Nesting] 디자인 작업 이미지 소스

  2. [CSS Nesting] 모바일 웹 HTML 와이어프레임(TXT)

  3. [CSS Nesting] 모바일 웹 디자인 작업(PSD)

  4. [다운로드] HTML+CSS 모바일 목업(Mobile Mockup) 3종(아이폰, 갤럭시)

  5. 디자인 개별화면(PNG) [CSS Nesting] 모바일 웹 디자인 개별화면(PNG)

  6. 소스텍스트 및 참고 웹사이트 [CSS Nesting]

  7. CSS Nesting 모바일 웹 - 강의노트

▲ CSS Nesting 모바일 웹 제작영상 - 영상 강의에서 사용된 PPT 강의자료 제공

클린 코딩의 정석🧽

<모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting> 강의를 수강하면서 HTML 와이어프레임 만들기 능력, 퍼블리싱을 위한 Flex 사용능력 등 여러가지로 실력이 성장할 거라고 생각합니다. 이런 부분들도 매우 중요하지만 이 중에서 가장 중요한 부분이 바로 '경력자처럼 퍼블리싱하는 클린 코딩(Clean Coding)의 정석'을 배우시게 됩니다. 강의에서 모든 퍼블리싱을 이런 원칙하에 작성되었습니다.

<경력자처럼 퍼블리싱하는 클린 코딩(Clean Coding)의 정석>이라는 부분은 필요한 곳에 필요한 주석을 넣는 것, HTML 출연 순서에 맞게 CSS 선택자도 순서에 맞게 코딩하는 것, 공통된 CSS 선택자의 경우 나중에 유지 보수를 위해서 Common CSS라는 곳에 정리하는 것.. 이런 코딩 원칙과 습관을 배우시게 되면 실무에서 정말 많은 도움이 됩니다. 특히, 취업할 때 인사담당자 또는 그에 준하는 사람이 지원자의 퍼블리싱 결과물을 보고 소스 코드(Source Code)를 보게 됩니다. 이런 경우 잠깐 소스 코드만 봐도 지원자의 퍼블리싱 기본기에 대해 판단할 수 있습니다.

💡 이 강의가 다른 매력 포인트는?

  1. 신기술인 CSS Nesting 방식의 코딩 제작 능력을 갖출 수 있습니다.

  2. 퍼블리싱 실력을 대폭 향상 시키는 HTML 와이어프레임 상세한 작성법을 배웁니다.

  3. 코딩웍스의 경력자처럼 퍼블리싱하는 클린 코딩(Clean Coding)의 정석을 배웁니다.

  4. 다양한 실습과 예제, 이해하기 쉬운 설명, 깊이있는 개념을 자세히 설명합니다.

  5. 모바일 웹 퍼블리싱을 위해 수강생이 알아야 할 모든 것을 설명합니다.

모바일 웹 전체 UI 디자인

CSS Nesting 퍼블리싱 📚


▲ 인트로 페이지 with Overlay / 인트로 페이지

🚩인트로 페이지 with Overlay

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. 풀 스크린 레이아웃

  3. 토스트 오버레이 보이기/감추기

🚩 인트로 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. 인트로 슬릭 슬라이더

  3. 시작하기


▲ 웰컴 페이지 / 로그인 페이지


🚩 웰컴 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. 로그인 버튼 디자인

🚩로그인 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폼(form) 요소 다루기


▲ 회원가입 페이지 / 비밀번호 찾기 페이지

🚩 회원가입 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폼(form) 요소 다루기

🚩 비밀번호 찾기 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폼(form) 요소 다루기


▲ 마이프레시 메인 페이지 / 회원정보 보기 페이지

🚩마이프레시 메인 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, ::before ::after 활용

🚩 회원정보 보기 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, ::before ::after 활용


▲ 회원정보 확인 페이지 / 회원정보 수정 페이지

🚩 회원정보 확인 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, 인접선택자 활용

🚩 회원정보 수정 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, 인접선택자 활용

  4. CSS 커스텀 스위치 버튼

  5. CSS 커스텀 체크박스


▲ 주소록 관리 페이지 / 장바구니 페이지

🚩 주소록 관리 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치


🚩 장바구니 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용

  4. 폼(form) 요소 다루기


▲ 주문결제 페이지 / 찜 목록 페이지

🚩 주문결제 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용

  4. 가상클래스 :before :after로 폰트아이콘 Unicode 활용


🚩 찜 목록 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치


▲ 최근 본 상품 페이지 / 주문 목록 페이지

🚩 최근 본 상품 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, ::before ::after 활용


🚩 주문 목록 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, ::before ::after 활용


▲ 검색 페이지 / 카테고리 페이지

🚩 검색 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, ::before ::after 활용


🚩 카테고리 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용

  4. 가상클래스 :before :after로 폰트아이콘 Unicode 활용


▲ 홈 메인 페이지 / 상품 자세히 보기(상품 설명) 페이지

🚩 홈 메인 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. 홈 메인 슬릭 슬라이더

  3. 상품 목록 슬라이더

  4. Flex 레이아웃 배치

  5. 폰트 아이콘 활용, ::before ::after 활용

  6. 뱃지(Badge) 디자인


🚩 상품 설명 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 탭 메뉴 콘텐츠 기능 활용

  4. 자바스크립스 상단으로 부드럽게 이동하기 기능

  5. 폰트 아이콘 활용, ::before ::after 활용


▲ 상품 자세히 보기(리뷰) 페이지 / 상품 자세히 보기(문의) 페이지

🚩 상품 자세히 보기(리뷰) 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용, ::before ::after 활용

  4. 뱃지(Badge) 디자인


🚩 상품 자세히 보기(문의) 페이지

  1. CSS Nesting 방식의 HTML 와이어프레임 구조 제작

  2. Flex 레이아웃 배치

  3. 폰트 아이콘 활용

  4. 가상클래스 :before :after로 폰트아이콘 Unicode 활용

💡 퍼블리싱 작업 텍스트에디터 <비주얼 스튜디오 코드>

해당 강의 <모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting>는 비주얼 스튜디오 코드(Visual Studio Code)로 제작된 강의입니다. 비주얼 스튜디오 코드는 사용제한이 없는 Free 프로그램입니다. 모든 강의 영상은 비주얼 스튜디오 코드 기준으로 설명하고 있습니다. 
아래 코딩웍스 유튜브 영상을 통해서 기본적인 사용법을 익히고 퍼블리싱을 학습하시기 바랍니다.

비주얼 스튜디오 코드(Visual Studio Code) 다운로드 하기

  1. 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정(영상보기)

  2. 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법(영상보기)

  3. 비주얼 스튜디오 코드(Visual Studio Code) 필수 Extension 설치 및 사용법(영상보기)

  4. 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지(영상보기)


✅ 강의 제작 시 사용된 비주얼스튜디오코드 테마(Theme) : One Dark Pro

Q&A 👨‍🏫

질문은 해당 강의의 커뮤니티 질문 게시판에 해주시면 최선을 다해 답변드리겠습니다.


Q. 선수지식, 준비사항이 필요한가요?

특별한 선수지식이나 준비사항은 없습니다. HTML+CSS 기본적인 사용 경험이면 충분히 따라오실 수 있고, 기대하는 만큼의 실력 향상과 결과물을 얻으실 수 있습니다. 다만, CSS 중급 이론을 자주 사용하기 때문에 아래에 있는 학습 내용은 어느 정도 알고 있어야 합니다.

😀 코딩웍스 유튜브 재생목록 - 모바일 웹 퍼블리싱을 잘하기 위한 CSS 중급이론


Q. 차별화 되는 핵심적인 콘텐츠가 뭔가요?

[모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting] 강의는 일반 CSS 코딩 방식이 아니라 최신 기술인 CSS 중첩(Nesting) 방식의 코딩으로 제작되었습니다. CSS Nesting은 1년 전까지는 SCSS(SASS)에서만 사용할 수 있었지만 지금은 SCSS(SASS)를 사용하지 않고 사용할 수 있습니다. CSS Nesting으로 모바일 웹 프로젝트를 퍼블리싱하면서 꽤 성장하실 거라 생각합니다.

퍼블리싱 온라인 오프라인 수업을 오랫동안 퍼블리싱 강의를 해온 강사로서 퍼블리싱 실력을 높이는 가장 확실하고 체계적인 방법으로 수업합니다. 그리고 모바일 웹 퍼블리싱이라는 생소하고 어려운 작업을 단계적으로 수준급 결과물을 이끌어 낼 수 있도록 제작된 수업이 핵심이라고 생각합니다.


Q. 모바일 웹 퍼블리싱 제작 과정을 왜 배워야 하며 구체적인 기대효과는 뭔가요?

모바일 웹은 개인 포트폴리오 작업물로서 가장 중요도가 높습니다. 그러므로 모바일 웹 작업물이 있으면 취업 경쟁력이 좋습니다. 취업 포트폴리오로서 역할 뿐만 아니라 대부분의 회사에서 모바일 웹 프로젝트를 진행하고 있고 진행하려고 합니다. 이런 회사 입장에서 잘 만든 모바일 웹 포트폴리오가 있다면 취업 이직의 아주 좋은 레퍼런스가 될 거라고 생각합니다.

모바일 웹은 개인 포트폴리오 작업물로서 가장 중요도가 높습니다. 그러므로 모바일 웹 작업물이 있으면 취업 경쟁력이 좋습니다. 취업 포트폴리오로서 역할 뿐만 아니라 대부분의 회사에서 모바일 웹 프로젝트를 진행하고 있고 진행하려고 합니다. 이런 회사 입장에서 잘 만든 모바일 웹 포트폴리오가 있다면 취업 이직의 아주 좋은 레퍼런스가 될 거라고 생각합니다.

구체적인 기대효과는 사실 사람마다 다릅니다. 하지만 코딩웍스가 확실히 말씀드릴 수 있는 부분은 HTML 와이어프레임 구조를 만드는 능력이 대폭 향상됩니다. 다양한  HTML 와이어프레임 구조를 만들면서 복잡한 HTML 계층구조를 어떻게 체계적으로 정리해야 하는지 충분한 훈련을 합니다. 또한, 일관성 있는 클래스네임을 어떻게 네이밍하고 공유해야 하는지 함께 만들면서 상세하게 수업합니다.

다양한 모바일 레이아웃 HTML 와이어프레임 상세 제작에서 다양한 HTML 와이어프레임 구조 만들고 실전 모바일 웹 퍼블리싱 적용하는 단계까지 훈련하므로 추후 어지간한 웹 UI 레이아웃을 만드는데 자신감이 생깁니다.


Q. 수업 내용을 어느 수준까지 다루나요?

모바일 웹 특성상 파일의 개수와 폴더이 개수가 많습니다. 그래서 좀 속도감 있게 많은 내용이 진행됩니다. 어느 수준까지라는 게 사람의 기준에 따라 다르지만, 퍼블리셔 개인 포트폴리오로서 충분한 수준으로 작업하는 수업 내용입니다. 그뿐만 아니라 실무에서 모바일 웹 작업하는 수준으로 보셔도 충분한 정도의 수업내용입니다.


Q. 기존 강의 [모바일 웹 퍼블리싱 포트폴리오 with Figma]와 다른 점이 어떤 건가요?

기존 모바일 웹 강의와 해당 모바일 웹 강의는 모두 모바일 웹을 CSS 방식으로 제작하는 것은 같습니다. 가장 크게 다른 점은 기존 강의는 부모 요소를 매번 나열하는 CSS 방식이고 해당 강의는 부모 요소를 한 번만 사용하는 CSS 중첩 방식의 제작 강의입니다. 기존 강의보다 난이도가 기존보다 1.5배 정도 높아지면서 더 많은 페이지와 더 다양한 레이아웃 제작을 하게 되므로 모바일 웹 퍼블리싱 실력을 더 향상할 수 있습니다.

✅해당 모바일 웹 제작 강의 차이점

  • 수업에서 Figma 디자인 작업 하지 않음.

  • 준비된 디자인 완성본을 보면서 바로 HTML 와이어프레임 제작과 퍼블리싱 제작

  • CSS Nesting 코딩 방식

  • 2배 이상의 제작량 및 학습량(기본 강의는 9개 페이지 제작, 해당 강의는 19페이지 제작)

  • 다양한 모두 다른 22가지 레이아웃 제작

  • 다양한 슬라이더 제작 방식(Slick Slider)



Q. 전체 강의 시간은 어떻게 되나요?

전체 영상 강의 시간은 약 16시간으로 심도 있는 학습을 위한 충분한 강의로 준비되어 있습니다.

  • 사전 필독 영상 및 모바일 웹 HTML 와이어프레임 구조 만드는 방법 - 2시간

  • [실전 제작] 모바일 웹 HTML 와이어프레임 구조 with PPT - 3시간

  • [실전 제작] 모바일 웹 상세 퍼블리싱 with CSS Nesting- 10시간

  • [참고 하기]완성된 모바일 웹을 포트폴리오로 활용하기 - 1시간


Q. 수강 관련 참고 사항(갖춰야 할 환경, 기타 유의사항 등)이 있나요?

수업 내용이 많고 속도감 있게 진행됩니다. 그렇다고 충분한 설명 없이 지나가지 않고 상세하게 설명합니다. 잘 따라오실 거라고 생각합니다. 다만 싱글 모니터로 학습하시는 것보다 듀얼 모니터 환경을 갖추시길 강력하게 권합니다. 섹션 2의 [필독] 노력 대비 퍼블리싱 실력이 늘지 않는 이유 영상에 자세히 나와 있으니 참고해주세요.

섹션 1. 강의소개

  • [강의소개] 모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting

  • [완성본 미리보기] 모바일 웹 퍼블리싱 포트폴리오 with CSS Nesting

  • [필독] 순수 CSS 선택자 중첩 01 - CSS Nesting 기본 사용법

  • [필독] 순수 CSS 선택자 중첩 02 - CSS Nesting 활용예제(로그인 폼)


섹션 2. [필독] 모바일 웹 HTML 와이어프레임 구조 만드는 방법

  • [필독] 노력 대비 퍼블리싱 실력이 늘지 않는 이유

  • [필독] HTML 와이어프레임 구조 만드는 방법과 노하우

  • [실습] HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인 폼)

  • [필독] HTML 와이어프레임 구조(보더 박스 및 클래스 네이밍 요령)

  • [참고] 모바일 웹(Web) & 모바일 앱(App)에 대한 개념 이해하기


섹션 3. [실전 제작] 모바일 웹 HTML 와이어프레임 구조 with PPT

  • HTML 와이어프레임 구조(Join - 시작하기,로그인,회원가입,비번찾기)

  • HTML 와이어프레임 구조(Myfresh 01 - 마이프레시 메인)

  • HTML 와이어프레임 구조(Myfresh 02 - 회원정보 보기 확인 수정)

  • HTML 와이어프레임 구조(Myfresh 03 - 배송지 관리, 주문결제)

  • HTML 와이어프레임 구조(Myfresh 04 - 장바구니)

  • HTML 와이어프레임 구조(Myfresh 05 - 찜, 최근 본 상품, 주문목록)

  • HTML 와이어프레임 구조(Search, Category - 검색, 카테고리)

  • HTML 와이어프레임 구조(FAQ - 자주 묻는 질문들)

  • HTML 와이어프레임 구조(Customer Center - 고객센터)

  • HTML 와이어프레임 구조(Home - 메인페이지)

  • HTML 와이어프레임 구조(Detail - 상품설명, 상세정보, 리뷰, 문의)


섹션 4. [실전 제작] 모바일 웹 상세 퍼블리싱 with CSS Nesting

  • [필독] 모바일 웹 퍼블리싱에서 너비(width) 높이(height) 세팅하기

  • [필독] 폴더 구조 만들기, Reset, 변수(Variables)

  • [실전 퍼블리싱 제작] 인트로 01(인트로 화면, 슬라이더, 슬라이더 커스텀 CSS)

  • [실전 퍼블리싱 제작] 인트로 02(토스트 오버레이, 절대주소 vs 상대주소)

  • [실전 퍼블리싱 제작] Join 01(월컴

  • [실전 퍼블리싱 제작] Join 02(로그인)

  • [실전 퍼블리싱 제작] Join 03(회원가입, 비번찾기)

  • [실전 퍼블리싱 제작] 마이프레시 메인 01(페이지헤더, 콘텐츠 레이아웃)

  • [실전 퍼블리싱 제작] 마이프레시 메인 02(세부 콘텐츠, gnb)

  • [실전 퍼블리싱 제작] 마이프레시 메인 03(gnb 인클루드)

  • [실전 퍼블리싱 제작] Container 높이 정리하기(auto, 100vh)

  • [실전 퍼블리싱 제작] 회원정보 01(회원정보 보기)

  • [실전 퍼블리싱 제작] 회원정보 02(회원 비밀번호 확인)

  • [실전 퍼블리싱 제작] 회원정보 03(회원정보 수정)

  • [실전 퍼블리싱 제작] 배송지 관리

  • [실전 퍼블리싱 제작] 중간 코드 수정(Common CSS)

  • [실전 퍼블리싱 제작] 장바구니

  • [실전 퍼블리싱 제작] 주문 결제(:not :has 가상클래스)

  • [실전 퍼블리싱 제작] 찜 목록

  • [실전 퍼블리싱 제작] 최근 본 상품

  • [실전 퍼블리싱 제작] 주문 목록

  • [실전 퍼블리싱 제작] 검색, 카테고리

  • [실전 퍼블리싱 제작] 홈(Home) 01 - 메인 슬라이더, 카테코리, 배너, 푸터

  • [실전 퍼블리싱 제작] 홈(Home) 02 - SNS, 빠꼼이 상품 슬라이더

  • [실전 퍼블리싱 제작] 상품설명 01 - 탭 버튼 체크, 탭 메뉴 기능, 찜장바구니 버튼

  • [실전 퍼블리싱 제작] 상품설명 02 - 상품상세, 상품정보

  • [실전 퍼블리싱 제작] 상품설명 03 - 상품리뷰, 상품문의

  • [실전 퍼블리싱 제작] 페이지별 너비와 높이 조정과 수정(모바일 디바이스 확인)

  • [퍼블리싱 수정 보완] 상품설명 페이지에서 상단으로 부드럽게 이동하기

  • [퍼블리싱 수정 보완] - 파일 링크하기 & GNB 네비게이션 체크하기

  • [퍼블리싱 수정 보완] 홈(Home) 메인 슬라이더 개수, 상품 슬라이더 태블릿 사이즈


섹션 5. [참고 하기] 완성된 모바일 웹을 포트폴리오로 활용하기

  • 나이스한 모바일 목업(Mockup) 만들기

  • 제작한 모바일 목업(Mockup)을 iframe 활용하기(멀티뷰, 싱글뷰)

  • 모바일 브라우저 감지 자바스크립트(화살표 함수, User Agent)

  • 완강 후 제작한 모바일 웹을 포트폴리오에 적용(코딩웍스 학생 포트폴리오 보기)


섹션 6. [다운로드] 수강생 참고자료

  • [다운로드] 수강생 참고자료 다운로드(모바일 웹 with CSS Nesting)

  • [PDF 교재] 모바일 웹 - HTML 와이어프레임(PDF)

  • [PDF 교재] 모바일 웹 - 강의노트

🙋🏻‍♂️ 질문하시기 전에 꼭! 읽어주세요~!!

학습하시면서 궁금하신 사항이 있으시면 질문해주세요. 질문 주실 때는 안되는 내용과 코드 그리고 브라우저 결과 화면 캡쳐를 올려주셔야 합니다. 코드의 경우 HTML, CSS, JS 코드 모두 올려주셔야 정확한 답변을 드릴 수 있습니다. 

질문글에 코드 없이 글로만 문제를 설명하시면 정말 간단한게 아니라면 정확한 답변을 드리기 어렵습니다. 그럼 제가 'HTML, CSS, JS 코드와 브라우저 캡쳐를 올려주세요~' 라고 다시 답변을 달 수 밖에 없고 결국 해결책을 얻는데 번거롭고 시간이 더 걸립니다.

⚡ 효과적인 학습을 위해 꼭! 코딩웍스 퍼블리싱 유튜브를 참고해주세요.

코딩웍스 퍼블리싱 유튜브 채널에서 이론 영상 강의와 병행하시기 바랍니다. 물론 모든 이론 영상이 유튜브 채널에 있는건 아니지만 중요한 이론 영상은 거의 다 있습니다. 영상이 많으니까 영상을 찾는 방법은 아래 예시처럼 검색하시는게 좋습니다.

코딩웍스 퍼블리싱 유튜브 채널 : https://www.youtube.com/codingworks

✒지식 공유자 소개

코딩웍스는 현재까지 300명 이상 국비 퍼블리싱 과정 학생들에게 퍼블리싱 이론, 활용, 개인 포트폴리오 홈페이지 제작 강의하고 있습니다. 특히 퍼블리셔 취업을 위한 모든 준비과정을 A부터 Z까지 완벽하게 가이드하면서 학생 대부분 과정 종료 후 바로 취업을 할 수 있도록 수년간 퍼블리싱 강의만 전문적으로 해온 강사입니다. 또한, 인프런에서 퍼블리싱 관련 강의를 진행하면서 인프런 수강생분들께도 도움이 많이 되었다는 평가도 받고 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 모바일 웹 UI 디자인 및 퍼블리싱 포트폴리오가 필요하신 분

  • 실무에서 모바일 웹 퍼블리싱 작업을 위한 실전 경험이 필요하신 분

선수 지식,
필요할까요?

  • HTML+CSS 기본적인 사용 경험

안녕하세요
코딩웍스(Coding Works)입니다.

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

커리큘럼

전체

56개 ∙ (16시간 19분)

수업 자료

가 제공되는 강의입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!