??? ? ?????? ?? ??? ??? ? ???, ??? ?? ??? ??? ?? ???? ?????. ? ????? CSS Flexbox ????? ???? ??? ?? ?? ??? ???? ?? ??? ??? ???? ? ??? ???? ???? ??? ???????. ??? ?? ??? ?? ??? ?? ??? ??? ???? ?? ??? ?? ????? ????? ???? ???? ???? ? ??? ??? ??? ??(?: ??)? ??? ???.

??? ???? ??: ???? ??? ???

? ???, ?? ?????? ?? ? ???? ??? ? ? ?? ??? ??? ???? ?? ???? ??? ??? ??? ????? ??? ??? ????. ??? ???? ????? ????? ??? ??? ???? ? ?? ??? ??? ? ????? ??? ???? ??? ???? ??? ???? ?? ?? ???? ?????? ??? ??? ??? ??? ?? ? ????.

?? ??? ?? ??? ???? ?? ?? ???? ???? ??? ?? ??????? ???? ? ??? ??? ?????? ???? ?? ??? ????. position:absolute? ?? ?? ???? ??? ????? ?? ????? ?? ??? ???? ??? ???? ?? ??? ???? ??? ? ????. ?? ?? ??? ??? ?? ?? ??? ?? ? ??? ??? ???? ???? ?? ???? ?? ??? ??????.

Flexbox: ??? ????? ?? ??? ??

?? ??? ???? ?? CSS Flexbox(??? ?? ????)? ???? ??? ???? ?????. Flexbox? ???? ????? ??? ??? ?? ?? ?? ?? ?? ??? ??? ?? ???? ??, ?? ? ??? ???? ??? ? ????.

??? ??? ??? ????:

1. ????????? ??? ???? ??? ?????.
2. ??? ??? ??? ???? ???? ??? ?? ??? ???? ??? ?? ??? ? ????.

?? ??: Flex ???? ? Flex ????

Flexbox ????? Flex ???? (?????? ?? ??: flex ?? ?????: inline-flex)? ?? Flex ?? (????? ?? ?? ??)?? ?????. ????? ??? Flex ??? ???? ???? ?? ??? ???? ??? ??? ? ????.

?? ?? ? ?? ??

Flexbox? ???? ??? ????? ???? ??? ???? ?? ??? ??? ??? ???? ??? ???? ?? ???????.

1. JSX ??

?? HTML(?? JSX)? ???? ????? ?? ????? ????? ?? ??? ????? ?????. ? ??? .home-page? Flex ????? ?? .text-zone ? .profile-img? Flex ????? ???.

 const ? = () => {
   ?? (
       <div classname="???? ????">
           <div classname="??? ??">
               <h1>? ??</h1>
               <h2>xxx? ?? | ? ? xxx ??</h2>
               ??? ????
           </div>
           <div classname="???-img">
             <img src="%7B%EC%96%BC%EA%B5%B4" alt="?? ??">
           </div>
       </div>
   )
}

2. SCSS/CSS ??

???? SCSS ??? ???? ??? ?? ?? ??? Flexbox? ???????.

?? Flexbox ??:

• display: flex;: .home-page ????? Flex ????? ?????.
• flex-wrap: Wrap;: ??? ??? ? Flex ??? ??? ?? ?????. ?? ??? ??? ???? ? ?????.
• align-items: center;: Flex ??? ?? ??? ?????.
• justify-content: center;: Flex ??? ?? ??? ?????.
• min-height: 100vh;: ????? ??? ??? 100% ??? ????? ??? ???? ?? ??? ????? ???.

??? ??:

