[ { "id": "fc-block-20-q9xp7sb1f", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "42", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#121212", "text": "\nトレーラー
\nWebクリエイター
せきゆおう\n" }, "uniqueId": "fc-block-1-us32t3inp", "isChecked": false }, { "id": "fc-block-6-zpcq9elsj", "layout": { "id": "301", "description": "풀사이즈 동영상", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useVideoLeft", "type": "checkbox", "description": "use video center" }, { "name": "videoPlatformType", "type": "select", "description": "videoPlatformType", "options": [ "Youtube", "Vimeo" ] }, { "name": "videoWidth", "type": "number", "description": "video width" }, { "name": "video", "type": "video", "description": "video" } ], "values": { "backgroundColor": "", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": 980, "video": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

;\">\n

\n <% if (video) { %>\n <% if (videoPlatformType === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": "720", "video": "1RAil5p3cRE" }, "uniqueId": "fc-block-2-uou2c5be1", "isChecked": false }, { "id": "fc-block-66-unzhzqni5", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "60", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-1-u7rclu8sk", "isChecked": false }, { "id": "fc-block-28-qcg9ih4cr", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "42", "paddingBottom": "0", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#fff", "text": "この講座でコーディングスキルをしっかり習得！
\n全60講のカリキュラムに加え
\n３種類のデザインカンプも提供" }, "uniqueId": "fc-block-4-l2jtla4mq", "isChecked": false }, { "id": "fc-block-2-9lnpqyqph", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n <% if (imageUrl || mobileImageUrl) { %>\n <% if(link) { %>\n \" class=\"container__link\" <% if(useNewTab) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n \n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/054139-914/jp-programming-sekiyuou-reason-web.png", "mobileImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/054143-914/jp-programming-sekiyuou-reason-mob.png", "imageWidth": 980, "alt": "Coloso せきゆおうゼロから学ぶ実践的なコーディング＆スキルアップ", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-3-iwgs5twte", "isChecked": false }, { "id": "fc-block-5-o55c0h3ev", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "60", "backgroundColor": "#121212" }, "uniqueId": "fc-block-4-73x8rz738", "isChecked": false }, { "id": "fc-block-7-loq7z0h3g", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n" }, "values": { "backgroundColor": "#121212", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202210/111333-568/tag1.png", "mobileImageUrl": "", "imageWidth": "335", "alt": "Coloso イラストレーターさとま豊かな色彩でつくる魅力的なアニメーション演出", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-5-ouriwmfxl", "isChecked": false }, { "id": "fc-block-8-0l0oegvh7", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#fff", "text": "\n全60講の講座動画で
\nコーディングの基礎から実践スキルまで網羅\n" }, "uniqueId": "fc-block-6-ejjjgfohx", "isChecked": false }, { "id": "fc-block-2-focy3aqqd", "layout": { "id": "301", "description": "풀사이즈 동영상", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useVideoLeft", "type": "checkbox", "description": "use video center" }, { "name": "videoPlatformType", "type": "select", "description": "videoPlatformType", "options": [ "Youtube", "Vimeo" ] }, { "name": "videoWidth", "type": "number", "description": "video width" }, { "name": "video", "type": "video", "description": "video" } ], "values": { "backgroundColor": "", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": 980, "video": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

;\">\n

\n <% if (video) { %>\n <% if (videoPlatformType === 'Youtube') { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n

\n" }, "values": { "backgroundColor": "#121212", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": "720", "video": "FU5T46hMZQ4" }, "hasSyntaxErrorTags": false, "uniqueId": "fc-block-2-fa6ygtd31", "isChecked": false }, { "id": "fc-block-9-mn1u15u5r", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "54", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-h6-text", "textColor": "#a0a0a0", "text": "\n初めてHTML/CSSに触れる方でも
\n段階を踏んでステップアップでき
\nWeb制作の第一歩となることを
\n目指して設計されたカリキュラム。
\nWeb制作の基礎となる
\nHTML/CSSの書き方から
\nJavaScriptやCSSアニメーションで
\nページに動きを付ける方法、
\nWebサイト制作全体の流れまで！
\n複数の制作会社での経験を経て
\nデザインやコーディングだけでなく
\nWeb制作全般の知識を持つ、
\nWebクリエーターのせきゆおうが
\nゼロからわかりやすくお教えします。\n" }, "uniqueId": "fc-block-7-eyv00lq9s", "isChecked": false }, { "id": "fc-block-4-an6s5epmz", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n" }, "values": { "backgroundColor": "#121212", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202210/111329-568/tag2.png", "mobileImageUrl": "", "imageWidth": "335", "alt": "Coloso イラストレーターさとま豊かな色彩でつくる魅力的なアニメーション演出", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-8-9fit5f8bg", "isChecked": false }, { "id": "fc-block-11-tu1bnz61c", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#fff", "text": "\n初級／中級／上級と
\nレベル別に分かれた
\n３種類のデザインカンプと
\n役立つHTML/CSSのチートシートを提供\n" }, "uniqueId": "fc-block-9-lai4ro6lh", "isChecked": false }, { "id": "fc-block-17-8fb66vpr6", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "", "paddingBottom": "54", "columnCount": "2", "backgroundColor": "#121212", "colorTheme": "theme-light-red", "text1Size": "fc-content-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202306/040643-914/jp-programming-sekiyuou-reason-02-1.gif", "text1": "", "text2": "" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202510/191220-565/jp-programming-sekiyuou-reason.webp", "text1": "", "text2": "" } ] }, "uniqueId": "fc-block-1-tiiyq5dpt", "isChecked": false }, { "id": "fc-block-13-i6vsch9si", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "54", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-h6-text", "textColor": "#a0a0a0", "text": "\nWebサイト制作のコーディングにおいて
\n基礎をしっかりと固めることが大切です。
\n本講座では、基礎から段階的に
\nステップアップして力をつけるために
\n初級／中級／上級とレベル別に分けた
\nデザインカンプを用意しました。
\nプロフィールページ、参加申込ページ、
\nコーポレートサイト、
\n３つのページを完成させながら
\nWeb制作に必要となるコーディングスキルを
\nひとつひとつ身に付けることができます。
\nまた、よく使用するHTMLとCSSのチートシートを
\n合わせて提供しますので、是非ご活用ください！" }, "uniqueId": "fc-block-10-wyrlkuedo", "isChecked": false }, { "id": "fc-block-10-vlmmr9ub5", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n" }, "values": { "backgroundColor": "#121212", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202210/111324-568/tag3.png", "mobileImageUrl": "", "imageWidth": "335", "alt": "Coloso イラストレーターさとま豊かな色彩でつくる魅力的なアニメーション演出", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-11-odokhv1ud", "isChecked": false }, { "id": "fc-block-19-nhtd4cw0v", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "24", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#fff", "text": "\n期間制限なしで
\nいつでもどこでも
\n無期限視聴可能\n" }, "uniqueId": "fc-block-12-ksg671rp3", "isChecked": false }, { "id": "fc-block-12-808nqlxi1", "layout": { "id": "201", "description": "중앙정렬 고정 사이즈 이미지", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useImageLeft", "type": "checkbox", "description": "use image center" }, { "name": "imageUrl", "type": "image", "description": "image url" }, { "name": "mobileImageUrl", "type": "image", "description": "mobile image url" }, { "name": "imageWidth", "type": "number", "description": "image width" }, { "name": "alt", "type": "text", "description": "이미지를 설명(대체)하는 대표 문구" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "#ffffff", "useImageLeft": false, "imageUrl": "", "mobileImageUrl": "", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "template": "

\">\n

\n" }, "values": { "backgroundColor": "#121212", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/060103-914/jp-programming-sekiyuou-benefit1-web.png", "mobileImageUrl": "", "imageWidth": "480", "alt": " Coloso せきゆおうゼロから学ぶ実践的なコーディング＆スキルアップ", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-13-dfaq4kfig", "isChecked": false }, { "id": "fc-block-1-raas3tgsx", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "24", "paddingBottom": "54", "backgroundColor": "#121212", "useTextCenter": true, "textSize": "fc-h6-text", "textColor": "#a0a0a0", "text": "\nコーディングを学びたくても
\nどの教材で何から学んだらいいのか
\n迷っていませんか？
\n本講座なら、コーダーとしての基盤作りや
\n現場で必要な技術はもちろん、
\nAI時代に求められる
\nコーディングスキルやAIの活用法までを
\n１つで学ぶことができます。
\nさらに、１回購入するだけで
\n無期限で視聴可能です。
\nコーディングの知識を
\nゼロから身に付けることができる
\nボリューム満点のカリキュラムを
\nFast campusで体験してください！\n" }, "hasSyntaxErrorTags": false, "uniqueId": "fc-block-11-aw9tgmt4e", "isChecked": false }, { "id": "fc-block-3-tfk2okjj5", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "42", "paddingBottom": "24", "backgroundColor": "#fff", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#121212", "text": "\n講座のおすすめ
\nこんな方におすすめです\n" }, "uniqueId": "fc-block-1-m6ti4ut9b", "isChecked": false }, { "id": "fc-block-17-zvsw37hw5", "layout": { "id": "203", "description": "1~4단 이미지와 텍스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "buttonColor", "type": "text", "description": "button color" }, { "name": "buttonTextColor", "type": "text", "description": "button text color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "useColumnInMobile", "type": "checkbox", "description": "모바일에서 2단 컬럼을 생성합니다" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "230 x 152" }, { "name": "title1", "type": "textarea", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "buttonLabel1", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink1", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl2", "type": "image", "description": "230 x 152" }, { "name": "title2", "type": "textarea", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "buttonLabel2", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink2", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl3", "type": "image", "description": "230 x 152" }, { "name": "title3", "type": "textarea", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content text" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "buttonLabel3", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink3", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." }, { "name": "imageUrl4", "type": "image", "description": "230 x 152" }, { "name": "title4", "type": "textarea", "description": "title4 text" }, { "name": "content4", "type": "textarea", "description": "content text" }, { "name": "useNewTab4", "type": "checkbox", "description": "" }, { "name": "buttonLabel4", "type": "text", "description": "버튼에 들어갈 문구를 입력해주세요. 입력내용이 없으면 버튼은 사라집니다." }, { "name": "buttonLink4", "type": "text", "description": "이미지와 버튼에 삽입할 링크를 입력해주세요." } ], "values": { "backgroundColor": "#ffffff", "textColor": "", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": false, "useColumnInMobile": false, "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "", "title2": "", "content2": "", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "", "title3": "", "content3": "", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "template": "

;\">\n

\">\n

\" style=\"color: <%= textColor || '#000000' %>\">\n <% if (imageUrl1 || title1 || content1 || buttonLabel1) { %>\n

\n <% if (imageUrl1 && buttonLink1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if (title1) { %>\n

\"><%= title1 %>

\n <% } %>\n <% if (content1) { %>\n

\"><%= content1 %>

\n <% } %>\n <% if(buttonLabel1) { %>\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel1 %>\n <% } %>\n

\n <% } %>\n <% if (imageUrl2 || title2 || content2 || buttonLabel2) { %>\n

\n <% if (imageUrl2 && buttonLink2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title2) { %>\n

\"><%= title2 %>

\n <% } %>\n <% if(content2) { %>\n

\"><%= content2 %>

\n <% } %>\n <% if(buttonLabel2) { %>\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel2 %>\n <% } %>\n

\n <% } %>\n <% if (imageUrl3 || title3 || content3 || buttonLabel3) { %>\n

\n <% if (imageUrl3 && buttonLink3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl3) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title3) { %>\n

\"><%= title3 %>

\n <% } %>\n <% if(content3) { %>\n

\"><%= content3 %>

\n <% } %>\n <% if(buttonLabel3) { %>\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel3 %>\n <% } %>\n

\n <% } %>\n <% if (imageUrl4 || title4 || content4 || buttonLabel4) { %>\n

\n <% if (imageUrl4 && buttonLink4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>>\n

\" alt=\"\" loading=\"lazy\">\n \n <% } else if (imageUrl4) { %>\n

\" alt=\"\" loading=\"lazy\">\n <% } %>\n <% if(title4) { %>\n

\"><%= title4 %>

\n <% } %>\n <% if (content4) { %>\n

\"><%= content4 %>

\n <% } %>\n <% if(buttonLabel4) { %>\n \" <% if(useNewTab4) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#466eff' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel4 %>\n <% } %>\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#ffffff", "textColor": "", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": true, "useColumnInMobile": true, "titleSize": "fc-h5-text", "contentSize": "fc-content-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/012008-914/icon1.png", "title1": "", "content1": "HTMLとCSSを基礎から
\nしっかり学びたい方", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/012002-914/icon2.png", "title2": "", "content2": "HTMLとCSSを独学で学んでいて
\n自分のやり方が合っているか不安な方", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/012107-914/icon3.png", "title3": "", "content3": "HTMLとCSSはある程度学んでいて
\n実践を通してスキルアップしたい方", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "uniqueId": "fc-block-14-34nr1rgm2", "isChecked": false }, { "id": "fc-block-19-2w969hipy", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "60", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-2-ycetqpege", "isChecked": false }, { "id": "fc-block-21-8xg515cd9", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "52", "paddingBottom": "24", "backgroundColor": "#f5f5f5", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#121212", "text": "レベル別の実践的な例題に沿って
\nコーディングのスキルを
\nゼロから身に付けます\n" }, "uniqueId": "fc-block-3-6ek8mj2in", "isChecked": false }, { "id": "fc-block-2-sujp2r2s6", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "columnCount": "2", "backgroundColor": "#f5f5f5", "colorTheme": "theme-light-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/040509-914/jp-programming-sekiyuou-example-01.png", "text1": "\nHTML/CSS・Web制作の基礎\n", "text2": "\n実習を通して身に付けられる内容
\n- HTML/CSSの基礎
\n- VsCodeの基礎操作
\n- Git管理（Sourcetree）の基礎\n" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071530-914/jp-programming-sekiyuou-example-02.png", "text1": "\nプロフィールページ（初級デザインカンプ）\n", "text2": "\n実習を通して身に付けられる内容
\n- HTML/CSSで簡単なページの作り方
\n- CSSを編集して自分用にカスタマイズ
\n- まずはHTML/CSSに慣れる\n" } ] }, "uniqueId": "fc-block-1-xv19mu6lr", "isChecked": false }, { "id": "fc-block-1-aiinbbtj5", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "60", "columnCount": "2", "backgroundColor": "#f5f5f5", "colorTheme": "theme-light-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202306/040735-914/jp-programming-sekiyuou-example-03.png", "text1": "\n参加申込ページ\n（中級デザインカンプ）\n", "text2": "\n実習を通して身に付けられる内容
\n- HTML/CSSの基礎を学びながらWebページを制作する
\n- レスポンシブWebデザインでスマートフォン対応をする方法を理解する
\n- フォームの作り方を理解する\n" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071526-914/jp-programming-sekiyuou-example-04.png", "text1": "\nコーポレートサイト\n（上級デザインカンプ）\n", "text2": "\n実習を通して身に付けられる内容
\n- HTML/CSSで実務に近いWebサイトを制作する
\n- JavaScriptやCSSアニメーションで動きを付ける
\n- リッチなWebサイトを作る方法\n" } ] }, "uniqueId": "fc-block-2-erwd3okym", "isChecked": false }, { "id": "fc-block-18-m7jjnoh60", "layout": { "id": "103", "description": "배경이미지가 있는 1단 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextLeft", "type": "checkbox", "description": "use text left" }, { "name": "backgroundColorOpacity", "type": "number", "description": "1~100" }, { "name": "backgroundImageUrl", "type": "image", "description": "1920 x auto" }, { "name": "mobileBackgroundImageUrl", "type": "image", "description": "mobile background image url" }, { "name": "textColor", "type": "text", "description": "font color" }, { "name": "textSize1", "type": "select", "description": "text size1", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text1", "type": "textarea", "description": "text1" }, { "name": "textSize2", "type": "select", "description": "text size2", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2", "type": "textarea", "description": "text2" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextLeft": false, "backgroundColorOpacity": 50, "backgroundImageUrl": "", "mobileBackgroundImageUrl": "", "textColor": "#000000", "textSize1": "fc-h1-text", "text1": "", "textSize2": "fc-content-text", "text2": "" }, "template": "

rem; padding-bottom: <%=paddingBottom/10%>rem;\">\n

\n <% if (text1) { %>\n

\" style=\"<% if(textColor) { %>color: <%= textColor %>;<% } %>; <% if (useTextLeft) { %> text-align: left;<% } %>\"><%= text1 %>

\n <% } %>\n <% if (text2) { %>\n

\" style=\"<% if(textColor) { %>color: <%= textColor %>;<% } %>; <% if (useTextLeft) { %> text-align: left;<% } %>\"><%= text2 %>

\n <% } %>\n

background: <%= backgroundColor %>; <% } %>opacity: <%= backgroundColorOpacity/100 %>\">

\n" }, "values": { "paddingTop": "50", "paddingBottom": "50", "backgroundColor": "#000", "useTextLeft": false, "backgroundColorOpacity": "70", "backgroundImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202306/040746-914/jp-programming-sekiyuou-about-web.png", "mobileBackgroundImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/040522-914/jp-programming-sekiyuou-about-mob.png", "textColor": "#000000", "textSize1": "fc-h6-text", "text1": "せきゆおう
\nWebクリエイター", "textSize2": "fc-content-text", "text2": "
\n\nはじめまして。
\nWebクリエイターのせきゆおうです。
\n
\n私は短大在学中に、プレゼンで使った
\nAdobeソフトの面白さに魅了され
\n建築業界からデザイン業界へ進路を変更し
\n独学でデザインとコーディングを学びました。
\n
\n短大卒業後、グラフィックデザイナーから
\nWebデザイナーに転身し、
\n複数の制作会社で実績を積み重ねました。
\n小規模な制作会社に長く勤めていたため
\n受注から納品まで一貫して担当することが多く
\nデザインやコーディングだけでなく
\nWeb制作全般に携わっていました。
\n
\n2020年１月に個人事業主となり
\n現在ではWeb制作全般に加え、
\n紙媒体のデザインも手掛けています。
\n
\n本講座は、パソコンを買ったばかりの
\n初学者でも、挫折せずに
\nコーディング力と自信をつけることが
\nできるように制作しました。
\n一緒にWebサイトを制作しながら
\nスキルアップを目指しましょう！
\nまた、ゼネラリストの視点から
\nチームにとって頼れるコーダーになるための
\nアドバイスも提供します。
\n
\nどうぞよろしくお願いします。\n\n\n\n\n" }, "uniqueId": "fc-block-19-uu6zdjc5n", "isChecked": false }, { "id": "fc-block-19-gx7j16yn2", "layout": { "id": "802", "description": "강사소개 + 링크버튼", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "imageUrl", "type": "image", "description": "60 x 60" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h5-text", "fc-h6-text" ] }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "url", "description": "link url" }, { "name": "linkLabel", "type": "text", "description": "link label" } ], "values": { "paddingTop": 0, "paddingBottom": 0, "backgroundColor": "", "imageUrl": "", "titleSize": "fc-h5-text", "title1": "", "title2": "강사님 한마디", "contentSize": "fc-content-text", "content1": "", "content2": "", "useNewTab": true, "link": "", "linkLabel": "강사님 인터뷰 보기" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n <% if (imageUrl || title1 || title2 || content1 || content2) { %>\n

\n <% if (imageUrl) { %>\n

\" loading=\"lazy\">

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\"><%= title2 %>

\"><%= content2 %>

\n <% if (link) { %>\n target=\"_blank\" rel=\"noopener noreferrer\" <% } %> href=\"<%=link%>\"><%= linkLabel %>\n <% } %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "50", "paddingBottom": "50", "backgroundColor": "#f5f5f5", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071504-914/jp-programming-sekiyuou-profile.png", "titleSize": "fc-h5-text", "title1": "せきゆおう", "title2": "
", "contentSize": "fc-content-text", "content1": "現) Webクリエイター", "content2": "【経歴】
\n2022年バンタンテックフォードアカデミー HTML/CSS 講師
\n2020年～クリエイターのオンラインコミュニティ「クリエイターズ・シナジーカフェ」を共同運営
\n2020年～フリーランスとして活動開始
\n～2020年様々なWeb制作会社に勤務
\n2003年名古屋造形芸術大学短期大学部卒業\n

", "useNewTab": true, "link": "https://twitter.com/wurst_design", "linkLabel": "Twitter" }, "uniqueId": "fc-block-20-4n6k1xlhp", "isChecked": false }, { "id": "fc-block-21-oytk0xxqc", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "52", "paddingBottom": "12", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h6-text", "textColor": "#ED2040", "text": "\nこの講座のポイント" }, "uniqueId": "fc-block-21-yi0835jag", "isChecked": false }, { "id": "fc-block-64-npm8ok5v2", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071456-914/jp-programming-sekiyuou-sellingpoint-01.png", "title2": "Web制作の基礎知識と
受注から納品までの
流れを学習 ", "content2": "\nWeb制作において、基礎知識が不足していると、チームやクライアントに迷惑をかけるだけでなく、自分自身にも損害が及ぶ可能性があります。そのため、本講座でしっかりと基本を学び、Web制作の土台を固めましょう。また、Web制作の全体の流れを理解するための教材が少ない中、本講座では受注から納品までの一連の流れをお教えします。\n" }, "uniqueId": "fc-block-22-6pxrn6vwt", "isChecked": false }, { "id": "fc-block-26-khrdz77yf", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-23-6e5hm3vc2", "isChecked": false }, { "id": "fc-block-25-bhze8oqc3", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071451-914/jp-programming-sekiyuou-sellingpoint-02.png", "title2": "３つのデザインカンプを用いて
HTML/CSSで段階に沿った
コーディングを実践 ", "content2": "\n\nHTML/CSSは、Web制作の通過点ではありません。奥が深く、経験豊富なエンジニアであっても、常により良い方法を探求し続けています。本講座では、徐々にステップアップして力をつけるため、デザインカンプを初級・中級・上級の３段階に分けて用意しています。基礎を確立しながら座学と実践を繰り返し、楽しみながら学習を進めていきましょう。\n" }, "uniqueId": "fc-block-24-3cvaalk9j", "isChecked": false }, { "id": "fc-block-27-i5a566gmi", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-25-ldsykldyz", "isChecked": false }, { "id": "fc-block-22-rcqsa399z", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/011749-914/jp-programming-sekiyuou-sellingpoint-03.gif", "title2": "初級からのステップアップ！
CSS設計、JavaScript、
CSSアニメーションを理解 ", "content2": "\n\nコーディングがある程度できるようになっても、現代ではWeb制作を学ぶ人が増えているため、差別化が難しく、埋もれてしまうことがあります。そのため本講座では、CSS設計やJavaScript、CSSアニメーションのスキルに加え、受講を終えた後に、どのように学びを続け、ステップアップしていくべきかもお伝えします。\n" }, "uniqueId": "fc-block-26-2ns6qbuc5", "isChecked": false }, { "id": "fc-block-32-tdpw5ddtc", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#ffffff", "paddingTop": "60", "paddingBottom": "0", "borderColor": "#c8c8d2", "borderSize": "1" }, "uniqueId": "fc-block-27-mu7uw3dbf", "isChecked": false }, { "id": "fc-block-33-s22kx3152", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "42", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#121212", "text": "\n講座内容
\n下記のような内容を学べます。\n\n" }, "uniqueId": "fc-block-28-o21vr65br", "isChecked": false }, { "id": "fc-block-30-teagc548z", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202306/040817-914/jp-programming-sekiyuou-detail-01.png", "text1": "Web制作の基礎知識", "text2": "より高度な学習をするための土台となる、Web制作の基礎知識をお教えします。特に、初めてプログラミングに挑戦する方でも分かりやすいよう、図解を用いて解説します。" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071943-914/jp-programming-sekiyuou-detail-02.png", "text1": "Figmaの基本操作", "text2": "Webデザインに使用されるデザインツールは複数ありますが、本講座では初心者でも使いやすいFigmaの基本的な使い方や、コーディングに必要な技術を学びます。" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/040535-914/jp-programming-sekiyuou-detail-03.png", "text1": "HTMLとCSSを使った
基礎的なコーディング", "text2": "Web制作に必要なHTMLとCSSの基本的な書き方を学びます。特に、レベル別に分かれたデザインカンプを用いて、段階的にコーディングのスキルを習得します。" } ] }, "uniqueId": "fc-block-29-9622wt3bz", "isChecked": false }, { "id": "fc-block-45-6ojnqtnn9", "layout": { "id": "211", "description": "2단/3단 캐러셀", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "숫자 입력" }, { "name": "paddingBottom", "type": "number", "description": "숫자 입력" }, { "name": "columnCount", "type": "select", "description": "default - 3columns", "options": [ "3", "2" ] }, { "name": "backgroundColor", "type": "text", "description": "배경 색상" }, { "name": "colorTheme", "type": "select", "description": "네가지 테마중 하나를 선택할 수 있습니다.
light theme_red - 밝은 배경에 사용합니다 (버튼포인트)
dark theme_red - 어두운 배경에 사용합니다 (버튼포인트)
light theme_mono - 밝은 배경에 사용합니다
dark theme_mono - 어두운 배경에 사용합니다", "options": [ "theme-light-red", "theme-dark-red", "theme-light-mono", "theme-dark-mono" ] }, { "name": "text1Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2Size", "type": "select", "description": "h5(20px), h6(16px) contents(14px)", "options": [ "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "cards", "type": "list", "description": "추가/삭제를 이용하여 원하는 만큼 카드 리스트를 구현 할 수 있습니다.", "maxLength": 20, "params": [ { "name": "imageUrl", "type": "image", "description": "파일 업로드" }, { "name": "text1", "type": "text", "description": "자유 입력" }, { "name": "text2", "type": "text", "description": "자유 입력" } ] } ], "values": { "paddingTop": 40, "paddingBottom": 40, "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h5-text", "text2Size": "fc-h6-text", "cards": [ { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" }, { "imageUrl": "", "text1": "", "text2": "" } ] }, "template": "

rem;\n padding-bottom: <%= paddingBottom/10 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\">\n

\n
\">\n <% if (imageUrl) { %>\n \" alt=\"\" />\n <% } %>\n
\n <% if (text1) { %>\n
\"><%= text1 %>
\n <% } %>\n <% if (text2) { %>\n
\"><%= text2 %>
\n <% } %>\n

\n" }, "values": { "paddingTop": "0", "paddingBottom": "60", "columnCount": "3", "backgroundColor": "#ffffff", "colorTheme": "theme-light-red", "text1Size": "fc-h6-text", "text2Size": "fc-content-text", "cards": [ { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071439-914/jp-programming-sekiyuou-detail-04.png", "text1": "Sourcetreeを使ったGit管理", "text2": "バージョン管理システムのGitを使用し、コードの変更履歴やバージョン管理を行う方法を解説します。また、Sourcetreeを使ったGitの基本的な使い方を学び、チーム開発でのコード管理能力を身に付けます。" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071117-914/jp-programming-sekiyuou-detail-05.gif", "text1": "JavaScriptを用いた
動きのあるコーディング", "text2": "HTML/CSSに十分に慣れた後に、JavaScriptやCSSアニメーションを使い、マウスオーバーやスクロールイベントなど、Webページに動きを付けていく方法を学びます。" }, { "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071444-914/jp-programming-sekiyuou-detail-06.png", "text1": "学習を終えた方が今後学ぶべきこと", "text2": "本講座の学習を終えた後、何を学んでいくべきか指針を示します。自己学習の方法や、より高度なWeb制作への取り組み方など、独学で学び続けるためのノウハウをお伝えします。" } ] }, "uniqueId": "fc-block-30-4i0usj9mn", "isChecked": false }, { "id": "fc-block-2-6dq0ct0za", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#ffffff", "paddingTop": "0", "paddingBottom": "0", "borderColor": "#c8c8d2", "borderSize": "1" }, "uniqueId": "fc-block-1-75c7xonag", "isChecked": false }, { "id": "fc-block-33-kcaxuea9n", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "42", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": true, "textSize": "fc-content-text", "textColor": "#121212", "text": "\nカリキュラム
\nカリキュラム内容の
ご紹介\n" }, "uniqueId": "fc-block-7-9qqhpk9fx", "isChecked": false }, { "id": "fc-block-39-w7k9sp9cx", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

container__content--border-size-<%= borderSize %>\" style=\"width: <%= cardWidth/10 %>rem; <% if(borderColor) { %>border-color: <%= borderColor %>;<% } %> <% if(cardBackgroundColor) { %> background-color: <%= cardBackgroundColor %><% } %>\">\n <% if (imageUrl) { %>\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 01. ｜ \nオリエンテーション" }, "uniqueId": "fc-block-33-r7t5eoufg", "isChecked": false }, { "id": "fc-block-38-sn2atzz20", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "01. オリエンテーション
\n- 自己紹介
\n- 講座のコンセプト
\n- 学習の流れとゴール
\n- コーディングで心がけていること
\n- 使用するツールについて" }, "uniqueId": "fc-block-34-cmcyap13b", "isChecked": false }, { "id": "fc-block-41-u6pbp4xft", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 02. ｜ \nWeb制作の基礎とコーディングの役割" }, "uniqueId": "fc-block-35-8zxmmumk5", "isChecked": false }, { "id": "fc-block-40-3l4569w73", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "02. Web制作の基礎知識
\n- Webサーバーについて
\n- ドメインについて
\n- Webブラウザについて
\n- Webページについて
\n- はじめに覚えておきたい専門用語

\n\n03. Web制作の流れ
\n- 受注〜納品までWeb制作の流れ
\n- 上記の中でコーダーの役割
\n- デザインカンプについて
\n- HTML/CSS/JavaScriptの役割
\n- デバッグ作業の注意点" }, "uniqueId": "fc-block-36-d1orsw3df", "isChecked": false }, { "id": "fc-block-42-mtddpgz4k", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 03. ｜ \nWeb制作の準備をしよう" }, "uniqueId": "fc-block-37-6nwyju56i", "isChecked": false }, { "id": "fc-block-43-qu232lqdr", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "04. 必要なツールを準備する
\n- 各種ブラウザをダウンロードする
\n- VsCodeをダウンロードする
\n- VsCodeに必要なプラグインをダウンロードする

\n\n05. 学習の準備をする
\n- 教材をダウンロードする
\n- パソコンの中に開発する場所を作る

\n\n06. 実際に作ってブラウザで表示させる
\n- VsCodeの基礎操作を教えます
\n- VsCodeでWebページを作り「Hello World」を表示させる" }, "uniqueId": "fc-block-38-uh5romf1t", "isChecked": false }, { "id": "fc-block-25-0gfpvu1iz", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 04. ｜ \n初級デザインのコーディング" }, "uniqueId": "fc-block-8-rtkuno68g", "isChecked": false }, { "id": "fc-block-27-dciix2z1w", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "07. コーディングの準備をする
\n- VsCodeで初級コーディングの準備をする
\n- 初級デザインカンプの説明
\n- 初級デザインカンプの狙い

\n\n08. HTMLの基礎を学ぶ
\n- HTMLの役割を知る
\n- HTMLの骨格を書く
\n- HTMLの骨格の各要素について
\n- HTMLタグの基本的な書き方

\n\n09. 初級デザインのHTMLを完成させる
\n- htmlファイルと画像ファイルを理解する
\n- 画像を表示させる
\n- 画像の種類を理解する
\n- 文字とタイトルを入力する
\n- ボタンを作ろう
\n- リンクを貼ろう

\n\n10. HTMLを見やすくしよう
\n- コメントアウトを理解する
\n- インデントを理解する

\n\n11. CSSの基本を学ぶ
\n- CSSの役割を知る
\n- CSSの基本的な書き方
\n- CSSの種類について
\n- スタイルの優先順位
\n- CSSとHTMLを紐付ける
\n- リセットCSSを設置する

\n\n12. デザインカンプの役割
\n - デザインカンプの役割
\n- Figmaからスタイルを確認する

\n\n13. 初級デザインを完成させる
\n- 背景色を付ける
\n- カラーコードを知る
\n- 画像に横幅と高さを設定する
\n- 文字の大きさを変更する
\n- 単位を知る
\n- 中央寄せにする
\n- 余白を設定する
\n- 文字の色を変更する

\n\n14. デベロッパーツールを使おう
\n- Chromのデベロッパーツールについて

\n\n15. 初級デザインをカスタマイズする
\n- リンク集を自分用にカスタマイズする
\n- 自分の画像をFigmaから書き出す
\n- Figmaを編集する
\n- 色を変更する

\n\n16. 初級デザインを終えて
\n- 初級デザインのまとめ" }, "uniqueId": "fc-block-9-2liq0kdjb", "isChecked": false }, { "id": "fc-block-28-zej5acxbs", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 05. ｜ \n中級デザインをコーディングする" }, "uniqueId": "fc-block-10-hhfs02sr6", "isChecked": false }, { "id": "fc-block-29-gdtf46tmx", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "17. コーディングの準備をする
\n- マークアップを意識する
\n- VsCodeで中級コーディングの準備をする
\n- 中級デザインカンプの説明
\n- 中級デザインカンプの狙い

\n\n18. HTMLタグの役割01
\n- 代表するHTMLタグを理解する
\n- 改行を理解する
\n- section、articleを理解する
\n- divを理解する
\n- hタグを理解する

\n\n19. HTMLタグの役割02
\n- pタグを理解する
\n- 強調を表すタグを理解する
\n- spanを理解する
\n- リストタグを理解する
\n- dlタグを理解する
\n- tableタグを理解する
\n- ul、dl、tableは似ているがどう選択するか

\n\n20. デザイン上でマークアップをする
\n- Figmaもしくはプリントした紙にHTMLタグを書き込む
\n- Figmaに画像を読み込み準備をする
\n- 講師と一緒にタグを書き込む

\n\n21. headerを完成させる
\n- headerのマークアップをする
\n- CSSでスタイリングをする
\n- 要素を横並びにする
\n- ページ内リンクを理解する
\n- idとclassの違いを理解する
\n- hoverを理解する

\n\n22. 余白について
\n- marginとpaddingの違い
\n- flexboxやgapを選択する場合
\n- どれを選択するべきか

\n\n23. mainのコーディングをする01
\n- PC表示のmain部分を作る
\n- 店舗のコンセプトをマークアップする
\n- 店舗のコンセプトをスタイリングする

\n\n24. フォントについて
\n- フォントの指定と仕組みを理解する
\n- Webフォントを理解する
\n- Webフォントの利用規約を理解する

\n\n25. mainのコーディングをする02
\n- PC表示のmain部分を作る
\n- 店舗のメニューをマークアップする
\n- 店舗のメニューをスタイリングする

\n\n26. Google Mapを入れる
\n- GoogleMapを埋め込む方法
\n- GoogleMapの注意事項

\n\n27. フォームのコーディングをする01
\n- フォームの作り方を解説します
\n- フォームをマークアップする
\n- 属性セレクタを理解する

\n\n28. フォームのコーディングをする02
\n- CSSでスタイリングをする

\n\n29. スマートフォン対応をする01
\n- スマートフォン対応にする方法を理解する
\n- レスポンシブデザインを理解する
\n- レスポンシブデザインの準備をする
\n- メディアクエリの使い方を理解する
\n- デザインの無い領域をどう構築するかを理解する

\n\n30. スマートフォン対応をする02
\n- CSSでスタイリングをする

\n\n31. PCとSPの画像を切り替える
\n- pictureタグの使い方
\n- 背景画像の切り替え

\n\n32. 中級デザインを終えて
\n- 中級デザインのまとめ" }, "uniqueId": "fc-block-11-40ivy15jr", "isChecked": false }, { "id": "fc-block-30-zpd759tcx", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 06. ｜ \nソースコードをGitで管理しよう" }, "uniqueId": "fc-block-12-a3bi3s42f", "isChecked": false }, { "id": "fc-block-26-y2s3rowqj", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "33. Gitとは
\n- Gitを理解する
\n- なぜGitを使うのか
\n- Gitは必須か

\n\n34. Sourcetreeの設定をする
\n- Sourcetreeをダウンロードする
\n- Sourcetreeでローカルリポジトリを作る
\n- Macの隠しファイルを表示させる
\n- 適当なhtmlを作ってSourcetreeの動きを見る
\n- コミットをして変更履歴を見る

\n\n35. Githubの設定をする
\n- Githubのアカウントを作る
\n- Githubでリモートリポジトリを作る
\n- GithubとSourcetreeを紐づける

\n\n36. Sourcetreeを使ってみる
\n- 35講で作ったコミットをプッシュしてみる。
\n- Githubでプッシュされたことを確認する。
\n- 過去の状態に戻す

\n\n37. 初級、中級、上級のソースをGitで管理する
\n- Sourcetreeでローカルリポジトリを作る
\n- Githubでリモートリポジトリを作る
\n- GithubとSourcetreeを紐づける

\n\n38. 基本的な流れ
\n- 作業用のブランチを切る
\n- masterブランチからクローンする
\n- 作業用のブランチにコミット後にプッシュをする
\n- 各ブランチの役割を知る
\n- 複数人で作業をする場合
\n- Githubからmasterブランチにプルリクエストを送る
\n- 作業用のブランチの変更内容を確認する
\n- masterブランチにマージをする
\n- ローカルリポジトリを最新の状態にする

\n\n39. 最後に
\n- Gitのまとめ\n" }, "uniqueId": "fc-block-13-wmdiyrnwq", "isChecked": false }, { "id": "fc-block-31-rsautusf1", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 07. ｜ \n上級デザインをコーディングする" }, "uniqueId": "fc-block-14-nuhdvjv1c", "isChecked": false }, { "id": "fc-block-32-9utjr0i0i", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "40. 上級のデザインカンプの説明
\n- VsCodeで上級コーディングの準備をする
\n- 上級デザインカンプの説明
\n- 上級デザインカンプの狙い

\n\n41. CSS設計の大切な４つのポイント
\n- CSS設計について非常に大切な４つのポイントを理解する
\n- CSS設計手法を理解する

\n\n42. 複数ページがある場合
\n- サイト構成を理解する
\n- コンポーネントを理解する
\n- リンクの設定方法と種類を理解する

\n\n43. headerを完成させる
\n- headerのマークアップをする
\n- CSSでスタイリングをする
\n- メディアクエリでレスポンシブ化させる

\n\n44. ハンバーガーメニューを実装する
\n- ボタンを作る
\n- 隠れているメニューを作る
\n- モーダル部分を作る
\n- JavaScriptで開閉するようにする

\n\n45. footerを完成させる
\n- footerのマークアップをする
\n- CSSでスタイリングをする
\n- メディアクエリでレスポンシブ化させる

\n\n46. トップページのコーディングをする01
\n- PC表示のmain部分を作る
\n- ミッションをマークアップする
\n- ミッションをスタイリングする
\n- サービスをマークアップする
\n- サービスをスタイリングする

\n\n47. Swiperを設置する
\n- Swiperとは
\n- Swiperの使い方
\n- メンバーをコーディングする
\n- メンバーをスタイリングする

\n\n48. トップページのコーディングをする02
\n- 横スクロールのアニメーションをマークアップする
\n- 横スクロールのアニメーションをスタイリングする

\n\n49. トップページのコーディングをする03
\n- お知らせをマークアップする
\n- お知らせをスタイリングする

\n\n50. 映像を埋め込む
\n- トップページのメインビジュアルに映像を入れる
\n- メインビジュアルをマークアップする
\n- メインビジュアルをスタイリングする

\n\n51. ボタンにhoverを付ける
\n- 下層に入る前にhoverをアニメーションで動かす

\n\n52. 下層ページの共通箇所をコーディングする
\n- 下層ページの進め方を理解する
\n- タイトル部分などの共通部分を先にコーディングする
\n- パンクズを理解する
\n- 実案件で共通部分はどうしているかを知る

\n\n53. お知らせページをコーディングする
\n- お知らせやブログの更新方法について
\n- CMSを考慮したコーディングを理解する
\n- お知らせ一覧ページをコーディングする
\n- お知らせ詳細ページをコーディングする

\n\n54. 会社紹介ページをコーディングする
\n- スタッフ一覧をコーディングする
\n- 代表挨拶をコーディングする
\n- 会社情報 / 沿革をコーディングする
\n- アクセスマップをコーディングする
\n- ローカルナビをコーディングする

\n\n55. お問い合わせページをコーディングする
\n- 自分の力でマークアップしてみる
\n- 講師と答え合わせをする
\n- 自分の力でスタイリングしてみる
\n- 講師と答え合わせをする

\n\n56. OGP/ファビコンを設定する
\n- ファビコンを設定する
\n- 各種OGPタグを設定する
\n- 動作検証をする

\n\n57. JavaScriptでサイトに動きをつける
\n- CSSアニメーションを理解する
\n- スクロールに合わせて要素を表示させる

\n\n58. ローディング画面を作る
\n- ローディング画面のマークアップをする
\n- ローディング画面をスタイリングする
\n- ローディング画面をJavaScriptで制御する

\n\n59. 上級デザインを終えて
\n- 上級デザインのまとめ" }, "uniqueId": "fc-block-15-k43nl9r2l", "isChecked": false }, { "id": "fc-block-44-7x5f8ozz4", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#f5f5f5", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#f5f5f5", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "SECTION 08. ｜ \n最後に" }, "uniqueId": "fc-block-39-fna530zbb", "isChecked": false }, { "id": "fc-block-46-o5plmmfif", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "20", "paddingBottom": "24", "backgroundColor": "", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#000000", "text": "60. Web制作を学ぶ皆さんへ
\n- 受講後のレベルについて
\n- 今後、学習すること
\n- Web制作業界で仕事をするなら
\n- よくある質問
\n- メッセージやアドバイス" }, "uniqueId": "fc-block-40-grwkw8r3t", "isChecked": false }, { "id": "fc-block-3-x7vup7ncg", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "36", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-2-cdvotrxn0", "isChecked": false }, { "id": "fc-block-53-omb637jmz", "layout": { "id": "103", "description": "배경이미지가 있는 1단 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextLeft", "type": "checkbox", "description": "use text left" }, { "name": "backgroundColorOpacity", "type": "number", "description": "1~100" }, { "name": "backgroundImageUrl", "type": "image", "description": "1920 x auto" }, { "name": "mobileBackgroundImageUrl", "type": "image", "description": "mobile background image url" }, { "name": "textColor", "type": "text", "description": "font color" }, { "name": "textSize1", "type": "select", "description": "text size1", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text1", "type": "textarea", "description": "text1" }, { "name": "textSize2", "type": "select", "description": "text size2", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "text2", "type": "textarea", "description": "text2" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextLeft": false, "backgroundColorOpacity": 50, "backgroundImageUrl": "", "mobileBackgroundImageUrl": "", "textColor": "#000000", "textSize1": "fc-h1-text", "text1": "", "textSize2": "fc-content-text", "text2": "" }, "template": "

rem; padding-bottom: <%=paddingBottom/10%>rem;\">\n

\n <% if (text1) { %>\n

\" style=\"<% if(textColor) { %>color: <%= textColor %>;<% } %>; <% if (useTextLeft) { %> text-align: left;<% } %>\"><%= text1 %>

\n <% } %>\n <% if (text2) { %>\n

\" style=\"<% if(textColor) { %>color: <%= textColor %>;<% } %>; <% if (useTextLeft) { %> text-align: left;<% } %>\"><%= text2 %>

\n <% } %>\n

background: <%= backgroundColor %>; <% } %>opacity: <%= backgroundColorOpacity/100 %>\">

