▼ SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 : 프론트 페이지(Front Page)

🚩 프론트 페이지(Front Page)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• 웹사이트 첫 페이지로 사용자에게 해당 웹사이트의 정체성을 보여줌
• 복잡한 HTML 구조를 관리하고 잘 정리된 계층 구조 만드는 방법(Clean Coding)
• PC & Tablet 레이아웃 네비게이션과 Mobile 네비게이션을 작동하는 스크립트를 if 조건 분기 시킴
• 일정한 수치의 스크롤을 하면 Header를 상단에 고정시키는 스크립트 사용
• 프론트 페이지에 멘토 신청과 이벤트 모달 보여주기
• 메인 슬라이더와 강의 아이템 슬라이더를 슬릭 슬라이더로 제작
• 모든 페이지가 공통적으로 달고 다니는 Header & Footer를 제이쿼리로 컴포넌트 작업
• 카운트 다운 타이머 플러그인 사용
• Footer의 네비게이션을 모바일 레이아웃 때 드롭다운 어코디언 형태로 변환
• 검색 폼 요소에 폰트 아이콘 넣기와 :focus ::placeholder 사용하기
• 가상클래스 :before :after로 폰트아이콘 Unicode 활용
• SVG 이미지 사용 방법
• CSS 속성인 Object-fit의 실전 사용 방법
• 필수적인 제이쿼리 상호작용 메서드(클래스제어, 요소선택, 이벤트 핸들러 등)
• 필수적인 인라인 자바스크립트 활용 방법
• 강의 아이템 카드 UI를 다양한 형태로 재활용하는 방법(@at-root)
• 폰트 아이콘(Bootstrap Icons) 사용법과 활용 방법
• 미디어쿼리 브레이크포인트 별로 반응형 레이아웃  변경(최소 1024, 768~1024, 최대 767)

▼ SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 : 강의소개 페이지(Class Detail)

🚩 강의소개 페이지(Class Detail)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• 강의 소개 페이지로 가장 내용이 많아서 퍼블리싱 작업물이 많은 페이지
• 강의소개 우측 사이드바 일정 스크롤 후 고정하기
• 강의상세 내용 서브 네비게이션 일정 스크롤 후 고정하기
• 사이드바 공유하기 버튼 클릭 후 공유하기 모달 띄우기
• 커리큘럼 소개 제이쿼리 어코디언
• 자주 문든 질문들 제이쿼리 어코디언
• 수강후기 별점 개수 막대 CSS 디자인
• 색상 내장함수(built-in function) 
• 미디어쿼리 브레이크포인트 별로 반응형 레이아웃  변경(최소 1024, 768~1024, 최대 767)

▼ SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 : 카테고리 메인 페이지(Category Main)

🚩 카테고리 메인 페이지(Category Main)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• 클래스 강의 목록 슬릭 슬라이더
• 페이징 CSS 디자인
• 미디어쿼리 브레이크포인트 별로 반응형 레이아웃  변경(최소 1024, 768~1024, 최대 767)

▼ SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 : 수강신청 수강바구니(Take Course)

🚩 수강신청 수강바구니(Take Course)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• 제이쿼리를 활용한 수강 장바구니 아이템 삭제 및 전체삭제
• 다양한 CSS3 속성(accent-color)
• 미디어쿼리 브레이크포인트 별로 반응형 레이아웃  변경(최소 1024, 768~1024, 최대 767)

▼ SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 : 회원가입 페이지(Member Register)

🚩 회원가입 페이지(Member Register)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• HTML 폼(Form) 요소의 특징과 속성에 대한 상세한 학습
• 폼 요소 가상클래스 활용(:focus  ::placeholder)
• 중복된 선택자를 효과적으로 정리하는 :is 가상클래스
• 커스텀 체크박스로 예쁜 체크박스와 라디오버튼 만들기
• 비밀번호 보기/안보이기 설정하는 스크립트

▼ SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 : 로그인 모달(Modal)