??? ??(@media)? ???? ?? ??? ?? Flex ??? ???? ?????.

 .???? {
  ?????: ???;
  ??? ?: ?; // ?? ??? ???? ?? ???? ??? ??????. align-items: center; // ?? ?? ?? justify-content: center; // ?? ?? ?? min-height: 100vh; // ????? ??? ?? ??? ??? ????? ?????.
    // ?? ??: ??
    ??? ??: ??; // ?? ?? ?? ?? ?? ??: 0 16px; // ?? ?? max-height: 90%; // ?? ?? ?? // ?? ??(768px ??)
    @media (?? ??: 768px) {
      ??: 40%; // ??? 40%? ?? text-align: left; // ???? ?? ?????.}
  }

  h1 {
      ??: ??;
      ?? ??: 80px;
      ??: 0;
      ?? ??: '??? ??';
      ?? ??: 400;
      ?????: fadeIn 1s 1.7s ??;
  }

  .profile-img {
    // ?? ??: ??
    ?? ??: 140px; // ?? ?? ??? ?? ??? ??? ?? ??? ?????. 0 16px; // ?? ?? z-index: -1; // ??? ???? ?? ?????. box-shadow: 4rem 3rem rgba(0, 0, 0, 0.4);

    // ?? ??(1200px ??)? ??
    @media (?? ??: 1200px) {
      ?? ???: -180px; // ??? ??? ?? ???? ? ??? ? ?? ??? ??? ?????.}

    &:?? {
        ??: 2px ??? darkgoldenrod;
        ??? ???: 2rem;
        ??: ?? .2s;
        ??? ??: 2px;
        ?? ??: ??;
    }
  }
}

h2 {
  ?? ??: '??? ??';
  ??: #8d8d8d;
  ?????: fadeIn 1s 1.8s ??;
}

.?? ?? {
  ???: ??;
  ??: ???;
  ?? ??: 1.6rem;
  ?? ??: 6rem;
  ??? ??: ??;
  ??: 1.5rem 4rem;
  ?????: ??? ??;
  ?? ??: 10px;
  ?????: fadeIn 1s 1.8s ??;
  ?? ??: 2px;

  &:?? {
    ???: #8d8d8d;
    ??: 2px ??? darkgoldenrod;
    ??: ??;
  }
}

?? ??:

• .home-page ????:
  • ?????: ???; Flexbox ????? ??????.
  • ??? ?: ?; ??? ??? ??? ? text-zone? profile-img? ???? ? ???? ??? ??? ?? ? ??? ????.
  • ?? ??: ??; ?? ???: ??; ???? ????? ?? ? ?? ??? ????? ?????.
  • ?? ??: 100vh; ????? ?? ??? ??? ????? ???. ?? ?? ?? ?????? ?? ??? ??? ???? ?????.
• .text-zone ? .profile-img ????:
  • ??? ??: ??, ?? ???? ?? ???? Flexbox? ?? ?????.
  • ??? ??(@media(?? ??: 768px)):
    • ?? ??? 768px?? ??? ??? .text-zone? ???? ??? 40%? ???? ???? ?? ?????. flex-wrap:wrap;? ?? ??? profile-img? ??? ??? ??? ? ??? ??? ?????.
    • 768px?? ?? ????? ??? ???? ??? ??? ??? ? flex-wrap ??? ?? ???? ???? ?? ?????.
  • margin-top ? margin-right? ?? ??? ?? ???? ? ??? ? ??? ?? ??? ?????? ?? ??? ??? ???? ???? ???.

?? ??

?? Flexbox? ??? ?? ??? ???? ?? ??? ??? ? .text-zone? .profile-img? ??? ?????. flex-wrap:wrap ??? ?? ??? ?? ??(?: 768px ??) ???? ???? ??? ?? ????? ?? ??? ????? ??? ? ????.

?? ?? ? ?? ??

• ?? ?? ??: ??: ???? ??? ??? ??? ??? ???? ??? ?? ??? ???? ?? ??? ?? ? Flexbox ?? ??? ????? ????? ??? ???.
• flex-wrap? ? ?????: Wrap: ?? ??? ??? ???? ?? ? ?????.
• ??? ?? ???? ???? ?????. ??? ?? ??? ???? ?? ??? ?? ??? @media ???? ?????. ????? ???? ????? 576px(?? ???), 768px(???/?? ???), 992px(????), 1200px(?? ????)? ????.
• ??? ?? ? ?? ?? ???: ?? ?? ???? ??? ??? ???? ??? ?? ? ?? ??? ??????? ?? ???? ????? ??? ????? ??????.
• ???? HTML ??: HTML ???? ??? ???? ???? ?? ?? ???? ?????.

??

??? ??? ?? CSS Flexbox? ???? ?? ??? ? ????? ???? ???? ???? ?????. ????? ??? ??? ????(display: flex;) ??? ???? ??(flex-wrap:wrap;)???? ??? ?? ??? ??? ???? ?? ??? ???? ??? ??? ?? ?? ? ?? ???? ???? ??? ??? ??? ??? ? ????. ? ??? ??? ?? ???? ???? ?? ??? ??? ???? ???? ?? ??? ?? ??????.

? ??? Flexbox? ???? ??? ???? ??: ???? ???? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!