\n" }, "values": { "paddingTop": "40", "paddingBottom": "40", "backgroundColor": "#000", "useTextLeft": false, "backgroundColorOpacity": "65", "backgroundImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071412-914/jp-programming-sekiyuou-interviewcover.png", "mobileBackgroundImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071415-914/jp-programming-sekiyuou-interviewcover.png", "textColor": "#000000", "textSize1": "fc-h6-text", "text1": "インタビュー
\n\nWebクリエイター
\nせきゆおうが
\nお話ししたいこと\n\n", "textSize2": "fc-content-text", "text2": "" }, "uniqueId": "fc-block-49-w3ju08qfq", "isChecked": false }, { "id": "fc-block-56-jepo9jwqv", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "30", "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-content-text", "textColor1": "#333333", "text1": "\nQuestion.01
\n\n本講座について、ご紹介ください。\n\n\n\n", "textSize2": "fc-content-text", "textColor2": "#333", "text2": "

\n\n私は、独学でコーディングを学びました。独学である限り「本当にこの方法が実務で通用するのかわからない」という悩みはつきものだと思います。そこで本講座では、実務での活用方法についても、リアルな声を交えて解説します。また、Web制作の入門者にも分かりやすいよう、図解を用いて説明を行います。３つのデザインカンプを用いて、座学と実践を交互に行いながら、ステップアップできる仕組みになっています。さらに、上級編では、すでにコーディングを学んでいる方にも有益な難易度に設定しています。" }, "uniqueId": "fc-block-50-3k33gvmhs", "isChecked": false }, { "id": "fc-block-60-6182og3mk", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#ffffff", "paddingTop": "30", "paddingBottom": "30", "borderColor": "#c8c8d2", "borderSize": "1" }, "uniqueId": "fc-block-51-tiejkx4uf", "isChecked": false }, { "id": "fc-block-57-g0qxpuo79", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "30", "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-content-text", "textColor1": "#333333", "text1": "\nQuestion.02
\n\n本講座と他の講座で違うポイントがあれば、どういう部分ですか？\n\n\n\n", "textSize2": "fc-content-text", "textColor2": "#333", "text2": "

\nこの講座は、Web制作のコーディング入門に特化しています。HTML/CSSの基礎を教えてきた講師としての経験を活かし、初めてHTML/CSSに触れる方でも段階を踏んで上達できるような内容になっており、スキルアップの第一歩となることを目指してカリキュラムを設計しました。" }, "uniqueId": "fc-block-52-3lga6qvm3", "isChecked": false }, { "id": "fc-block-61-t8mq7z0et", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#ffffff", "paddingTop": "30", "paddingBottom": "30", "borderColor": "#c8c8d2", "borderSize": "1" }, "uniqueId": "fc-block-53-73jebnotj", "isChecked": false }, { "id": "fc-block-58-bbm7k4pem", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "30", "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-content-text", "textColor1": "#333333", "text1": "\nQuestion.03
\n\n受講生が本講座を受講すべき、講師さまのみの強みについてお教えください。\n\n\n\n", "textSize2": "fc-content-text", "textColor2": "#333", "text2": "

\n私は、１年間グラフィックデザイナーとしての経験を積んだ後、Webデザイナーへ転身しました。HTML/CSSによるコーディングのみならず、日常的にデザイン制作も行っています。また、受注から納品までの一連の流れを担当する案件を数多く手掛けてきました。少人数の制作会社から、大手企業を相手に業務を行う会社まで、複数の会社での経験を通じて、実践的な活用法をリアルにお伝えできることが私の強みだと考えています。コーダーとデザイナーの両方の視点から、望ましいコーディングの方法をお伝えしたいと思います。" }, "uniqueId": "fc-block-54-8vig98zdw", "isChecked": false }, { "id": "fc-block-62-uegahed1z", "layout": { "id": "003", "description": "문단 구분 선", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "size", "options": [ "1", "2" ] } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "borderColor": "#c8c8d2", "borderSize": "1" }, "template": "

\">\n

rem;padding-bottom: <%= paddingBottom/10 %>rem;\">\n

rem solid <%= borderColor %>;\">\n

\n" }, "values": { "backgroundColor": "#ffffff", "paddingTop": "30", "paddingBottom": "30", "borderColor": "#c8c8d2", "borderSize": "1" }, "uniqueId": "fc-block-55-2muwa5b70", "isChecked": false }, { "id": "fc-block-59-qnfrk63qz", "layout": { "id": "102", "description": "2단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize1", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor1", "type": "text", "description": "text color" }, { "name": "text1", "type": "textarea", "description": "text" }, { "name": "textSize2", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor2", "type": "text", "description": "text color" }, { "name": "text2", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h1-text", "textColor1": "#000000", "text1": "", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n <% if(text1) { %>\n

\" style=\"<% if(textColor1) { %>color: <%= textColor1 %><% } %>\">\n <%= text1 %>\n

\n <% } %>\n <% if(text2) { %>\n

\" style=\"<% if(textColor2) { %>color: <%= textColor2 %><% } %>\">\n <%= text2 %>\n

\n <% } %>\n

