206

[ { "id": "fc-block-2-amsd14iji", "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": 10, "paddingBottom": 10, "backgroundColor": "", "useTextCenter": false, "textSize1": "fc-h6-text", "textColor1": "#000000", "text1": "\n▼ 01. 항목 작성\n", "textSize2": "fc-content-text", "textColor2": "#000000", "text2": "1) 해당 레이어를 복사하여, 섹션마다 번호+항목으로 정리합니다.\n
\n: 번호를 적으면, 빠르게 피드백이 가능합니다.\n

\n\n2) 해당 섹션의 기획 의도를 적습니다.\n
\n: 어떤 의도로 기획했는지, PM과 의견이 동일한지 확인이 가능합니다.\n

\n\n[3c차 CR 피드백]\n
\n+ 피드백 1\n" }, "hidden": true, "uniqueId": "fc-block-1-su1votqfb", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-30-zlujmsm73", "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": "#000", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/094331-1456/980px-메인.png", "mobileImageUrl": "", "imageWidth": 980, "useNewTab": true, "link": "", "alt": "" }, "hidden": false, "uniqueId": "fc-block-2-rr3y7e6eg", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-buyrfduef", "layout": { "id": "912", "description": "코스 프로모션 배너", "icon": "\n", "params": [ { "name": "코스 프로모션 배너전용입니다.", "type": "reset" } ], "values": { "코스 프로모션 배너전용입니다.": "배너 설정에서 설정해주세요." }, "template": "

코스 프로모션 배너 전용입니다.

\n 0일\n 0시간\n 0분\n 0초\n 코스 프로모션 배너 전용입니다. \n

\n" }, "values": { "코스 프로모션 배너전용입니다.": "배너 설정에서 설정해주세요." }, "uniqueId": "fc-block-3-2lrdh198k", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-1-qheok99kt", "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": "#ab001f", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202206/062818-344/메인최하단-red.png", "mobileImageUrl": "", "imageWidth": "800", "alt": "", "useNewTab": true, "link": "" }, "hidden": true, "uniqueId": "fc-block-4-m6segxl7s", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-9fne2vqf8", "layout": { "id": "903", "description": "타이머", "icon": "\n", "params": [ { "name": "title", "type": "text", "description": "title text" }, { "name": "targetTime", "type": "datetime-local", "description": "yyyy-mm-dd hh:mm" }, { "name": "backgroundColor", "type": "text", "description": "배경색(#000000)을 입력해주세요." }, { "name": "textColor", "type": "select", "description": "글자색을 선택해주세요.", "options": [ "white", "black" ] } ], "values": { "title": "최저 가격 마감까지 남은 시간", "targetTime": "", "backgroundColor": "#282828", "textColor": "white" }, "template": "\n

\">\n

<%=title%>

\n 0일\n 0시간\n 0분\n 0초\n\n <% if (targetTime) { %>\n <%=targetTime %>\n <% } %>\n

\n" }, "values": { "title": "⏰6/26(일) 23:59까지만! 7일 한정판⏰ ", "targetTime": "2022-06-26T23:59", "backgroundColor": "#AB001F", "textColor": "white" }, "hidden": true, "uniqueId": "fc-block-5-a7luap9mj", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-94r8fk3gb", "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": "30", "backgroundColor": "#000000" }, "hidden": true, "uniqueId": "fc-block-6-z39kzjau5", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-3uz53qasl", "layout": { "id": "909", "description": "월 금액 강조 (동적 요소-2)", "icon": "\n", "params": [ { "name": "pointColor", "type": "text", "description": "포인트 컬러" }, { "name": "labelColor", "type": "text", "description": "라벨 컬러" }, { "name": "labels", "type": "list", "description": "라벨 리스트", "maxLength": 20, "params": [ { "name": "labelText", "type": "text", "description": "라벨 내용" } ] }, { "name": "title", "type": "text", "description": "layout head title" }, { "name": "title2", "type": "text", "description": "자동구성을 사용하고 싶지 않으시면 작성해주세요." }, { "name": "content", "type": "text", "description": "내용" }, { "name": "monthlyInstallment", "type": "number", "description": "입력한 값이 할부 개월 수로 적용됩니다." } ], "values": { "pointColor": "#ed2040", "labelColor": "#f9858d", "labels": [ { "labelText": "한번 구매로, 평생 소장하세요." }, { "labelText": "평생소장" }, { "labelText": "최저가" } ], "title": "한번 구매로, 평생 소장하세요.", "title2": "", "content": "조만간 가격이 인상될 예정입니다.
지금 구매하세요!", "monthlyInstallment": 5 }, "template": "

\">\n

; border: 0.1rem solid <%= labelColor%>;\"><%= labelText %>

\n <%= title %>
\n <% if (title2.trim().length !== 0) { %>\n <%= title2 %>
\n <% } else { %>\n (자동 구성) 가격이 인상됩니다. \n <% } %> \n

<%= content %>

\n 정상가\n (자동 구성)\n
\n 할인 금액\n (자동 구성)\n
\n 최종 금액\n (자동 구성)\n
\n ;\"><%= monthlyInstallment %>개월 할부 시\n ;\">\n 월 (자동 구성)원\n \n

; border-color: <%= pointColor %>;\">오늘이 최저가!

;\">

\n" }, "values": { "pointColor": "#AB001F", "labelColor": "#AB001F", "labels": [ { "labelText": "할인특가" }, { "labelText": "한정판매" }, { "labelText": "평생소장" } ], "content": "망설이면 이 가격은 사라집니다.
가장 저렴한 가격으로 지금 구매하세요!", "monthlyInstallment": "12", "title": "최저가로 구매하고 평생소장하세요!", "title2": "" }, "hidden": true, "uniqueId": "fc-block-7-hz3pumm7n", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-81-a3sjmda5c", "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": "30", "backgroundColor": "#000000" }, "hidden": true, "uniqueId": "fc-block-8-ux0mloick", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-yoihzqzmo", "layout": { "id": "901", "description": "월 금액 강조 (동적 요소)", "icon": "\n", "params": [ { "name": "상품 설정 컴포저입니다.", "type": "reset" }, { "name": "showGraph", "type": "checkbox", "description": "그래프 보이기/감추기" }, { "name": "useNewTab", "type": "checkbox", "description": "새창으로 열기" }, { "name": "title", "type": "text", "description": "그래프 제목" }, { "name": "content", "type": "text", "description": "그래프 내용" } ], "values": { "showGraph": false, "useNewTab": false, "title": "제목을 입력해주세요.", "content": "(자동)", "상품 설정 컴포저입니다.": "매칭된 상품의 상세페이지에서 설정해주세요." }, "template": "\"\n data-use-new-tab=\"<%= useNewTab %>\"\n data-chart-title=\"<%= title %>\"\n data-chart-content=\"<%= showGraph ? content : '' %>\"\n>\n

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

\n (자동)
\n 한 번 구매로,
\n 평생 소장하세요.\n

\n
\n
\n
\n
\n
\n
\n
\n 오늘이 최저가!\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<%= title %>
\n
<%= content %>
\n
\n
\n <% } %>\n
\n
\n (자동)\n
\n
\n
\n
\n 정가\n ~~(자동)~~\n
\n
\n 할인 금액\n (자동)\n
\n
\n
\n
\n
\n 현재 판매가\n (자동)\n
\n
\n
(자동)
\n * 12개월 무이자 할부 시\n
\n
\n
\n
\n
\n \n target=\"_blank\" rel=\"noopener noreferrer\" <% } %> class=\"payment-btn\">\n 바로 구매하기\n \n
\n
\n
\n
\n

\n\n" }, "values": { "showGraph": false, "useNewTab": true, "title": "제목을 입력해주세요.", "content": "(자동)", "buttonLabel": "최저가로 수강신청\t", "상품 설정 컴포저입니다.": "매칭된 상품의 상세페이지에서 설정해주세요." }, "uniqueId": "fc-block-9-pa83pxogj", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-79-agllo6exz", "layout": { "id": "303", "description": "1단, 2단 카드형 동영상과 텍스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "fontColor", "type": "text", "description": "font color" }, { "name": "titleSize", "type": "select", "description": "title size", "options": [ "fc-h4-text", "fc-h5-text", "fc-h6-text" ] }, { "name": "contentSize", "type": "select", "description": "content size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "videoPlatformType1", "type": "select", "description": "videoPlatformType1", "options": [ "Youtube", "Vimeo" ] }, { "name": "video1", "type": "video", "description": "video1" }, { "name": "title1", "type": "textarea", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "videoPlatformType2", "type": "select", "description": "videoPlatformType2", "options": [ "Youtube", "Vimeo" ] }, { "name": "video2", "type": "video", "description": "video2" }, { "name": "title2", "type": "textarea", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "videoPlatformType3", "type": "select", "description": "videoPlatformType3", "options": [ "Youtube", "Vimeo" ] }, { "name": "video3", "type": "video", "description": "video3" }, { "name": "title3", "type": "textarea", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content text" } ], "values": { "backgroundColor": "", "fontColor": "#000000", "titleSize": "fc-h4-text", "contentSize": "fc-h6-text", "videoPlatformType1": "Youtube", "video1": "", "title1": "", "content1": "", "videoPlatformType2": "Youtube", "video2": "", "title2": "", "content2": "", "videoPlatformType3": "Youtube", "video3": "", "title3": "", "content3": "" }, "template": "
background-color: <%= backgroundColor %><% } %>\">\n
\">\n
vbox <% } else { %> hbox <% } %>fc-cards\">\n <% if (video1 || title1 || content1) { %>\n
\n <% if (video1) { %>\n
\n <% if (videoPlatformType1 === 'Youtube') { %>\n \" frameborder=\"0\">\n <% } else { %>\n \" frameborder=\"0\">\n <% } %>\n
\n <% } %>\n <% if (title1 || content1) { %>\n
\n
\"><%= title1 %>
\n
\"><%= content1 %>
\n
\n <% } %>\n
\n <% } %>\n <% if ((video2 || title2 || content2) && (!video3 && !title3 && !content3)) { %>\n
\n <% if (video2) { %>\n
\n <% if (videoPlatformType2 === 'Youtube') { %>\n \" frameborder=\"0\">\n <% } else { %>\n \" frameborder=\"0\">\n <% } %>\n
\n <% } %>\n <% if (title2 || content2) { %>\n
\n
\"><%= title2 %>
\n
\"><%= content2 %>
\n
\n <% } %>\n
\n <% } %>\n <% if (video3 || title3 || content3) { %>\n
\n
\n <% if (video2) { %>\n
\n <% if (videoPlatformType2 === 'Youtube') { %>\n \" frameborder=\"0\">\n <% } else { %>\n \" frameborder=\"0\">\n <% } %>\n
\n <% } %>\n <% if (title2 || content2) { %>\n
\n
\"><%= title2 %>
\n
\"><%= content2 %>
\n
\n <% } %>\n
\n
\n <% if (video3) { %>\n
\n <% if (videoPlatformType3 === 'Youtube') { %>\n \" frameborder=\"0\">\n <% } else { %>\n \" frameborder=\"0\">\n <% } %>\n
\n <% } %>\n <% if (title3 || content3) { %>\n
\n
\"><%= title3 %>
\n
\"><%= content3 %>
\n
\n <% } %>\n
\n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#222222", "fontColor": "#000000", "titleSize": "fc-h6-text", "contentSize": "fc-content-text", "videoPlatformType1": "Youtube", "video1": "vQt-iRSSmIQ", "title1": "데이터가 어떻게 비즈니스의 가치가 될 수 있을까", "content1": "데이터 사이언티스트 하용호가 들려주는 실무 데이터 사이언스 이야기", "videoPlatformType2": "Youtube", "video2": "", "title2": "", "content2": "", "videoPlatformType3": "Youtube", "video3": "", "title3": "", "content3": "" }, "hidden": true, "uniqueId": "fc-block-10-5w9ibnzny", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-qggwr4v11", "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": "80", "backgroundColor": "#222222" }, "uniqueId": "fc-block-11-34qlawo1d", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-1-n00hk5ns9", "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 \" frameborder=\"0\">\n <% } else { %>\n \" frameborder=\"0\">\n <% } %>\n <% } %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#222222", "useVideoLeft": false, "videoPlatformType": "Youtube", "videoWidth": 980, "video": "Rxf2lmwB3gE" }, "uniqueId": "fc-block-12-9gw8le8fa", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-80-aohuc5xl2", "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": "80", "backgroundColor": "#222222" }, "uniqueId": "fc-block-13-3yb2vem3g", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-82-9a1dqfi15", "layout": { "id": "104", "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": "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": "text 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": "", "backgroundColorOpacity": 50, "backgroundImageUrl": "", "mobileBackgroundImageUrl": "", "textColor": "#000000", "textSize1": "fc-content-text", "text1": "", "textSize2": "fc-content-text", "text2": "" }, "template": "
rem; padding-bottom: <%=paddingBottom/10%>rem;\">\n
\n
\">\n
\">\n <%= text1 %>\n
\n
\">\n <%= text2 %>\n
\n
\n
\n
background: <%= backgroundColor %>; <% } %>opacity: <%= backgroundColorOpacity/100 %>\">
\n \n \" />\n \" />\n \" alt=\"\" loading=\"lazy\">\n \n
\n" }, "values": { "paddingTop": "80", "paddingBottom": "80", "backgroundColor": "", "backgroundColorOpacity": "50", "backgroundImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/144200-472/section-2-web-.png", "mobileBackgroundImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/144206-472/section-2-mobile-.png", "textColor": "#e6e8eb", "textSize1": "fc-content-text", "text1": "“20年間HTML/CSSに集中した開発者”\n

\n学びやすいと思えば、簡単な問題のみ解決できます。より高いレベルの問題を見つけて挑戦し、より価値のあることに時間を費やしてください。\n

\nCSSは、仕様を深く理解できない状態でブラウザのバグまで遭遇すると、非常に難しく感じます。それでもHTML/CSSは、最初に一度学んでおけば必要ないと考える場合がありますよね。本当に知っておくべきウェブパフォーマンス、検索エンジン最適化、ウェブアクセシビリティについては、あまり理解していません。\n\n

\n開発者は実務でさまざまな問題に直面しますが、現場で問題を解決することは文法以外の知識も必要です。この講座では、徹底的に実務で直面する可能性のある問題を中心にまとめ、実際に問題を解決した事例を合わせて取り上げました。経験豊富な20年目の実務者が後輩たちに伝えたい重要な内容です。\n\n

\nby チョン・チャンミョン", "textSize2": "fc-content-text", "text2": "" }, "uniqueId": "fc-block-14-ehaq1h3tu", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-1gv4546nj", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "paddingTop": "80", "paddingBottom": 10, "labelText": "View Point", "layoutType": "fc-label-type2", "labelColor": "#ab001f" }, "uniqueId": "fc-block-15-s3up79i4n", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-7-wj8ru501j", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "5", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#e6e8eb", "text": "\n開発者が探していたHTML/CSS応用講座！\n" }, "uniqueId": "fc-block-16-w6nj3anzh", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-qbh85cfe0", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h6-text", "textColor": "#e6e8eb", "text": "文法だけに埋没してはならない\n\n" }, "uniqueId": "fc-block-17-20srg4adm", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-7demxvc2e", "layout": { "id": "407", "description": "리뷰용별점카드(평면)", "icon": "\n", "params": [ { "name": "cardType", "type": "select", "description": "card type", "options": [ "type1", "type2" ] }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "cardBorderColor", "type": "text", "description": "card border color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "useAvatarIcon", "type": "checkbox", "description": "use avatar icon" }, { "name": "imageSize", "type": "number", "description": "70 ~ 100" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "buttonColor", "type": "text", "description": "button color" }, { "name": "buttonTextColor", "type": "text", "description": "button text color" }, { "name": "imageUrl1", "type": "image", "description": "20~100" }, { "name": "starRatingCount1", "type": "number", "description": "0, 0.5, 1, 1.5, 2, 2.5 ~ 5" }, { "name": "title1", "type": "text", "description": "title text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "link1", "type": "text", "description": "link" }, { "name": "buttonLabel1", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "imageUrl2", "type": "image", "description": "20~100" }, { "name": "starRatingCount2", "type": "number", "description": "0, 0.5, 1, 1.5, 2, 2.5 ~ 5" }, { "name": "title2", "type": "text", "description": "title text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "link2", "type": "text", "description": "link" }, { "name": "buttonLabel2", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "imageUrl3", "type": "image", "description": "20~100" }, { "name": "starRatingCount3", "type": "number", "description": "0, 0.5, 1, 1.5, 2, 2.5 ~ 5" }, { "name": "title3", "type": "text", "description": "title text" }, { "name": "content3", "type": "textarea", "description": "content text" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "link3", "type": "text", "description": "link" }, { "name": "buttonLabel3", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" } ], "values": { "cardType": "type1", "backgroundColor": "#f0f0f0", "cardBackgroundColor": "#ffffff", "cardBorderColor": "#ffffff", "useTextCenter": false, "useAvatarIcon": true, "imageSize": 100, "textColor": "#000000", "buttonColor": "#ff7450", "buttonTextColor": "#ffffff", "imageUrl1": "", "starRatingCount1": 5, "title1": "", "content1": "", "useNewTab1": true, "link1": "", "buttonLabel1": "", "imageUrl2": "", "starRatingCount2": 5, "title2": "", "content2": "", "useNewTab2": true, "link2": "", "buttonLabel2": "", "imageUrl3": "", "starRatingCount3": 5, "title3": "", "content3": "", "useNewTab3": true, "link3": "", "buttonLabel3": "" }, "template": "
;\">\n
<%= useAvatarIcon ? 'use-avatar-icon' : '' %>\">\n
\n <% if(imageUrl1 || buttonLabel1 || starRatingCount1 || title1 || content1) { %>\n
; border: 0.1rem solid <%= cardBorderColor || '#ffffff' %>;\">\n
\n
rem; height: <%= imageSize/10 || 10%>rem; border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% if (imageUrl1) {%>\n \" alt=\"\" loading=\"lazy\" style=\"border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% } else { %>\n
\n <% } %>\n
\n <% if(buttonLabel1) { %>\n
\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel1 %>\n
\n <% } %>\n
\n
; color: <%= textColor || '#000000' %>;\">\n <% if (Number(starRatingCount1) > 0) { %>\n
\n
\n <% for (let i = 1; i <= 5; i++) { %>\n <% if (i <= Number(starRatingCount1)) { %>\n \n <% } else { %>\n <% if((i-0.5) === Number(starRatingCount1)) { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n <% } %>\n
\n
\n <% } %>\n
<%= title1 %>
\n
<%= content1 %>
\n <% if(buttonLabel1) { %>\n
\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel1 %>\n
\n <% } %>\n
\n
\n <% } %>\n <% if(imageUrl2 || buttonLabel2 || starRatingCount2 || title2 || content2) { %>\n
; border: 0.1rem solid <%= cardBorderColor || '#ffffff' %>;\">\n
\n
rem; height: <%= imageSize/10 || 10%>rem; border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% if (imageUrl2) {%>\n \" alt=\"\" loading=\"lazy\" style=\"border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% } else { %>\n
\n <% } %>\n
\n <% if(buttonLabel2) { %>\n
\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel2 %>\n
\n <% } %>\n
\n
; color: <%= textColor || '#000000' %>;\">\n <% if (Number(starRatingCount2) > 0) { %>\n
\n
\n <% for (let i = 1; i <= 5; i++) { %>\n <% if (i <= Number(starRatingCount2)) { %>\n \n <% } else { %>\n <% if((i-0.5) === Number(starRatingCount2)) { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n <% } %>\n
\n
\n <% } %>\n
<%= title2 %>
\n
<%= content2 %>
\n <% if(buttonLabel2) { %>\n
\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel2 %>\n
\n <% } %>\n
\n
\n <% } %>\n <% if(imageUrl3 || buttonLabel3 || starRatingCount3 || title3 || content3) { %>\n
; border: 0.1rem solid <%= cardBorderColor || '#ffffff' %>;\">\n
\n
rem; height: <%= imageSize/10 || 10%>rem; border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% if (imageUrl3) {%>\n \" alt=\"\" loading=\"lazy\" style=\"border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% } else { %>\n
\n <% } %>\n
\n <% if(buttonLabel3) { %>\n
\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel3 %>\n
\n <% } %>\n
\n
; color: <%= textColor || '#000000' %>;\">\n <% if (Number(starRatingCount3) > 0) { %>\n
\n
\n <% for (let i = 1; i <= 5; i++) { %>\n <% if (i <= Number(starRatingCount3)) { %>\n \n <% } else { %>\n <% if((i-0.5) === Number(starRatingCount3)) { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n <% } %>\n
\n
\n <% } %>\n
<%= title3 %>
\n
<%= content3 %>
\n <% if(buttonLabel3) { %>\n
\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel3 %>\n
\n <% } %>\n
\n
\n <% } %>\n
\n
\n
\n" }, "values": { "cardType": "type1", "backgroundColor": "#000", "cardBackgroundColor": "#222", "cardBorderColor": "#222", "useTextCenter": false, "useAvatarIcon": true, "imageSize": "50", "textColor": "#fff", "buttonColor": "#ff7450", "buttonTextColor": "#ffffff", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/225142-199/200710-the-red-bi-26.png", "starRatingCount1": "", "title1": "HTML/CSS文法に埋没しない柔軟な思考", "content1": "\n実際に現場で直面する問題や解決策などが
\nクリップに用意されています。", "useNewTab1": true, "link1": "", "buttonLabel1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/225148-199/200710-the-red-bi-27.png", "starRatingCount2": "", "title2": "ウェブサイトのパフォーマンス向上", "content2": "CSSコード最適化、レンダリング時間短縮、画像最適化、分岐、プリローディング技術を見ていきます。", "useNewTab2": true, "link2": "", "buttonLabel2": "", "imageUrl3": "", "starRatingCount3": "", "title3": "", "content3": "", "useNewTab3": true, "link3": "", "buttonLabel3": "" }, "hidden": false, "uniqueId": "fc-block-18-qkq4xvjm6", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-16-4bixnkv5n", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-19-fhw9gqrjn", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-k92jwrqta", "layout": { "id": "407", "description": "리뷰용별점카드(평면)", "icon": "\n", "params": [ { "name": "cardType", "type": "select", "description": "card type", "options": [ "type1", "type2" ] }, { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "cardBorderColor", "type": "text", "description": "card border color" }, { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "name": "useAvatarIcon", "type": "checkbox", "description": "use avatar icon" }, { "name": "imageSize", "type": "number", "description": "70 ~ 100" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "buttonColor", "type": "text", "description": "button color" }, { "name": "buttonTextColor", "type": "text", "description": "button text color" }, { "name": "imageUrl1", "type": "image", "description": "20~100" }, { "name": "starRatingCount1", "type": "number", "description": "0, 0.5, 1, 1.5, 2, 2.5 ~ 5" }, { "name": "title1", "type": "text", "description": "title text" }, { "name": "content1", "type": "textarea", "description": "content text" }, { "name": "useNewTab1", "type": "checkbox", "description": "" }, { "name": "link1", "type": "text", "description": "link" }, { "name": "buttonLabel1", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "imageUrl2", "type": "image", "description": "20~100" }, { "name": "starRatingCount2", "type": "number", "description": "0, 0.5, 1, 1.5, 2, 2.5 ~ 5" }, { "name": "title2", "type": "text", "description": "title text" }, { "name": "content2", "type": "textarea", "description": "content text" }, { "name": "useNewTab2", "type": "checkbox", "description": "" }, { "name": "link2", "type": "text", "description": "link" }, { "name": "buttonLabel2", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" }, { "name": "imageUrl3", "type": "image", "description": "20~100" }, { "name": "starRatingCount3", "type": "number", "description": "0, 0.5, 1, 1.5, 2, 2.5 ~ 5" }, { "name": "title3", "type": "text", "description": "title text" }, { "name": "content3", "type": "textarea", "description": "content text" }, { "name": "useNewTab3", "type": "checkbox", "description": "" }, { "name": "link3", "type": "text", "description": "link" }, { "name": "buttonLabel3", "type": "text", "description": "버튼 텍스트 운영 규칙 : 12자 이내로 작성해야함" } ], "values": { "cardType": "type1", "backgroundColor": "#f0f0f0", "cardBackgroundColor": "#ffffff", "cardBorderColor": "#ffffff", "useTextCenter": false, "useAvatarIcon": true, "imageSize": 100, "textColor": "#000000", "buttonColor": "#ff7450", "buttonTextColor": "#ffffff", "imageUrl1": "", "starRatingCount1": 5, "title1": "", "content1": "", "useNewTab1": true, "link1": "", "buttonLabel1": "", "imageUrl2": "", "starRatingCount2": 5, "title2": "", "content2": "", "useNewTab2": true, "link2": "", "buttonLabel2": "", "imageUrl3": "", "starRatingCount3": 5, "title3": "", "content3": "", "useNewTab3": true, "link3": "", "buttonLabel3": "" }, "template": "
;\">\n
<%= useAvatarIcon ? 'use-avatar-icon' : '' %>\">\n
\n <% if(imageUrl1 || buttonLabel1 || starRatingCount1 || title1 || content1) { %>\n
; border: 0.1rem solid <%= cardBorderColor || '#ffffff' %>;\">\n
\n
rem; height: <%= imageSize/10 || 10%>rem; border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% if (imageUrl1) {%>\n \" alt=\"\" loading=\"lazy\" style=\"border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% } else { %>\n
\n <% } %>\n
\n <% if(buttonLabel1) { %>\n
\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel1 %>\n
\n <% } %>\n
\n
; color: <%= textColor || '#000000' %>;\">\n <% if (Number(starRatingCount1) > 0) { %>\n
\n
\n <% for (let i = 1; i <= 5; i++) { %>\n <% if (i <= Number(starRatingCount1)) { %>\n \n <% } else { %>\n <% if((i-0.5) === Number(starRatingCount1)) { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n <% } %>\n
\n
\n <% } %>\n
<%= title1 %>
\n
<%= content1 %>
\n <% if(buttonLabel1) { %>\n
\n \" <% if(useNewTab1) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel1 %>\n
\n <% } %>\n
\n
\n <% } %>\n <% if(imageUrl2 || buttonLabel2 || starRatingCount2 || title2 || content2) { %>\n
; border: 0.1rem solid <%= cardBorderColor || '#ffffff' %>;\">\n
\n
rem; height: <%= imageSize/10 || 10%>rem; border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% if (imageUrl2) {%>\n \" alt=\"\" loading=\"lazy\" style=\"border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% } else { %>\n
\n <% } %>\n
\n <% if(buttonLabel2) { %>\n
\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel2 %>\n
\n <% } %>\n
\n
; color: <%= textColor || '#000000' %>;\">\n <% if (Number(starRatingCount2) > 0) { %>\n
\n
\n <% for (let i = 1; i <= 5; i++) { %>\n <% if (i <= Number(starRatingCount2)) { %>\n \n <% } else { %>\n <% if((i-0.5) === Number(starRatingCount2)) { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n <% } %>\n
\n
\n <% } %>\n
<%= title2 %>
\n
<%= content2 %>
\n <% if(buttonLabel2) { %>\n
\n \" <% if(useNewTab2) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel2 %>\n
\n <% } %>\n
\n
\n <% } %>\n <% if(imageUrl3 || buttonLabel3 || starRatingCount3 || title3 || content3) { %>\n
; border: 0.1rem solid <%= cardBorderColor || '#ffffff' %>;\">\n
\n
rem; height: <%= imageSize/10 || 10%>rem; border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% if (imageUrl3) {%>\n \" alt=\"\" loading=\"lazy\" style=\"border-radius: <%= imageSize/10 || 10 %>rem;\">\n <% } else { %>\n
\n <% } %>\n
\n <% if(buttonLabel3) { %>\n
\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel3 %>\n
\n <% } %>\n
\n
; color: <%= textColor || '#000000' %>;\">\n <% if (Number(starRatingCount3) > 0) { %>\n
\n
\n <% for (let i = 1; i <= 5; i++) { %>\n <% if (i <= Number(starRatingCount3)) { %>\n \n <% } else { %>\n <% if((i-0.5) === Number(starRatingCount3)) { %>\n \n <% } else { %>\n \n <% } %>\n <% } %>\n <% } %>\n
\n
\n <% } %>\n
<%= title3 %>
\n
<%= content3 %>
\n <% if(buttonLabel3) { %>\n
\n \" <% if(useNewTab3) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"background-color: <%= buttonColor || '#ff7450' %>; color: <%= buttonTextColor || '#ffffff' %>\"><%= buttonLabel3 %>\n
\n <% } %>\n
\n
\n <% } %>\n
\n
\n
\n" }, "values": { "cardType": "type1", "backgroundColor": "#000", "cardBackgroundColor": "#222222", "cardBorderColor": "#222", "useTextCenter": false, "useAvatarIcon": true, "imageSize": "50", "textColor": "#fff", "buttonColor": "#ff7450", "buttonTextColor": "#ffffff", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/225158-199/200710-the-red-bi-28.png", "starRatingCount1": "", "title1": "仕様による問題解決力の向上", "content1": "実務者が必ず知っておくべき仕様を調べ、\n仕様を読む方法を学びます。\n", "useNewTab1": true, "link1": "", "buttonLabel1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/225203-199/200710-the-red-bi-29.png", "starRatingCount2": "", "title2": "多様なウェブ標準とウェブアクセシビリティ\nに関する戦略", "content2": "階層や構造、多様な方法論を学び、状況に応じた\n開発計画を立てることができます。", "useNewTab2": true, "link2": "", "buttonLabel2": "", "imageUrl3": "", "starRatingCount3": "", "title3": "", "content3": "", "useNewTab3": true, "link3": "", "buttonLabel3": "" }, "hidden": false, "uniqueId": "fc-block-20-351xt2piw", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-m3danv60u", "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": "#000000" }, "uniqueId": "fc-block-21-1s1ows1u3", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-7-uoi1dlovc", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#000000", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/143935-1456/sc-4.png", "mobileImageUrl": "", "imageWidth": "750", "alt": "", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-22-a537q54sa", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-oecdrfabr", "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": "20", "backgroundColor": "#000" }, "hidden": false, "uniqueId": "fc-block-24-9eaggciry", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-11-f5xtmzcf6", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#000000", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/232753-1456/sc-4-1.png", "mobileImageUrl": "", "imageWidth": "980", "alt": "", "useNewTab": true, "link": "" }, "hidden": false, "uniqueId": "fc-block-25-8p53ghern", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-13-ce34dq53q", "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": "20", "backgroundColor": "#000" }, "hidden": false, "uniqueId": "fc-block-26-3d8siajk0", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-ztm07fgjb", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#000000", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/232759-1456/sc-4-2.png", "mobileImageUrl": "", "imageWidth": "980", "alt": "", "useNewTab": true, "link": "" }, "hidden": false, "uniqueId": "fc-block-27-6v3w850av", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-j989p3t0o", "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": "80", "backgroundColor": "#000" }, "hidden": false, "uniqueId": "fc-block-28-70vv9mhkz", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-dzbiym33e", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#f2f2f2", "paddingTop": "80", "paddingBottom": "20", "labelText": "The Red Story", "layoutType": "fc-label-type2", "labelColor": "#ab001f" }, "hasSyntaxErrorTags": false, "uniqueId": "fc-block-1-f74aq5feo", "isChecked": false }, { "id": "fc-block-79-75n7qs5o7", "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
\n
\n <% if (imageUrl1 || title1 || content1) { %>\n
\n <% if (imageUrl1) { %>\n
\n \" alt=\"\" loading=\"lazy\" />\n
\n <% } %>\n
\n
\"><%= title1 %>
\n
\"><%= content1 %>
\n
\n
\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n
\n
\n
\"><%= title2 %>
\n
\"><%= content2 %>
\n
\n <% if (imageUrl2) { %>\n
\n \" alt=\"\" loading=\"lazy\">\n
\n <% } %>\n
\n <% } %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#f2f2f2", "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135248-472/정찬명-강사님-누끼-3.png", "title1": "チョン・チャンミョンのパフォーマンスとユーザビリティの改善事例 ", "content1": "最近では、JPEGよりも圧縮率が優れており、原本に近いクオリティを維持する優れた画像フォーマットが登場しました。それがWebPとAVIFフォーマットです。しかし、Internet ExplorerはWebPフォーマットに対応しておらず、AVIFフォーマットは現在のところChromeブラウザのみ対応しています。

レジンコミックスはコンテンツに多くの画像を使用しているため、この問題に関心を持っていました。そのため、早くからWebPフォーマットに対応し始めました。しかし、Internet Explorerにも対応する必要があったため、WebPとJPEGの両方に対応しなければなりませんでした。

ブラウザの対応状況に合わせて必要な画像をダウンロードし、レンダリングできる技術が求められる中で、この問題を解決してくれるHTML要素はpicture要素であり、CSS値に使用できる仕様はimage-set()関数です。ブラウザの対応状況に合わせて最も容量の少ない画像をレンダリングするため、パフォーマンスが劇的に向上しました。この事例は、パフォーマンスとユーザビリティの両方を改善した最高の事例だと言えますね。", "imageUrl2": "", "title2": "", "content2": "" }, "uniqueId": "fc-block-32-jdj407kmx", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-71-l8pu3gc7x", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#f2f2f2", "paddingTop": "40", "paddingBottom": "20", "labelText": "To be", "layoutType": "fc-label-type2", "labelColor": "#ab001f" }, "uniqueId": "fc-block-31-cyqpqsre8", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-77-8dcqe7038", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#f2f2f2", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#000000", "text": "\nコンポーザーで内容を入力してください\n
\n" }, "uniqueId": "fc-block-33-hazmktj02", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-6sdmsgaiy", "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
\n
\n" }, "values": { "backgroundColor": "#f2f2f2", "textColor": "#000", "buttonColor": "#f2f2f2", "buttonTextColor": "#f2f2f2", "useTextCenter": false, "useColumnInMobile": false, "titleSize": "fc-h6-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/102411-1456/bulb-1.png", "title1": "", "content1": "\n 標準仕様に基づいてコードを作成すると、長期間持続可能なコードを書くことができます。\n\n", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/102427-1456/bulb-2.png", "title2": "", "content2": "\n 単純なウェブサイトの実装を超え、パフォーマンスや構造を改善できるようになります。\n\n", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/102437-1456/bulb-3.png", "title3": "", "content3": "\n よく発生するエラー！実際の事例と実務の状況で柔軟に解決するノウハウを得ることができます。\n\n", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/102441-1456/bulb-4.png", "title4": "", "content4": "\n インターネットではなかなか接することのできない内容で、
\n 検索エンジンに好かれるウェブサイトを作れるようになります。\n\n", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "uniqueId": "fc-block-34-4kdygdfly", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-16-vtwvf5tjh", "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": "80", "backgroundColor": "#f2f2f2" }, "uniqueId": "fc-block-36-h0r6kc9ec", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-74-4rm1ky3te", "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
\n
\n" }, "values": { "backgroundColor": "#000", "textColor": "#e6e8eb", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": true, "useColumnInMobile": false, "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/184140-371/02.-metadata---seo.pptx.jpg", "title1": "테스트", "content1": "HTML과 CSS가 분리되어 유지보수에 들어가는 시간이 단축되고, 불필요한 마크업이 최소화되어 페이지 로딩속도가 향상된다.\n", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/184149-371/17.-lcp-largest-contentful-paint-.pptx.jpg", "title2": "테스트", "content2": "논리적이고 효율적으로 작성된 웹 문서는 코드의 양이 줄어 파일 크기가 줄고 서버부담의 감소로 이어질 수 있다.\n또 많은 오류들이 명세로 쉽게 해결된다.", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/184157-371/19.-wcag-2.x.pptx--1-.jpg", "title3": "테스트", "content3": "시각장애인 정보접근 차별로 인한 쇼핑몰을 상대로 배상을 지급하라는 법원 판례가 있다!", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "hidden": true, "uniqueId": "fc-block-37-tuem0hk36", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-11-6o4fugcgk", "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": "80", "backgroundColor": "#000" }, "uniqueId": "fc-block-38-octu32tpg", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-80-2cgtddkuk", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#000", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202411/232915-1456/sc-6.png", "mobileImageUrl": "", "imageWidth": "750", "alt": "", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-39-7d5fu7ub4", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-659ptwuss", "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": "35", "backgroundColor": "#000" }, "uniqueId": "fc-block-40-90b6mgltk", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-7gl4k2mrw", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "
\">\n
\n
<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n
\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n
\">\n
\n
\"><%= title || '' %>
\n
\"><%= content || '' %>
\n
\n
\n
\n
\n
\n" }, "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#000", "textColor": "#e6e8eb", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/202813-472/1.png", "imageWidth": 480, "title": "Part.1", "content": "▫️実務でよく使用するHTMLタグの属性について、状況に応じた正しい使い方を学びます。 

▫️️今回の講座では、検索エンジン最適化のスコアを確認できるツールの使い方を学び、ビジネスを表現しながら適切なタイトル値を指定する方法を学ぶことができます。" }, "uniqueId": "fc-block-41-430hz5sh6", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-3e38w2rps", "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": "35", "backgroundColor": "#000" }, "uniqueId": "fc-block-42-uaaa7jmdy", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-oqkc29y8y", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "
\">\n
\n
<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n
\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n
\">\n
\n
\"><%= title || '' %>
\n
\"><%= content || '' %>
\n
\n
\n
\n
\n
\n" }, "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#000", "textColor": "#e6e8eb", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/202807-472/2.png", "imageWidth": 480, "title": "Part.2", "content": "▫️️チョン・チャンミョンが厳選したUI開発の実務で必ず知っておくべきCSSプロパティと標準仕様を通じて、エラーを解決する方法を学びます。\n

▫️️外見上は同じに見えるかもしれませんが、論理的かつ効率的に書かれたコードは、ウェブパフォーマンスを改善することができます。

▫️大規模なウェブサイトで同僚と円滑に協業し、容易な維持保守を助けるBEMの正しい適用方法を見ていきます。" }, "uniqueId": "fc-block-43-eissq5uqp", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-mz6kj5rn5", "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": "35", "backgroundColor": "#000" }, "uniqueId": "fc-block-44-0snmtvn6t", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-6sayj5ntn", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "
\">\n
\n
<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n
\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n
\">\n
\n
\"><%= title || '' %>
\n
\"><%= content || '' %>
\n
\n
\n
\n
\n
\n" }, "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#000", "textColor": "#e6e8eb", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/110642-472/sc-6-3.png", "imageWidth": 480, "title": "Part.3", "content": "▫️画像が多いページほど、画像フォーマットやローディング順序についての考慮が必要です。

▫️️2.5秒以内に重要な情報をレンダリングすることで、顧客の離脱率を下げ、検索エンジンから良いスコアを得ることができます。

▫️ページで視覚的要素を担当する重要な画像は、ローディングが遅れるほど顧客体験が悪化します。\n

▫️️LCPを改善して超高速ウェブサイトに生まれ変わるノウハウを、The Redでご確認ください。" }, "hidden": false, "uniqueId": "fc-block-45-u8nwo8n8s", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-15-4vs0pz4gp", "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": "35", "backgroundColor": "#000" }, "uniqueId": "fc-block-46-7i5w34wua", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-5b5og9ep6", "layout": { "id": "206", "description": "좌/우 이미지와 텍스트", "icon": "\n", "params": [ { "name": "reverseColumn", "type": "checkbox", "description": "-" }, { "name": "textVerticalAlign", "type": "select", "description": "-", "options": [ "top", "center" ] }, { "name": "backgroundColor", "type": "text", "description": "-" }, { "name": "textColor", "type": "text", "description": "-" }, { "name": "titleSize", "type": "select", "description": "-", "options": [ "text--h5", "text--h6" ] }, { "name": "contentSize", "type": "select", "description": "-", "options": [ "text--h6", "text--content1" ] }, { "name": "imageUrl", "type": "image", "description": "-" }, { "name": "imageWidth", "type": "number", "description": "~720" }, { "name": "title", "type": "text", "description": "-" }, { "name": "content", "type": "text", "description": "-" } ], "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#ffffff", "textColor": "#000000", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "", "imageWidth": 480, "title": "", "content": "" }, "template": "
\">\n
\n
<%= textVerticalAlign === 'center' ? ' container__body--center-within-column' : ''%>\">\n
\" style=\"width: <%= imageWidth/10 %>rem\">\n <% if (imageUrl) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n
\">\n
\n
\"><%= title || '' %>
\n
\"><%= content || '' %>
\n
\n
\n
\n
\n
\n" }, "values": { "reverseColumn": false, "textVerticalAlign": "top", "backgroundColor": "#000", "textColor": "#e6e8eb", "titleSize": "text--h5", "contentSize": "text--h6", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/202745-472/4.png", "imageWidth": 480, "title": "Part.4", "content": "▫️よく発生するアクセシビリティのエラー12種類を見て、ウェブアクセシビリティガイドラインを正しく適用する方法を見ていきます。

▫️すべての画像や要素に代替テキストが必要なわけではありません。

▫️️Appleがアクセシビリティに投資する理由は、最終的にユーザー体験を向上させるためです。" }, "uniqueId": "fc-block-47-llya92hdy", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-11-9lvb62pvm", "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": "80", "backgroundColor": "#000" }, "uniqueId": "fc-block-48-z34f7j99j", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-bg9zlgfyi", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "30", "paddingBottom": "20", "backgroundColor": "#f2f2f2", "useTextCenter": true, "textSize": "fc-h3-text", "textColor": "#000", "text": "\n \n앞으로 더욱 중요해지는 웹 접근성\n
\n\n" }, "hidden": true, "uniqueId": "fc-block-49-90csqtbjd", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-giqbjtst0", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#e6e8eb", "text": "\n당신의 시야를 확장시킬
\n정찬명의 이야기를 The Red에서 만나보세요\n" }, "hidden": true, "uniqueId": "fc-block-50-nec9wcoqm", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-14-f7x1z2ysm", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "paddingTop": "10", "paddingBottom": 10, "labelText": "Point 01", "layoutType": "fc-label-type1", "labelColor": "#d3ab7b" }, "hidden": true, "uniqueId": "fc-block-51-02n78ur7t", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-75wwz1vpx", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#e6e8eb", "text1": "디자인이 중요하다면 더 중요한 건 웹 성능", "textSize2": "fc-content-text", "textColor2": "#e6e8eb", "text2": "자동차로 예를 들어 보겠습니다. 소비자들은 처음에는 자동차의 디자인을 보고 관심을 갖지만 자동차 산업에서 투자비용이 가장 많이 드는 건 디자인이 아니라 엔진, 미션, 배터리 등의 성능 개발입니다. 웹 사이트도 마찬가지입니다.\n" }, "hidden": true, "uniqueId": "fc-block-52-01ns5o9gd", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-16-prhem5pd0", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "paddingTop": "10", "paddingBottom": 10, "labelText": "Point 02", "layoutType": "fc-label-type1", "labelColor": "#d3ab7b" }, "hidden": true, "uniqueId": "fc-block-53-4krf28dyt", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-c6cuuhdmp", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#e6e8eb", "text1": "느린 웹사이트는 이탈율이 2배 이상 증가", "textSize2": "fc-content-text", "textColor2": "#e6e8eb", "text2": "비즈니스의 목적은 성공입니다. 같은 의미로 플랫폼의 승패는 사람에게서 결정됩니다. 여러분은 웹 사이트가 느린 경우 기다리지 못하고 이탈했던 경험을 기억할 겁니다\n" }, "hidden": true, "uniqueId": "fc-block-54-h1jb3dh2c", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-17-up6onf67d", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#e6e8eb", "text1": "문제를 해결하며 성장한다", "textSize2": "fc-content-text", "textColor2": "#e6e8eb", "text2": "UI 개발자들은 실무에서 많은 문제를 접합니다. 기술적인 문제보다는 주로 구조적일 때가 많습니다. 명세만 보면 쉽게 해결될 수 있는 것들인데 명세 보는법을 몰라 어려움을 겪는분들이 많습니다. 이번에 평생 써먹을 수 있는 명세 보는법을 배우시길 바랍니다.\n" }, "hidden": true, "uniqueId": "fc-block-55-46ylimolp", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-6l9nlg5sq", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "paddingTop": "10", "paddingBottom": 10, "labelText": "Point 03", "layoutType": "fc-label-type1", "labelColor": "#d3ab7b" }, "hidden": true, "uniqueId": "fc-block-56-z2zqh41sg", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-15-pka3vzb6l", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#e6e8eb", "text1": "UI개발자는 비즈니스의 핵심인물", "textSize2": "fc-content-text", "textColor2": "#e6e8eb", "text2": "마케팅이 사람을 부르고, 기획팀이 소비자에게 제공하는 재화 또는 서비스를 구성한다면 UI개발자는 모든 프로세스에서 편의성을 제공하는 사람입니다 " }, "hidden": true, "uniqueId": "fc-block-57-vbwnxu0fm", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-9-bduc3fwcc", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#e6e8eb", "text1": "모두에게 공평한 웹사이트", "textSize2": "fc-content-text", "textColor2": "#e6e8eb", "text2": "웹의 창시자인 팀 버너스 리는 이렇게 말했습니다. \"웹의 힘은 보편성에 있다. 장애에 구애받지 않고 누구나 접근하는 것은 필수적인 측면이다.\"라고요. WHO는 전 세계적으로 장애인 인구를 15% 정도로 파악하고 있습니다. 이 중 후천적으로 장애인이 된 사례는 90% 정도로 볼 수 있습니다. 다수의 사용자가 방문하는 웹사이트 관리자는 이 문제에 관심을 가져야 합니다.\n" }, "hidden": true, "uniqueId": "fc-block-58-g8z1xv3qj", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-13-nuipftdiw", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "paddingTop": "10", "paddingBottom": 10, "labelText": "Point 04", "layoutType": "fc-label-type1", "labelColor": "#d3ab7b" }, "hidden": true, "uniqueId": "fc-block-59-shw9w47we", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-r6jpprytc", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "45", "backgroundColor": "#000", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#e6e8eb", "text1": "성능과 사용성에 대한 심층 수업", "textSize2": "fc-content-text", "textColor2": "#e6e8eb", "text2": "최근에는 jpg보다 압축률도 뛰어나면서 원본에 가까운 퀄러티를 유지하는 훌륭한 이미지 포멧(webp, avif)이 등장했습니다. 브라우저 지원 현황에 알맞게 가장 적은 용량의 이미지를 렌더링할 수 있다면 성능과 사용성을 대폭 개선할 수 있게 됩니다." }, "hidden": true, "uniqueId": "fc-block-60-16ehbhj52", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-aihkt748z", "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": "30", "backgroundColor": "#000" }, "hidden": true, "uniqueId": "fc-block-61-9ggrki71p", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-76-w1ckk9xev", "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
\n
\n <% if (imageUrl1 || title1 || content1) { %>\n
\n <% if (imageUrl1) { %>\n
\n \" alt=\"\" loading=\"lazy\" />\n
\n <% } %>\n
\n
\"><%= title1 %>
\n
\"><%= content1 %>
\n
\n
\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n
\n
\n
\"><%= title2 %>
\n
\"><%= content2 %>
\n
\n <% if (imageUrl2) { %>\n
\n \" alt=\"\" loading=\"lazy\">\n
\n <% } %>\n
\n <% } %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#f2f2f2", "titleSize": "fc-h3-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/190327-371/정찬명-프로필.jpeg.png", "title2": "웹 접근성, 더 이상 남의 일 아니야..", "content2": "한국지능정보사회진흥원에서 오랜 시간 외부 웹 접근성 자문으로 활동한 것이 좋은 계기가 되었습니다. 덕분에 WCAG, KWCAG 지침에 대해 꾸준히 공부할 수 있었습니다.

웹의 창시자인 팀 버너스 리는 이렇게 말했습니다. \"웹의 힘은 보편성에 있다. 장애에 구애받지 않고 누구나 접근하는 것은 필수적인 측면이다.\" 라고요.

WHO는 전 세계적으로 장애인 인구를 15% 정도로 파악하고 있습니다. 이 중 후천적으로 장애인이 된 사례는 90% 정도로 볼 수 있어요. 나이가 들면서 신체 기능이 저하되면 장애인과 같아요. 우리는 누구나 이 문제에 관심을 가져야 한다고 생각합니다" }, "hidden": true, "uniqueId": "fc-block-62-lyahrci7z", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-12-oew3kdkq5", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#121212", "paddingTop": "80", "paddingBottom": 10, "labelText": "Top of Top", "layoutType": "fc-label-type2", "labelColor": "#ab001f" }, "uniqueId": "fc-block-63-j5ftn3lwj", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-90-59lvvqfmn", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#121212", "useTextCenter": false, "textSize": "fc-h5-text", "textColor": "#e6e8eb", "text": "\n HTML/CSSウェブ標準、ウェブアクセシビリティ、ベテランUI開発者、チョン・チャンミョン\n\n" }, "uniqueId": "fc-block-64-d67nfdxw9", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-ma0646ya", "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
\n
\n
\n" }, "values": { "backgroundColor": "#121212", "cardType": "row", "borderColor": "#222222", "borderSize": 1, "cardWidth": "980", "useCardLeft": false, "cardBackgroundColor": "#222222", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/110232-11/artboard-1.png", "imageSize": "30", "fontSize": "fc-content-text", "fontColor": "#e6e8eb", "content": "レジンエンターテインメントのウェブトゥーンプラットフォームのUI開発およびパフォーマンス、SEO改善者" }, "uniqueId": "fc-block-65-b0r2gr091", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-29-8epm1jhv4", "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": 10, "backgroundColor": "#121212" }, "uniqueId": "fc-block-66-6n7fave0m", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-7mibageie", "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
\n
\n
\n" }, "values": { "backgroundColor": "#121212", "cardType": "row", "borderColor": "#222222", "borderSize": 1, "cardWidth": "980", "useCardLeft": false, "cardBackgroundColor": "#222222", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/110232-11/artboard-1.png", "imageSize": "30", "fontSize": "fc-content-text", "fontColor": "#e6e8eb", "content": "韓国最大のショッピングプラットフォームのUI開発およびウェブアクセシビリティガイドの策定者" }, "uniqueId": "fc-block-67-pyp71pixl", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-30-emvqm7ulr", "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": 10, "backgroundColor": "#121212" }, "uniqueId": "fc-block-68-v3943p3os", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-g80tdm16x", "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
\n
\n
\n" }, "values": { "backgroundColor": "#121212", "cardType": "row", "borderColor": "#222222", "borderSize": 1, "cardWidth": "980", "useCardLeft": false, "cardBackgroundColor": "#222222", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/110232-11/artboard-1.png", "imageSize": "30", "fontSize": "fc-content-text", "fontColor": "#e6e8eb", "content": "ネイバーの共通UIコンポーネントおよびスマートエディタUI開発者" }, "uniqueId": "fc-block-69-7c7894kha", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-32-8bognioeh", "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": 10, "backgroundColor": "#121212" }, "uniqueId": "fc-block-70-401f4z5hp", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-oscruoc12", "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
\n
\n
\n" }, "values": { "backgroundColor": "#121212", "cardType": "row", "borderColor": "#222222", "borderSize": 1, "cardWidth": "980", "useCardLeft": false, "cardBackgroundColor": "#222222", "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/110226-11/artboard-1.png", "imageSize": "30", "fontSize": "fc-content-text", "fontColor": "#e6e8eb", "content": "HTML/CSS 20年目のUI開発者" }, "uniqueId": "fc-block-71-8yjshyjdb", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-hln5yb64t", "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
\n" }, "values": { "backgroundColor": "#121212", "paddingTop": "30", "paddingBottom": "30", "borderColor": "#222222", "borderSize": "1" }, "uniqueId": "fc-block-75-cn5wjkjtl", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-11-r4h9czj17", "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
\n
\n" }, "values": { "backgroundColor": "#121212", "textColor": "#e6e8eb", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": true, "useColumnInMobile": false, "titleSize": "fc-h6-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/201104-472/1.png", "title1": "韓国最大の通信会社SK Tアカデミーウェブアクセシビリティ講演", "content1": "", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/201115-472/4.png", "title2": "SKプラネットのレスポンシブウェブ技術に関する講演", "content2": "
", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "", "title3": "", "content3": "", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "uniqueId": "fc-block-76-cuvf7iqiz", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-10-1ocm515ej", "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
\n
\n" }, "values": { "backgroundColor": "#121212", "textColor": "#e6e8eb", "buttonColor": "#466eff", "buttonTextColor": "#ffffff", "useTextCenter": true, "useColumnInMobile": false, "titleSize": "fc-h6-text", "contentSize": "fc-h6-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/201125-472/3.png", "title1": "ネイバー開発者カンファレンス DEVIEW", "content1": "：レスポンシブウェブ構築の発表", "useNewTab1": true, "buttonLabel1": "", "buttonLink1": "", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/201135-472/2.png", "title2": "ウェブ標準開発者カンファレンス WSConf.", "content2": "：「CSSセレクタ」の標準使用法", "useNewTab2": true, "buttonLabel2": "", "buttonLink2": "", "imageUrl3": "", "title3": "", "content3": "", "useNewTab3": true, "buttonLabel3": "", "buttonLink3": "", "imageUrl4": "", "title4": "", "content4": "", "useNewTab4": true, "buttonLabel4": "", "buttonLink4": "" }, "uniqueId": "fc-block-77-h9e907lki", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-77-dcj6crach", "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": "20", "backgroundColor": "#121212" }, "uniqueId": "fc-block-78-v1q7euh2y", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-85-jr9gpejr9", "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
\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
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "80", "backgroundColor": "#121212", "useTextCenter": false, "textSize1": "fc-content-text", "textColor1": "#9b9ba0", "text1": "\n\n• 2017〜2022\n\n\n
\n\nレジンエンターテインメント（レジンコミックス）\n\n\n
\n- ウェブトゥーンプラットフォームUI開発\n
\n- ウェブアクセシビリティ／WAI-AIRAガイドライン開発\n
\n- HTML/CSSコンベンション開発\n\n

\n\n\n• 2013 ~ 2017\n\n\n
\n\nSKプラネット（11番街）\n\n
\n- ショッピングプラットフォームUI開発\n
\n- O2OマーケティングソリューションUI開発\n
\n- ウェブアクセシビリティガイドライン開発", "textSize2": "fc-content-text", "textColor2": "#9b9ba0", "text2": "\n\n• 2007 ~ 2013\n\n\n
\n\nネイバー\n\n\n
\n- 共通UIコンポーネント開発\n
\n- スマートエディタUI開発\n
\n- オープンソースXE UI開発\n
\n- DEVIEWウェブサイト開発\n

\n\n\n• 2006 〜現在\n\n\n
\n\n韓国知能情報社会振興院\n\n
\n- 諮問委員\n
\n- 韓国型ウェブアクセシビリティ指針2.0の開発に参加" }, "uniqueId": "fc-block-79-7abp5xju6", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-8-b2ofz20bl", "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
\n
\n <% if (imageUrl1 || title1 || content1) { %>\n
\n <% if (imageUrl1) { %>\n
\n \" alt=\"\" loading=\"lazy\" />\n
\n <% } %>\n
\n
\"><%= title1 %>
\n
\"><%= content1 %>
\n
\n
\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n
\n
\n
\"><%= title2 %>
\n
\"><%= content2 %>
\n
\n <% if (imageUrl2) { %>\n
\n \" alt=\"\" loading=\"lazy\">\n
\n <% } %>\n
\n <% } %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "", "titleSize": "fc-h3-text", "contentSize": "fc-h5-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "" }, "uniqueId": "fc-block-80-lggpfc62u", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-76-ffvyo17be", "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": "80", "backgroundColor": "#000" }, "uniqueId": "fc-block-81-wz8uvrw3p", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-14-u7fexqffz", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "paddingTop": "0", "paddingBottom": "20", "labelText": "Curriculum", "layoutType": "fc-label-type2", "labelColor": "#ab001f" }, "uniqueId": "fc-block-82-3m8qgoob0", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-37-5zyv15aub", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#ffffff", "text": "Part 1. HTML" }, "uniqueId": "fc-block-83-il3547ikd", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-22-xggfr8hp1", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222222", "borderColor": "#444444", "arrowBtnColor": "#c72835", "textColor": "#ffffff", "title1": "How to Study HTML", "content1": "HTMLをどのように勉強すべきか
-MDNは補足資料に過ぎず、HTML Living Standardの仕様を読んで解釈する\n方法を調べる", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/200757-472/1-1.png", "title2": "Metadata / SEO", "content2": "タイトルはどのように作成するか
-必須のmeta要素
-SNS対応のためのmeta要素
-schema.orgを活用したネイバー関連チャンネルを登録する", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135430-472/sc-8-2.png" }, "uniqueId": "fc-block-84-r4yjit2ro", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-24-wq0uy4uug", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-85-v90uee37t", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-28-3erhdxvde", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#ffffff", "title1": "Outline / Headings", "content1": "HTML概要アルゴリズム
\n- heading以外の文書の概要に影響を与えるもの
\n- セクショニングコンテンツ (article、aside、nav、section) が概要に与える影響", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135452-472/sc-8-3.png", "title2": "HTML Semantics", "content2": "HTMLの新しいセマンティクス
- divとspan要素の意味
- HTMLに新たに追加されたセマンティックマークアップの紹介", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135502-472/sc-8-4.png" }, "uniqueId": "fc-block-86-yf1cip5fe", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-25-e0fi12kcc", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-87-h9bqvfdfq", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-36-37c4k2cub", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#ffffff", "title1": "Interactive Content ", "content1": "相互作用コンテンツの正しい用法
- ユーザビリティに影響を与えるa、button、input、datalistなど、ユーザーインタラクション要素を羅列し、正しくマークアップするための情報", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135515-472/sc-8-5.png", "title2": "picture / source / img ", "content2": "画像マークアップ最適化
-JPG時代を超えて最新のWebP、AVIFフォーマットと比較
-レイジーロード技術", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/180520-371/sc-8-6.png" }, "uniqueId": "fc-block-88-0c0fo1tbi", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-vdta0gdkg", "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
\n" }, "values": { "backgroundColor": "#000000", "paddingTop": "40", "paddingBottom": "20", "borderColor": "#444444", "borderSize": "1" }, "uniqueId": "fc-block-89-5jtk5px3p", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-58-ksvy73tsl", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#ffffff", "text": "Part 2. CSS" }, "uniqueId": "fc-block-90-j2x4tg79k", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-43-4kqty40yf", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#6e6e73", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "How to study CSS", "content1": "CSS仕様書の読み方
-ブラウザ互換性情報を確認するには、caniuse.comサイトも参考にしなければ\nならない。", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135543-472/sc-8-7.png", "title2": "CSS Reset", "content2": "CSSの正しい初期化方法
-共通セレクタ使用の問題点
-[class] の初期化方法論の紹介
-10年前に作成されたエリック・マイヤーのリセットCSSの問題", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/135552-472/sc-8-8.png" }, "uniqueId": "fc-block-91-zsioc699a", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-26-9u7mbmgyi", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-92-zacf02wf1", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-52-rulha3k3i", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#444", "borderColor": "#6e6e73", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "BEM", "content1": "- BEM、Atomic CSS方法論を検討する。各方法論の長所と短所を比較し、現在BEMを使用している理由を説明する。", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/180553-371/sc-8-9.png", "title2": "CSS display / position", "content2": "レイアウトの秘密
-要素のレイアウトを制御するdisplayとpositionプロパティについてレビューする。用途に応じた使用法を習得し、レイアウトの複雑さを減らす。", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/200853-472/2-4.png" }, "uniqueId": "fc-block-93-my82uh04j", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-55-8tx8zu1zu", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-94-6q6hw70i0", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-53-lsz4yfwgh", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "CSS margin / padding", "content1": "余白の秘密
- 垂直marginの重なり現象の理解。padding値を割合 (%) で処理する理由", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/141115-472/sc-8-11.png", "title2": "CSS float", "content2": "フロート (float) の原理と理解
-フロートは元々画像の周りにテキストを配置するためのプロパティだが、誤用が多く、バグも多い。FlexやGridのおかげで別れの時が近づいているが、まだIEに対応しているプロジェクトに関わっているなら、しっかりと理解しておく必要がある。", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/191621-472/sc-8-12.png" }, "uniqueId": "fc-block-95-r5vb1gl99", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-56-7ee5ydgye", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-96-xvgnjoh2b", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-54-ryt707qcj", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "CSS flex", "content1": "レスポンシブウェブで切実に求められるプロパティ
-シンプルなFlexコードで、ボックスの膨張、収縮、方向、順序、整列、間隔をすべて制御できる。
-IEブラウザに対応していないプロジェクトに参加している場合は、すぐに使用できる。Flexの仕様をしっかり理解していれば、Gridプロパティはとりあえず追加しておきたいと思うはずだ。", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/180754-371/sc-8-13.png", "title2": "CSS grid", "content2": "グリッドレイアウト技法
-グリッドレイアウト技法はCSS文法の最大の難題だが、ショートハンドプロパティを理解するのに15分もあれば十分だ。", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/200924-472/2-8.png" }, "uniqueId": "fc-block-97-eyuxqk1xj", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-57-0scig5mhv", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-98-fueejwqpg", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-60-jhzg86rq1", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "CSS Tricks", "content1": "代表的なCSSテクニック
-border/backgrounds/box-shadowプロパティ
-CSSコードだけでGIF、PNG、SVGのようなグラフィックを置き換えることができる。", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/141141-472/sc-8-15.png", "title2": "", "content2": "", "imageUrl2": "" }, "uniqueId": "fc-block-99-udxis614d", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-07te42abw", "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
\n" }, "values": { "backgroundColor": "#000000", "paddingTop": "40", "paddingBottom": "20", "borderColor": "#444444", "borderSize": "1" }, "uniqueId": "fc-block-100-qc136f3wi", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-67-3g3h07orz", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#ffffff", "text": "Part 3. Performance" }, "uniqueId": "fc-block-101-4px2fdagu", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-62-4o6pdj6q0", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "CSS Optimization", "content1": "CSSコード最適化
- Google Lighthouse（ページスピードインサイト）ツールを利用してウェブページのパフォーマンスを測定し、改善する。
- 使用していないCSSを削除する。レンダリングをブロックするリソースを削除する。", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/141151-472/sc-8-16.png", "title2": "LCP(Largest Contentful Paint) ", "content2": "ローディング最適化
-ページの核心内容を2.5秒以内に読み込めるように改善し、測定することが目標。不要なリソースの削除、遅延読み込み、画像の最適化、分岐、プリローディング技術について説明する。", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/141200-472/sc-8-17.png" }, "uniqueId": "fc-block-102-kt3qld818", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-65-e1wv3wszw", "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": "20", "backgroundColor": "#000" }, "uniqueId": "fc-block-103-wiac3wn9z", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-63-o8uisy6kc", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "CLS(Cumulative Layout Shift)", "content1": "ガタガタ累積バッチ変更問題の解決
\n- バッチのパフォーマンスが引き起こすユーザビリティの問題を測定し、解決する。
\n-すでにバッチが完了したコンテンツの位置が変わる状況を累積バッチ変更と呼ぶ。ユーザーは動いているボタンをクリックできるか？", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/141209-472/sc-8-18.png", "title2": "", "content2": "", "imageUrl2": "" }, "uniqueId": "fc-block-104-2krq31wym", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-evtawoa7q", "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
\n" }, "values": { "backgroundColor": "#000000", "paddingTop": "40", "paddingBottom": "20", "borderColor": "#444444", "borderSize": "1" }, "uniqueId": "fc-block-105-x5b9bmv65", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-21-0knxzfv2n", "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
\n
fc-text-align-center<% } %>\">\n
\" style=\"<% if(textColor) { %>color: <%= textColor %><% } %>\">\n <%= text %>\n
\n
\n
\n
\n" }, "values": { "paddingTop": "0", "paddingBottom": "20", "backgroundColor": "#000", "useTextCenter": false, "textSize": "fc-h4-text", "textColor": "#ffffff", "text": "Part 4. Accessibility" }, "uniqueId": "fc-block-106-nwscawdko", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-64-t0b3jpko3", "layout": { "id": "501", "description": "2단 아코디언 리스트", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapsed", "type": "checkbox", "description": "collapsed" }, { "name": "cardBackgroundColor", "type": "text", "description": "card background color" }, { "name": "borderColor", "type": "text", "description": "border color" }, { "name": "arrowBtnColor", "type": "text", "description": "arrow btn color" }, { "name": "textColor", "type": "text", "description": "text color" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl1", "type": "image", "description": "imageUrl1" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl2", "type": "image", "description": "imageUrl2" } ], "values": { "backgroundColor": "", "collapsed": false, "cardBackgroundColor": "#ffffff", "borderColor": "#e6e8eb", "arrowBtnColor": "#6e6e73", "textColor": "#000000", "title1": "", "content1": "", "imageUrl1": "", "title2": "", "content2": "", "imageUrl2": "" }, "template": "
\">\n
\n
\n <% if (title1 || content1 || imageUrl1) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title1 %>\n \n \n
\n
;color: <%= textColor || '#000000' %>\">\n <%= content1 %>\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n <% if (title2 || content2 || imageUrl2) { %>\n
; border-color: <%= borderColor || '#e6e8eb' %>\">\n \n checked<% } %>>\n
\">\n <%= title2 %>\n \n \n
\n
; color: <%= textColor || '#000000' %>\">\n <%= content2 %>\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\n \n
\n <% } %>\n
\n
\n
\n" }, "values": { "backgroundColor": "#000", "collapsed": true, "cardBackgroundColor": "#222", "borderColor": "#444", "arrowBtnColor": "#c72835", "textColor": "#e6e8eb", "title1": "WCAG 2.x", "content1": "ウェブアクセシビリティの12種類のエラータイプ分析
-最も頻繁に発生するウェブアクセシビリティのエラーを確認し、代替案を提示する。", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202106/141217-472/sc-8-19.png", "title2": "ARIA 1.x ", "content2": "HTMLだけでは20%が不足する時
-ウェブアクセシビリティの問題の80%はHTMLの問題。残りの20%はARIAで補える。", "imageUrl2": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/181308-371/sc-8-20.png" }, "uniqueId": "fc-block-107-xhfvkbph7", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-73-c9owu4zf5", "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": 10, "backgroundColor": "#000" }, "uniqueId": "fc-block-108-nrqqg5bfw", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-mztf628my", "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": "45", "backgroundColor": "#000000" }, "uniqueId": "fc-block-109-9lq8d3tgr", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-24-kezbu3ecq", "layout": { "id": "601", "description": "사각 버튼", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "buttonBackgroundColor", "type": "text", "description": "btn color" }, { "name": "minButtonWidth", "type": "number", "description": "min button width" }, { "name": "buttonLabel", "type": "text", "description": "button label" }, { "name": "buttonLabelColor", "type": "text", "description": "button label color" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "link", "type": "text", "description": "link" } ], "values": { "backgroundColor": "", "buttonBackgroundColor": "#ed234b", "minButtonWidth": 380, "buttonLabel": "상세 커리큘럼 다운 받기 및 개인별 상담 문의", "buttonLabelColor": "#ffffff", "useNewTab": true, "link": "http://fastcampus.co.kr" }, "template": "
background-color: <%=backgroundColor%><% } %>\">\n
\n <% if(link) { %>\n \" <% if(useNewTab) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %> style=\"<% if(buttonBackgroundColor) { %>background-color: <%= buttonBackgroundColor %>;<% } %> <% if(buttonLabelColor) { %>color: <%= buttonLabelColor %>;<% } %> min-width: <%= minButtonWidth/10 %>rem\">\n <%= buttonLabel %>\n \n <% } else { %>\n <% if (buttonLabel) { %>\n background-color: <%= buttonBackgroundColor %>;<% } %><% if(buttonLabelColor) { %>color: <%= buttonLabelColor %>;<% } %> min-width: <%= minButtonWidth/10 %>rem;\"><%= buttonLabel %>\n <% } %>\n <% }%>\n
\n
\n" }, "values": { "backgroundColor": "#000", "buttonBackgroundColor": "#ab001f", "minButtonWidth": "", "buttonLabel": "\n詳細カリキュラムダウン", "buttonLabelColor": "#ffffff", "useNewTab": true, "link": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202107/144247-53/[%ED%8C%A8%EC%8A%A4%ED%8A%B8%EC%BA%A0%ED%8D%BC%EC%8A%A4]-%EA%B5%90%EC%9C%A1%EA%B3%BC%EC%A0%95%EC%86%8C%EA%B0%9C%EC%84%9C-the-red---%EA%B2%AC%EA%B3%A0%ED%95%9C-ui-%EC%84%A4%EA%B3%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C-by-%EC%A0%95%EC%B0%AC%EB%AA%85.pdf" }, "hidden": false, "uniqueId": "fc-block-110-6398ujuz8", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-75-j5dd7t8nk", "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": "80", "backgroundColor": "#000" }, "uniqueId": "fc-block-111-dy3jjh5im", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-a330pszj3", "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
\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
\n
\n" }, "values": { "paddingTop": "30", "paddingBottom": "25", "backgroundColor": "#e6e8eb", "useTextCenter": false, "textSize1": "fc-h5-text", "textColor1": "#000000", "text1": "\n정찬명의 견고한 UI 설계를 위한 마크업 가이드\n
\n지금 최저가로 만나보세요!\n", "textSize2": "fc-h1-text", "textColor2": "#000000", "text2": "" }, "hidden": true, "uniqueId": "fc-block-117-te8ourjfd", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-0ym84ywkw", "layout": { "id": "912", "description": "코스 프로모션 배너", "icon": "\n", "params": [ { "name": "코스 프로모션 배너전용입니다.", "type": "reset" } ], "values": { "코스 프로모션 배너전용입니다.": "배너 설정에서 설정해주세요." }, "template": "
\n
\n
\n
코스 프로모션 배너 전용입니다.
\n
\n 0일\n 0시간\n 0분\n 0초\n 코스 프로모션 배너 전용입니다. \n
\n
\n
\n" }, "values": { "코스 프로모션 배너전용입니다.": "배너 설정에서 설정해주세요." }, "uniqueId": "fc-block-118-5qf883xya", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-2-rxo9unx61", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#ab001f", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202206/062818-344/메인최하단-red.png", "mobileImageUrl": "", "imageWidth": "800", "alt": "", "useNewTab": true, "link": "" }, "hidden": true, "uniqueId": "fc-block-119-lr53m94zs", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-npl36glr7", "layout": { "id": "903", "description": "타이머", "icon": "\n", "params": [ { "name": "title", "type": "text", "description": "title text" }, { "name": "targetTime", "type": "datetime-local", "description": "yyyy-mm-dd hh:mm" }, { "name": "backgroundColor", "type": "text", "description": "배경색(#000000)을 입력해주세요." }, { "name": "textColor", "type": "select", "description": "글자색을 선택해주세요.", "options": [ "white", "black" ] } ], "values": { "title": "최저 가격 마감까지 남은 시간", "targetTime": "", "backgroundColor": "#282828", "textColor": "white" }, "template": "\n
\">\n
\">\n
<%=title%>
\n
\n 0일\n 0시간\n 0분\n 0초\n\n <% if (targetTime) { %>\n <%=targetTime %>\n <% } %>\n
\n
\n
\n" }, "values": { "title": "⏰6/26(일) 23:59까지만! 7일 한정판⏰ ", "targetTime": "2022-06-26T23:59", "backgroundColor": "#AB001F", "textColor": "white" }, "hidden": true, "uniqueId": "fc-block-120-mo7vi6r2j", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-y9m9p5y3i", "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": "30", "backgroundColor": "#000" }, "hidden": true, "uniqueId": "fc-block-121-m38hy6bg8", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-rhsz6n1vg", "layout": { "id": "909", "description": "월 금액 강조 (동적 요소-2)", "icon": "\n", "params": [ { "name": "pointColor", "type": "text", "description": "포인트 컬러" }, { "name": "labelColor", "type": "text", "description": "라벨 컬러" }, { "name": "labels", "type": "list", "description": "라벨 리스트", "maxLength": 20, "params": [ { "name": "labelText", "type": "text", "description": "라벨 내용" } ] }, { "name": "title", "type": "text", "description": "layout head title" }, { "name": "title2", "type": "text", "description": "자동구성을 사용하고 싶지 않으시면 작성해주세요." }, { "name": "content", "type": "text", "description": "내용" }, { "name": "monthlyInstallment", "type": "number", "description": "입력한 값이 할부 개월 수로 적용됩니다." } ], "values": { "pointColor": "#ed2040", "labelColor": "#f9858d", "labels": [ { "labelText": "한번 구매로, 평생 소장하세요." }, { "labelText": "평생소장" }, { "labelText": "최저가" } ], "title": "한번 구매로, 평생 소장하세요.", "title2": "", "content": "조만간 가격이 인상될 예정입니다.
지금 구매하세요!", "monthlyInstallment": 5 }, "template": "
\">\n
\n
\n
\n <% labels.length && labels.forEach(({ labelText }) => { %>\n
; border: 0.1rem solid <%= labelColor%>;\"><%= labelText %>
\n <% }) %>\n
\n
\n <%= title %>
\n <% if (title2.trim().length !== 0) { %>\n <%= title2 %>
\n <% } else { %>\n (자동 구성) 가격이 인상됩니다. \n <% } %> \n
\n
<%= content %>
\n
\n
\n
\n
\n 정상가\n (자동 구성)\n
\n
\n 할인 금액\n (자동 구성)\n
\n
\n 최종 금액\n (자동 구성)\n
\n
\n ;\"><%= monthlyInstallment %>개월 할부 시\n ;\">\n 월 (자동 구성)원\n \n
\n
\n
\n
\n
; border-color: <%= pointColor %>;\">오늘이 최저가!
\n
;\">
\n
\n
\n
\n
\n
\n
\n" }, "values": { "pointColor": "#AB001F", "labelColor": "#AB001F", "labels": [ { "labelText": "할인특가" }, { "labelText": "한정판매" }, { "labelText": "평생소장" } ], "content": "망설이면 이 가격은 사라집니다.
가장 저렴한 가격으로 지금 구매하세요!", "monthlyInstallment": "12", "title": "최저가로 구매하고 평생소장하세요!", "title2": "" }, "hidden": true, "uniqueId": "fc-block-122-zyttymhtn", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-ik4vkd11d", "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": "30", "backgroundColor": "#000" }, "hidden": true, "uniqueId": "fc-block-123-mflys6zll", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-22-mlyv6fav1", "layout": { "id": "901", "description": "월 금액 강조 (동적 요소)", "icon": "\n", "params": [ { "name": "상품 설정 컴포저입니다.", "type": "reset" }, { "name": "showGraph", "type": "checkbox", "description": "그래프 보이기/감추기" }, { "name": "useNewTab", "type": "checkbox", "description": "새창으로 열기" }, { "name": "title", "type": "text", "description": "그래프 제목" }, { "name": "content", "type": "text", "description": "그래프 내용" } ], "values": { "showGraph": false, "useNewTab": false, "title": "제목을 입력해주세요.", "content": "(자동)", "상품 설정 컴포저입니다.": "매칭된 상품의 상세페이지에서 설정해주세요." }, "template": "\"\n data-use-new-tab=\"<%= useNewTab %>\"\n data-chart-title=\"<%= title %>\"\n data-chart-content=\"<%= showGraph ? content : '' %>\"\n>\n
\n <% if (showGraph) { %>\n
\n
\n
\n (자동)
\n 한 번 구매로,
\n 평생 소장하세요.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n 오늘이 최저가!\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<%= title %>
\n
<%= content %>
\n
\n
\n <% } %>\n
\n
\n (자동)\n
\n
\n
\n
\n 정가\n ~~(자동)~~\n
\n
\n 할인 금액\n (자동)\n
\n
\n
\n
\n
\n 현재 판매가\n (자동)\n
\n
\n
(자동)
\n * 12개월 무이자 할부 시\n
\n
\n
\n
\n
\n \n target=\"_blank\" rel=\"noopener noreferrer\" <% } %> class=\"payment-btn\">\n 바로 구매하기\n \n
\n
\n
\n
\n
\n\n" }, "values": { "showGraph": false, "useNewTab": true, "buttonLabel": "최저가로 수강신청\t", "title": "제목을 입력해주세요.", "content": "(자동)", "상품 설정 컴포저입니다.": "매칭된 상품의 상세페이지에서 설정해주세요." }, "uniqueId": "fc-block-124-7w8vcyq0t", "isChecked": false, "hasSyntaxErrorTags": false, "hidden": true }, { "id": "fc-block-83-84td2eomn", "layout": { "id": "002", "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": "labelText", "type": "text", "description": "label text" }, { "name": "layoutType", "type": "select", "description": "type", "options": [ "fc-label-type1", "fc-label-type2" ] }, { "name": "labelColor", "type": "text", "description": "label color" } ], "values": { "backgroundColor": "#ffffff", "paddingTop": 10, "paddingBottom": 10, "labelText": "", "layoutType": "fc-label-type1", "labelColor": "#000000" }, "template": "
\">\n
rem; padding-bottom: <%= paddingBottom/10 %>rem;\">\n
\n
\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n
\n
\n
\n
\n" }, "values": { "backgroundColor": "#1E1E1E", "paddingTop": "80", "paddingBottom": "20", "labelText": "FAQ", "layoutType": "fc-label-type2", "labelColor": "#AB001F" }, "uniqueId": "fc-block-126-36pwdz1ui", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-32kpmjhot", "layout": { "id": "502", "description": "1단 아코디언 리스트 (FAQ 전용)", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapseAll", "type": "checkbox", "description": "" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "title1", "type": "text", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content1 text" }, { "name": "title2", "type": "text", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content2 text" }, { "name": "title3", "type": "text", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content3 text" }, { "name": "title4", "type": "text", "description": "title4 text" }, { "name": "content4", "type": "textarea", "description": "content4 text" }, { "name": "title5", "type": "text", "description": "title5 text" }, { "name": "content5", "type": "textarea", "description": "content5 text" }, { "name": "title6", "type": "text", "description": "title6 text" }, { "name": "content6", "type": "textarea", "description": "content6 text" }, { "name": "title7", "type": "text", "description": "title7 text" }, { "name": "content7", "type": "textarea", "description": "content7 text" }, { "name": "title8", "type": "text", "description": "title8 text" }, { "name": "content8", "type": "textarea", "description": "content8 text" }, { "name": "title9", "type": "text", "description": "title9 text" }, { "name": "content9", "type": "textarea", "description": "content9 text" }, { "name": "title10", "type": "text", "description": "title10 text" }, { "name": "content10", "type": "textarea", "description": "content10 text" }, { "name": "title11", "type": "text", "description": "title11 text" }, { "name": "content11", "type": "textarea", "description": "content11 text" }, { "name": "title12", "type": "text", "description": "title12 text" }, { "name": "content12", "type": "textarea", "description": "content12 text" }, { "name": "title13", "type": "text", "description": "title13 text" }, { "name": "content13", "type": "textarea", "description": "content13 text" }, { "name": "title14", "type": "text", "description": "title14 text" }, { "name": "content14", "type": "textarea", "description": "content14 text" }, { "name": "title15", "type": "text", "description": "title15 text" }, { "name": "content15", "type": "textarea", "description": "content15 text" }, { "name": "title16", "type": "text", "description": "title16 text" }, { "name": "content16", "type": "textarea", "description": "content16 text" }, { "name": "title17", "type": "text", "description": "title17 text" }, { "name": "content17", "type": "textarea", "description": "content17 text" }, { "name": "title18", "type": "text", "description": "title18 text" }, { "name": "content18", "type": "textarea", "description": "content18 text" }, { "name": "contentLinkTitle", "type": "text", "description": "content link title" }, { "name": "contentLink", "type": "url", "description": "content link" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "contentLinkDescription", "type": "text", "description": "content link description" } ], "values": { "backgroundColor": "", "collapseAll": false, "textSize": "fc-h6-text", "title1": "", "content1": "", "title2": "", "content2": "", "title3": "", "content3": "", "title4": "", "content4": "", "title5": "", "content5": "", "title6": "", "content6": "", "title7": "", "content7": "", "title8": "", "content8": "", "title9": "", "content9": "", "title10": "", "content10": "", "title11": "", "content11": "", "title12": "", "content12": "", "title13": "", "content13": "", "title14": "", "content14": "", "title15": "", "content15": "", "title16": "", "content16": "", "title17": "", "content17": "", "title18": "", "content18": "", "contentLinkTitle": "1:1 문의하기", "contentLinkDescription": "해당 사항이 없다면 1:1 문의 게시판을 이용해주세요", "useNewTab": true, "contentLink": "https://fastcampus.co.kr" }, "template": "
background-color: <%= backgroundColor %><% } %>\">\n
\n
\n
\n <% if (title1 || content1) { %>\n
\n \">\n >\n \n <%= title1 %>\n \n \"><%= content1 %>\n \n
\n <% } %>\n <% if (title2 || content2) { %>\n
\n \">\n >\n \n <%= title2 %>\n \n \"><%= content2 %>\n \n
\n <% } %>\n <% if (title3 || content3) { %>\n
\n \">\n >\n \n <%= title3 %>\n \n \"><%= content3 %>\n \n
\n <% } %>\n <% if (title4 || content4) { %>\n
\n \">\n >\n \n <%= title4 %>\n \n \"><%= content4 %>\n \n
\n <% } %>\n <% if (title5 || content5) { %>\n
\n \">\n >\n \n <%= title5 %>\n \n \"><%= content5 %>\n \n
\n <% } %>\n <% if (title6 || content6) { %>\n
\n \">\n >\n \n <%= title6 %>\n \n \"><%= content6 %>\n \n
\n <% } %>\n <% if (title7 || content7) { %>\n
\n \">\n >\n \n <%= title7 %>\n \n \"><%= content7 %>\n \n
\n <% } %>\n <% if (title8 || content8) { %>\n
\n \">\n >\n \n <%= title8 %>\n \n \"><%= content8 %>\n \n
\n <% } %>\n <% if (title9 || content9) { %>\n
\n \">\n >\n \n <%= title9 %>\n \n \"><%= content9 %>\n \n
\n <% } %>\n <% if (title10 || content10) { %>\n
\n \">\n >\n \n <%= title10 %>\n \n \"><%= content10 %>\n \n
\n <% } %>\n <% if (title11 || content11) { %>\n
\n \">\n >\n \n <%= title11 %>\n \n \"><%= content11 %>\n \n
\n <% } %>\n <% if (title12 || content12) { %>\n
\n \">\n >\n \n <%= title12 %>\n \n \"><%= content12 %>\n \n
\n <% } %>\n <% if (title13 || content13) { %>\n
\n \">\n >\n \n <%= title13 %>\n \n \"><%= content13 %>\n \n
\n <% } %>\n <% if (title14 || content14) { %>\n
\n \">\n >\n \n <%= title14 %>\n \n \"><%= content14 %>\n \n
\n <% } %>\n <% if (title15 || content15) { %>\n
\n \">\n >\n \n <%= title15 %>\n \n \"><%= content15 %>\n \n
\n <% } %>\n <% if (title16 || content16) { %>\n
\n \">\n >\n \n <%= title16 %>\n \n \"><%= content16 %>\n \n
\n <% } %>\n <% if (title17 || content17) { %>\n
\n \">\n >\n \n <%= title17 %>\n \n \"><%= content17 %>\n \n
\n <% } %>\n <% if (title18 || content18) { %>\n
\n \">\n >\n \n <%= title18 %>\n \n \"><%= content18 %>\n \n
\n <% } %>\n
\n
\n <% if (contentLinkTitle || contentLinkDescription) { %>\n
\n
<%=contentLinkDescription%>
\n <% if (contentLink && contentLinkTitle) { %>\n
\n \" <% if(useNewTab) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>> <%= contentLinkTitle %> \n
\n <% } %>\n
\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#1E1E1E", "collapseAll": false, "textSize": "fc-content-text", "title1": "\n 講座はどんな内容で構成されていますか？\n", "content1": "\n 4つのカテゴリからなる20の講座と15の実習課題で構成されています。必ず課題を実施してください。

\n - 検索エンジン最適化のために、開発者が必ず知っておくべき実務知識をまとめました。
\n - 検索エンジン最適化のために、開発者が必ず知っておくべき実務知識をまとめました。
\n - HTMLコードを意味のある、機能的に適した形で作成できるようになります。
\n- ますます複雑になるCSSコードを一貫性を持って、協業しやすく管理できるようになります。
\n- ますます複雑になるCSSコードを一貫性を持って、協業しやすく管理できるようになります。
\n- 少ない努力でウェブサイトのパフォーマンスを大幅に改善できるようになります。
\n- ウェブアクセシビリティが保証されたウェブサイトを開発できるようになります。
\n\n", "title2": "\nこの講座だけの特別な点があるとしたら？\n\n", "content2": "\n- 初めてHTML/CSSを学んだ時、ほとんどの方が文法中心で学んだことでしょう。入門書や他の講座でも文法が主流で、実務で本当に必要な内容は非常に少ないカリキュラムが多いです。しかし、この講座では20年間現場に携わり、今も活動しているマークアップ開発者が実務で文法よりも重要で必要な内容をしっかりと扱っています。\n\n", "title3": "\nどんな人が受講すればいいですか？\n\n", "content3": "\nマークアップは宣言型言語で明瞭であるため、文法を学ぶのは相対的に簡単だったでしょう。しかし、実務では多くの問題に直面し、それを解決するためにさらに多くの時間を消費することになります。その理由は、文法以外に必要な部分を学んでいなかったからです。ウェブ開発者、フロントエンド、UI/UXデザイナーなど、すべてを包括してHTML/CSSをしっかり学びたい方が受講対象です。\n\n", "title4": "\n 課題実習時に推奨する開発環境\n\n", "content4": "\n - VS Code
\n - Codepen
\n - Github
\n - Chrome Browser\n\n", "title5": "", "content5": "", "title6": "", "content6": "", "title7": "", "content7": "", "title8": "", "content8": "", "title9": "", "content9": "", "title10": "", "content10": "", "title11": "", "content11": "", "title12": "", "content12": "", "title13": "", "content13": "", "title14": "", "content14": "", "title15": "", "content15": "", "title16": "", "content16": "", "title17": "", "content17": "", "title18": "", "content18": "", "contentLinkTitle": "", "contentLinkDescription": "", "useNewTab": true, "contentLink": "" }, "uniqueId": "fc-block-128-towx190s3", "isChecked": false, "hidden": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-28-55awctwsd", "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": "80", "backgroundColor": "#1E1E1E" }, "uniqueId": "fc-block-129-2uy5gg21v", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-7w5ymzphy", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#e6e6e6", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202008/132857-199/sc5.png", "mobileImageUrl": "", "imageWidth": "800", "useNewTab": true, "link": "", "alt": "" }, "uniqueId": "fc-block-130-km3utqpcx", "isChecked": false, "hidden": true, "hasSyntaxErrorTags": false }, { "id": "fc-block-5-8rddjlq3t", "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": "80", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-1-qcfcznu3i", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-6-kazxcq2ig", "layout": { "id": "401", "description": "아이콘 세로형 카드 (1~4단)", "icon": "\n", "params": [ { "name": "useTextCenter", "type": "checkbox", "description": "use text center" }, { "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": "90 x 90" }, { "name": "title1", "type": "text", "description": "title1" }, { "name": "content1", "type": "textarea", "description": "content1" }, { "name": "imageUrl2", "type": "image", "description": "90 x 90" }, { "name": "title2", "type": "text", "description": "title2" }, { "name": "content2", "type": "textarea", "description": "content2" }, { "name": "imageUrl3", "type": "image", "description": "90 x 90" }, { "name": "title3", "type": "text", "description": "title3" }, { "name": "content3", "type": "textarea", "description": "content3" }, { "name": "imageUrl4", "type": "image", "description": "90 x 90" }, { "name": "title4", "type": "text", "description": "title4" }, { "name": "content4", "type": "textarea", "description": "content4" } ], "values": { "useTextCenter": false, "titleSize": "fc-h5-text", "contentSize": "fc-h6-text", "imageUrl1": "", "title1": "", "content1": "", "imageUrl2": "", "title2": "", "content2": "", "imageUrl3": "", "title3": "", "content3": "", "imageUrl4": "", "title4": "", "content4": "" }, "template": "
\n
\n
fc-text-align-center<% } %>\">\n <% if (imageUrl1 || title1 || content1) { %>\n
\n
\n <% if (imageUrl1) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\"><%= title1 %>
\n
\"><%= content1 %>
\n
\n
\n <% } %>\n <% if (imageUrl2 || title2 || content2) { %>\n
\n
\n <% if (imageUrl2) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\"><%= title2 %>
\n
\"><%= content2 %>
\n
\n
\n <% } %>\n <% if (imageUrl3 || title3 || content3) { %>\n
\n
\n <% if (imageUrl3) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\"><%= title3 %>
\n
\"><%= content3 %>
\n
\n
\n <% } %>\n <% if (imageUrl4 || title4 || content4) { %>\n
\n
\n <% if (imageUrl4) { %>\n \" alt=\"\" loading=\"lazy\">\n <% } %>\n
\"><%= title4 %>
\n
\"><%= content4 %>
\n
\n
\n <% } %>\n
\n
\n
\n" }, "values": { "useTextCenter": true, "titleSize": "fc-h6-text", "contentSize": "fc-content-text", "imageUrl1": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202309/123015-199/group-1321315526.png", "title1": "このコースは事前注文商品です。", "content1": "\n\n\n動画と講義資料は、\n以下のようにリリースされます。\n
\n\n\n（一度の購入後、すべての動画を永久保有できます。）\n

\n\n\n

\n\n第1次公開 2024年11月18日(月）\n
\n\n全体公開 2024年12月2日(月）\n

\n", "imageUrl2": "", "title2": "", "content2": "", "imageUrl3": "", "title3": "", "content3": "", "imageUrl4": "", "title4": "", "content4": "" }, "uniqueId": "fc-block-2-xxbojq0gh", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-4-iks8vjx9f", "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": "80", "backgroundColor": "#ffffff" }, "uniqueId": "fc-block-3-u5nugrawj", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-1-l843a2mfy", "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 \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n \n <% } else { %>\n \">\n \" />\n \" />\n \" class=\"container__image\"\n <% if (imageWidth) { %> style=\"width: <%= imageWidth/10 %>rem;\" <% } %>\n <% if (alt) { %> alt=\"<%= alt %>\" <% } %> loading=\"lazy\">\n \n <% } %>\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#191919", "useImageLeft": false, "imageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202404/174457-1378/introduction---trust.webp", "mobileImageUrl": "https://storage.googleapis.com/static.fastcampus.co.kr/prod/uploads/202404/174502-1378/introduction---trust-mob-2.webp", "imageWidth": 980, "alt": "", "useNewTab": true, "link": "" }, "uniqueId": "fc-block-1-d8stvmysq", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-3-h2u8rfjh8", "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": "80", "backgroundColor": "#111" }, "uniqueId": "fc-block-2-k55voerv7", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "k6gdy27r", "layout": { "id": "502", "description": "1단 아코디언 리스트 (FAQ 전용)", "icon": "\n", "params": [ { "name": "backgroundColor", "type": "text", "description": "background color" }, { "name": "collapseAll", "type": "checkbox", "description": "" }, { "name": "textSize", "type": "select", "description": "text size", "options": [ "fc-h6-text", "fc-content-text" ] }, { "name": "title1", "type": "text", "description": "title1 text" }, { "name": "content1", "type": "textarea", "description": "content1 text" }, { "name": "title2", "type": "text", "description": "title2 text" }, { "name": "content2", "type": "textarea", "description": "content2 text" }, { "name": "title3", "type": "text", "description": "title3 text" }, { "name": "content3", "type": "textarea", "description": "content3 text" }, { "name": "title4", "type": "text", "description": "title4 text" }, { "name": "content4", "type": "textarea", "description": "content4 text" }, { "name": "title5", "type": "text", "description": "title5 text" }, { "name": "content5", "type": "textarea", "description": "content5 text" }, { "name": "title6", "type": "text", "description": "title6 text" }, { "name": "content6", "type": "textarea", "description": "content6 text" }, { "name": "title7", "type": "text", "description": "title7 text" }, { "name": "content7", "type": "textarea", "description": "content7 text" }, { "name": "title8", "type": "text", "description": "title8 text" }, { "name": "content8", "type": "textarea", "description": "content8 text" }, { "name": "title9", "type": "text", "description": "title9 text" }, { "name": "content9", "type": "textarea", "description": "content9 text" }, { "name": "title10", "type": "text", "description": "title10 text" }, { "name": "content10", "type": "textarea", "description": "content10 text" }, { "name": "title11", "type": "text", "description": "title11 text" }, { "name": "content11", "type": "textarea", "description": "content11 text" }, { "name": "title12", "type": "text", "description": "title12 text" }, { "name": "content12", "type": "textarea", "description": "content12 text" }, { "name": "title13", "type": "text", "description": "title13 text" }, { "name": "content13", "type": "textarea", "description": "content13 text" }, { "name": "title14", "type": "text", "description": "title14 text" }, { "name": "content14", "type": "textarea", "description": "content14 text" }, { "name": "title15", "type": "text", "description": "title15 text" }, { "name": "content15", "type": "textarea", "description": "content15 text" }, { "name": "title16", "type": "text", "description": "title16 text" }, { "name": "content16", "type": "textarea", "description": "content16 text" }, { "name": "title17", "type": "text", "description": "title17 text" }, { "name": "content17", "type": "textarea", "description": "content17 text" }, { "name": "title18", "type": "text", "description": "title18 text" }, { "name": "content18", "type": "textarea", "description": "content18 text" }, { "name": "contentLinkTitle", "type": "text", "description": "content link title" }, { "name": "contentLink", "type": "url", "description": "content link" }, { "name": "useNewTab", "type": "checkbox", "description": "" }, { "name": "contentLinkDescription", "type": "text", "description": "content link description" } ], "values": { "backgroundColor": "", "collapseAll": false, "textSize": "fc-h6-text", "title1": "", "content1": "", "title2": "", "content2": "", "title3": "", "content3": "", "title4": "", "content4": "", "title5": "", "content5": "", "title6": "", "content6": "", "title7": "", "content7": "", "title8": "", "content8": "", "title9": "", "content9": "", "title10": "", "content10": "", "title11": "", "content11": "", "title12": "", "content12": "", "title13": "", "content13": "", "title14": "", "content14": "", "title15": "", "content15": "", "title16": "", "content16": "", "title17": "", "content17": "", "title18": "", "content18": "", "contentLinkTitle": "1:1 문의하기", "contentLinkDescription": "해당 사항이 없다면 1:1 문의 게시판을 이용해주세요", "useNewTab": true, "contentLink": "https://fastcampus.co.kr" }, "template": "
background-color: <%= backgroundColor %><% } %>\">\n
\n
\n
\n <% if (title1 || content1) { %>\n
\n \">\n >\n \n <%= title1 %>\n \n \"><%= content1 %>\n \n
\n <% } %>\n <% if (title2 || content2) { %>\n
\n \">\n >\n \n <%= title2 %>\n \n \"><%= content2 %>\n \n
\n <% } %>\n <% if (title3 || content3) { %>\n
\n \">\n >\n \n <%= title3 %>\n \n \"><%= content3 %>\n \n
\n <% } %>\n <% if (title4 || content4) { %>\n
\n \">\n >\n \n <%= title4 %>\n \n \"><%= content4 %>\n \n
\n <% } %>\n <% if (title5 || content5) { %>\n
\n \">\n >\n \n <%= title5 %>\n \n \"><%= content5 %>\n \n
\n <% } %>\n <% if (title6 || content6) { %>\n
\n \">\n >\n \n <%= title6 %>\n \n \"><%= content6 %>\n \n
\n <% } %>\n <% if (title7 || content7) { %>\n
\n \">\n >\n \n <%= title7 %>\n \n \"><%= content7 %>\n \n
\n <% } %>\n <% if (title8 || content8) { %>\n
\n \">\n >\n \n <%= title8 %>\n \n \"><%= content8 %>\n \n
\n <% } %>\n <% if (title9 || content9) { %>\n
\n \">\n >\n \n <%= title9 %>\n \n \"><%= content9 %>\n \n
\n <% } %>\n <% if (title10 || content10) { %>\n
\n \">\n >\n \n <%= title10 %>\n \n \"><%= content10 %>\n \n
\n <% } %>\n <% if (title11 || content11) { %>\n
\n \">\n >\n \n <%= title11 %>\n \n \"><%= content11 %>\n \n
\n <% } %>\n <% if (title12 || content12) { %>\n
\n \">\n >\n \n <%= title12 %>\n \n \"><%= content12 %>\n \n
\n <% } %>\n <% if (title13 || content13) { %>\n
\n \">\n >\n \n <%= title13 %>\n \n \"><%= content13 %>\n \n
\n <% } %>\n <% if (title14 || content14) { %>\n
\n \">\n >\n \n <%= title14 %>\n \n \"><%= content14 %>\n \n
\n <% } %>\n <% if (title15 || content15) { %>\n
\n \">\n >\n \n <%= title15 %>\n \n \"><%= content15 %>\n \n
\n <% } %>\n <% if (title16 || content16) { %>\n
\n \">\n >\n \n <%= title16 %>\n \n \"><%= content16 %>\n \n
\n <% } %>\n <% if (title17 || content17) { %>\n
\n \">\n >\n \n <%= title17 %>\n \n \"><%= content17 %>\n \n
\n <% } %>\n <% if (title18 || content18) { %>\n
\n \">\n >\n \n <%= title18 %>\n \n \"><%= content18 %>\n \n
\n <% } %>\n
\n
\n <% if (contentLinkTitle || contentLinkDescription) { %>\n
\n
<%=contentLinkDescription%>
\n <% if (contentLink && contentLinkTitle) { %>\n
\n \" <% if(useNewTab) { %> target=\"_blank\" rel=\"noopener noreferrer\" <% } %>> <%= contentLinkTitle %> \n
\n <% } %>\n
\n <% } %>\n
\n
\n" }, "values": { "backgroundColor": "#111", "collapseAll": true, "textSize": "fc-content-text", "title1": " \n\n学習規定\n\n", "content1": " \n\n* 本商品は動画形式の講座を受講する商品です。\t\n
\n* 状況により、事前告知無しに割引が早期終了または延長される場合があります。\t\t\t\n
\n* 受講申し込みと決済を完了すると、マイページからすぐに受講できます。\t\t\t\n
\n*この講義は韓国語で進行され、日本語字幕が提供されます。\n\n\n\n

