Solution URL: Github Live Site URL: Vercel

간단한 것 같은데 은근히 배울점이 많았던 프로젝트였다.

// App.tsx
import avartar from './assets/images/avatar-jessica.jpeg'
import SocialButton from './components/SocialButton';

export default function App(){
  return(
    <div className="bg-[#141414] min-h-screen flex items-center justify-center">
      <div className="bg-[#1f1f1f] rounded-md px-6 py-8 flex flex-col items-center w-full max-w-[350px]">
        <img src={avartar} className='rounded-full w-24 h-24'></img>
        <h1 className='mt-6 text-white text-[24px] text-center font-[Inter-SemiBold]'>
          Jessica Randall
        </h1>
        <h2 className='mb-6 text-[#d9f96a] text-center font-[Inter-SemiBold] text-[14px]'>
          London, United Kingdom
        </h2>
        <p className='text-[#c2c2c2] mb-4 text-center text-[14px] font-[Inter-Regular]'>
          "Front-end developer and avid reader."
        </p>
        <div className='flex flex-col gap-4 w-full'>
          <SocialButton url="https://github.com" name="GitHub"></SocialButton>
          <SocialButton url="https://frontendmentor.io" name="Frontend Mentor"></SocialButton>
          <SocialButton url="https://linkedin.com" name="LinkedIn"></SocialButton>
          <SocialButton url="https://x.com" name="Twitter"></SocialButton>
          <SocialButton url="https://instagram.com" name="Instagram"></SocialButton>
        </div>
      </div>
    </div>
  );
}

// SocialButton.tsx
export default function SocialButton({ name, url }:{ name:string; url:string; }){
  return(
    <a href={url} className="py-3 text-white text-[14px] bg-[#333333] rounded-md font-[Inter-SemiBold] text-center hover:text-[#1f1f1f] hover:bg-[#d9f96a] hover:cursor-pointer transition-colors">
      {name}
    </a>
  );
}

What I Learned

Layout

반응형 웹 카드 너비

카드로 만든 div 태그에 w-full, max-w-[350px] 속성을 같이 두면 반응형 웹에 맞는 가로 사이즈를 만들 수 있다. w-full은 부모 요소의 너비를 가득 채우라는 의미로, 화면이 작아지면 카드도 같이 작아지게 만든다. **max-w-[350px]**는 최대 너비를 의미한다. 화면이 아무리 커져도 350px 이상으로는 커지지 않게 막는다. 두 속성이 합쳐져 반응형 웹에 맞는 너비로 계산된다.

Tag

a 태그

다른 링크로 이동하는 요소를 만들 때는 보통 button 태그가 아니라 a 태그를 사용한다.

Continued Development

mx-auto

카드를 가운데 정렬할 때 부모에 flex, justify-center, align-center를 주는 방식이 아니라 본인에게 mx-auto(마진 너비 자동)을 주는 방식이 있다고 한다. 다음에 확인 해 봐야겠다.