レスポンシブウェブサイトポートフォリオ（App Official Landing）の制作過程はHTML+CSS+JQUERYパブリッシングで、レスポンシブウェブサイト全体の製作過程を通じてパブリッシング中級実力に行く基本基をしっかりして実戦パブリッシングのノウハウを持つようになります。特に、ウェブサイト全体の制作過程を十分な説明と実践作業で経験し、個人ポートフォリオウェブサイトの制作に自信を持つようになります。必要に応じて使用する必要があるジェイクエリプラグインで、Scroll Reveal AnimationとSlickスライダの使い方を学びます。レスポンシブ制作方式は、従来方式のfloatとpositionを利用したレスポンシブレイアウト制作方式で製作します。しかし、ある特定の要素ではFlexを使用する部分もあります。
全体的なウェブサイトの公開スキルとノウハウの向上
既存のfloatとpositionを利用して99%配置したレスポンシブレイアウト
position 属性の正確な概念と活用
hover before after checked active 仮想クラスの理解と活用
JQUERYコア理論学習と応用
CSS タブ メニュー コンテンツ、JQUERY アコーディオン メニュー コンテンツの作成能力
CSS3 フィルター プロパティと object-fit プロパティの活用
モバイル対応レスポンシブウェブパブリッシング制作能力（メディアクエリ）
PC バージョンとモバイル バージョンの両方で最適化されたレスポンシブ ウェブの完全な制作機能
スクロール レベル アニメーション プラグイン
テキスト入力アニメーションプラグイン
Slick スライダーの使用法とカスタム CSS の修正方法
01) 純粋なCSSレイアウト配置方式で作るレスポンシブウェブサイト
02) クローンサイト、コピーサイトではなくコーディングワークスが直接UIデザインからパブリッシングまで製作したウェブサイト
03) 講義セクション別14個の段階別完成本とUIデザインPSDファイル提供
※Photoshop UIデザインはPhotoshop CC 2019バージョンで製作されました。
04) 合計22時間以上の製作講義
05）理論学習と制作のためのテキストエディタ
今回のレスポンシブウェブサイト制作講義で使用されたテキストエディタは、ビジュアルスタジオコード（Visual Studio Code）とブラケット（Brackets）です。もちろん、他のテキストエディタを使用しても大丈夫です。受講生がおなじみのテキストエディタを使用してください。ただし、リアルタイムプレビュー機能を持たないテキストエディタはフォローしてください。
06) シームレスな制作過程学習のための必須コア理論映像（Slick Slider, Reveal Animation）
レスポンシブウェブサイトのポートフォリオ（App Official Landing Website）の制作講義を除き、ジェイクエリプラグインの使い方、制作に不可欠なCSS理論など、9時間以上のコア理論講義映像があります。その映像を見ずに実戦制作セクションにお越しいただくと、追いつくこともできます。 [セクション 2. 必須のジェイクエリプラグインの使い方と CSS 必須のコア理論] で不慣れであるか不足していると思われる内容を十分に学習してください。
今回のレスポンシブウェブサイト制作の難易度は入門または初級は難しいです。受講レベルは中級か、またはその近くでなければよく従うことができます。少なくとも初級ではないと思われる方ならフォローしてくるのに大きな困難ではないと思います。
受講のための選手の知識としては、HTML+CSSに関する基本的な内容を知っていれば良いです。だからといってHTML+CSSを上手にする状態である必要はありません。 20時間を超える講義で余裕を持って十分説明しています。もし映像をご覧ください 受講生のコーディングが遅くてHTML+CSS作成が遅い場合は、映像を停止してHTML+CSS作成をして、次のステップに従ってください。
映像を止めてコーディングし、他の人より時間が少し必要なだけです。むしろ、落ち着いて自分でコーディングする時間があるという点でより良いです。あまり心配しないで一緒に勉強してほしいです。 ^^
私の講義の中には、「HTML + CSS + JQUERYポートフォリオ中級実践パブリッシング講義」があります。この講義にある理論内容と実戦例制作内容が今回のレスポンシブウェブサイト制作必要な内容がほぼすべて入っています。まもなく、HTML+CSS+JQUERY 基本機をしっかり作れる講義だと思います。
今回のレスポンシブウェブサイト制作でいくつかを除いては「 HTML+CSS+JQUERYポートフォリオ中級実戦パブリッシング講義」にある内容を1回目程度学習して来れば従うことがはるかに簡単になると思います。
結論は...
入門や初級でなければついてくるのは問題ありませんが、ちょっと凄い感じになりますよ。
他の講義を通じてHTML+CSSの基礎を身につけて来られたら、十分に追いつくだけでなく、なぜこれをするのかについての理解度を持ち、レスポンシブなウェブサイトの制作過程を終えることになると思います。
学習方法は人によってすべて違うと思います。だから正解はありません。しかし、経験者であり製作者が考える効率的な学習方法はあると思います。そこでコーディングワークスが考える効率的な学習方法を提案します。
[ステップ1]
セクション3からセクション16まで、全体の制作過程を実習せずに映像を最初から最後まで見ます。 （12時間を超える制作過程なので、ただ見るだけでも忙しくはありません。だから移動しながらご飯を食べながら気軽に見てください。ただ何を作るのか、どんな順番で作るのかぐらい目をつけてみてください。）
[ステップ2]
ステップ1を実行すると、どの部分の理論が必要か、どの部分の準備が必要かを自然に知ることができます。では、そんな部分を完璧にはアニダーだと制作に必要な理論事項をある程度学習します。基礎レベルでなければセクション2. 必須ジェイクエリプラグインの使い方とCSS必須コア理論に映像を用意しておいたので不足しないと思います。しかし、仮想クラス、セレクタなどのHTML + CSSの基本的な理論は、コーディングワークスのYouTubeチャンネルで勉強してください。
[3段階]
セクション3から映像を慎重に見ながら実習してください。事前準備が十分になったので従うのがずっと簡単になると思います。
[ステップ4]
ビデオと一緒に完全なレスポンシブウェブサイトを作成したら、提供されたPhotoshopのPSDファイルを開き、UIデザインをそれ自体のテーマを決めて修正してください。レイアウトに大きな変化は与えないで、既存のレイアウトで部分的に修正して個人ポートフォリオUIデザインを終えてください。
[5段階]
制作されたUIデザインを基にPPTで機能定義書とHTML構造を作り、本番パブリッシングを進めて完成してください。これで、独自のデザインポートフォリオとパブリッシングポートフォリオが完成します。
Q. 例制作しながら出てくる中級CSS理論説明映像はありますか？
A. 「例制作に基礎理論に出ていない中級理論が多く出ていますが、中級理論授業はどこで聞きますか？ 'これらの質問が掲示板に頻繁に来ます。
今のコースは初級パブリッシングの例制作をする過程ではありません。初級～中級パブリッシングの例を製作する過程です。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須の中級理論映像が詳しいので、今のコースを聞きながら中級理論を並行すれば良いです。
▲コーディングワークスYouTubeチャンネルショートカット
Q. このコースを受講すれば、実務でパブリッシャーとして働くことができますか？
A. このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験と様々な種類のウェブサイトを作った経験がなければ、実務で働くことができます。今、コースのような講義をさらに勉強し、全体のウェブサイト制作過程をいくつか勉強すれば良いと思います。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングの進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。
Q. ウェブサイト制作しながら出てくる理論を説明する理論パーツが別にありませんでしたか？
A. 今受講されるコースは入門、初級コースではなく、中級レベルのレスポンシブウェブサイト全体制作パブリッシング講義です。基本理論パートと実戦例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。
Q. 勉強して知らないことがあれば質問はどこにありますか？
A. ご質問がございましたら、[質問＆回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がずっと簡単です。
Q. 講師様授業中<パブリッシャー就職本当の実戦ガイド>を先に見ればいいでしょうか？
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック（PDF）では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知っておくべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子ブック（PDF）をまずご覧になり、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。
▲パブリッシャー就職のためのコーディングワークスパブリッシング講義ロードマップ
▲国費支援パブリッシング過程 私に4ヶ月半程度学んだ学生ですが、就職したとカトクが来ました。
▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)
先生こんにちは:)
先生 Inflearn 講義を聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか？😊😊
相違ではなく、
先生にアドバイス得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります！
でも！
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました！
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー！仕事だけができる会社に入るようになりました。
キャリア職のパブリッシャーを求める会社でしたが、新人の私に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました
これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました！
実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました！
学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます
切に欲しかったし、
先生が言ったように信じていたら、本当に良い結果が出ました。
本当にありがとうございました！
コロナに注意してください。
また良い講義で会いたいです:)
ありがとうご挨拶お願いします
これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一ヶ所面接に合格して出勤することにしました。 本当にありがとうございました。
実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ～ 😊😊
その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。
これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング～！
学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。
質問にコードなしでグローだけの問題を説明すると、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。
▲該当の講義コミュニティのよくある秩序ビューをまず確認してください〜
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks
インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク
学習対象は
誰でしょう？
Web サイトの制作プロセス全体を体験したいパブリッシャー
実用的なウェブサイト制作に出版の基本スキルを活用したい方
パブリッシング個人ポートフォリオのホームページ制作が必要な方
前提知識、
必要でしょうか？
HTML+CSS 基本コーディング能力
12,647
受講生
747
受講レビュー
2,114
回答
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
全体
108件 ∙ (23時間 47分)
講座資料（こうぎしりょう）:
全体
31件
5.0
31件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
5
강의 수강 전에는 홈페이지 하나 만들어야지! 하고 코딩을 하면, 꼭 내 머리대로 구조가 나오지 않고 삐뚤뺴뚤하고 마진에 -230px을 줬다가 어디다간 또 거의 어거지로 끼워맞추면서 구조를 만들었습니다. 그리고 나서는 "아 ~ 나는 프론트랑은 연이 아닌가보다~" 의 반복........ 영상을 보니 전체적인 그림도 잘 그려지고, 강사님이 무한반복을 얘기해주는터라, 듣다보면 선생님이 아 대충 뭘 얘기하겠구나 하는것도 알 수 있을 정도가 된다고 생각합니다. 예를들어, 강사님이 "자식요소에 float를 줍니다." 라는 멘트를 하면 그 뒤에는 무조건 따라나오는게 "자식요소에 float값을 줬으니까 부모요소가 높이값을 잃어버리므로 부모에 overflow:hidden을 준다"라는게 거의 매~~~~~~~~번 나옵니다. 이런식으로 따로 외우려고 하지 않아도, 플로트에 플짜만 나와도 부모 오버플로우히든이 기계처럼 외워질 정도로 반복을 해주시기에, 구조가 딱 머리에 들어오게 됩니다. 강의 소개에 보면, 학습방법으로 섹션3(헤더~모바일) 작업을 편하게 보라고 하시는데, 저도 이전 강의에서는 그러지 못하고, 그저 결과물이 나오면 그것에 만족을 했습니다. 고로 강사님과 같이 만든 결과물을 보고 제가 만든것이라고 착각을 하게 되더라고요..ㅎ 근데 결과물 보고 와 뿌듯하다~ 다른거에 도전해볼까!! 라고 하면.. 막상 혼자하려니 잘 안되더군요. 그래서 이번엔 그냥 마음 비우고 처음엔 침대에 누워서도 보고, 귤까먹으면서도 보고, 빨래돌리면서도 보고, 버스에서도 보고 ㅋㅋ 정말 시간나면 유투브 대신 강의 시간 채운다 생각하고 쭉쭉 봤습니다. pc앞에 앉아서 볼때도 세상 편한 자세로 봤는데..(..ㅎ 이게 바로 온라인의 장점 아닙니까) 듣다보면 무조건 본인이 잘 모르는 내용들이 나오더라구요. 그런것들은 다시 들으면 물론 어렴풋이나마 생각이 나겠지만, 한번 배울때 가볍~~게 메모장 하나 켜서 or (pc로 듣는다면) 인프런 강의 오른쪽에 필기하기에다가 간단한 메모들을 곁들여서 들으니 덜 졸리고(<s>잠의노예</s>) 손이 놀고 있지 않으니까 기억이 더 잘 나더라고요. 그리고, '강의 오늘 다들었다~' 하면끝맺음으로 오늘 배운 내용들 중에 내가 정말 몰랐던 내용들이 메모장에 정리가 차곡차곡 되니까, 가볍게 슥 보면서 이해하고, 복습할때도 편하고요. 그리고 나서, 2회독을 할때는 직접 코딩을 입력하면서 볼때는 굳이 강사님과 같은 속도로 만들기 보단, 먼저 완성본사진+기본구조를 보고 먼저 만들어보고, css 뚝딱뚝딱 넣고나서, 어떻게 강사님과 다르게 넣었는지를 비교하면서 보는것도 하나의 재미라고 생각합니다. 그래야 온전히 내것인지 아니면 내가 타자연습만 했는지 잘 알 수 있다고 생각합니다. 또한 이렇게 해야 질문도 질좋은 질문이 오갈 수 있다고 생각합니다. 2회독을 마치면, 여러 사이트들을 보면서 f12를 누르지 않고 스스로 만들어 보는것도 좋다고 생각합니다. 그런데 2회독을 마치면(이전강의 포함) 웬만한 사이트들은 구조가 눈에 들어와서 얼추 비슷하게 흉내내는 저의 모습을 보게 되더군요!! 고로, 시간에 쫓기어 1회독에 끝낼거야! 라고 생각하기 보단, 1회독은 정말 세상에서 제일 편한 자세로 보고, 2회독에서 직접 코드 입력할땐, 어렴풋이나마 남는 기억 + 내가 쓴 메모장을 보면서 참고할 사항들은 참고하며 먼저 만들고 비교하기가 정말 탁월한 학습방법이라고 생각합니다. 여튼 저같은 바보도 어느정도 따라가는 강의라 함은, 여느 누구도 도전할 가치가 있는 강의라고 생각합니다.!!!! p.s) 아니 근데, 이 강의 초급대상이라고 되어있는데, 이거 초급영상 인건가요..?...... (퍼블리싱의 끝은 아직 먼것인가 ㄷㄷ....... )
a토링님~ 수강평에 정말 꼼꼼하고 자세하네요. 전에도 없었지만 앞으로도 이렇게 길고 상세한 수강평은 없을 것 같습니다.^^ 노력하시는 만큼 곧 좋은 결과 있을 거예요. 화이팅!!
受講レビュー 3
∙
平均評価 5.0
5
코딩웍스님 강의중 실전 사이트 제작 파트를 세번째로 학습했습니다. 이 강의 이전에 플렉스 사이트 제작 강의를 들었기 때문에 float는 사용하지 않고 일단 flex로 레이아웃을 잡았습니다. 시간적인 여유가 있어서 로고도 따로 만들고 디자인도 나름대로 약간 변경해서 잡아 보았습니다. 슬릭스라이더에 대한 개념을 이번에 조금 더 확실히 잡게 되었구요. js 파트에서도 개념 정리를 조금 더 익힌것 같습니다. 애니매이션이 많아서 이번에 그 부분이 특히 인상 깊었으며, FAQ 파트에서 어코디언 만드는 법, input과 label을 연결해서 탭메뉴 만드는 법 등도 저에게는 많은 도움이 되었습니다. 약간 아쉬운 점은 제가 3840 해상도의 모니터에서 작업을 하다 보니. 메인 화면에서 세로를 90vh로 했을때 다음 단락인 ceo access 와 간격이 너무 많이 벌어지게 된다는 점. 또한 flex로 작업을 했을때 좌우 애니매이션이 될 때 가로스크롤이 생기면서 화면이 깨지고, 화면 상단에 fixed된 header가 왔다갔다 하거나 숨어버리는 경우가 생기게 되더라구요. 처음에는 스크롤이 생기는 원인을 몰라서, 하루종일 소스를 보면서 머리를 쥐어뜯었는데. 나중에 보니까 그런 이유였던것 같습니다. 그래서 flex로 되어 있던 부분중에 애니매이션 관련 되는 곳은 모두 float로 수정했더니 이상이 없습니다. 아무튼 열정 넘치는 강의 너무 감사히 잘 들었으며 항상 건승을 기원 합니다. 감사합니다!
수강평 감사드립니다~!!
受講レビュー 6
∙
平均評価 5.0
5
소리도 안키고 회사에서,,, 아주대충 흐름만 pc버전까지 봤습니다 정말 흐름만 아는... 이제 강의 제대로 보면서 따라하고, 안보고 하고 얼마나 달라져있을지 궁금하네요 과연 그럴수 있을것인지?? 나중에 하단에 수정합니다 여담이지만 아직 회사에서 디자인 일만해서 심심해요ㅠㅠ시..싫고
lololo님 오랜만이네요. 현직 디자이너이시군요. 퇴근하시고 힘드시니까 주말에 차근차근 한 단계 한 단계 영상 보면서 따라해 보세요~
受講レビュー 5
∙
平均評価 5.0
5
그동안 들었던 어떤 강의보다, 실력향상에 도움이되는 월등한 강의입니다. 이론과 실습 모두 이해하기 쉽게, 강사님께서 정말 정말 설명을 잘 해주세요!! 강사님 정말 감사드려요! 업로드 되는 강의 모두 듣고 싶을정도로 만족도가 높습니다.!! ^^
mm님 안녕하세요 강의가 도움이 되셨다니 정말 기쁘네요. 코딩웍스 다른 강의들도 관심을 가져 주신다니니 감사드립니다. 공부합시다가 궁금한 점 있으면 질문 주세요.수강후기 감사드려요~
受講レビュー 1
∙
平均評価 5.0
5
완강 성공 했습니다. 원래 기초 지식도 있고 해서 5일만에 완강 해버렷네요.. 포트폴리오 하나 쌓고 갑니당!^^
승훈님 벌써 완강을 하셨다고요? 강의 올라간지 일주일밖에 안 됐는데 부지런히 열심히 하셨네요. 이번 작업하신 거 변경 하셔 가지고 개인 포트폴리오로 만드시면 좋을 거 같습니다. 수강후기 감사드립니다~^^
￥7,494
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)Hình thu nhỏ khóa học](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