🚩 로그인 모달(Modal)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• HTML 폼(Form) 요소의 특징과 속성에 대한 상세한 학습
• 폼 요소 가상클래스 활용(:focus  ::placeholder)
• 중복된 선택자를 효과적으로 정리하는 :is 가상클래스
• 커스텀 체크박스로 예쁜 체크박스와 라디오버튼 만들기
• 비밀번호 보기/안보이기 설정하는 스크립트
• @mixin @include 활용하기

🚩 공유하기 모달(Modal), 수강바구니 확인 모달(Modal)

• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• 피그마(Figma) UI 디자인 및 HTML 와이어프레임 구조 제작
• SCSS(SASS)와 FLEX 레이아웃으로 전체 퍼블리싱 제작
• 가상클래스 :before :after로 도형 제작
• 수강바구니 확인 모달 setTimeout으로 4초 후 자동 닫기

• 비주얼 스튜디오 코드(Visual Studio Code) 사용법 및 환경설정 (영상 보기)
• 비주얼 스튜디오 코드(Visual Studio Code)에서 에밋(Emmet) 사용법 (영상 보기)
• 비주얼 스튜디오 코드(Visual Studio Code) 필수 Extension 설치 및 사용법 (영상 보기)
• 비주얼 스튜디오 코드에서 CSS 수정할 때 위로 올라가는 Full Reload 방지 (영상 보기)

• ✅ Live Sass Compilier Extension 설치 영상은 유튜드에는 없지만 반드시 설치하셔야 합니다.
• ✅ 퍼블리싱 전에 반드시 아래 섹션에서 Live Sass Compilier 익스텐션 설치 사용법을 학습하세요.

Q. SCSS(SASS)와 FLEX에 대해 공부한 적이 없는데 수업을 잘 따라 갈 수 있을까요?

🔊 FLEX 선행 학습
FLEX는 워낙 보편적인 내용이라 유튜브에서 플렉스 레이아웃 또는 CSS Flex 라고 검색하시면 20~30분 정도 영상으로 플렉스의 이론을 정리한 영상이 꽤 많습니다. 이런 영상 1~2개 쯤 보시고 실습하시면 플렉스 선행학습은 충분합니다. 플렉스 레이아웃은 생각보다 이론 내용이 많지는 않습니다.

🔊 SCSS(SASS) 선행 학습
SCSS(SASS) 선행학습은 강의에 포함된 섹션 4. SCSS 핵심 이론(Essential Theory)를 학습하시면 부족함이 없습니다.

Q. 퍼블리싱 선수 지식이 어느 정도 필요한가요?

HTML+CSS 기본적인 사용 경험이면 따라 오실 수 있고, 기대하는 만큼의 실력 향상과 결과물을 얻으실 수 있습니다. 다만, CSS 실력이 너무 기초 단계에 있는 분들에게는 부담될 수 있습니다. CSS 실력이 어느 정도만 갖추고 있어도 충분히 따라 오실 수 있습니다.

그리고 SCSS(SASS)를 처음 접하는 분들을 위해 섹션 4. SCSS 핵심 이론(Essential Theory)에 5시간 이상의 이론 수업도 준비되어 있으므로 섹션4를 학습하시고 섹션 5~7까지 충분히 잘 따라오셔서 프로젝트를 완료하실 수 있습니다.

Q. 코딩웍스 강의 중에 SCSS(SASS) 이미 2가지가 있는데 지금 강의랑 어떻게 다른가요?

네. 기존 코딩웍스 강의 중에 <SCSS(SASS)+GRID+FLEX 실전 포트폴리오 퍼블리싱>과 <SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제> 2가지 강의가 있습니다.

<SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma> 강의는 영상 강의이고 SCSS(SASS)의 핵심이론과 실전 활용을 공부하는 과정입니다. 하지만 이번 과정 처럼 SCSS(SASS)로 전체 웹사이트를 만드는 과정은 아니라서 수강생 입장에서는 난이도 부담이 좀 적은 강의입니다. 그래서 SCSS(SASS)를 처음 접하는 분들께 SCSS(SASS)에 대한 경험과 SCSS(SASS)로 만든 실전 예제를 만들기에 적합한 강의입니다.

<SCSS(SASS) FLEX GRID 핵심이론(PDF) 교재 및 활용예제> 강의는 영상 강의가 아니고 교재와 실전예제 파일을 제공하는 강의입니다. 퍼블리셔로서 레퍼런스 용으로 가지고 있으시면 도움이 됩니다.

