[Next.js] React 기능들을 이용해서 디자인하기

오늘은 저번 시간과 마찬가지로 Next.js와 친해지는 시간을 가져보겠습니다.

 

그러기 위해서는 React기능들을 복습할 필요가 있겠네요.

 

이번 공부는 코딩애플님의 강좌를 참고하였습니다.

 

<div>

      <div className='toolbar'>

        <Link href = "/">Home</Link><Link href = "/list">상세 1</Link>

        </div>

       <div className = "frontdoor"><h2>Next.js 입문</h2></div>

     

      </div>

React에서와 똑같이 div 태그안에 className을 통해서 css를 디자인할 수 있습니다.

 

<Link>태그는 html에 a href태그와 같은 기능을 합니다.

 

<Link href = "/">는 기본페이지로 이동하게 해주고, 

 

<Link href = "list">는 기본페이지 뒤에 /list를 입력하면 그 페이지로 이동하게 해줍니다.

 

<h2> 태그는 글자의 크기를 키워줍니다. 이때 <h4> ~ <h1> 역순으로 크기가 증가합니다.

 

Next.js에서 css를 건드리려면 React의 app.js와 똑같은 역할을 하는 globals.css로 이동을 해야합니다.

 

내용을 다 지우고 

 

.frontdoor{

  text-align: center;

  margin-top: 50px;

}

.(className){

(디자인코드)

}

 

이렇게 작성하면 됩니다. 한 번 되는지 확인해 볼까요?

 

터미널을 열어서 npm run dev를 입력해줍시다.

 

css 적용

성공적으로 적용 되었네요. 

 

글귀가 가운데에 위치하고, margin-top을 주어서 위로 간격이 생기게 하였습니다.

 

그리고 왼쪽 위를 보시면 경로로 이동할 수 있는 Home과 상세 1 버튼을 만들었습니다.

 

상세 1을 눌러서 이동하는지 확인해 봅시다.

 

상세 1

성공적으로 이동하네요. 여기까지가 리액트의 Routing 기능이었습니다.

 

조금 더 페이지를 디자인 해보겠습니다.

 

body{

  margin : 0;

  background: rgb(88, 84, 82);

  color : white

}

.frontdoor{

  text-align: center;

  margin-top: 150px;

}

.toolbar{

  background-color: rgba(40, 38, 60, 0.456);

  padding:20px;

}

.toolbar a{

  margin-right : 10px;

  text-decoration: none;

  color:aliceblue;

}

 

 

body태그에 스타일을 주게되면 전체 페이지에 스타일을 적용할 수 있습니다.

 

className이 toolbar인 태그를 만들어 놨는데

 

toolbar 뒤에 a를 쓰면 toolbar의 글씨를 따로 디자인할 수 있다는 것을 알게되었습니다.

 

margin을 통해 간격을 조정하고, color와 background-color를 통해 색상을 조정하였습니다.

 

적용 모습

 

상세 페이지에는 버튼을 만들어 보겠습니다.

 

.btn{

  padding:20px;

  width:200px;

  margin : 20px auto;

  background-color: white;

  text-align: center;

  color: black;

  border-radius: 5px;

}

width  >> 가로크기

 

margin : 20px auto >> 위아래 20px 여백, 좌우는 균등 분배

 

border-radius  >> 둥글게 만드는 속성

 

상세페이지 css 적용

그럴듯한 버튼이 생겼네요. 

 

버튼태그를 써도 되지만, css의 속성들과 친해지기 위해서 만들어 보았습니다.

 

오늘은 어떤 페이지를 구현할지 생각을 안해놓은 상태라서 기본 틀만 만들어 봤습니다.

 

다음 시간에는 구체적인 목표를 갖는 페이지를 만들어 보겠습니다!