성2

body에는 기본적으로 margin이 들어간다 초기 세팅할때 margin: 0;을 주고 들어가면 css 적용이 수월하다 시계 방향으로 값을 준다 body { margin: 0; } h1 { border: solid 1px black; /* 시계방향 */ /* padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; */ padding: 10px 20px 30px 40px; /* top은 10px, right, left는 20px, bottom은 30px */ padding: 10px 20px 30px; /* top, bottom은 10px, right, left는 20px */ padding: 10px 20px; }..

Next.js는 pre-rendering을 제공한다 = HTML 페이지를 미리 렌더링해서 브라우저로 보내준다. 여기서 데이터도 함께 패칭할 수 있는데, getStaticProps, getStaticPaths, getServerSideProps를 사용하면 된다 * 9.3 버전 이후 getInitialProps가 getStaticProps, getStaticPaths, getServerSideProps으로 세분화 getServerSideProps는 요청할때마다 html이 생성되기 때문에, 데이터가 계속 바뀌어야 하는 페이지의 경우 사용한다 getServerSideProps 예시 : props로 전달하여 렌더링 할 수 있다 export default function Home({results}) { 👈 2️⃣ ..

- absolute의 기준이 되는 것은 relative(relative가 없다면 body가 기준) - relative는 자신 위치 기준 .box1 { position: static; background-color: green; color: white; width: 100px; height: 100px; } .box2 { position: relative; left: 40px; top: 30px; background-color: red; color: white; width: 100px; height: 100px; } .box3 { position: absolute; left: 100px; top: 100px; background-color: red; color: white; width: 100px; hei..

Redirects : 요청 경로를 다른 경로로 리디렉션할 수 있다 ex. /old 👉 /new 리디렉션은 next.confing.js에서 사용할 수 있다 next는 웹팩을 기본 번들러로 사용하기 때문에, webpack.config.js 대신 next.config.js 파일을 사용해 커스터마이징 할 수 있다 //Next.config.js 기본형 module.exports = { reactStrictMode: true, } redirects 예시 module.exports = { reactStrictMode: true, async redirects() { return [ { source: '/old', 👈 destination: '/new', 👈 permanent: true, 👈 }, ] }, } - sou..

다양한 요소를 '띄워서' 정렬하는 속성을 가진다 보통 블록 속성을 가진 객체를 정렬하는 방법으로 사용된다 left와 right밖에 없다 img { width:200px; float:left; } float의 문제점 앞으로 붕뜨는 현상이 일어난다 부모 요소가 float된 자식 요소의 넓이를 캐치하지 못해 발생 👉 float된 요소가 nomarl flow에서 벗어났기 때문(*inline 요소들은 float된 요소들을 알아본다) float 속성을 주면 넓이값, 높이값 등이 사라지기 때문에 넓이, 높이 등을 주어야 한다 .wrap { border: 4px solid blue; } .content{ margin: 5px; height: 20px; border: 2px solid green; } .wrap { bo..

인라인 > 내부 > 외부 1. 인라인 Hello world 2. 내부 hello world 3. 외부 hello world

블록 요소 - 전체 넓이 만큼 차지한다 - vertical-align/ text-align 적용 불가 hello - 요소 목록 https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements 블록 레벨 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다. 이 글에서 developer.mozilla.org 인라인 요소 - 컨텐츠의 넓이 만큼 차지 - height/ width 적용 불가 - 요소 목록 https://d..

_app.js : 가장 먼저 호출되며, 글로벌한 작업들(공통 스타일이나 컴포넌트 등)을 수행하기에 좋다 = create-react-app의 App.js 기능 - 페이지들이 변할때 레이아웃 유지 - 페이지 탐색 시 상태 유지 - 사용자 정의 오류 관리 - 페이지 추가 데이터 사용 - 글로벌 css 추가 app.js 기본 function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 보통 _app.js는 길게 뽑지(?) 않기 때문에, layout component를 만들어 사용해준다 //layout 컴포넌트 import NavBar from "./NavBar"; export default function Layout({children..

1. 직접적으로 스타일 추가(인라인) : 좋은 방법이 아니다! Home About 2. CSS Modules :css 모듈을 사용하려면 .modules.css 파일을 생성해야 한다 NavBar.module.css 👇 .nav { display: flex; justify-content: space-between; background-color: blanchedalmond; } css를 사용할 페이지, 컴포넌트에 import 해주기 👇 className="nav"가 아닌 className={styles.nav} 를 사용해야 한다(모듈이기 때문에) 👈 Home About ✅ css 모듈 접근 방식의 장점은 무작위로 클래스 이름을 생성하는 데에 있다. 즉, 클래스 충돌에 대한 걱정을 덜어준다 *2개 이상의 클래..

테이블을 생성할 때 사용 table>(tr>th*3)+(tr>td*3)*3 = 👈 tr: 테이블의 행을 나눌 때 사용 👈 th: table header이기 때문에 td와 나눠준다 👈 td: 열이 아닌 하나의 데이터다 📌 border-collapse: collaps; 는 충돌되는 border의 값을 잡아주는 역할을 한다 적용 전 table, tr, td, th { border: 1px solid black; } 적용 후 table, tr, td, th { border: 1px solid black; border-collapse: collapse; } colspan: 가로 셀 병합/ rowspan: 세로 셀 병합 👈 thead: tr>th를 묶을 때 사용한다 구분 책이름 책 가격 책 판매량 👈 tbody: ..