React/next.js
[next.js] 개발진스 프로젝트 생성하기
Judith Hopps
2023. 3. 22. 19:46
반응형
레이아웃 헤더에서 컴포넌트별 이미지 차이 주기
페이지에서 레이아웃 구성요소 사용시 `처럼 사용하여 {home ? () : 뷰 ? () : () } ③을 사용해서 코드 간편화
componenet/Layout.js
<Head>
<link rel="icon" href="/favicon.ico" />
<meta
name="description"
content="Learn how to build a personal website using Next.js"
/>
<meta
property="og:image"
content={`https://og-image.vercel.app/${encodeURI(
siteTitle,
)}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
/>
<meta name="og:title" content={siteTitle} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<header className={styles.header}>
{home ? (
<>
<Image
priority
src="/images/리진스.jpg"
className={utilStyles.borderCircle}
height={144}
width={144}
alt=""
/>
<h1 className={utilStyles.heading2Xl}>{name}</h1>
</>
) : (vue ? (
<>
<Link href="/">
<Image
priority
src="/images/뷰진스.jpg"
className={utilStyles.borderCircle}
height={400}
width={400}
alt=""
/>
</Link>
<h2 className={utilStyles.heading2Xl}>
뷰진스
</h2>
</>
) : angular ? (
<>
<Link href="/">
<Image
priority
src="/images/앵진스.jpg"
className={utilStyles.borderCircle}
height={400}
width={400}
alt=""
/>
</Link>
<h2 className={utilStyles.heading2Xl}>
앵진스
</h2>
</>
) :(
<>
<Link href="/">
<Image
priority
src="/images/h진스.jpg"
className={utilStyles.borderCircle}
height={400}
width={400}
alt=""
/>
</Link>
<h2 className={utilStyles.heading2Xl}>
h진스
</h2>
</>
) ) }
</header>
반응형