Development Vlog

`styled()` 함수Styled components 라이브러리에서 제공하는 기능으로, 기존 컴포넌트에 스타일을 상속하거나 추가 스타일을 적용할 수 있습니다.// Button.jsimport styled from "styled-components";const Button = styled.button` border: 1px solid #58c4dc; background-color: #343a46; color: #ffffff; padding: 16px; &:hover { background-color: #ffffff; color: #343a46; }`;export default Button;// App.jsimport styled from 'styled-components';impor..

Styled Components란?Styled Components는 React에서 컴포넌트를 만들면서 동시에 해당 컴포넌트의 스타일을 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. JSX로 컴포넌트를 만들듯이, CSS를 자바스크립트 코드 안에서 작성할 수 있는 방식으로, React 컴포넌트와 스타일을 보다 직관적으로 결합할 수 있도록 도와줍니다. Styled Components 사용 이유React에서도 일반적으로 CSS 클래스 이름은 전역적인 특성을 가지고 있습니다. 그래서 특정 파일에 CSS 스타일을 정의하고 해당 컴포넌트에만 적용하더라도, 동일한 클래스 이름을 가진 다른 컴포넌트에도 그 스타일이 영향을 줄 수 있습니다. Styled Components는 자동으로 고유한 클래스 이름을 생성..

flex grow`flex-grow`는 요소가 남는 공간을 얼마나 차지할지 결정합니다. `flex-grow: 0`은 확장되지 않고 원래 크기를 유지합니다. `flex-grow: 1`은 남은 공간을 전부 차지합니다. 두 박스에 동일하게 `flex-grow: 1`을 적용하면 남은 공간을 나눠가지고 동일한 비율로 확장됩니다. `flex-grow: 2`를 적용한 박스가 `flex-grow: 1`을 적용한 박스보다 2배 많이 확장됩니다.flex shrink`flex-shrink`는 요소가 공간이 부족할 때 얼마나 줄어들 수 있는지를 결정합니다. `flex-shrink: 0`은 줄어들지 않음. 공간이 부족해도 요소 크기가 그대로 유지됩니다. `flex-shrink: 1`은 기본 값이며, 요소가 공간에 맞게 비율대로..

📚 CSS의 Cascading에 대해 설명해주세요. CSS는 Cascading Style Sheet의 약자로, 'Cascading'은 '폭포'처럼 규칙이 위에서 아래로 흐르며 합쳐지는 것을 의미합니다. 우선순위에서는 인라인 스타일이 가장 높은 우선순위를 가지며, 코드 내에서는 나중에 작성된 규칙이 먼저 적용됩니다. 또한, 선택자의 특이성에 따라 규칙의 우선순위가 결정됩니다. 일부 스타일은 부모 요소에서 자식 요소로 상속되기도 하며, 이 상속된 값도 Cascading에 영향을 미칩니다. 예를 들어, 부모 요소의 `color` 속성은 자식 요소에 상속되지만, `margin` 속성은 상속되지 않습니다. 마지막으로 특정 스타일에 `!important`를 사용하면 특이성, 순서와 관계없이 가장 높은 우선순위로 ..