목차Next js 튜토리얼 1편: 시작하기Next js 튜토리얼 2편 : 페이지 이동 Next js 튜토리얼 3편 : 공통 컴포넌트 사용Next js 튜토리얼 4편 : 동적 페이지 Next js 튜토리얼 5편 : 동적 라우팅 Next js 튜토리얼 6편 : 데이터 가져오기 Next js 튜토리얼 7편 : 컴포넌트 스타일링 - 현재 글Next js 튜토리얼 8편 : 배포 Styling Components지금까지 컴포넌트의 스타일링을 많이 하지 않았습니다. 하지만 앱에는 스타일이 필요합니다.리엑트 앱에는 스타일을 적용하는 많은 기술들이 있으며, 크게 두가지의 방법으로 분류할 수 있습니다 1. 전통적인 css 파일 기반에 스타일링 (SASS, PostCSS 등)2. CSS in Js 스타일링 전통적인 css ..
next js 프레임 워크는 서버사이드와 클라이언트 사이드 렌더링이 이루어져 기존의 react에서 처럼 css를 import하는 방법으로는 css를 적용 시킬 수 없다. 그에 따라 styled-component와 bootstrap을 적용 시키기 위해 여러 삽질(?)을 했고 적용이 완료 되어 정리하려고 한다. styled-component 적용nextjs에서 제공하는 보일러 플레이트https://github.com/zeit/next.js/tree/master/examples/with-styled-components 우선 styled-component를 적용 시키기 위해서는 babel 설정과 _document.js 설정을 해주어야 한다. node-module 설치 npm install styled-compo..
inline 속성과 block속성 - inline 속성 : 안에 있는 값만큼만 공간을 차지, inline속성을 height값을 가지지 않는다 - block 속성 : 한줄을 만큼의 공간을 차지 display: inline - 해당하는 엘리멘트를 inline 속성으로 바꿈 display: block; - 해당하는 엘리멘트를 block 속성으로 바꿈 display: inline-block - 해당하는 엘리멘트를 inline속성과 block 속성을 가지게함 - 높이값도 가지고 안의 내용만큼만 공간차지background url background: url(../img/header_bg.jpg) center top repeat-x;div에 원하는 이미지를 넣을 수 있다. center 속성은 이미지의 가운데 부분을 ..