3. Next.js 페이지 레이아웃 만들기

이전글에 만들었던 탬플릿에 h4테그를 활용해서 "안녕"이라는 문구를 넣어서 웹페이지에 띄워 봤습니다.

웹사이트 레이아웃은 리액트 버전 HTML과 CSS로 작성됩니다.

크게 차이점은 없습니다.

 

리액트버전 HTML의 4가지 규칙이 있는데 다음과 같습니다. 

1. 리액트버전 HTML을 JSX라고 부르는데 중요한건 아니구여

 

2. HTML을 작성할때 return( ) 안에 작성하게 됩니다.

 

3.테그들을 평행해서 사용이 불가능 합니다. 아래처럼 div의 같은줄에 div를 생성하게 되면 아래처럼 빨간줄이 나오게 되구여

return () 안의 HTML을 넣을때 1개의 <태그>로 시작해서 끝내야 하구여

이런 룰이 있기 때문에 위 코드 처럼 div안에 작성을 해야 하구여

 

4. HTML에 스타일을 집어넣고 싶으시다구여 그럼 아래처럼 class를 작성해야 합니다.

위 코드처럼 className 라고 작성해야 하구여

왜냐하면 이 코드들은 js 문법이기 때문에 js에는 class라는 문법이 있습니다. 이거와 겹치지 않기 위해 작성하는 겁니다.

 

잘 변경이 됐구여

 

기본 설정과 설명이 끝났으니 이제 저에게 필요한 코드들만 포스팅할 예정이구여