\n" }, "values": { "paddingTop": "30", "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-content-text", "textColor1": "#333333", "text1": "\nQuestion.04
\n\n受講生に向けて
\nメッセージをお願いいたします。\n\n\n\n", "textSize2": "fc-content-text", "textColor2": "#333", "text2": "

\nSNSを見ていると「HTML/CSSは通過点」、「HTML/CSSはChatGPTの出現で終わってしまう」、「ノーコードがあるから覚える必要がない」という投稿を時々見かけますが、私はそうではないと考えています。HTML/CSSは非常に奥が深く、高いレベルで構築できる人は引っ張りだこです。特に、ただ形を作るだけではなく、デザイナーの意図を汲み取り、構築できるエンジニアは需要が高いと思います。この講座を通じて、初心者から信頼できるコーダーへステップアップするお手伝いができれば嬉しいです。\n" }, "uniqueId": "fc-block-56-vnoxa3oka", "isChecked": false }, { "id": "fc-block-63-xnxbasvx1", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-59-fjxqdc0oz", "isChecked": false }, { "id": "fc-block-66-jv0jylu34", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-60-e2x4bjqt7", "isChecked": false }, { "id": "fc-block-24-401ylbliy", "layout": { "id": "204", "description": "이미지와 텍스트 좌/우 스위치", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "imageUrl1", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title1", "type": "text", "description": "title text 1" }, { "name": "content1", "type": "textarea", "description": "content text 1" }, { "name": "imageUrl2", "type": "image", "description": "고정넓이 480, 높이 320 ~ 640" }, { "name": "title2", "type": "text", "description": "title text 2" }, { "name": "content2", "type": "textarea", "description": "content text 2" } ], "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "template": "

