CSS

Programing/React

Next.js 튜토리얼(1) (설치~CSS)

클라이언트 사이드 렌더링과 서버 사이드 렌더링의 장점을 모두 가져오기 위해, 앞서서 Next.js 라는 프레임워크를 이용할 수 있다고 설명했었다. 다만 한번도 세팅을 해본적은 없어서, 공식문서 상 learn more 부분을 참고하여 초기 세팅을 해봤고, 간략하게 설명을 해보고자 한다. 시작하기.. 프레임워크인 Next.js 는 프레임워크인 만큼 첫 세팅때부터 말그대로 하라는 데로 잘 따라서 사용을 하면 된다. Next.js 가 가지고 있는 장점은 많은데, 리엑트보다도 좀 더 직관적인 페이지 기반 라우팅 CSR, SSR, SSG 페이지 단위로 지원 더 빠른 페이지 로드를 위한 자동 코드 분할 prefetch 를 통한 Client-side routing 대부분의 CSS-in-JS 라이브러리 구현 가능 등등 ..

Programing/CSS

Position

크롬에서 웹 페이지 검사를 실행해보면, 각 요소(element)들은 각자의 고유 공간을 차지한다는 것을 알 수 있습니다. 이러한 속성을 인지하여 스타일을 작성할 때 margin, padding 등 차지하는 공간에 변화를 주어 위치를 수정하곤 합니다. 근데, 요소는 각자의 공간을 차지한다 하였지만, 마치 화면에 겹쳐서 표현되어 보이는 사이트들을 너무 쉽게 접할 수 있습니다. 어떻게 표현한 것일까요? 기본적으로 요소들은 자신의 공간이 있기에, 그 공간을 침범하지 않습니다. 속성이 inline 이던 block 이던지 마찬가지입니다. block 역시 차지하는 높이만큼 그 공간 자체를 모두 가지고 있기에, 다음 요소는 그 밑에 위치합니다. 이러한 요소들의 위치를 수정하기 위해서는(보통 간격) 검사 style 창에..

Yelihi
'CSS' 태그의 글 목록