Solution URL: Github Live Site URL: Versel

두번째 프로젝트이자, 무료로 피그마 파일을 받을 수 있는 마지막 프로젝트이다. 크기를 정확하게 볼 수 있는게 좋았는데 아쉽다.🥲

import thumbnail from './assets/images/illustration-article.svg'
import user from './assets/images/image-avatar.webp'

export default function App()
{
  return(
    <div className="bg-[#F4D04E] min-h-screen flex items-center justify-center">
      <div className="bg-white border border-[#111111] w-[384px] p-6 rounded-[20px] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
        <img src={thumbnail} className='rounded-[10px] w-full'></img>
        <div className='mt-6'>
          <button className='bg-[#F4D04E] pt-1 pb-1 pl-3 pr-3 rounded-sm font-[Figtree-ExtraBold]'>
            Learning
          </button>
          <p className='mt-3 text-[14px] text-[#111111] font-[Figtree-Medium]'>
            Published 21 Dec 2023
          </p>
          <h1 className='mt-3 text-[24px] text-[#111111] font-[Figtree-ExtraBold] hover:text-[#F4D04E] cursor-pointer transition-colors'>
            HTML & CSS foundations
          </h1>
          <p className='mt-3 text-[16px] text-[#6B6B6B] font-[Figtree-Medium]'>
            These languages are the backbone of every website, defining structure, content, and presentation.
          </p>
        </div>
        <div className='mt-6 flex items-center'>
          <img src={user} className='w-8 h-8'></img>
          <h1 className='text-[14px] text-[#111111] ml-3 font-[Figtree-ExtraBold]'>
            Greg Hooper
          </h1>
        </div>
      </div>
    </div>
  );
}

What I Learned

Hover

mouse hover시 글자 색상 바꾸기

className에서 원하는 속성 앞에 hover: 를 적어주면 된다. 글자 색상을 바꾸고 싶다면 hover:text-[#F4D04E] 라고 쓰는 식이다. 유의할 점은 적용하고 싶은 속성마다 hover:를 적어줘야한다는 점이다. 적고나서 그 뒤의 속성이 전부 적용되는 것으로 착각해서는 안된다. (경험담)

색상 부드럽게 변하게 하기

transition-colors를 사용하면 색상이 뚝딱하고 바로 바뀌는 것이 아니라, 살짝 애니메이션을 주면서 변한다.

커서 화살표로 바꾸기

cursor-pointer를 사용한다.

Font

Font .ttf 파일 적용하기

index.css 파일에 @font-face를 적용하고, font-family와 src를 각각 입력한다. font-family는 원하는 클래스 명, src는 .ttf 파일의 경로를 적어주면 된다. 그리고 JSX에서 적용할 때는 className에 font-family로 지정한 이름을 font-[Figtree-ExtraBold] 형태로 입혁한다. format(‘truetype’)은 브라우저가 폰트 파일 형식을 확인할 때 사용하는 속성이다. .ttf의 경우에는 truetype을 쓰는데, .woff2의 경우에는 woff2를 사용한다.

@font-face {
  font-family: 'Figtree-ExtraBold';
  src: url('./assets/fonts/Figtree-ExtraBold.ttf') format('truetype');
}

Shadow

진한 그림자 적용하기

연한 그림자는 shadow-sm과 같은 주어진 수치를 사용하면 되는데, 예제처럼 진한 그림자는 shadow-[x축 y축 blur spread color] 형태를 사용한다. shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]인 경우 x와 y축으로 8px 이동하고, blur와 spread 값은 주지 않으며, 색상은 불투명도 100%인 검은색으로 지정되게된다.

Continued Development

@font-face

CSS로 font 다루는 방법을 좀 더 확인하고 싶다.

woff2

.ttf보다 .woff2가 더 효율이 좋다고 하는데, 확장자에 따라 어떻게 다른지 알아보고 싶다.