;\">\n

\n <% if (imageUrl1 || title1 || content1) { %>\n

\n <% if (imageUrl1) { %>\n

\" alt=\"\" loading=\"lazy\" />\n

\n <% } %>\n

\"><%= title1 %>

\"><%= content1 %>

\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n

\"><%= title2 %>

\"><%= content2 %>

\n <% if (imageUrl2) { %>\n

\" alt=\"\" loading=\"lazy\">\n

\n <% } %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "titleSize": "fc-h3-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202305/071404-914/jp-programming-sekiyuou-program.png", "title2": "使用プログラムについて
ご案内します。 ", "content2": "\n当講座は、以下のツールを使用します。

\n\n[メインツール]
\nHTML
\nCSS
\nJavaScript
\nFigma
\nSourcetree\n" }, "uniqueId": "fc-block-61-4ymmqxi9s", "isChecked": false }, { "id": "fc-block-67-7ntcaf4w2", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "24", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-62-5uf7az3uw", "isChecked": false }, { "id": "fc-block-65-5ek2nzybh", "layout": { "id": "403", "description": "아이콘 가로 가변형 카드", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardType", "type": "select", "description": "card type", "options": [ "row", "column" ] }, { "name": "cardWidth", "type": "number", "description": "480 ~ 980" }, { "name": "useCardLeft", "type": "checkbox", "description": "use card left" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "borderSize", "type": "select", "description": "border size", "options": [ 1, 2 ] }, { "name": "imageUrl", "type": "image", "description": "100 x 100" }, { "name": "imageSize", "type": "text", "description": "20 ~ 100" }, { "name": "fontSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "fontColor", "type": "text", "description": "#000000" }, { "name": "content", "type": "textarea", "description": "content" } ], "values": { "backgroundColor": "", "cardType": "row", "borderColor": "#000000", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#000000", "content": "" }, "template": "

background-color: <%= backgroundColor %><% } %>\">\n

