emotion 기본 개념 emotion.js 이란? CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 Framework Agnostic(프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다. emotion css props emotion composition emotion styled-components emotion object style emotion child selector emotion global styles emotion theme provider emotion reset Next.js에 emotion 설치하기 emotion 필요 패키지 설치하기 .babelrc 설정하기 emotion 기본 개념 emotion.js 이란? emotion css props emotion composition emotion styled-components emotion object style emot…

반응형 웹이란, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미합니다. 오늘날에는 IT 기기의 종류가 더욱 다양해짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요하다. 일반적인 Breakpoint responsive desktop 스타일링: 1920 ~ 1024px ipad 스타일링: 1024 ~ 768px phone 스타일링: 768 ~ 0px 보통 2개(1024 / 768)를 이용한다 관리를 편하게 하려면 1개(768)를 이용한다 CSS 반응형 Media Query : media 쿼리를 시작 : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다. screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다. : 이건 media fe…

styled-components 설치 styled-components는 각기 다른 컴포넌트들에게 스타일링의 영향을 주지 않기 위해 Local로 동작 styled-components 기본 예제 styled-components props 예제 Circle 컴포넌트에  props 값을 설정해줬으면 해당 값을 배경색으로 설정하고, 그렇지 않으면 검정색. styled-components 상속 styled-components As 속성 만약 Button 컴포넌트의 스타일은 그대로 쓰고싶지만, 태그의 종류를 button이 아닌 a 태그로 바꾸고 싶을땐 ‘as’ 속성을 사용 styled-components Attributes 삽입하기 styled-components css 예제 여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 를 사용한다. 를 불러와서 사용을 해야 그 스타일 내부에서도 다른 를 조회 할 수 있다. styled-components 애니메이션 styled-components The…

Sass(Syntactically Awesome Style Sheets) 는  로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재 활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다. 란? 를 확장하는 스크립팅 언어로서, 컴파일러를 통하여 브라우저에서 사용 할 수 있는 일반 문법 형태로 변환됩니다. Sass / Scss React에서 사용법 Comment (주석) 의 주석이 CSS 와 다른점은 ****이 추가되었다는 점 입니다. 은 표기하며,   컴파일 되었을 때 나타나지 않습니다 은 와 동일하며 로 컴파일 되었을 때 나타납니다. Variable (변수) 는 에  개념을 도입한다. 변수가 가능한 형태 : , , , , , , 변수를 사용 할 때에는  문자를 사용합니다. 변수를 만들어도, 사용하지 않으면 컴파일된 파일에는 아무것도 나타나지 않습니다. Variable Scope 변수를 에서 선언 ⇒ 접근가능 Global Vari…

BEM의 기본 구조 BEM은 Block, Element, Modifier를 뜻한다. BEM은 어떤 목적인가에 따라 이름을 만든다. Blcok, Element, Modifier은  _ _ 와 - - 로 구분한다. 이름을 연결할때에는 -를 사용한다. header는 Block, naviagtion은 Element, navi-text는 Modifier가 됩니다. Block 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트을 Block이라고 부른다. 또, Block은 Block으로 감쌀 수 있습니다. Element Element는 Block을 구성하는 단위이다. Block은 독립적인 형태인 반면, Element는 의존적인 형태이다. 자신이 속한 블럭 내에서만 의미를 가지기 때문에 블럭 안에서 떼어다 다른 데 쓸 수 없다. .search-form은 Block이, .search-form__input과 .search-form__button은 Element이다. Modifier Modifier는 …