{"id":1345,"date":"2026-06-26T13:43:36","date_gmt":"2026-06-26T13:43:36","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=1345"},"modified":"2026-06-26T13:43:36","modified_gmt":"2026-06-26T13:43:36","slug":"%ec%9d%b8%ed%84%b0%ed%8e%98%ec%9d%b4%ec%8a%a4%ec%84%a4%ea%b3%84","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=1345","title":{"rendered":"\uc778\ud130\ud398\uc774\uc2a4\uc124\uacc4"},"content":{"rendered":"

\ud53c\uadf8\ub9c8 \uc778\ud130\ud398\uc774\uc2a4 \uc124\uacc4<\/h1>\n
\n

1. \uc640\uc774\uc5b4\ud504\ub808\uc784\uc5d0 \uc544\uc774\ucf58 \ub123\uae30<\/h2>\n

1-1. \uc900\ube44<\/h3>\n

<li><\/code><\/p>\n

\uc2dc\uc791 \ud504\ub808\uc784\uc73c\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. (05-\uc778\ud130\ud398\uc774\uc2a4\/1.\uc544\uc774\ucf58\ub123\uae30)<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\ud50c\ub7ec\uadf8\uc778\uc744 \uc124\uce58\ud569\ub2c8\ub2e4. (Iconify)<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\uc21c\uc11c\ub300\ub85c \uc9c4\ud589\ud569\ub2c8\ub2e4.<\/p>\n

<\/li><\/code><\/p>\n

1-2. \uc544\uc774\ucf58 \ub123\uae30<\/h3>\n

<li><\/code><\/p>\n

\uadf8\ub9bc\uacfc \uac19\uc774 \uc544\uc774\ucf58\uc744 \uacb9\uccd0 \ub193\uc2b5\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\uc0c9\uc0c1 \ubcf5\uc81c \uc801\uc6a9: \ud53c\uadf8\ub9c8\uc758 \uc0c9\uc0c1 HEX \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec Iconify\uc758 color \uc785\ub825 \uc0c1\uc790\uc5d0 \ubd99\uc5ec\ub123\uc740 \ud6c4 \uc544\uc774\ucf58\uc744 \uc801\uc6a9\ud574\ubd05\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\ud558\ub2e8 \ud0ed\ubc14\uc758 \uc544\uc774\ucf58\ub3c4 \uc801\uc6a9\ud574\ubd05\uc2dc\ub2e4. (home, category, cart, search)<\/p>\n

<\/li><\/code><\/p>\n

\n

2. Flow \uc81c\uc791<\/h2>\n

\ud654\uba74\uc758 \ud750\ub984\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ud45c\ud604\ud558\ub294 Flow\ub97c \uc81c\uc791\ud574\ubd05\uc2dc\ub2e4.<\/p>\n

2-1. \uc900\ube44<\/h3>\n

autoflow \ud50c\ub7ec\uadf8\uc778\uc744 \uc124\uce58\ud569\ub2c8\ub2e4. \ubb34\ub8cc \ubc84\uc804\uc740 \ud30c\uc77c\ub2f9 50\uac1c \uc0ac\uc6a9 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n

2-2. \ud65c\uc6a9<\/h3>\n

<li><\/code><\/p>\n

\ud50c\ub7ec\uadf8\uc778\uc744 \uc5fd\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\uc2dc\uc791 \ub808\uc774\uc5b4\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\ub9c8\uc9c0\ub9c9 \ub808\uc774\uc5b4\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\ud50c\ub85c\uc6b0 \uc120\uc774 \uc790\ub3d9 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\uc120 \ubaa8\uc591\uc740 \ud50c\ub7ec\uadf8\uc778 \ud328\ub110\uc744 \ud65c\uc6a9\ud569\ub2c8\ub2e4. \uc5f0\uacb0\uc120\uc744 \uc120\ud0dd\ud558\uba74 \uc635\uc158 \ucc3d\uc774 \uc5f4\ub9bd\ub2c8\ub2e4.<\/p>\n

<\/li><\/code><\/p>\n

\n

3. Auto Layout<\/h2>\n

3-1. \uc624\ud1a0\ub808\uc774\uc544\uc6c3 \uc801\uc6a9<\/h3>\n

<li><\/code><\/p>\n

\ud45c\uc2dc\ub41c \ub808\uc774\uc5b4\ub97c \uc120\ud0dd \ud6c4 \uc18d\uc131\uc744 \uc120\ud0dd\ud558\uc5ec \uc870\uc808\ud569\ub2c8\ub2e4.<\/p>\n

<\/li><\/code>
\n<li><\/code><\/p>\n

\ub808\uc774\uc5b4 \uc120\ud0dd \ud6c4 \uc6b0\ud074\ub9ad\ud558\uc5ec \ud45c\uc2dc\ub41c \uba54\ub274\ub97c \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n

<\/li><\/code><\/p>\n

3-1-1. \uc624\ud1a0\ub808\uc774\uc544\uc6c3 \uc635\uc158 \ud655\uc778<\/h4>\n
    \n
  1. \uc815\ub82c \ubc29\ud5a5<\/li>\n
  2. \uc0c1\ud558 \ub9c8\uc9c4<\/li>\n
  3. \uc88c\uc6b0 \ud328\ub529<\/li>\n
  4. \uc0c1\ud558 \ud328\ub529<\/li>\n
  5. \ud328\ub529 \uac12 \uac1c\ubcc4 \uc785\ub825<\/li>\n
  6. \ucf58\ud150\uce20 \uc815\ub82c<\/li>\n<\/ol>\n
    \n

    3-1-2. \ub9ac\uc0ac\uc774\uc9d5 \uc635\uc158 \ud655\uc778<\/h4>\n

    \uc624\ud1a0 \ub808\uc774\uc544\uc6c3\uc740 "\uc790\ub3d9\uc73c\ub85c" \ub808\uc774\uc544\uc6c3\uc744 \ub9de\ucdb0 \uc8fc\ub294 \uae30\ub2a5\uc73c\ub85c \uc694\uc18c\ub97c \uacf5\uac04(\ud504\ub808\uc784)\uc5d0 \ub9de\ucdb0 \ub123\uace0 \uc815\ub82c\ud558\ub294 \uae30\ub2a5\uc785\ub2c8\ub2e4.<\/p>\n

    \ub9ac\uc0ac\uc774\uc9d5 \uc635\uc158\uc740 \ud504\ub808\uc784\uc758 \ud06c\uae30 \uc9c0\uc815 \uc2dc \uae30\uc900\uc744 \uc124\uc815\ud558\ub294 \uac83\uc785\ub2c8\ub2e4.<\/p>\n

      \n
    1. Hug Contents<\/strong>: \ud504\ub808\uc784 \ub0b4\uc758 \ucf58\ud150\uce20(\ud558\uc704 \uc694\uc18c) \uae30\uc900<\/li>\n
    2. Fixed<\/strong>: \ubb34\uc870\uac74 \uc815\ud574\uc9c4 \ub108\ube44<\/li>\n
    3. Fill Container<\/strong>: \ud504\ub808\uc784 \uae30\uc900\uc73c\ub85c \ucf58\ud150\uce20(\ud558\uc704 \uc694\uc18c) \ubc30\uce58<\/li>\n<\/ol>\n
      \n

      Tip<\/strong>: \ud504\ub808\uc784\uc744 \uc138 \uac1c \ubcf5\uc0ac\ud558\uc5ec \ucc28\uc774\uc810\uc744 \ube44\uad50\ud574\ubd05\uc2dc\ub2e4.<\/p>\n<\/blockquote>\n

      \n

      3-2. \uc81c\uc57d – Constraints<\/h3>\n

      \uac00\ubcc0 \ub514\uc790\uc778 \uc81c\uc791 \uc2dc \uc124\uc815\ud558\ub294 \uc81c\uc57d \uc870\uac74\uc785\ub2c8\ub2e4. \uc694\uc18c\uc758 \uc704\uce58, \ud06c\uae30\ub97c \ub9ac\uc0ac\uc774\uc9d5\ud560 \ub54c \ubd80\ubaa8 \ud504\ub808\uc784\uc758 \uae30\uc900\uc810\uc744 \uc124\uc815\ud558\ub294 \uc635\uc158\uc785\ub2c8\ub2e4.<\/p>\n

      \ud504\ub808\uc784 \ud558\uc704\uc758 \ubc15\uc2a4 \ub808\uc774\uc5b4\uc758 \uc81c\uc57d \uae30\uc900\uc744 \ubcc0\uacbd\ud558\uc5ec \uc124\uc815\ud574\ubd05\uc2dc\ub2e4.<\/p>\n

      \n

      3-3. \ub9ac\uc0ac\uc774\uc9d5<\/h3>\n

      \ub9ac\uc0ac\uc774\uc9d5\uc740 \uc624\ud1a0\ub808\uc774\uc544\uc6c3 \uc0c1\ud0dc\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

      <li><\/code><\/p>\n

      \ub808\uc774\uc5b4 \uc138\ud2b8\ub97c \ubcf5\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      \ub808\uc774\uc5b4\ub97c \uc120\ud0dd \ud6c4 Shift + A<\/code>\ub97c \ub20c\ub7ec \uc624\ud1a0\ub808\uc774\uc544\uc6c3\uc744 \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      \ub9c8\uc9c0\ub9c9 \ub808\uc774\uc5b4\ub97c \uc120\ud0dd \ud6c4 \uc6b0\uce21 \ud328\ub110\uc5d0\uc11c \ud45c\uc2dc\ub41c \uc635\uc158\uc744 \uc120\ud0dd\ud569\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      \ud55c \uc138\ud2b8 \ub354 \ubcf5\uc0ac \ud6c4 Auto Layout\uc73c\ub85c \ub9cc\ub4ed\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code><\/p>\n

      \n

      4. \ubc18\uc751\ud615 \ub514\uc790\uc778<\/h2>\n

      4-1. \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n

      <li><\/code><\/p>\n

      24×24 #555 \uc758 \uc6d0 6\uac1c\ub97c \uadf8\ub9bd\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      Iconify\uc5d0\uc11c insta, facebook, twitter, figma, ux, design \uc544\uc774\ucf58\uc744 \uac80\uc0c9\ud569\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      \uc6d0 \uc704\uc5d0 \ubc30\uce58\ud569\ub2c8\ub2e4. (Alt + H<\/code> \u2192 Alt + V<\/code>)<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub4f1\ub85d\ud569\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      Ctrl + R<\/code>\ub85c \ucef4\ud3ec\ub10c\ud2b8 \uc774\ub984\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4: icon\/kind\/color<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc120\ud0dd\ud558\uace0 \uc6b0\uce21 \ud328\ub110\uc758 Combine as Variants\ub97c \ud074\ub9ad\ud569\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      Property\uba85\uc744 \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n

      <\/li><\/code>
      \n<li><\/code><\/p>\n

      Variant \uac12\uc744 \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n

        \n
      • color\ub294 gray\ub85c \uc218\uc815<\/li>\n
      • kind\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uac1c\ubcc4 \uc120\ud0dd\ud558\uc5ec \ud574\ub2f9 \uac12\uc73c\ub85c \ubcc0\uacbd<\/li>\n<\/ul>\n

        <\/li><\/code>
        \n<li><\/code><\/p>\n

        \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ubcf5\uc0ac \ud6c4 \uc774\ub3d9\ud569\ub2c8\ub2e4.<\/p>\n

        <\/li><\/code>
        \n<li><\/code><\/p>\n

        \uc0c9\uc0c1\uc744 \uc218\uc815\ud558\uace0 Variant\ub97c white\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n

        <\/li><\/code>
        \n<li><\/code><\/p>\n

        \ud584\ubc84\uac70 \uba54\ub274\uc640 \uc88c\uc6b0 \ubc84\ud2bc\ub3c4 \ucd94\uac00\ud569\ub2c8\ub2e4. \uc0c8\ub85c \uadf8\ub9b0 \ud6c4 \ubca0\ub9ac\uc5b8\ud2b8(Variant)\uc5d0 \ub4f1\ub85d\ud569\ub2c8\ub2e4.<\/p>\n

        <\/li><\/code><\/p>\n

        \n

        Warning<\/strong>: \ub4f1\ub85d \uc2dc \uc778\uc2a4\ud134\uc2a4 \ud558\uc704 \ud504\ub808\uc784\uc758 \uc81c\uc57d \uc870\uac74\uc774 Scale\uc774\uc5b4\uc57c \ubc30\uacbd\uacfc \uc544\uc774\ucf58\uc774 \ud568\uaed8 \ud06c\uae30 \uc870\uc808\ub429\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

        \n

        4-2. PC \ub808\uc774\uc544\uc6c3<\/h3>\n

        4-2-1. PC\/Header<\/h4>\n
          \n
        • Frame: 1440×1024<\/li>\n
        • Grid \uc124\uc815<\/li>\n<\/ul>\n

          Header-left<\/strong><\/p>\n

          <li><\/code><\/p>\n

          Frame: Nav \/ 100% 40px \/ #d78d9<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          Type Tool\ub85c home, work, about, contact\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. \uc791\uc131 \uc2dc \uac1c\ubcc4 \ub808\uc774\uc5b4\ub85c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ub808\uc774\uc5b4 4\uac1c\ub97c \uc120\ud0dd \ud6c4 \uc6b0\uce21 \ud328\ub110\uc5d0\uc11c \uc218\ud3c9 \uc5ec\ubc31\uc744 40\uc73c\ub85c \uc870\uc808\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uba54\ub274 \ud14d\uc2a4\ud2b8\ub97c \uadf8\ub8f9\uc73c\ub85c \ubb36\uc740 \ud6c4 \uadf8\ub8f9\uba85\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          Header-right<\/strong><\/p>\n

          <li><\/code><\/p>\n

          \uc0c1\ub2e8 \ud234\ubc14 \u2192 \ub9ac\uc18c\uc2a4 \u2192 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc774\ub3d9 \u2192 \uc81c\uc791\ud55c \uc544\uc774\ucf58 \uc778\uc2a4\ud134\uc2a4\ub97c \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc778\uc2a4\ud134\uc2a4\ub97c 2\uac1c \ub354 \ubcf5\uc0ac \ud6c4 \ubc30\uce58\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc218\ud3c9 \uac04\uaca9\uc740 20\uc73c\ub85c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc544\uc774\ucf58 \uc2a4\uc651: \uc544\uc774\ucf58 \uc778\uc2a4\ud134\uc2a4 \uc120\ud0dd \ud6c4 \uc6b0\uce21 \ud328\ub110\uc5d0\uc11c kind\uc758 \uc635\uc158\uc744 \ub2e4\ub978 SNS\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          Header-title<\/strong><\/p>\n

          <li><\/code><\/p>\n

          My Design Portfolio \ud14d\uc2a4\ud2b8\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud3f0\ud2b8\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc815\ub82c \uc124\uc815: \uc0c1\ub2e8 \ub808\uc774\uc5b4\ub85c\ubd80\ud130 50px \ub0b4\ub824\uc635\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc11c\ube0c\ud0c0\uc774\ud2c0\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4. (\uc0c9\uc0c1: #F2B8A2)<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc138\ub85c \uac04\uaca9\uc744 \ub9de\ucda5\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          \ubaa8\ub450 \uc120\ud0dd \ud6c4 Header \ud504\ub808\uc784\uc73c\ub85c \ubb36\uc2b5\ub2c8\ub2e4.<\/p>\n

          \n

          4-2-2. PC\/Features<\/h4>\n

          \ubc30\uacbd \ub9cc\ub4e4\uae30<\/strong><\/p>\n

          <li><\/code><\/p>\n

          \uc0ac\uac01\ud615: 1440 x 300 #F1F1F1<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc0ac\uac01\ud615: 1110 x 300<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc774\ubbf8\uc9c0 \ubd88\ub7ec\uc624\uae30: figma-image\uc758 \uc774\ubbf8\uc9c0 \uc911 \uc544\ubb34\uac70\ub098 \ubd88\ub7ec\uc635\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ub808\uc774\uc5b4 \ub204\uc801 \uc21c\uc11c\ub97c \ud655\uc778\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ub808\uc774\uc5b4 \ub450 \uac1c \uc120\ud0dd \ud6c4 \ub9c8\uc2a4\ud06c\ub97c \uc801\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ubc30\uacbd \ub808\uc774\uc5b4\uc640 \ub9c8\uc2a4\ud06c \uadf8\ub8f9 \ub808\uc774\uc5b4\ub97c \uadf8\ub8f9\uc73c\ub85c \ubb36\uc740 \ud6c4 Feature\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          \ucf58\ud150\uce20 \ube14\ub85d<\/strong><\/p>\n

          <li><\/code><\/p>\n

          \ud504\ub808\uc784: 370 x 300 (1100\/3=370)<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc120: 1 x 300 \/ #fff \/ \uc88c\uce21 \uc0c1\ub2e8 \uc815\ub82c<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc544\uc774\ucf58: \uc778\uc2a4\ud134\uc2a4\ub97c \uc801\uc6a9\ud569\ub2c8\ub2e4. (64×64)<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud558\ub2e8\uc5d0 \ud14d\uc2a4\ud2b8\ub97c \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          icon\uacfc text \ub808\uc774\uc5b4 \uc120\ud0dd \ud6c4 Auto Layout \u2192 icon-box<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc120\uacfc \uc624\ud1a0 \ub808\uc774\uc5b4\ub97c \uc120\ud0dd \ud6c4 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub4f1\ub85d\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc778\uc2a4\ud134\uc2a4\ub97c \ub450 \uac1c \ubcf5\uc0ac\ud558\uc5ec \uc6b0\uce21\uc5d0 \ubc30\uce58\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc138 \ubc88\uc9f8 \uc778\uc2a4\ud134\uc2a4\ub294 \uc6b0\uce21 \uc120\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc778\uc2a4\ud134\uc2a4\uc758 \ubca0\ub9ac\uc5b8\ud2b8\ub97c \uc218\uc815\ud558\uc5ec \uc544\uc774\ucf58\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          \ubaa8\ub4e0 \ub808\uc774\uc5b4\ub97c Features \ud504\ub808\uc784\uc73c\ub85c \ubb36\uc2b5\ub2c8\ub2e4.<\/p>\n

          \n

          4-2-3. PC\/Services<\/h4>\n

          <li><\/code><\/p>\n

          Design Service \ud0c0\uc774\ud2c0\uc744 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          Text \ud234 \uc120\ud0dd \ud6c4 \ub4dc\ub798\uadf8 \u2192 \uc18d\uc131\uc744 \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc6b0\ud074\ub9ad \u2192 Plugin \u2192 Lorem Ipsum<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud0c0\uc774\ud2c0\uacfc \ubcf8\ubb38 \uac04\uaca9 20<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ubb38\ub2e8 \ud558\ub098\uc758 \ud06c\uae30: 540 x 120, \ubb38\ub2e8\uc744 \uc591\ucabd \uc815\ub82c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc6b0\uce21\uc73c\ub85c \ubb38\ub2e8\uc744 \ubcf5\uc0ac\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          Design \ud504\ub808\uc784\uc73c\ub85c \ubaa8\ub450 \ubb36\uc2b5\ub2c8\ub2e4.<\/p>\n

          \n

          4-2-4. PC\/Portfolio<\/h4>\n

          Portfolio \ud504\ub808\uc784 \ub9cc\ub4e4\uae30<\/strong><\/p>\n

          \ud504\ub808\uc784: 1440 x 525 \/ #F4F1F1 \u2192 [Portfolio]<\/p>\n

          carousel \ud504\ub808\uc784 \ub9cc\ub4e4\uae30<\/strong><\/p>\n

          \ud504\ub808\uc784: 1110 x 335 \u2192 [carousel]<\/p>\n

          \ud0c0\uc774\ud2c0 \uc791\uc131<\/strong><\/p>\n

          Features \ud0c0\uc774\ud2c0\uc744 \ubcf5\uc0ac \uc774\ub3d9 \u2192 Portfolio\ub85c \ubcc0\uacbd, 50px \uc0c1\ub2e8 \uc5ec\ubc31<\/p>\n

          \uce74\ub4dc \ub9cc\ub4e4\uae30<\/strong><\/p>\n

          <li><\/code><\/p>\n

          \ub799\ud0f1\uade4 \ud234 \u2192 254 x 254 \u2192 [photo-box]<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud504\ub808\uc784 \u2192 \ud14d\uc2a4\ud2b8 \ud234 \u2192 \ub85c\ub818\uc785\uc228 \u2192 \uc624\ud1a0\ub808\uc774\uc544\uc6c3 \u2192 [text-box]<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ub450 \uac1c\uc758 \uadf8\ub8f9\uc744 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4ed\ub2c8\ub2e4 \u2192 [card]<\/p>\n

          <\/li><\/code><\/p>\n

          \ucf58\ud150\uce20 \uc801\uc6a9<\/strong><\/p>\n

          <li><\/code><\/p>\n

          \uc778\uc2a4\ud134\uc2a4\ub97c 4\uac1c \uc801\uc6a9\ud558\uc5ec \uc774\ubbf8\uc9c0\uc640 \ud14d\uc2a4\ud2b8\ub97c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uce74\ub4dc \uc88c\uc6b0\uc758 \ucee8\ud2b8\ub864 \ubc84\ud2bc\uc740 \uc544\uc774\ucf58\uc758 \uc778\uc2a4\ud134\uc2a4\ub97c \ub123\uc2b5\ub2c8\ub2e4. \ub808\uc774\uc5b4 \ub204\uc801 \uc21c\uc11c\ub294 \uce90\ub85c\uc140 \ud504\ub808\uc784\uc758 \ubc14\uae65\uc5d0 \ubc30\uce58\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ubc84\ud2bc \uc81c\uc791: \ud504\ub808\uc784 253×60, more portfolio, \ub450 \uac1c\uc758 \ub808\uc774\uc5b4\ub97c \uc624\ud1a0\ub808\uc774\uc544\uc6c3\uc73c\ub85c \ubb36\uc2b5\ub2c8\ub2e4 \u2192 [button]<\/p>\n

          <\/li><\/code><\/p>\n

          \ud504\ub808\uc784 \ud558\ub2e8 \uc5ec\ubc31 \ud655\uc778 \ud6c4 \ub9c8\ubb34\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n

          \n

          4-2-5. PC\/Footer<\/h4>\n

          \ud504\ub808\uc784: 1440 x 335 \/ #374140 \u2192 [Footer]<\/p>\n

          \n

          Tip<\/strong>: \ud504\ub808\uc784\uc758 \uae38\uc774\uac00 \uc9e7\uc544 \uc798\ub9ac\uba74 \uc804\uccb4 \ud504\ub808\uc784\uc758 \uae38\uc774\ub97c \ub298\uc785\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

          box1<\/strong><\/p>\n

          <li><\/code><\/p>\n

          \ud504\ub808\uc784: 350 x 200<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud14d\uc2a4\ud2b8: From the Blog #E35765<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud14d\uc2a4\ud2b8: #9D9D9D<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud14d\uc2a4\ud2b8: 2023.01.23 \/ #9D9D9D<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          3, 4\ub97c \uc624\ud1a0\ub808\uc774\uc544\uc6c3\uc73c\ub85c \ubb36\uc2b5\ub2c8\ub2e4 \u2192 [paragraph]<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          5\ub97c \ubcf5\uc0ac\ud558\uc5ec \uc544\ub798\ub85c \uc774\ub3d9 \ud6c4 5\uc640 6\uc744 \uc624\ud1a0\ub808\uc774\uc544\uc6c3\uc73c\ub85c \ubb36\uc2b5\ub2c8\ub2e4 \u2192 [content]<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          paragraph \uadf8\ub8f9 \ud558\ub098\ub97c \ubcf5\uc0ac\ud558\uc5ec \ubd99\uc5ec\ub123\uc2b5\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud0c0\uc774\ud2c0\uacfc content\ub97c \uc624\ud1a0\ub808\uc774\uc544\uc6c3\uc73c\ub85c \ubb36\uc2b5\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          box2<\/strong><\/p>\n

          box1\uc744 \ubcf5\ubd99\ud569\ub2c8\ub2e4. \ud0c0\uc774\ud2c0 \ubcc0\uacbd: Contact Us. content > paragraph\ub294 \ud55c \uac1c\ub9cc \ub0a8\uae30\uace0 \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/p>\n

          box3<\/strong><\/p>\n

          <li><\/code><\/p>\n

          box1\uc744 \ubcf5\ubd99\ud569\ub2c8\ub2e4. \ud0c0\uc774\ud2c0 \ubcc0\uacbd: Subscribe<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud504\ub808\uc784: 350×40 \/ fill: #4F5554 \/ stroke: #6D6D6D<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \ud14d\uc2a4\ud2b8: your name<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          \uc624\ud1a0\ub808\uc774\uc544\uc6c3 \u2192 [input]<\/p>\n

          <\/li><\/code>
          \n<li><\/code><\/p>\n

          input \uadf8\ub8f9\uc744 \ubcf5\ubd99 \ud6c4 \ud14d\uc2a4\ud2b8\ub97c \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n

          <\/li><\/code><\/p>\n

          copyright \ud504\ub808\uc784: 1440 x 40<\/p>\n

          \n

          4-3. \ud0dc\ube14\ub9bf \ub808\uc774\uc544\uc6c3<\/h3>\n

          PC \ud504\ub808\uc784\uc744 \ubcf5\ubd99\ud558\uace0 \ud504\ub808\uc784\uba85\uc744 [TABLET]\uc73c\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/p>\n

          4-3-1. Header<\/h4>\n
            \n
          1. Nav \ub108\ube44 768<\/li>\n
          2. Title \ub108\ube44 768<\/li>\n
          3. \uc218\ub3d9\uc73c\ub85c \uc704\uce58 \uc870\uc815<\/li>\n<\/ol>\n

            4-3-2. Banner<\/h4>\n

            \uc778\uc2a4\ud134\uc2a4 \uc138 \uac1c \uc120\ud0dd \ud6c4 \ud3ed\uc744 \uc904\uc785\ub2c8\ub2e4.<\/p>\n

            4-3-3. Design<\/h4>\n

            \uceec\ub7fc\uc758 \ud3ed\uc5d0 \ub9de\uac8c \ub108\ube44\ub97c \uc904\uc785\ub2c8\ub2e4.<\/p>\n

            4-3-4. Portfolio<\/h4>\n
              \n
            1. \ub808\uc774\uc5b4\uc758 \uad6c\uc870\ub97c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/li>\n
            2. carousel \ud504\ub808\uc784\uc758 \uc18d\uc131\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n

              4-3-5. Footer<\/h4>\n

              \ub808\uc774\uc544\uc6c3\uc744 \uc870\uc815\ud569\ub2c8\ub2e4.<\/p>\n

              \n

              4-4. \ubaa8\ubc14\uc77c \ub808\uc774\uc544\uc6c3<\/h3>\n

              \ud0dc\ube14\ub9bf \ud504\ub808\uc784\uc744 \ubcf5\ubd99\ud558\uace0 \uc774\ub984\uc744 [MOBILE]\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4. width: 360<\/p>\n

              4-4-1. \ub808\uc774\uc544\uc6c3 \uadf8\ub9ac\ub4dc \uc124\uc815<\/h4>\n
                \n
              1. \ubcf4\ub354 \uc5e3\uc9c0(Border Edge) \uc124\uc815<\/li>\n
              2. \uceec\ub7fc(Column) \uc124\uc815<\/li>\n<\/ol>\n

                4-4-2. Header<\/h4>\n

                \uc6d0\ub381\uc2a4\uc758 \ud504\ub808\uc784 \ub808\uc774\uc5b4 \ub108\ube44\ub97c \ubaa8\ub450 360\uc73c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\n

                Nav<\/strong><\/p>\n

                <li><\/code><\/p>\n

                Nav \uc548\uc758 \ub808\uc774\uc5b4\ub97c \ud504\ub808\uc784 \ubc16\uc73c\ub85c \ube7c\ub0c5\ub2c8\ub2e4.<\/p>\n

                <\/li><\/code>
                \n<li><\/code><\/p>\n

                \uc544\uc774\ucf58 \uc778\uc2a4\ud134\uc2a4\ub97c \ub123\uc2b5\ub2c8\ub2e4.<\/p>\n

                <\/li><\/code>
                \n<li><\/code><\/p>\n

                \uc778\uc2a4\ud134\uc2a4 \uc885\ub958\ub97c \ud584\ubc84\uac70\ub85c \ubcc0\uacbd \ud6c4 \uac04\uaca9\uc744 \uc870\uc815\ud569\ub2c8\ub2e4.<\/p>\n

                <\/li><\/code>
                \n<li><\/code><\/p>\n

                \uc6b0\uce21\uc5d0 SNS \uc544\uc774\ucf58\ub4e4\uc744 \uac00\uc838\uc640 \ubc30\uce58\ud569\ub2c8\ub2e4.<\/p>\n

                <\/li><\/code>
                \n<li><\/code><\/p>\n

                SNS \uac04\uaca9\uc744 \uc870\uc815\ud569\ub2c8\ub2e4.<\/p>\n

                <\/li><\/code><\/p>\n

                Title<\/strong><\/p>\n

                  \n
                1. \ud3f0\ud2b8 \ud06c\uae30\ub97c \uc218\uc815\ud569\ub2c8\ub2e4.<\/li>\n
                2. \ud558\uc704 \ud504\ub808\uc784\uc758 \ub9ac\uc0ac\uc774\uc9d5 \uc635\uc158\uc744 \ubcc0\uacbd\ud558\uc5ec \uc911\uc559 \uc815\ub82c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n

                  main-menu<\/strong><\/p>\n

                  \ud574\ub2f9 \uba54\ub274\ub294 \ud584\ubc84\uac70 \uc544\uc774\ucf58 \ud074\ub9ad \uc2dc \ubcf4\uc785\ub2c8\ub2e4. \ubcf4\uc774\ub294 \ub514\uc790\uc778\uc744 \uad6c\ud604\ud574\ub193\uace0 \uc778\ud130\ub809\uc158\uc740 \ucd94\ud6c4 \uc81c\uc791\ud569\ub2c8\ub2e4.<\/p>\n

                  <li><\/code><\/p>\n

                  main-menu\ub97c mobile \uc548\uc73c\ub85c \uac00\uc838\uc635\ub2c8\ub2e4.<\/p>\n

                  <\/li><\/code>
                  \n<li><\/code><\/p>\n

                  main-menu\uc758 fill\uc744 #374140\uc73c\ub85c \ud569\ub2c8\ub2e4.<\/p>\n

                  <\/li><\/code>
                  \n<li><\/code><\/p>\n

                  \uc624\ud1a0\ub808\uc774\uc544\uc6c3\uc758 \uc124\uc815\uc744 \uc870\uc815\ud569\ub2c8\ub2e4.<\/p>\n

                  <\/li><\/code>
                  \n<li><\/code><\/p>\n

                  \ub808\uc774\uc5b4 \uc774\ub984\uc744 \ubcc0\uacbd\ud569\ub2c8\ub2e4 \u2192 [mobile-toggle-menu]<\/p>\n

                  <\/li><\/code><\/p>\n

                  4-4-3. Banner<\/h4>\n

                  Banner\uc758 fill \uc18d\uc131\uc740 \uc0ad\uc81c\ud569\ub2c8\ub2e4. MOBILE \ud504\ub808\uc784\uc758 \uae38\uc774\ub97c \uc804\uccb4\uc801\uc73c\ub85c \ub298\uc778 \ud6c4 \uc791\uc5c5\ud569\ub2c8\ub2e4.<\/p>\n

                  Features<\/strong><\/p>\n

                    \n
                  1. \ud504\ub808\uc784 \ub108\ube44\ub97c 360\uc73c\ub85c \uc218\uc815\ud569\ub2c8\ub2e4.<\/li>\n
                  2. \ub0b4\ubd80\uc758 \ubd88\ud544\uc694\ud55c \uadf8\ub8f9\uc740 \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/li>\n
                  3. \ub192\uc774 120<\/li>\n
                  4. 3\uac1c \ubcf5\uc0ac<\/li>\n<\/ol>\n

                    feature-box<\/strong><\/p>\n

                      \n
                    1. feature-box \uc778\uc2a4\ud134\uc2a4\ub97c detach \ud569\ub2c8\ub2e4.<\/li>\n
                    2. Line\uc744 \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/li>\n
                    3. Auto Layout \ubc29\ud5a5\uc744 row\ub85c \ubcc0\uacbd\ud569\ub2c8\ub2e4.<\/li>\n
                    4. \ub2e4\uc2dc \uba54\uc778 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubb36\uc2b5\ub2c8\ub2e4.<\/li>\n
                    5. \ub098\uba38\uc9c0 \ub450 \uac1c\ub294 \uc778\uc2a4\ud134\uc2a4\ub97c \uc801\uc6a9\ud558\uc5ec kind \ubca0\ub9ac\uc5b8\ud2b8\ub97c \uc218\uc815\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n

                      4-4-4. Design<\/h4>\n

                      \uc0c1\ub2e8 \uc5ec\ubc31 50. \ud3f0\ud2b8 \uc0ac\uc774\uc988\uc640 \uc904\uac04\uaca9\uc744 \uc870\uc815\ud569\ub2c8\ub2e4.<\/p>\n

                      4-4-5. Portfolio<\/h4>\n

                      \uc0c1\ub2e8 \uac04\uaca9 50.<\/p>\n

                        \n
                      1. carousel \ud504\ub808\uc784\uc744 \uc911\uc559\uc73c\ub85c \uc774\ub3d9 \ud6c4 \ub108\ube44\ub97c 328\ub85c \uc870\uc815\ud569\ub2c8\ub2e4.<\/li>\n
                      2. \uc88c\uc6b0 \ucee8\ud2b8\ub864 \ubc84\ud2bc\uc744 \uc0ad\uc81c\ud569\ub2c8\ub2e4.<\/li>\n
                      3. \uc5ec\ubc31\uacfc \ud3f0\ud2b8 \uc0ac\uc774\uc988\ub97c \uc870\uc815\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n

                        4-4-6. Footer<\/h4>\n
                          \n
                        1. box \uadf8\ub8f9\uc744 \uc138\ub85c \ubc30\uce58\ud569\ub2c8\ub2e4. (Footer \uae38\uc774 \ub298\uc784)<\/li>\n
                        2. copyright \ub108\ube44 360 \/ fontsize: 12, \uc704\uce58\ub97c \uc544\ub798\ub85c \ub0b4\ub9bd\ub2c8\ub2e4.<\/li>\n
                        3. box \uadf8\ub8f9\uc758 \ud0c0\uc774\ud2c0 fontsize: 22<\/li>\n
                        4. box \uadf8\ub8f9 \uac04 \uc138\ub85c \uac04\uaca9 30<\/li>\n<\/ol>\n
                          \n

                          Info<\/strong>: \uc774 \ud398\uc774\uc9c0\uc758 \uc2a4\ud06c\ub9b0\uc0f7 \uc774\ubbf8\uc9c0\ub294 Notion\uc5d0\uc11c \uc9c1\uc811 \ud655\uc778\ud558\uc138\uc694. \ud53c\uadf8\ub9c8 \uc608\uc81c \ud30c\uc77c\uc5d0\uc11c \uc2e4\uc2b5\ud558\uba70 \ub530\ub77c\ud574\ubcf4\ub294 \uac83\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

                          \ud53c\uadf8\ub9c8 \uc778\ud130\ud398\uc774\uc2a4 \uc124\uacc4 1. \uc640\uc774\uc5b4\ud504\ub808\uc784\uc5d0 \uc544\uc774\ucf58 \ub123\uae30 1-1. \uc900\ube44 <li> \uc2dc\uc791 \ud504\ub808\uc784\uc73c\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4. (05-\uc778\ud130\ud398\uc774\uc2a4\/1.\uc544\uc774\ucf58\ub123\uae30) <\/li> <li> \ud50c\ub7ec\uadf8\uc778\uc744 \uc124\uce58\ud569\ub2c8\ub2e4. (Iconify) <\/li> <li> \uc21c\uc11c\ub300\ub85c \uc9c4\ud589\ud569\ub2c8\ub2e4. <\/li> 1-2. \uc544\uc774\ucf58 \ub123\uae30 <li> \uadf8\ub9bc\uacfc \uac19\uc774 \uc544\uc774\ucf58\uc744 \uacb9\uccd0 \ub193\uc2b5\ub2c8\ub2e4. <\/li> <li> \uc0c9\uc0c1 \ubcf5\uc81c \uc801\uc6a9: \ud53c\uadf8\ub9c8\uc758 \uc0c9\uc0c1 HEX \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec Iconify\uc758 color \uc785\ub825 \uc0c1\uc790\uc5d0 \ubd99\uc5ec\ub123\uc740 \ud6c4 \uc544\uc774\ucf58\uc744 \uc801\uc6a9\ud574\ubd05\ub2c8\ub2e4. <\/li> <li> \ud558\ub2e8 \ud0ed\ubc14\uc758 … \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":[26],"tags":[],"class_list":["post-1345","post","type-post","status-publish","format-standard","hentry","category-html-css-ui"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/1345","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=1345"}],"version-history":[{"count":0,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/1345\/revisions"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}