인프런 커뮤니티 질문&답변

page.tsx에서 Fragment를 사용해서 left와 right를 감싸주셨는데 이 때, page.module.css의 .container 스타일이 자동으로 적용이 되는 건가요 ??export default function Main() { return ( <> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </> ); }저는 코드를 똑같이 작성 했는데도 이렇게 다른 스타일이 적용되어 column 형식으로 나누어져 보입니다. 그래서 직접적으로 스타일을 적용시키기 위해export default function Main() { return ( <div className={styles.container}> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </div> ); }이렇게 최상위 div에 className으로 container를 지정해주었는데구조가 이런식으로 변경이 되었고, right의 내용이 다 나타나지 않아서 적용이 잘 된 것 같진 않는데 어떻게 해결하면 될까요 ?