위 2가지 과정을 선행하지 않으셔도 이번 SCSS(SASS)+FLEX 반응형 웹 프로젝트 강의를 수강하시는 건 문제가 되지 않습니다. 다만 CSS 실력이 어느 정도는 준비되어 있어야 합니다.

Q. 그래픽 프로그램 사용 경험이 없는데 피그마(Figma) 디자인 할 수 있을까요?

소개 영상에서도 언급했지만 피그마는 노력 대비 퍼포먼스가 굉장히 좋습니다. 파워포인트를 최소한 정도로 다룰 수 있으면 충분히 피그마 디자인 수업을 따라오실 수 있습니다. 다만 좀 더 수업을 잘 소화하시기 위해서 <[필독] SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 피그마 기초 강좌(ft.듀얼 모니터 사용)> 영상을 보시고 소개한 유튜브를 통해서 선행학습을 하시길 바랍니다.

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

디자인 전문가로서가 아니라 사전 지식이 전혀 없는 사람이 피그마를 잘 활용할 수 있는 수준의 디자인 강의라서 <섹션 1. SCSS(SASS)+FLEX 반응형 웹 프로젝트 UI 디자인 제작 with Figma> 피그마 디자인 작업 수업은 전문가를 위한 수업이라기 보다는 피그마를 처음 시작하는 사람이 받아들이기 무난한 수준입니다. 
하지만 <섹션 2. SCSS(SASS)+FLEX 반응형 웹 프로젝트 HTML 와이어프레임 with Figma> 수업은 오랫동안 퍼블리싱 강의를 해온 강사로서 퍼블리싱 실력을 높이는 가장 확실하고 체계적인 방법으로 수업합니다. 그리고 모바일 웹 퍼블리싱이라는 생소하고 어려운 작업을 단계적으로 수준급 결과물을 이끌어 낼 수 있도록 제작된 수업이 핵심이라고 생각합니다.

특히 SCSS(SASS) 반응형 웹 프로젝트를 하기 위한 섹션4에서 SCSS 핵심 이론(Essential Theory)을 5시간 이상 다루고 있기 때문에 SCSS 핵심 이론을 완벽하게 학습하실 수 있습니다.

다양한 페이지의 다양한 레이아웃 HTML 구조를 만들고 그걸 퍼블리싱하면서 중상급 퍼블리싱 실력을 갖게 될거라 생각합니다.

Q. 디자인 비전공자도 들을 수 있는 강의인가요?

충분히 가능합니다. 저도 디자인과 전혀 관계없는 전공입니다. 섹션 1의 <[필독] SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 피그마 기초 강좌> 영상에도 있지만 파워포인트를 잘 다루는 정도면 피그마 학습하고 활용하는데 전혀 지장이 없습니다. 저도 피그마 강의를 위해서 단기간 학습했는데도 좋은 디자인 결과물을 얻을 수 있었습니다.

Q. 디자이너라 피그마는 잘하는데 섹션 1의 피그마 디자인을 학습해야 하나요?

소개 영상에도 언급했지만 제가 피그마(Figma)를 오래 해오거나 잘하는 사람은 아닙니다. 그래서 피그마 작업에 자신이 있는 분이면 <섹션 1. SCSS(SASS)+FLEX 반응형 웹 프로젝트 UI 디자인 제작 with Figma>은 지나가시고 <섹션 2. SCSS(SASS)+FLEX 반응형 웹 프로젝트 HTML 와이어프레임 with Figma>로 바로 가셔서 학습하시면 됩니다.

섹션 2의 HTML 와이어프레임 구조 만들기 부터는 디자인 영역이 아니라 퍼블리싱 강의 영역입니다.

Q. SCSS(SASS)+FLEX 반응형 웹 프로젝트 제작 과정을 왜 배워야 하며 구체적인 기대효과는 뭔가요?

[SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma] 강의를 통해서 SCSS(SASS) 핵심 이론 및 실무 활용 능력, FLEX Layout 핵심 이론 및 실무 활용 능력, PC, 모바일, 태블릿 대응 반응형 레이아웃 설계 및 제작 실력을 중상급까지 올릴 수 있습니다.

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