\">\n

\" alt=\"\" style=\"<% if(imageSize) {%> width: <%= imageSize/10 %>rem; height: <%= imageSize/10 %>rem;<% } %>\" loading=\"lazy\">\n <% } %>\n

\" style=\"color: <%= fontColor || '#000000' %>\">\n <%= content %>\n

\n" }, "values": { "backgroundColor": "#f5f5f5", "cardType": "row", "borderColor": "#e0e0e0", "borderSize": 1, "cardWidth": 980, "useCardLeft": false, "cardBackgroundColor": "#e0e0e0", "imageUrl": "", "imageSize": 100, "fontSize": "fc-content-text", "fontColor": "#121212", "content": "\n\n【受講前にご確認ください】\n
\n・本講座はMacの画面で解説をします。Windowsでも学ぶことはできますが、Mac環境での解説になります。
\n・講座内でFigmaを使用しますので、事前にインストールをお願いします。" }, "uniqueId": "fc-block-63-2ky0ogkm0", "isChecked": false }, { "id": "fc-block-23-r34zbsqp0", "layout": { "id": "001", "description": "레이아웃 간격", "icon": "\n", "params": [ { "name": "spacing", "type": "number", "description": "spacing" }, { "name": "backgroundColor", "type": "text", "description": "background color" } ], "values": { "spacing": 10, "backgroundColor": "#ffffff" }, "template": "

