Tailwind CSS 실전 포트폴리오 퍼블리싱
[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.
초급자를 위해 준비한
[웹 퍼블리싱, 프론트엔드] 강의입니다.
이런 걸
배워요!
Tailwind CSS를 활용한 다양한 실전 예제 제작
Tailwind CSS만의 간편한 모바일 대응 반응형 작업
Tailwind 유틸리티 클래스 및 CSS 모든 속성
쉬운 설명으로 Tailwind CSS 이해도 향상
Tailwind CSS 실력과 결과물이 필요한 웹 퍼블리셔
Flex로 반응형 쉽고 간편하게 만들기
Tailwind CSS로 다양한 폼(form) 만들기
CSS Frameworks Ranking in 2024
CSS Frameworks Ranking에서 현재까지 꾸준히 인기를 누리고 있고, 만족도 1위를 하고 있는 Tailwind CSS는 요즘 전 세계적으로 가장 핫한 CSS 프레임워크입니다. 핫한 이유 중에 가장 대표적인 것이 바로 유틸리티 클래스를 사용한 창의적인 스타일링을 할 수 있고 또한, 좋은 퀄리티의 디자인을 만들기 위한 작업 시간이 꽤 빠르다는 점이라 생각됩니다.
Tailwind CSS를 짧게 말하면..
'창의적인 스타일링 하면서
제작 시간을 단축하는 No.1 CSS 프레임워크'
이미지 출처 : OSS Insight (https://ossinsight.io/collections/css-framework/)
Tailwind CSS는 요즘 개발자에게 요구되는
우대사항을 넘어 이젠 지원자격입니다.
🚩강의 관련 예상 질문 & 필독 사항
Q. Tailwind CSS 실전 포트폴리오 퍼블리싱은 이론 강의를 듣지 않고 바로 수강해도 되나요?
Tailwind CSS가 처음이시라면 코딩웍스 강의 중에 [Tailwind CSS로 만드는 멋진 웹 UI 스타일링]라는 이론 강의를 듣고 해당 강의를 수강하시면 좋습니다.
해당 강의를 바로 수강하시는 경우는 Tailwind CSS 공식사이트를 먼저 학습하시고 공식사이트를 병행하면서 학습하시기 바랍니다.
Tailwind CSS로 만드는 멋진 웹 UI 스타일링 강의소개 : https://inf.run/pjqKk
Tailwind CSS 공식사이트 : https://tailwindcss.com/docs/installation
Tailwind Cheat Sheet : https://www.creative-tim.com/twcomponents/cheatsheet
Q. Tailwind CSS 실전 포트폴리오 퍼블리싱에 제작된 완성본 HTML을 제공하나요?
네. 수강생 참고 자료 다운로드 섹션에서 영상에서 제작된 모든 실전 예제의 완성본이 포함된 압축 파일을 받으실 수 있습니다. (HTML, CSS, JS, 이미지, 참고 사이트, 소스텍스트, 와이어프레임 PDF 등)
강의 영상 시작 전 다운로드 받으시신 압축 파일을 푸시고 index.html, style.css 파일을 삭제하고 시작하시면 됩니다. 소스 및 images 폴더를 제외하고 HTML 기본 구조부터 만들어가시면 됩니다. 혹시라도 완성본을 참고해야 할 경우, 언제든 압축 파일을 다시 풀어서 보시면 됩니다.
Q. 수강 전에 선행되는 웹 코딩 능력은 어느 정도인가요?
먼저 HTML+CSS에 대한 기본적인 이해가 필요합니다. 예를 들어 float, position 속성에 대한 이해가 부족하신 분은 따라오기 좀 버거우실 거예요. 해당 강의는 기본적인 퍼블리싱 능력을 갖춘 분들을 염두에 두고 제작된 강의입니다. 참고해주세요!
제이쿼리 또는 자바스크립트 선행 능력은 크게 요구되지 않습니다. 단, 제이쿼리의 필수적인 핵심 이론에 대한 이해가 필요합니다. 클래스 제어, 요소 탐색 등 강의 전체적으로 제이쿼리 기반으로 상호작용을 만들고 있고, 자바스크립트는 예제를 경험하는 측면에서 사용하기 때문에 자바스크립트 능력에 대한 부담은 갖지 않으셔도 됩니다.
Q. 예제 학습 순서는 처음부터 순서대로 학습하는건가요?
예제 학습는 순서를 꼭 지키실 필요는 없습니다. 원하시는 섹션부터 학습하시면 됩니다.
섹션에 따른 난이도는 크게 정해져 있지 않습니다. 학습을 원하는 예제를 개별적으로 선별적해서 학습하셔도 상관없습니다.
[TMI] 퍼블리싱 공부하고 실전 예제 제작할 때 알아야 되는 이론이 굉장히 많습니다. 마음 같아선 이론적인 부분을 모두 정리하고 영상을 만들고 싶지만 현실적으로 어려운 부분이 있습니다. Tailwind CSS 공식사이트를 통해서 부족한 부분은 채워 나가시기 바랍니다.
Q. 실전 예제 완성본과 이론 예제 완성본은 어디에서 다운 받나요?
수업 영상에서 제작된 모든 완성본 파일(html, css, js, 이미지 파일 등)은 아래 보이는 마지막 섹션(섹션 8)에 모든 완성본을 다운로드 받으실 수 있습니다
.
💻Tailwind CSS 실전 예제 제작 결과물 미리보기
▲ Tailwind CSS 그라디언트
😊Tailwind CSS 실전 예제 - 네비게이션(Navigation)
▲ 네비게이션 - 일반형 상단 네비게이션(3가지 유형)
▲ 네비게이션 - 반응형 상단 네비게이션
▲ 네비게이션 - 소셜미디어 아이콘 호버 네비게이션
▲ 네비게이션 - 커스텀 드롭다운 셀렉트
▲ 네비게이션 - 사이드바 아이콘 네비게이션
😊Tailwind CSS 실전 예제 - 카드(Card) UI 디자인
▲ 카드 UI 디자인 - figure 카드 호버 이펙트(group 선택자 사용법)
▲ 카드 UI 디자인 - 신상품 카드 UI 디자인
▲ 카드 UI 디자인 - 프로필 카드 호버 플립(3D Card Flip)
▲ 카드 UI 디자인 - 애플tv 구독 플랜 선택(:has 가상클래스)
😊Tailwind CSS 실전 예제 - 섹션(Section) UI 디자인
▲ 섹션 UI 디자인 - 글래스모피즘(Glassmorphism) 로그인 폼
▲ 섹션 UI 디자인 - 애니메이션 모달(Modal)
▲ 섹션 UI 디자인 - 티켓 카드UI(Frontend Online Class)
▲ 섹션 UI 디자인 - 테이블 디자인(Premier League)
▲ 섹션 UI 디자인 - 어코디언 콘텐츠 with Emoji
▲ 섹션 UI 디자인 - 모바일 요금제 화면(호버 툴팁)
▲ 섹션 UI 디자인 - Dark Mode 만들기(ft. SVG 사용법)
▲ 섹션 UI 디자인 - 반응형 스킬 소개 섹션
▲ 섹션 UI 디자인 - 뉴스 소개 카드 썸네일 섹션(Latest news)
▲ 섹션 UI 디자인 - 웹호스팅 플랜 가격표(Price Plan)
▲ 섹션 UI 디자인 - 웨딩 반응형 인트로 섹션(Testimonial Intro)
😊Tailwind CSS 실전 예제 - 탭 메뉴 콘텐츠(Tab Menu Content)
▲ 탭 메뉴 콘텐츠 - 탭 메뉴 콘텐츠(CSS 방식, JQUERY 방식)
▲ 탭 메뉴 콘텐츠 - 남녀 구분 데이팅 앱 탭 메뉴
😊Tailwind CSS 실전 예제 - 로그인 폼(Login Form) 디자인
▲ 모바일 앱 배경 애니메이션 로그인
▲ 반응형 컨텍트 폼 - Contact Form
▲ 비밀번호 보이기 감추기 로그인 폼
▲ CSS 유효성 검사 컨택트 폼 - Dark Mode
✒지식 공유자 소개
코딩웍스는 현재까지 300명 이상 국비 퍼블리싱 과정 학생들에게 퍼블리싱 이론, 활용, 개인 포트폴리오 홈페이지 제작 강의하고 있습니다. 특히 퍼블리셔 취업을 위한 모든 준비과정을 A부터 Z까지 완벽하게 가이드하면서 학생 대부분 과정 종료 후 바로 취업을 할 수 있도록 수년간 퍼블리싱 강의만 전문적으로 해온 강사입니다. 또한, 인프런에서 퍼블리싱 관련 강의를 진행하면서 인프런 수강생분들께도 도움이 많이 되었다는 평가도 받고 있습니다.
❤인포커스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
이런 분들께
추천드려요!
학습 대상은
누구일까요?
Tailwind CSS 사용능력을 추가해서 취업 이직 경쟁력이 필요한 퍼블리셔
Tailwind CSS를 간편하고 쉽게 접근하고 활용하고 싶은 웹 퍼블리셔
Tailwind CSS를 간편하고 쉽게 접근하고 활용하고 싶은 개발자
선수 지식,
필요할까요?
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
커리큘럼
전체
40개 ∙ (14시간 6분)
가 제공되는 강의입니다.