<섹션 2. SCSS(SASS)+FLEX 반응형 웹 프로젝트 HTML 와이어프레임 with Figma>에서 다양한 HTML 와이어프레임 구조를 만들고  <섹션 5~7. SCSS(SASS)+FLEX 반응형 웹 프로젝트 상세 퍼블리싱>에서 실전 웹 퍼블리싱 적용하는 단계까지 훈련하므로 추후 어지간한 웹 UI 레이아웃을 만드는데 자신감이 생깁니다.

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

SCSS(SASS)+FLEX 반응형 웹 프로젝트는 특성상 파일의 개수와 폴더이 개수가 많습니다. 그래서 좀 속도감 있게 많은 내용이 진행됩니다. 어느 수준까지라는게 사람의 기준에 따라 다르지만 퍼블리셔 개인 포트폴리오로서 충분한 수준으로 작업하는 수업 내용입니다.

SCSS(SASS)+FLEX 반응형 웹 프로젝트 강의는 초중급 수준인데 중급에 가깝다고 생각하시면 됩니다. 곧, 굉장히 많은 내용을 다룹니다. 초보자에게는 부담스러울 수 있지만 과정을 마치면 퍼블리싱 능력이 꽤 성장했다는 것을 느끼실 수 있다고 생각합니다. 

Q. 코딩웍스 님 강의 중에 <모바일 웹 퍼블리싱 포트폴리오 with Figma>를 수강했는데요?

모바일 웹 퍼블리싱 포트폴리오 with Figma 강의를 수강하셨으면 [섹션 1. SCSS(SASS)+FLEX 반응형 웹 프로젝트 UI 디자인 제작 with Figma 디자인] 내용을 반드시 학습하실 필요는 없습니다. (가능하다면 빠른 속도로 만들어 보시는 것을 추천드립니다.)

[섹션 2. SCSS(SASS)+FLEX 반응형 웹 프로젝트 HTML 와이어프레임 with Figma] 부터 학습을 시작하셔도 괜찮습니다.

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

전체 영상 강의 시간은 41시간 이상으로 심도있는 학습을 위한 충분한 수업 시간으로 준비되어 있습니다. 전체 수업 비율은 피그마 디자인 작업이 15%, 퍼블리싱 작업이 85%를 차지합니다. 전체 영상에서 섹션 1은 피그마 UI 디자인 작업이고, 나머지 섹션들은 반응형 웹 퍼블리싱 학습 영역입니다.

• 섹션 1. SCSS(SASS)+FLEX 반응형 웹 프로젝트 UI 디자인 제작 - 6시간 37분
• 섹션 2. SCSS(SASS)+FLEX 반응형 웹 프로젝트 HTML 와이어프레임 - 5시간 21분
• 섹션 3. 비주얼 스튜디오 코드에서 Live Sass Compiler 세팅 및 사용법 - 1시간 15분
• 섹션 4. SCSS 핵심 이론(Essential Theory) - 5시간 9분
• 섹션 5. SCSS(SASS)+FLEX 반응형 웹 프로젝트 for PC Layout - 15시간 44분
• 섹션 6. SCSS(SASS)+FLEX 반응형 웹 프로젝트 for Responsive Layout - 3시간 35분
• 섹션 7. [최종마무리] SCSS(SASS)+FLEX 반응형 웹 프로젝트 - 2시간 53분

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

수업 내용이 많고 속도감 있게 진행됩니다. 그렇다고 충분한 설명없이 지나가지 않고 상세하게 설명합니다. 잘 따라 오실거라고 생각합니다. 다만 싱글 모니터로 학습하시는 것 보다 듀얼 모니터 환경을 갖추시길 강력하게 권합니다. 섹션1에 있는 [필독] SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 피그마 기초 강좌(ft.듀얼 모니터 사용) 영상은 수강 신청 전에 반드시 보시기 바랍니다.

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

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

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

_{▲ 해당 강의 커뮤니티의 자주 묻는 질문 보기를 먼저 확인해주세요~}

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

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

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