Thumbnail
개발 · 프로그래밍 프론트엔드

Tailwind CSS로 만드는 멋진 웹 UI 스타일링 대시보드

(5)
2개의 수강평 ∙  62명의 수강생
77,000원

월 15,400원

5개월 할부 시
지식공유자: 코딩웍스(Coding Works)
총 49개 수업 (19시간 1분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[프론트엔드, CSS] 강의입니다.

[Tailwind CSS로 만드는 멋진 웹 UI 스타일링] 강의는 현재 가장 핫한 프레임워크인 Tailwind CSS v3.4.1을 이론부터 실전 반응형 웹사이트까지 19시간 충실하게 다루고 있습니다. 수업 시간이 길다고 좋은 강의는 아닙니다. 하지만 해당 강의는 시간도 긴 좋은 강의라고 자부합니다. 특히, Tailwind CSS 모든 이론을 8시간 30분 동안 상세하게 다루기 때문에 CSS 이론이 부족한 사람에게 CSS 이론을 충실히 학습할 수 있습니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.

✍️
이런 걸
배워요!
체계적인 Tailwind CSS 핵심이론 학습 및 응용
Tailwind CSS로 Flex와 Grid 쉽고 간편하게 활용하기
Tailwind 유틸리티 클래스 및 CSS 모든 속성
Tailwind CSS를 활용한 실전 예제 제작
쉬운 설명으로 CSS 이론에 대한 확실한 이해도
Tailwind CSS 실력과 결과물이 필요한 웹 퍼블리셔
Tailwind CSS로 경력 이력서 & 포트폴리오 소개 반응형 웹 제작

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
체계적인 Tailwind CSS 핵심이론 학습 및 응용이 필요한 분
CSS를 간편하고 쉽게 접근하고 활용하고 싶은 개발자
Tailwind CSS 사용능력을 추가해서 취업 이직 경쟁력이 필요한 퍼블리셔
개발자 경력 이력서를 반응형으로 만들고 싶은 분
웹 퍼블리셔 경력 이력서를 반응형으로 만들고 싶은 분
📚
선수 지식,
필요할까요?
HTML+CSS 기초

안녕하세요
코딩웍스(Coding Works) 입니다.
코딩웍스(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

커리큘럼 총 49 개 ˙ 19시간 1분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. [Tailwind CSS 핵심 이론] 기본 요소 다루기(ver 3.4.1)
[필독] Tailwind CSS 이론 학습을 위한 참고사항 미리보기 09:33 Typography(1) - 글자 서식 및 색상 미리보기 30:44
Typography(2) - 글자 서식 및 색상 35:59
Typography(3) - Tailwind CSS에서 웹 폰트 사용하기 26:25
Borders(테두리) – Border, Border Radius 22:51
Spacing(간격) – margin padding, Sizing(크기) – width height, Size 19:00
Background(배경 색상, 배경 이미지, 그라디언트) 33:32
Layout(1) - Aspect Ratio, Columns, Display 23:11
Layout(2) - Object Fit, Overflow, Position, Visibility, Z-Index, Opacity 33:11
Effects(이펙트) – Box Shadow, Text Shadow 14:22
Transforms(트랜스폼) 23:32
Transitions, Animation(트랜지션, 애니메이션) 23:08
Interactivity(상호작용) 32:49
플렉스(Flex) 레이아웃 핵심이론 및 레이아웃 예제 제작 44:00
그리드(Grid) 레이아웃 핵심이론 및 레이아웃 예제 제작 42:58
플렉스(Flex)에서 요소 정렬하기 28:00
Tailwind CSS 방식의 가상클래스(Hover, Focus, Content) 18:13
Tailwind CSS 방식의 자식선택자, 자손선택자, 가상클래스(nth-child) 23:54
Tailwind CSS 방식의 마우스 상호작용에 따른 부모 선택자, 형제 선택자 16:17
반응형 레이아웃(Responsive Design) 16:08
섹션 2. [Tailwind CSS 실전예제] 실전 예제(카드 UI, 반응형 섹션 UI)
[필독] 실전 예제 제작을 위한 준비 및 참고사항 미리보기 13:33 카드 UI 디자인(0) - Dark Mode 만들기(ft. SVG) 미리보기 29:03
카드 UI 디자인(1) - Crew Contact List 21:48
카드 UI 디자인(2) - Real State Price 36:29
섹션 UI 디자인(1) - 반응형 Subscribe Form(1편) - 상세 UI 디자인 32:56
섹션 UI 디자인(1) - 반응형 Subscribe Form(2편) - 마우스 상호작용, 반응형 레이아웃 15:17
섹션 UI 디자인(2) - Meet the team(Grid 반응형 Layout) 36:11
섹션 UI 디자인(3) - Login Form(반응형) 40:50
Table(표) UI Design - Company Member Info Table(ft. nth-of-type) 31:20
섹션 3. Tailwind CSS CLI 환경 구축
CDN 환경에서 Tailwind CSS 유틸리티 클래스 사용하기 20:41
CDN과 CLI 환경에서 Tailwind CSS Config 수정하기(ft. 웹 폰트) 28:01
Tailwind CSS에서 CLI 환경 구축(ft. Node.js) 34:08
CLI 환경에서 유틸리티 클래스(Components) 활용 및 웹 폰트 활용 17:09
섹션 4. Tailwind CSS 경력 이력서 & 포트폴리오 소개 반응형 웹 제작
HTML 와이어프레임 구조 제작(반응형 웹) 29:45
퍼블리싱(1) - 세팅(Custom Theme 및 Base, components, utilities 레이어) 13:34
퍼블리싱(2) - HTML 와이어프레임 구조 및 내용 넣기 26:11
퍼블리싱(3) - Intro Section(ft. 퍼블리싱 팁) 29:10
퍼블리싱(4) - Skills Section 16:50
퍼블리싱(5) - Experience Section, Education Section 15:46
퍼블리싱(6) - Frontend Project Section 10:40
퍼블리싱(7) - Feedback Section 11:15
퍼블리싱(8) - 모바일 대응 레이아웃, Go to top 버튼 31:29
섹션 5. 수강생 참고자료 다운로드
[다운로드] Tailwind 이론 교재 및 참고 웹사이트
[다운로드] Tailwind CSS(v3.4.1) 이론 및 실전 예제 완성본
강의 게시일 : 2024년 03월 12일 (마지막 업데이트일 : 2024년 04월 06일)
수강평 총 2개
수강생분들이 직접 작성하신 수강평입니다.
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
박정식 thumbnail
5
고생하셨습니다.
2024-03-19
지식공유자 코딩웍스(Coding Works)
수강평 감사드립니다. 강의 오픈 일주일도 안되서 100% 달성하셨네요. 대단하십니다!!
2024-03-19
pcdoomco4 thumbnail
5
이번에 새로운강의가 또나와 구입하게되었습니다. 항상 강의의 디테일이 증명해주듯 수박의겉핥기가아닌 끝짱을보자란 식으로 매우 디테일하게 강의가 진행되는방식은 적어도 웹퍼블관련강좌는 코딩웍스가 정답이구나를 느꼈습니다. 정말다른강사의 강의를 찾아볼필요가없이 이강좌하나만제대로 소화하면 실력이 확실히 쌓이는걸 체감하면 코딩웍스 팬이 안될수가없네요 이번강좌도 잘 듣겠습니다.
2024-03-16
지식공유자 코딩웍스(Coding Works)
첫번째 수강평 감사합니다!!
2024-03-16