[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
코드캠프
10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt
Intermediate
React, Next.js, cursor
CSSだけ執拗に集めた講義見ましたか?この講義では、合計2つのプロジェクトを進行しながら、最も基本的なレイアウト構成からレスポンス型まで実装することになります!それでは、準備ができたら始めましょうか?

フォローするコーディングはSTOP!独自のコードを作成
レスポンシブの理解力を高める
リアルレスポンシブウェブサイトの実装能力
サーバーとのリアルタイム通信を扱う
実務で使用する60以上の最新のプロパティ
コーディング基礎を打つ Chapter 02.
強力なCSS!
本物のレスポンシブウェブサイトを実装するための頑丈なCSSスキルを掴む!
60以上の最新のプロパティとCSSの重要な概念の両方を集めました。
ジュニア開発者が難しいことの一つ、まさに「CSS」です。
「文法は簡単なのに、なぜ私の勝手にならないのですか?」このような疑問を持っていたらよく来ました。
さて、CSSの基本的な原理と特性について一緒に学び、その理由をじっくり調べてみましょう!
私たちは直接レスポンシブなウェブサイトを作成し、実用的なCSSを学びます。
単にコードに従う講義ではありません。コード一行一行の意味を解釈し、実用的なCSSについてお知らせします。プロジェクトを通じて自分だけのショッピングモールを作ってみたら、あなたが望むレスポンシブウェブサイトを作る能力を持つことができます。
プロジェクト 01.
「今日はどうでしたか?」私の日記帳をウェブにします。
「めまいが置いたテキストとオブジェクト…私の勝手に整理してもっと綺麗にすることはできないだろうか?」
確かに学んだCSSで解決できます。自分だけの日記帳を一緒に作ってみて、CSSの基本原理と使い方を学びます。難しいコンセプトや属性も抜け落ちなく拾いましょう!
プロジェクト 02.
自分だけのショッピングモールを実装し、ウェブサイト開発の基礎を習得します。

独自のショッピングモールを通じてCSSのフレックスレイアウトシステムについて理解しています。現代のWebレイアウト構成に不可欠なFlex、Gridについて学び、実際のWebページを一緒にクローンコーディングしながら活用する方法を学びます。
Project 02. 高度化+α
開発から欠かせない「反応型」を直接実装します!

私が作ったウェブサイトをさまざまなプラットフォームできれいに見る方法!まさに「反応型」です。ウェブサイトで作られたサービスを活用して、グリッドレイアウト、レスポンシブウェブなど、一層レベルの高いCSS技術について学習します。トランジション、キーフレーム、アニメーションなどの動的CSS要素について学び、WebページのUXをより豊かにしましょう!
💡日課表を作って定期的に着実に学習することをお勧めします。
💡学習資料を受け取るためにコラボレーションツール「Notion」アカウントを作成してください。
💡受講に必要な学習資料はノッション(リンク)で提供されます。
※学習資料の著作権はコードキャンプにあります。不正盗用・配布・複製を禁止します。
Q. 何の知識もなく受講してもいいですか?
A. HTMLに関する基礎知識が必要です!もしHTML、CSSなどよりしっかりとした基礎を築いた後に受講したい場合は、[スタートはフリーキャンプ!]講義をお勧めします。
Q. 別の教材がありますか?
A.ノッションでお届けする「講義資料」を活用してください!
Q. 講義受講前、インストールすべきプログラムはありますか?
A.はい、「クロムブラウザ」と「VSCode」をあらかじめインストールしてください!他のプログラムは講義で一緒にインストールしてみましょう!
Q. [強力なCSS]受講後、どの講義をお勧めしますか?
A. [温かいJavaScript]講義をお勧めします。
私のコードに機能を高度化して不足している部分を埋めることができれば足りないでしょう。
学習対象は
誰でしょう?
(★おすすめ★)[スタートフリーキャンプ]講義受講者
最新のプロパティを習得したいパブリッシャー or フロントエンド開発者
フロントエンド開発に興味がある方
パブリッシングの理解を深めたいUI/UXデザイナー
コーディングで自己啓発をしたい人
レスポンシブウェブ/アプリの基礎をしっかり固めたい方
前提知識、
必要でしょうか?
(★おすすめ★)[スタートフリーキャンプ]講義学習
HTML基礎知識
開発者への情熱と意志
コーディングの好奇心
15,442
受講生
454
受講レビュー
227
回答
4.8
講座評価
15
講座
"Try anything, Try everything!"
코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
全体
43件 ∙ (11時間 51分)
1. CSSとは?
03:38
2. CSSの基本用法
02:12
3. CSS 적용 방법
03:36
4. セレクター1
05:18
5. フォント基本スタイル
16:42
6. ボックスモデル
24:12
7. インライン vs ブロック
12:26
8. 実習1
48:17
9. レイアウトとは?
02:02
10. セレクター2
07:22
11. css レイアウトの流れ
05:02
12. float レイアウト
52:47
13. flexレイアウト
23:20
14. 実習2
17:14
15. セレクター3
33:22
16. flex レイアウト2
11:19
17. 実習3
08:35
全体
63件
5.0
63件の受講レビュー
受講レビュー 10
∙
平均評価 4.9
5
자바만 하다가 CSS를 건드려 보고 싶어서 우연히 수강하게 되었습니다. 일단 대부분의 강의가 강사 혼자 신나서 떠들고 북치고 장구치고 하는데, 이 강의는 별 ★★★★★★ 여섯 개 드리겠습니다. 장점: 1. 이 강의 강사님은 긴 수업임에도 불구하고, 차분하고, 안정된 목소리 톤을 유지 하십니다. 라이브 코딩이 가능함 2. 강의가 산만하지 않습니다. (개발자 도구를 이리저리 왔다갔다 하지 않아서 좋아요) 3. flex, position, grid, transition 이 부분이 굉장히 좋네요. flex나 grid설명 할 때 PPT가 신의 한 수인 같습니다. 4. 강사님이 굉장히 꼼꼼하세요. 말로 떼우거나 대충 넘어가는 경우는 거의 없습니다. 5. 70%정도를 알려 준 다음에 30%를 과제로 이 시스템도 매우 훌륭함...
안녕하세요 똑같이썼는데안돼님😊 무려 별을 6개나 주시다니... 감사합니다! 정말 수강생의 입장에서 느낄 수 있는 장점들을 세세하게 나열해주셔서 저희도 정말 감동 받았습니다☺️ 앞으로도 유익한 강의들을 많이 개설할 예정이니 많은 기대와 관심 부탁드립니다 :)
受講レビュー 1
∙
平均評価 5.0
5
평소에 css 지식이 부족하다고 생각해서 수강하게 되었습니다. 강의 후 마지막에 실습을 통해 배웠던 것을 적용시켜서 결과물을 만들어 보니 좋네요. 특히 섹션 7. animation, 섹션 9. 반응형 레이아웃 부분 잘 들었습니다! 그리고 강사분 목소리가 좋으셔서 편안하게 들었습니다. 전에 했던 개인 프로젝트 강의 내용 참고해서 리팩토링해봐야겠네요.
안녕하세요 hry님😊 코드캠프 css 강의를 수강해주셔서 감사합니다. 개인 프로젝트 리팩토링에 꼭 도움이 되길 바랍니다 💪
受講レビュー 1
∙
平均評価 5.0
5
디자인감각 없는 초보 개발자라 항상 css에서 제일 막히고 시간을 많이 쓰는거 같아요. 기초를 부실하게 배워서 시작한거라 그런지^ㅜ 그래서 인프런에서 무료강의라도 들으면서 css 기본기 다져놓자고 생각했는데 마침 이 강의가 저렴하게 풀려서 듣게 됐어요 꼭 필요한 핵심들만 되게 차분하게 설명해주셔서 공부하면서 적으면서 따라갈 수 있는게 가장 좋았어요 듣는 김에 다른 강의들도 들어보자 싶어서 다같이 결제했는데 다른 강의도 완강 기대돼요
안녕하세요 수양님😊 코드캠프 강의를 수강해주셔서 감사합니다! 실제로 주니어 개발자분들이 가장 까다로워 하는 게 CSS이기 때문에 이 부분을 고려해서 제작한 강의입니다 :) 꼭 완강하셔서 자신의 스타일대로 웹 페이지를 구현할 수 있는 개발자가 되시길 바랍니다💪
¥2,824
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!