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 코드 내에서 동..

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..