CSS에서 가장 많이 사용하는 속성 중 하나로 display가 있다. display는 요소를 어떻게 배치할지를 나타내는데, 일반적으로 block, inline, inline-block이 있다. Block vs Inline block은 전체 라인을 모두 가지고 있다. 또한 width 값을 줘서 공간이 남더라도 나머지 공간에 다른 요소가 들어올 수 없다. inline은 컨텐츠의 크기만큼의 영역을 가지고 있으며, 한 라인에 여러 요소가 배치될 수 있다. block의 대표적인 태그로 div가 있고, inline의 대표 태그로 span이 있다. 여기서 하나의 특징이 더 나오는데, div 안에는 span을 넣을 수 있지만 span 안에는 div를 넣을 수 없다. 즉, block 안에는 inline이 들어올 수 있지..

웹사이트 개발을 하다보면 브라우저마다 기본적으로 설치되어 있는 스타일이 달라서 거슬리는 경우가 많다. 이런 경우 브라우저에서 기본적으로 제공하는 스타일을 초기화시켜 호환성을 맞춰주는 작업이 필요하다. 이때 사용하는 것이 바로 styled-reset이다. 사용하는 방법 Yarn yarn add styled-reset 코드 적용하기 import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const GlobalStyle = createGlobalStyle` ${reset} * { // ... } body { margin: 0 } a { text-decoration: none; outline: none; } ..

웹사이트를 개발하다보면 특정 버튼을 누르면 해당 위치까지 스크롤을 자동으로 이동시켜야 하는 경우가 있다. 이때, 해당 기능을 수행해주는 패키지도 있겠지만 CSS로 처리하는 방법이 있어서 한번 작성해본다. 아주 간단하다. scroll의주체 { scroll-behavior: smooth; } 스크롤이 발생하는 녀석에서 scroll-behavior 옵션을 주면 이쁘게 스크롤된다!

vh란 viewport height로 브라우저의 높이에 따라 상대적으로 적용되는 단위이다. 예를들어서 화면의 높이가 100px이라면 1vh는 1px이다. 하지만 사파리에서는 상단의 url바와 하단에 있는 네비게이션바로 인해서 100vh를 설정해도 화면이 잘려버리는 문제, 혹은 스크롤리 생겨버리는 문제가 발생한다. 해결 방법 -webkit-fill-available 프로퍼티로 해결할 수 있다. body { min-height: 100vh; } /* iOS only */ @supports (-webkit-touch-callout: none) { height: -webkit-fill-available; }

Styles JSX는 현재 컴포넌트만 scope로 가진다. 그렇게 되면 전역으로 css 속성을 주고 싶은 경우 모든 컴포넌트에 하나하나 입력해야하는데, 그렇게 되면 너무 귀찮아지고 실수가 발생할 수 있어 현실적으로 불가능하다. 그럴때 사용할 수 있는 방법이 global 속성과 _app.js이다. global import NavBar from "../components/NavBar"; const Home = () => { return ( Home ); }; export default Home; jsx 옆에 global 옵션을 준다면 해당 컴포넌트와 자식 컴포넌트, 부모 컴포넌트에게도 영향을 주는 css 속성이 된다. 하지만, 이것 역시 " 사용된 " 컴포넌트를 기준으로 속성이 적용된다. 만약 Home 컴포..

Next.js에서 .module.css 패턴을 통해서 style을 주는 방식 외에 다른 방법으로도 style을 줄 수 있다. Styles JSX React에서나 다른 언어도 개발을 할 때 한번도 들어보지 못한 방식일 것이다. Styles JSX는 Next.js에서만 제공하는 고유한 방법이기 때문이다. import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { const router = useRouter(); return ( Home About ); }; export default NavBar; style 태그에 jsx 속성을 준 다음 {` `} 에 css를 넣어주면 된다. 이렇게 넣어주면 .mod..