rem;\n padding-bottom: <%= spacing/10/2 %>rem;\n background-color: <%= backgroundColor || '#ffffff' %>\">\n

\n" }, "values": { "spacing": "40", "backgroundColor": "#f5f5f5" }, "uniqueId": "fc-block-64-ujjket30t", "isChecked": false }, { "id": "fc-block-68-sfctr9rnu", "layout": { "id": "101", "description": "1단 자유 텍스트", "icon": "\n", "params": [ { "name": "paddingTop", "type": "number", "description": "padding top" }, { "name": "paddingBottom", "type": "number", "description": "padding bottom" }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h1-text", "fc-h2-text", "fc-h3-text", "fc-h4-text", "fc-h5-text", "fc-h6-text", "fc-content-text" ] }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "text", "type": "textarea", "description": "text" } ], "values": { "paddingTop": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize": "fc-h1-text", "textColor": "#000000", "text": "" }, "template": "

background: <%= backgroundColor %>;<% } %> padding-top: <%= paddingTop/10 %>rem; padding-bottom: <%= paddingBottom/10 %>rem\">\n

fc-text-align-center<% } %>\">\n

\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n

\n" }, "values": { "paddingTop": "40", "paddingBottom": "60", "backgroundColor": "#121212", "useTextCenter": false, "textSize": "fc-content-text", "textColor": "#a0a0a0", "text": "返金規定
\n
\n\n \nオンライン講座商品の規定

