\ud559\ub825, \uc790\uaca9\uc0ac\ud56d, \uc778\uc801\uc0ac\ud56d\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uc18c\uac1c \uc139\uc158\uc744 \ub9cc\ub4ed\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec<\/strong>\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4. \uc139\uc158 \uc81c\ubaa9\uc740 About Me, Projects, Contacts \uc5d0\uc11c \ubc18\ubcf5 \uc0ac\uc6a9<\/strong>\ub429\ub2c8\ub2e4. \uc0ac\uc6a9 \uc608\uc2dc:<\/p>\n \uc778\uc801\uc0ac\ud56d \ud56d\ubaa9\uc774 5\uac1c\ub098 \ub429\ub2c8\ub2e4. \ud328\ud134\uc774 \ubc18\ubcf5\ub429\ub2c8\ub2e4.<\/p>\n JSX \uc548\uc5d0\uc11c \uc8fc\uc11d\uc744 \uc4f8 \ub54c\ub294 \uc800\uc7a5 \ud6c4 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c:<\/p>\n 05. AboutMe.jsx \u2014 \uc18c\uac1c \uc139\uc158 \uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c \ud559\ub825, \uc790\uaca9\uc0ac\ud56d, \uc778\uc801\uc0ac\ud56d\uc744 \ubcf4\uc5ec\uc8fc\ub294 \uc18c\uac1c \uc139\uc158\uc744 \ub9cc\ub4ed\ub2c8\ub2e4. \uc7ac\uc0ac\uc6a9 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \ubc30\uc6c1\ub2c8\ub2e4. \ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d \u2502 \u2500\u2500\u2500 ABOUT ME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u2502 \u2502 \ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4. \u2502 \u2502 \u2502 \u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502 \u2502 \ud559\ub825 \ubc0f \uad50\uc721\uc0ac\ud56d \u2502 \uc778\uc801\uc0ac\ud56d \u2502 \u2502 \u2502 \u2502 22.10-22.10 | \uc218\ub8cc … \ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-113","post","type-post","status-publish","format-standard","hentry","category-react-resume"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=113"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/113\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\uc7ac\uc0ac\uc6a9 \ucef4\ud3ec\ub10c\ud2b8<\/strong>\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \ubc30\uc6c1\ub2c8\ub2e4.<\/p>\n
\n\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d<\/h2>\n
\u2502 \u2500\u2500\u2500 ABOUT ME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u2502\n\u2502 \ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4. \u2502\n\u2502 \u2502\n\u2502 \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\n\u2502 \u2502 \ud559\ub825 \ubc0f \uad50\uc721\uc0ac\ud56d \u2502 \uc778\uc801\uc0ac\ud56d \u2502 \u2502\n\u2502 \u2502 22.10-22.10 | \uc218\ub8cc \u2502 \uc774\ub984 : \uc624\uc131\uc758 \u2502 \u2502\n\u2502 \u2502 20.02-22.10 | \uc878\uc5c5 \u2502 \ub098\uc774 : 1996.05. \u2502 \u2502\n\u2502 \u2502 \u2502 \uac70\uc8fc\uc9c0 : \uc11c\uc6b8\uc2dc \uc11c\ucd08\uad6c \u2502 \u2502\n\u2502 \u2502 \uc790\uaca9\uc0ac\ud56d \u2502 \ud734\ub300\ud3f0 : 010.xxxx \u2502 \u2502\n\u2502 \u2502 21.07 | \ucef4\ud65c 2\uae09 \u2502 \uc774\uba54\uc77c : xxx@xxx \u2502 \u2502\n\u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\n<\/code><\/pre>\n
\n\uc0c8\ub85c\uc6b4 \uac1c\ub150: props (\uc18d\uc131)<\/h2>\n
\nHTML \ud0dc\uadf8\uc758 \uc18d\uc131\ucc98\ub7fc \uc501\ub2c8\ub2e4.<\/p>\n\/\/ \ub370\uc774\ud130 \uc804\ub2ec (\ubd80\ubaa8)\n<SectionTitle title="ABOUT ME" subtitle="\ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c..." \/>\n\n\/\/ \ub370\uc774\ud130 \ubc1b\uae30 (\uc790\uc2dd)\nconst SectionTitle = ({ title, subtitle }) => {\n return <h2>{title}<\/h2> \/\/ "ABOUT ME"\n}\n<\/code><\/pre>\n
\nSTEP 1 \u2014 SectionTitle \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h2>\n
\n\ud55c \ubc88 \ub9cc\ub4e4\uc5b4\ub450\uba74 \uc5b4\ub514\uc11c\ub4e0 \uac00\uc838\ub2e4 \uc4f8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\/\/ src\/components\/SectionTitle.jsx\n\nconst SectionTitle = ({ title, subtitle }) => {\n return (\n <div className="section-title">\n {\/* \uc138\ub85c \ub77c\uc778 + \ud070 \uc81c\ubaa9 *\/}\n <div className="section-title__row">\n <div className="section-title__line" \/>\n <h2 className="section-title__text">{title}<\/h2>\n <\/div>\n {\/* \uc791\uc740 \ubd80\uc81c\ubaa9 *\/}\n <p className="section-title__sub">{subtitle}<\/p>\n <\/div>\n )\n}\n\nexport default SectionTitle\n<\/code><\/pre>\n\/\/ AboutMe \uc139\uc158 \uc81c\ubaa9\n<SectionTitle title="ABOUT ME" subtitle="\ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4." \/>\n\n\/\/ Projects \uc139\uc158 \uc81c\ubaa9\n<SectionTitle title="Projects" subtitle="\ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4." \/>\n<\/code><\/pre>\n
\nSTEP 2 \u2014 AboutMe.jsx \uc791\uc131<\/h2>\n
\/\/ src\/components\/AboutMe.jsx\nimport SectionTitle from '.\/SectionTitle'\n\n\/* \u2500\u2500\u2500 \uc778\uc801\uc0ac\ud56d \ud55c \uc904 \ucef4\ud3ec\ub10c\ud2b8 \u2500\u2500\u2500 *\/\n\/\/ label\uacfc value\ub97c \ubc1b\uc544\uc11c "\uc774\ub984 : \uc624\uc131\uc758" \ud615\ud0dc\ub85c \ucd9c\ub825\nconst InfoRow = ({ label, value }) => {\n return (\n <div className="info-row">\n <span className="info-row__label">{label} :<\/span>\n <span className="info-row__value">{value}<\/span>\n <\/div>\n )\n}\n\n\/* \u2500\u2500\u2500 AboutMe \uba54\uc778 \ucef4\ud3ec\ub10c\ud2b8 \u2500\u2500\u2500 *\/\nconst AboutMe = () => {\n return (\n <section className="about" id="aboutme">\n\n {\/* \uc139\uc158 \uc81c\ubaa9 *\/}\n <SectionTitle\n title="ABOUT ME"\n subtitle="\ub048\uae30\uc640 \uc5f4\uc815\uc73c\ub85c \uc131\uc7a5\ud558\ub294 \uc624\uc131\uc758\uc785\ub2c8\ub2e4."\n \/>\n\n {\/* 2\ub2e8 \uadf8\ub9ac\ub4dc \ub808\uc774\uc544\uc6c3 *\/}\n <div className="about-grid">\n\n {\/* \uc67c\ucabd: \ud559\ub825 + \uc790\uaca9\uc0ac\ud56d *\/}\n <div className="about-left">\n\n {\/* \ud559\ub825 \ube14\ub85d *\/}\n <div className="about-block">\n <h3 className="about-block__title">\ud559\ub825 \ubc0f \uad50\uc721\uc0ac\ud56d<\/h3>\n <div className="about-block__item">\n <span className="about-block__date">22.10 - 22.10<\/span>\n <span>UI\/UX \ubc18\uc751\ud615 \uc6f9\ub514\uc790\uc778 & \uc6f9\ud37c\ube14\ub9ac\uc154 \uc591\uc131\uacfc\uc815 \uc218\ub8cc<\/span>\n <\/div>\n <div className="about-block__item">\n <span className="about-block__date">20.02 - 22.10<\/span>\n <span>\uacbd\uae30\ub300\ud559\uad50 \uc2dd\ud488\uc0dd\ubb3c\uacf5\ud559\uacfc \uc878\uc5c5<\/span>\n <\/div>\n <\/div>\n\n {\/* \uc790\uaca9\uc0ac\ud56d \ube14\ub85d *\/}\n <div className="about-block">\n <h3 className="about-block__title">\uc790\uaca9\uc0ac\ud56d<\/h3>\n <div className="about-block__item">\n <span className="about-block__date">21.07<\/span>\n <span>\ucef4\ud4e8\ud130 \ud65c\uc6a9\ub2a5\ub825 2\uae09<\/span>\n <\/div>\n <\/div>\n\n <\/div>\n\n {\/* \uc624\ub978\ucabd: \uc778\uc801\uc0ac\ud56d *\/}\n <div className="about-right">\n <h3 className="about-block__title">\uc778\uc801\uc0ac\ud56d<\/h3>\n\n {\/* InfoRow \ucef4\ud3ec\ub10c\ud2b8 \ubc18\ubcf5 \uc0ac\uc6a9 *\/}\n <InfoRow label="\uc774\ub984" value="\uc624\uc131\uc758" \/>\n <InfoRow label="\ub098\uc774" value="1996.05." \/>\n <InfoRow label="\uac70\uc8fc\uc9c0" value="\uc11c\uc6b8\uc2dc \uc11c\ucd08\uad6c" \/>\n <InfoRow label="\ud734\ub300\ud3f0" value="010.9589.5603" \/>\n <InfoRow label="\uc774\uba54\uc77c" value="34715603@naver.com" \/>\n <\/div>\n\n <\/div>\n <\/section>\n )\n}\n\nexport default AboutMe\n<\/code><\/pre>\n
\n\ucf54\ub4dc \uc124\uba85<\/h2>\n
InfoRow<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub530\ub85c \ub9cc\ub4dc\ub294 \uc774\uc720<\/h3>\n\/\/ \ucef4\ud3ec\ub10c\ud2b8 \uc5c6\uc774 \uc791\uc131\ud558\uba74 (\ubc18\ubcf5\uc774 \ub9ce\uc74c)\n<div className="info-row">\n <span className="info-row__label">\uc774\ub984 :<\/span>\n <span className="info-row__value">\uc624\uc131\uc758<\/span>\n<\/div>\n<div className="info-row">\n <span className="info-row__label">\ub098\uc774 :<\/span>\n <span className="info-row__value">1996.05.<\/span>\n<\/div>\n\/\/ ... 5\ubc88 \ubc18\ubcf5\n\n\/\/ \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4e4\uba74 (\uac04\uacb0\ud568)\n<InfoRow label="\uc774\ub984" value="\uc624\uc131\uc758" \/>\n<InfoRow label="\ub098\uc774" value="1996.05." \/>\n\/\/ ... \ud6e8\uc52c \uc9e7\uace0 \uc77d\uae30 \uc26c\uc6c0\n<\/code><\/pre>\nJSX \uc8fc\uc11d
{\/* *\/}<\/code><\/h3>\n{\/* *\/}<\/code> \ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n\/\/ JavaScript \uc8fc\uc11d (JSX \ubc16\uc5d0\uc11c)\nconst x = 1\n\nreturn (\n <div>\n {\/* JSX \uc8fc\uc11d (JSX \uc548\uc5d0\uc11c) *\/}\n <p>\ub0b4\uc6a9<\/p>\n <\/div>\n)\n<\/code><\/pre>\n
\nSTEP 3 \u2014 CSS \ucd94\uac00<\/h2>\n
\/* src\/index.css \uc5d0 \ucd94\uac00 *\/\n\n\/* \u2500\u2500 \uc139\uc158 \uacf5\ud1b5 \uc81c\ubaa9 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.section-title {\n margin-bottom: 48px;\n}\n\n.section-title__row {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 8px;\n}\n\n\/* \uc138\ub85c \uac80\uc815 \ub77c\uc778 *\/\n.section-title__line {\n width: 2px;\n height: 36px;\n background-color: #000;\n}\n\n.section-title__text {\n font-size: 48px;\n font-weight: 700;\n color: #000;\n}\n\n.section-title__sub {\n font-size: 16px;\n color: #555555;\n padding-left: 18px; \/* \uc138\ub85c \ub77c\uc778 \ub108\ube44\ub9cc\ud07c \ub4e4\uc5ec\uc4f0\uae30 *\/\n}\n\n\/* \u2500\u2500 About Me \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.about {\n padding: 80px 24px;\n}\n\n\/* 2\ub2e8 \uadf8\ub9ac\ub4dc *\/\n.about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr; \/* \uc67c\ucabd 50% : \uc624\ub978\ucabd 50% *\/\n gap: 40px;\n}\n\n.about-block {\n margin-bottom: 32px;\n}\n\n\/* \ube14\ub85d \uc18c\uc81c\ubaa9 *\/\n.about-block__title {\n font-size: 18px;\n font-weight: 600;\n color: #333333;\n margin-bottom: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid #eeeeee;\n}\n\n\/* \ud56d\ubaa9 \ud55c \uc904 *\/\n.about-block__item {\n display: flex;\n gap: 16px;\n padding: 12px 0;\n font-size: 16px;\n color: #747474;\n border-bottom: 1px solid #f5f5f5;\n}\n\n\/* \ub0a0\uc9dc \ubd80\ubd84 *\/\n.about-block__date {\n color: #555555;\n white-space: nowrap; \/* \ub0a0\uc9dc\uac00 \uc904\ubc14\uafc8\ub418\uc9c0 \uc54a\uac8c *\/\n min-width: 100px;\n}\n\n\/* \u2500\u2500 \uc778\uc801\uc0ac\ud56d \ud589 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.info-row {\n display: flex;\n gap: 16px;\n padding: 8px 0;\n font-size: 16px;\n border-bottom: 1px solid #f5f5f5;\n}\n\n.info-row__label {\n width: 70px;\n color: #3a3a3a;\n}\n\n.info-row__value {\n color: #727272;\n}\n<\/code><\/pre>\n
\n\ube0c\ub77c\uc6b0\uc800 \ud655\uc778<\/h2>\n
\n
\n\uc815\ub9ac<\/h2>\n
\n\n
\n \n\uac1c\ub150<\/th>\n \uc0ac\uc6a9 \ubaa9\uc801<\/th>\n<\/tr>\n<\/thead>\n \n props<\/code><\/td>\n\ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130 \uc804\ub2ec<\/td>\n<\/tr>\n \n SectionTitle<\/code><\/td>\n\uc139\uc158 \uc81c\ubaa9 \uc7ac\uc0ac\uc6a9 \ucef4\ud3ec\ub10c\ud2b8<\/td>\n<\/tr>\n \n InfoRow<\/code><\/td>\n\ubc18\ubcf5\ub418\ub294 \ud589 \uc7ac\uc0ac\uc6a9 \ucef4\ud3ec\ub10c\ud2b8<\/td>\n<\/tr>\n \n grid-template-columns: 1fr 1fr<\/code><\/td>\n2\ub2e8 \ub808\uc774\uc544\uc6c3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n","protected":false},"excerpt":{"rendered":"