HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌3)
코딩웍스(Coding Works)
HTML+CSS+JS 실전 포트폴리오(시즌3)는 퍼블리싱 실전 예제를 제작하는 과정입니다. 다양한 실전 예제 제작을 통해서 퍼블리싱 실력을 중상급으로 성장할 수 있습니다. 34시간 이상의 충분한 강의 시간과 다양한 종류의 실전 제작 과정이므로 제작 노하우와 응용 방법을 충분히 익힐 수 있습니다.
초급
HTML/CSS, JavaScript, jQuery
BEST
中級以上の出版向け CSS3 のすべて
[中級以上の公開のための CSS3 のすべて] 講義では、公開理論の不足を確実に補うことができます。理論は多少理解しているものの、何かを作成しようとしたときに自信を持って公開できないことがよくあります。中級以上の公開レベルのスキルを身につけるために、理論を深く学び、確実な公開スキルを身につけるための必須コースです。[中級以上の公開のための CSS3 のすべて] 講義は、初心者から中級以上のスキルを目標とする方を対象に、CSS3 のすべての理論と、理論を適用するスキルとノウハウを学ぶことができます。
学習した受講者のレビュー
こんなことが学べます
CSS セレクターのすべて
CSS フローティングとポジショニングのすべて
display プロパティのすべて
ボックスモデル (Box-Model) とテーブル (Table) スタイルのすべて
CSS 仮想クラス (Pseudo Class) のすべて
実用性の高い CSS3 プロパティを活用した実践スキルとヒント
パブリッシャー向けのフォーム要素とプロパティのすべて
レベルを上げるパブリッシング理論を固める！
[中上級パブリッシングのためのCSS3のすべて]講義で
不十分なパブリッシング理論を確実に備えることができます。
中上級パブリッシングの実力を備えるための必須コース！
曖昧な理論実力を中上級実力で確実に！
しっかりした理論のスキルは、パブリッシング結果の違いを生み出します。
CSSセレクタ、CSSフロートとポジション、 display属性、ボックスモデルとテーブルスタイル、CSS仮想クラス、活用度の高いCSS3属性を活用した実戦スキルとヒントなど、中上級パブリッシングのためのCSS3のすべてが講義にあります。
CSS3のすべて！学習内容
セクション 1. ビジュアルスタジオコード (Visual Studio Code) の使い方と必須エクステンション
ビジュアル スタジオ コード 必須の使い方とエクステンションの使い方を詳しく学びます。また、テキストエディタの使用に不可欠なエミットの使い方も詳細に学習します。
セクション2. CSSセレクタのすべて
基本必須セレクタ、セレクタをタグとともに使用、クラスネスト、隣接兄弟セレクタ、属性セレクタ、メディアクエリでセレクタの一致、セレクタ優先順位などCSSの始まりであり、CSS初級と中級を分ける基準となるセレクタのすべてについて学習します。
セクション3. CSSフロートとポジションすべて
Flex と Grid の使用能力とは別に、フロートとポジションのプロパティはすべてのパブリッシング操作で基本となります。 CSS フロートとポジション すべてでパブリッシングの基礎となるフロートとポジション属性の完全な理解度を持つことができます。
セクション 4. display プロパティのすべて
CSS理論はすべて重要ですが、ひとつだけ選ぶと断言してもdisplay属性の理解度です。レイアウト設計などの巨視的なパブリッシング操作から、ボタンの作成、細かい要素の配置など、すべてのパブリッシング操作に影響を与えるディスプレイプロパティのすべてを学習します。
セクション5.ボックスモデル（Box-Model）とテーブル（Table）スタイルのすべて
要素（Element）のサイズ、余白、間隔など、個々の要素のボックスモデル（Box-Model）についてすべてを学習します。また、きれいなテーブルデザインのためのテーブルスタイルを学びます。
セクション6. CSS仮想クラス（Pseudo Class）のすべて
中上級のパブリッシングのスキルに進むために不可欠な理論は、 CSS仮想クラスの理解と活用能力です。パブリッシング実務で使用するCSS仮想クラス（Pseudo Class）のすべてを学びます。
セクション7. 活用度の高いCSS3属性を活用した実戦スキル(Skill)とヒント(Tip)
理論に限定されない数多くのパブリッシングスキルとノウハウがあります。理論をよく知っているのと、これをこういう時に活用する能力は別個です。しっかりした理論をもとに、実務で必ず必要なパブリッシングスキルとノウハウを学びます。
💬 講義に関する予想される質問 & 必読事項
Q) コーディングワークス講義中 [HTML+CSS+JS ポートフォリオ本番パブリッシング] シーズン1、2とどう違うのですか？
[HTML+CSS+JS ポートフォリオ実践パブリッシング] シーズン1、シーズン2講義は実戦パブリッシングの例制作を中心に構成された講義です。もちろん、理論の説明もありますが、例制作を中心に進める授業なので、理論の説明の部分は多くありません。しかし、[中上級パブリッシングのためのCSS3のすべて]講義は本番パブリッシングをうまくするためのCSS理論を集中的に学習します。だから本番パブリッシングの例制作は比重が少ない。完全に中上級パブリッシング理論をお知らせする中上級CSS理論講義です。
Q) 頑強後に期待できるパブリッシングの実力はどれだけ向上しますか？
明らかな答えですが、ケースバイケースです。しかし、[中上級パブリッシングのためのCSS3のすべて] 授業内容は実務で働く中上級パブリッシャーが知っていて、現実的に実務で適用しているスキルをほぼすべて学ぶことになります。 HTML入力する時間を短縮し、より多くの理論の内容を授業するコースです。もちろん講義には多くの内容の理論内容がありますが、これらを繰り返して応用して自分のものに作り出すのは受講生の分け前と考えられます。
Q) 受講前に先行するウェブコーディング能力はどのくらいですか？
まず、HTML + CSSの基本的な理解が必要です。初級段階の受講生は可能ですが、入門段階の受講生には少し冷やすことができます。入門段階の受講生は、コーディングワークスのYouTubeチャンネルにあるHTML+CSSの基礎をある程度学習し、講義で来れば講義をうまく消化できると思います。
Q）画像にHTML、CSSをコーディングする全体のプロセスが含まれていますか？
今回の講座は学習する理論事項が多いです。だから、タイピング時間を短縮し、学習量を増やすためにHTMLコードをタイピングする時間がビデオには別にありません。ビデオの開始時にHTML構造が表示され、対応するHTMLを入力して準備すると、CSSコーディングは1つ1つ入力しながら説明されます。そのため、ビジュアルビジュアルスタジオコード（Visual Studio Code）の使い方とエミット（Emmet）の使い方を十分に習得して学習することをお勧めします。
Q) ブラケットテキストエディタは使用できませんか？
以前のバージョンからAdobeから落ちてエクステンションをインストールすることはできず、問題が多く、ブラケットを使用できなくなりました。しかし、ブラケットテキストエディタの新しいバージョンが登場し、すべてが正常に動作するブラケットになりました。
ビジュアルスタジオコーディネートを使用すると、ブラケットも再利用できます。
既存のバージョンはアンインストールして、公式サイトから新しいバージョン（Version 2）をダウンロードしてインストールしてください。
ブラケット（Brackets）公式サイト：https: //brackets.io/
Q）レッスンでどのテキストエディタを使用しますか？
ビジュアルスタジオコード（Visual Studio Code）で制作された講義です。ビジュアルスタジオコードは、使用制限のないフリープログラムです。すべての講義映像はビジュアルスタジオコード基準で説明しています。
ビジュアルスタジオコード（Visual Studio Code）ダウンロード（クリック） Q) 学習順序は最初から順に学習するのですか？
学習中に次のセクションに進むと、前のセクションの内容をもう一度参照して繰り返します。そのため、学習順序はセクションの順序に合わせて学習することをお勧めします。
ただし、セクション7. 活用度の高いCSS3属性を活用した実戦スキル(Skill)とチップ(Tip)は、必要な講義を受講生が順番に関係なくご覧いただくことができます。
Q）勉強して知らないことがあれば質問はどこにありますか？
質問がある場合は、[質問＆回答]掲示板に文を残すとすぐではなくても確認されたら回答します。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。ですから、ご質問の際は気になる内容と一緒に作成中のHTML、CSSコーディング画面、ブラウザキャプチャ画面を添付していただくと回答いたします。
❤コーディングワークスの受講生に来たパブリッシャー合格ニュース
▲国費支援パブリッシング過程 私に4ヶ月半ほど学んだ学生ですが、就職したとカトクが来ました。
▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)
❤コーディングワークスの受講生がパブリッシャー就職後に送ってくれたメール
先生こんにちは:)
先生 Inflearn 講義聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊
相違ではなく、
先生にアドバイスを得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります！
でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。
キャリア職のパブリッシャーを求める会社でしたが、新人の私に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました
これはみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！
実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！
学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます
切に欲しかったし、
先生が言ったように信じていたら、本当に良い結果が出ました。
本当にありがとうございました！
コロナに注意してください。
また良い講義で会いたいです:)
先生こんにちは〜Inflearn受講生OOOです〜メールアドレスは他の受講生の回答見てわかりました..😊😊
ありがとうご挨拶お願いします
これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一ヶ所面接に合格して出勤することにしました。 本当にありがとうございました。
実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊
その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。
これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！
🙋🏻♂️質問する前に必ず！読んでください〜！
学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。
質問文にコードなしでグローだけ問題を説明すれば、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。
▲該当の講義コミュニティのよくある質問の見方をまず確認してください〜
⚡効果的な学習のためにぜひ！コーディングワークスパブリッシングYouTubeを参照してください。
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks
📖カリキュラム
セクション0.講義紹介
- [講義紹介]中上級パブリッシングのためのCSS3のすべて
セクション1.ビジュアルスタジオコード（Visual Studio Code）の使い方
- ビジュアルスタジオコード（Visual Studio Code）の使い方と環境設定
- ビジュアルスタジオコード（Visual Studio Code）でのEmmetの使い方
- ビジュアルスタジオコード（Visual Studio Code）必須Extensionのインストールと使い方
- ビジュアルスタジオコードでCSSを変更するときに上がるフルリロードを防ぐ
セクション2. CSSセレクタのすべて
- デフォルトの必須セレクタ、セレクタをタグと一緒に使用し、クラスをネストして使用する
- セレクタの適用優先順位が重要な理由（レスポンシブWebメディアクエリ構文）
- 隣接兄弟セレクタ（input、checked仮想クラス）
- 属性セレクタ（attribute selectors）01（デフォルト形式と注意点）
- 属性セレクタ（attribute selectors）02（文字列チェックを活用する）
セクション3. CSSフロートとポジションすべて
- フロート属性（水平配置、float属性継承）
- フロート属性（親要素の高さ値を求め、calc関数で四則演算）
- ポジション属性 (static, relative, absolute, fixed, sticky)
- ポジション属性（親要素子要素関係を結ぶ）
- ポジション属性（absolute、fixed、stickyの違い）
- ポジション属性親要素の内側と外側に位置する）
- ポジション属性（z-indexとポジション属性の優先順位）
セクション 4. display プロパティのすべて
- displayプロパティ（inline、inline-block、blockの特徴）
- displayプロパティ（displayプロパティを活用してHTML構造を簡単に作成）
- display属性（display属性の理解がない場合に生じる非Web標準コーディング）
- displayプロパティ（要素を見えないようにする3つの方法と違い）
- displayプロパティ（displayプロパティを完全に理解するための必須追加）
- display属性（list-item、table、FLEXとGRID、SCSS（SASS）活用能力の重要性）
セクション5.ボックスモデル（Box-Model）とテーブル（Table）スタイルのすべて
- ボックスモデル（Box Model）プロパティ（width、height、auto、inherit）
- ボックスモデル(Box Model) プロパティ(box-sizing)
- ボックスモデル（Box Model）プロパティ（margin、padding、マージンオーバーラップ、ネガティブマージン）
- ボックスモデル (Box Model) プロパティ (border, border-radius)
- テーブルスタイルのプロパティ（テーブルデザインのすべてのプロパティ）
セクション6. CSS仮想クラス（Pseudo Class）のすべて
- hover仮想クラス（aタグ状態仮想クラス、ボタンデザインのすべて）
- hover仮想クラス（hoverで作るボタンデザイン、ドロップダウンナビゲーション＆コンテンツ）
- 順序をチェックする仮想クラス（nth-child、first-child、last-child）
- 順序をチェックする仮想クラス（nth-child、nth-of-type、その他の順序をチェックする仮想クラス）
- 実践例（hover仮想クラス、順序チェック仮想クラス、position、display属性）
- before after 仮想クラス（基本活用、リスト Bullet と Badge、アイコンフォント Unicode）
- before after 仮想クラス（基本活用、リスト Bullet と Badge、アイコンフォント Unicode）
- before after 仮想クラス（図形とボタンの作成、ポジションの活用）
- before after 仮想クラス（図形とボタンの作成、ポジションの活用）
- before after 仮想クラス (背景画像の上にオーバーレイを使用)
- before after 仮想クラス (カスタム属性と attr 関数 - Notice Badge)
- before after 仮想クラス (カスタム属性と attr 関数 - Swap Hover Button)
- before after 仮想クラス (自動 Numbering する counter 関数)
- 実践例（before afterを活用したアニメーションライフレビューヘッダーUIデザイン）
- フォーム要素に書き込む仮想クラス（フォーム要素の基本的な理解）
- フォーム要素に書き込む仮想クラス（必須フォーム仮想クラス、ログインフォームCSSデザイン）01
- フォーム要素に書き込む仮想クラス（必須フォーム仮想クラス、ログインフォームCSSデザイン）02
- フォーム要素に書き込む仮想クラス（必須フォーム仮想クラス、ログインフォームCSSデザイン）03
- フォーム要素の入力にフォントアイコンを使用する（iタグ、before Unicode）
- フォーム要素に書き込む仮想クラス（検証、読み取り専用仮想クラス）
- 知っておくと非常に使いやすい仮想クラス（特定セレクタを除くnot）
- 知っておくと非常に使いやすい仮想クラス（選択者の重複を減らすis）
セクション7. 活用度の高いCSS3属性を活用した実戦スキル(Skill)とヒント(Tip)
- CSSの中央揃えのすべて（position、flex、grid、vertical-align、transform、place-items）
- imgタグのすべて（一時画像を入れる2つの方法、画像マージンを取り除く）
- CSS背景画像の活用のすべて、画像+グラデーションの同時使用
- 変数を使用して繰り返しコードを減らしてリサイクルする
- さまざまな視覚効果を与えるfilter属性とフィルタ属性値自動生成器
- 列（縦）に分割するcolumn-count属性（理論、レスポンシブレイアウト）
- 列（縦）に分割するcolumn-count属性（実例 - レスポンシブWebレイアウト）
- マウスイベントを無効にする pointer-events (実例 - Card UI Hover Effect)
- 最初の文字を飾る仮想クラス：first-letter
- あふれたテキストを減らすために作成するtext-overflow、white-spaceプロパティ
- テキスト書き込み方向の垂直方向の設定（writing-mode、transform-origin）
- 要素の割合を設定するaspect-ratio
セクション8.必須CSSコア理論と活用（コーディングワークスYouTubeリンク）とダウンロード
- ぜひ！学ぶべきコーディングワークスYouTube講義のビデオリストの紹介
- [ダウンロード] パブリッシング完成本（プロフィールカード、生後期、ログインフォーム、ログインフォーム：is仮想クラス）
- [ダウンロード] パブリッシング完成本（活用度の高いCSS3属性を活用した実戦スキルとヒント）
- [ダウンロード] CSS3のすべて！理論映像説明テキスト（PDF）
✒️知識共有者の紹介
コーディングワークス
■[現在]フリーランサーフロントエンドパブリッシャー
■[現在] HTML+CSS+JQUERY パブリッシングYouTubeチャンネル「コーディングワークス」運営
■グリーンコンピュータアカデミーウェブパブリッシング講師
■ダージョウンコンピュータアカデミーWebパブリッシングインストラクター
■もうコンピュータアカデミーWebパブリッシング講師
■フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■UI/UX Webデザインポートフォリオ講義
■ウェブデザイン機能士実技資格講座講義
■イージー＆エデューフロントエンドUI/UXデザイン＆パブリッシング
🌏コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks
🌏コーディングワークスパブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク
こんな方に
おすすめです
学習対象は
誰でしょう？
理論はある程度知っているが、しっかりした中上級理論が必要な方
パブリッシング基本機とスキルアップを体系的にする方
前提知識、
必要でしょうか？
出版理論を体系的に最初から一貫して学びたい方
入門初級を超えて中上級パブリッシング理論の実力を備えたい方
12,544
受講生
738
受講レビュー
2,105
回答
4.9
講座評価
23
講座
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] 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
カリキュラム
全体
67件 ∙ (21時間 40分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
24件
5.0
24件の受講レビュー
붉은사탕受講レビュー 3
∙
平均評価 5.0
5
100% 受講後に作成백엔드와 HW 연동 개발만 해서 웹 퍼블리싱에 대한 욕심이 생겼는데 1300분의 강의를 통해서 CSS 잘 배웠습니다. 기본 HTML, CSS 수준을 이제 넘어서게 된것 같아서 좋습니다.
- 코딩웍스(Coding Works)知識共有者
강의 분량이 많은데 잘 소화하셨나 보네요. 수강평 감사드립니다.
- mhlyu63
受講レビュー 8
∙
平均評価 5.0
5
15% 受講後に作成그동안 꽤 열심히 공부했는데 퍼블리싱을 잘한다고 하기가 좀 애매했습니다. 하지만 이런 부분들이 하나씩 뚫리는 느낌이라 좋습니다. CSS 퍼블리싱 이론을 완벽하게 할 수 있는 좋은 강의라고 생각합니다. 아직 완강은 안했지만 중급자를 위해 좋다고 확신합니다.
- 코딩웍스(Coding Works)知識共有者
다른 분들께 좋은 참고가 될 것 같습니다~ 구체적인 수강평 감사드립니다.
- qjatjs123123
受講レビュー 4
∙
平均評価 5.0
- 따콩이
受講レビュー 1
∙
平均評価 5.0
修正済み
5
42% 受講後に作成체계적으로 자세하게 알려주셔서 너무 만족스러운 강의입니다. 유튜브에서 기초 강의 듣고 실전 적용하기에는 기본기가 없어서 힘들었어요ㅠ 그래서 강의 구매했는데 이제야 css가 이해되기 시작했습니당 ㅠ 감사합니다!
- 코딩웍스(Coding Works)知識共有者
수강평 감사드립니다~!!
- system
受講レビュー 20
∙
平均評価 4.8
5
100% 受講後に作成솔직히 선생님의 노화우를 배우는 것이기 때문에 금액이 아깝지 않았습니다. 앞으로 알려주신 것을 바탕으로 더 많이 공부하고 실력을 쌓기 위해 노력하는 사람이 되겠습니다. 너무 감사합니다.
- 코딩웍스(Coding Works)知識共有者
수강평 감사드립니다~!!
￥5,897
codingworksの他の講座
知識共有者の他の講座を見てみましょう！
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
似ている講座
同じ分野の他の講座を見てみましょう！
![순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프강의 썸네일](https://cdn.inflearn.com/public/courses/333180/cover/26ede6df-032a-40f2-9670-f6748785eba5/333180.jpg?f=avif&w=420)
![풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