\n\n\n* 詳細ページ内の一部画像は講座に対する理解を深めるためのイメージです。
\n* 本商品はVOD動画形式の講座を提供するオンライン講座です。
\n* 割引は状況により事前の告知なく終了、延長されることがございます。
\n* 事前予約講座の場合、講義映像は公開日程に応じて順次製作および公開され、1次映像公開日が受講開始日となります。
\n* 決済が完了されますと、マイ講義室を通じてご受講いただけます。

\n\n総学習期間:
\n– 最初の10日間は正常受講期間(有料受講期間と同様)で、無料受講期間は11日から以降無制限であり、有料受講期間と無料受講期間とも同様にご視聴いただけます。
\n– 受講開始日: 受講開始日は決済日から期間が算定され、決済を完了するとマイ講義室からご受講いただけます。（事前予約講座は1次映像公開日が受講開始日となります）
\n– 弊社の都合で受講開始が遅れた場合は、その日程分の受講開始日が延期されます。

\n\n\n

\n \n機器台数制限及びその他のご注意事項

\n\n[Fastcampus ID共有禁止ポリシー］
\nFastcampusのすべてのオンライン講座では、1つのIDで複数の人が共有する形を禁止しています。\n同時接続の記録は内部システムを通じて自動的に累積され、その後のサービス利用が制限される場合があります。\n

\n[著作権ポリシー］
\nFastcampusのすべての講座は、無断で配布・加工する行為、キャプチャと録画して共有する行為、無断で販売する行為など、一切の著作権侵害行為を禁止します。
\n不正使用が見つかった場合、著作権法違反による法的な制裁を受ける可能性があります。
\n

\n \n講座商品のご注意事項

\n\n*本ページ上の情報は弊社の都合により事前の告知なく変更、終了することがございます。予めご了承ください。
\n*講座の返金規定はFastcampusの返金ポリシーに準じます。
\n ▶ 返金ポリシーはこちら" }, "uniqueId": "fc-block-65-b90vk1w8p", "isChecked": false } ]

ゼロから学ぶ実践的なコーディング＆スキルアップ

講座詳細

[Course]Webクリエイター,せきゆおう_사쿠마_Co/JP Details