WoohyunKing의 개발 성장일지

Sass는 기능이 뛰어나고 안정적인 CSS 확장 언어이다. Sass란 ? SASS는 CSS를 효율적으로 작성할 수 있도록 도와주는 CSS 확장언어 이자 전처리기(CSS Preprocessor) 입니다. $font-stack : Helvetica, sans-serif $primary-color : #333 body font : 100% $font-stack color : $primary-color SASS는 { }중괄호와 세미콜론 ( ; )은 사용하지 않고, '들여 쓰기'와 '줄 바꿈' 형식으로 문법을 사용합니다. 또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리합니다. CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동..

1) Transition /* Apply to 1 property */ /* property name | duration */ transition: margin-left 4s; /* property name | duration | delay */ transition: margin-left 4s 1s; /* property name | duration | timing function | delay */ transition: margin-left 4s ease-in-out 1s; /* Apply to 2 properties */ transition: margin-left 4s, color 1s; /* Apply to all changed properties */ transition: all 0.5s ease..

Styled Component의 Theme 이란 ? 스타일링을 시작하기 앞서, 자주 사용하게 될 색상 코드, 사이즈, 폰트, 미디어 쿼리 등의 정보를 변수로 생성해 사용하면 일관적인 스타일 관리가 가능합니다. styled-component에선 전반적으로 프로젝트 전체에서 사용할 목적의 변수 모음 객체를 theme이라고 부릅니다. const margins = { sm: ".5rem", base: "1rem", lg: "2rem", xl: "3rem", }; const paddings = { sm: ".5rem", base: "1rem", lg: "2rem", xl: "3rem", }; const fonts = { family: { base: `'Noto Sans KR', sans-serif`, title:..

React does not have an opinion about how styles are defined. 리액트 공식 문서에 따르면 리액트는 명확한 스타일링에 대한 가이드를 제공하지 않습니다. 왜냐하면 현재 CSS 기술 자체가 사용되는 방식이 워낙 다양하기 때문입니다. 그렇다면 React 컴포넌트를 스타일링하는 기본적인 방법들을 소개해보도록 하겠습니다. 1) Inline Style import React from "react"; const btnStyle = { color: "white", background: "teal", padding: ".375rem .75rem", border: "1px solid teal", borderRadius: ".25rem", fontSize: "1rem", line..

1) CSS in JS 복습 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다. 기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인기를 끌면서 웹개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 '컴포넌트 기반 개발 방법'이 주류가 되고 있습니다. 따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HT..

저희가 CSS를 작성할 때, 전통적으로는 style.css라는 별도의 파일을 생성하고 HTML의 태그를 사용해서 적용하였습니다. 하지만 웹이 점점 복잡해지고 동적 기능 요구가 증가하면서 HTML과 CSS만으로는 화면의 모든 스타일을 제어할 수 없는 상황에 이르게 됩니다. 이를 해결하기 위한 여러 가지 웹 애플리케이션 스타일 구성 방식이 나타났으며 크게 두 갈래로 나뉘어집니다. CSS-in-JS와 CSS-in-CSS가 그것입니다. 또한 React에서는 컴포넌트(Component) 단위로 아키텍처를 설계하기 때문에 컴포넌트 간의 의존성을 최소화하고, 내부 응집도를 높이는 것이 중요시 되기 때문에 기존의 방법보다 css-module이나 css-in-js로 Javascript를 이용하여 CSS를 만드는 것이 좋..