\n\n– 総学習期間: このコースは 23 時間のビデオ講義で構成されています。
\n– 受講開始日：受講開始日は決済日から期間が計算され、決済を完了すると、マイページからすぐに受講することができます。(事前予約の講座は1次講座オープン日)
\n– Fastcampusの都合で受講開始が遅れた場合は、該当日程分、受講開始日が延期されます。
\n", "title2": " \n\nご注意\n\n", "content2": "\n\n\n– 状況により、事前告知無しに割引が早期終了または延長される場合があります。
\n– 天災地変、廃業などサービス中断が避けられない状況には、サービスが終了する場合があります。
\n– 本商品は、既受講生の割引、その他割引イベントの適用ができない場合があります。
\n– カリキュラムは制作過程で一部追加、削除および変更される場合があります。
\n\n\n", "title3": " \n\n返金規定\n", "content3": " \n\n\n払い戻しポリシーについてもっと知りたいですか？►リンクを確認してください。\n\n\n", "title4": " \n\nFastcampusポリシーのご案内\t\n", "content4": " \n\n\n[Fastcampus ID共有禁止ポリシー］\t\n
\nFastcampusのすべてのオンライン講座では、1つのIDで複数の人が共有する形を禁止しています。\t\t\t\t\t\t\n
\n同時接続の記録は内部システムを通じて自動的に累積され、その後のサービス利用が制限される場合があります。\t\t\t\t\t\t\n

\n[著作権ポリシー］\n
\nFastcampusのすべての講座は、無断で配布・加工する行為、キャプチャと録画して共有する行為、無断で販売する行為など、一切の著作権侵害行為を禁止します。\t\t\t\t\t\t\n
不正使用が見つかった場合、著作権法違反による法的な制裁を受ける可能性があります。\t\t\t\t\t\n\n", "title5": "", "content5": "", "title6": "", "content6": "", "title7": "", "content7": "", "title8": "", "content8": "", "title9": "", "content9": "", "title10": "", "content10": "", "title11": "", "content11": "", "title12": "", "content12": "", "title13": "", "content13": "", "title14": "", "content14": "", "title15": "", "content15": "", "title16": "", "content16": "", "title17": "", "content17": "", "title18": "", "content18": "", "contentLinkTitle": "", "contentLinkDescription": "", "useNewTab": false, "contentLink": "" }, "hidden": false, "uniqueId": "fc-block-131-e67qde68g", "isChecked": false, "hasSyntaxErrorTags": false }, { "id": "fc-block-2-rwjpp364w", "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": "80", "backgroundColor": "#111" }, "uniqueId": "fc-block-3-g4vl7o0ve", "isChecked": false, "hasSyntaxErrorTags": false } ]

\n <%= title %>\n <% if (title2.trim().length !== 0) { %>\n <%= title2 %>\n <% } else { %>\n (자동 구성) 가격이 인상됩니다. \n <% } %> \n

\n (자동)\n 한 번 구매로,\n 평생 소장하세요.\n

<%= title %>

\"><%= title1 %>

\"><%= title2 %>

\"><%= title2 %>

\"><%= title3 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

<%= title1 %>

<%= title2 %>

<%= title3 %>

<%= title1 %>

<%= title2 %>

<%= title3 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title4 %>

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title4 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title4 %>

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title4 %>

\"><%= title1 %>

\"><%= title2 %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title1 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\">\n <%= title2 %>\n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\" transform=\"rotate(-180 16 16)\"/>\n \n \n \n \n \n \" stroke-width=\"2\" d=\"M10 13L15.951 19 22 13\"/>\n \n \n

\n <%= title %>\n <% if (title2.trim().length !== 0) { %>\n <%= title2 %>\n <% } else { %>\n (자동 구성) 가격이 인상됩니다. \n <% } %> \n

\n (자동)\n 한 번 구매로,\n 평생 소장하세요.\n

<%= title %>

\" style=\"border: 2px solid <%= labelColor || '#000000' %>; color: <%= labelColor || '#000000' %>\">\n <%= labelText %>\n

\"><%= title1 %>

\"><%= title2 %>

\"><%= title3 %>

\"><%= title4 %>

\n <%= title %>
\n <% if (title2.trim().length !== 0) { %>\n <%= title2 %>
\n <% } else { %>\n (자동 구성) 가격이 인상됩니다. \n <% } %> \n

\n (자동)
\n 한 번 구매로,
\n 평생 소장하세요.\n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\">\n <%= title1 %>\n \n \n

\">\n <%= title2 %>\n \n \n

\n <%= title %>
\n <% if (title2.trim().length !== 0) { %>\n <%= title2 %>
\n <% } else { %>\n (자동 구성) 가격이 인상됩니다. \n <% } %> \n

\n (자동)
\n 한 번 구매로,
\n 평생 소장하세요.\n

堅牢なUI 設計のための マークアップガイド

JP_The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명 Details

堅牢なUI 設計のための マークアップガイド

JP_The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명 Details

講座詳細

堅牢なUI 設計のためのマークアップガイド

堅牢なUI 設計のためのマークアップガイド