<star />

SVG 를 사용하는 이유가 뭐야? - 벡터 기반이기 때문에 리사이징 시 깨짐 현상이 없다. - 특정 사이즈에 구애받지 않아, svg 파일 하나면 모든 해상도 대응 가능. - svg 그래픽은 파일 크기를 결정하는 주요 요소는 복잡도다. path 가 비교적 적은 간단한 이미지는 기존의 이미지 확장 파일들보다 사이즈가 적을 수 있지만, 이미지를 구성하는 요소의 복잡도가 높은 경우에는 파일 사이즈가 커짐. 사용 방법 (1) img 태그 (2) background-image .nongdamgom { width:500px; height:500px; background-image:url("./nongdamgom.svg"); } (3) HTML 인라인 ... - 브라우저는 이미지를 불러올 때, HTTP 요청을 해야 되..

많은 컴포넌트에 스타일링을 할 때 아주 유용한 css 라이브러리인 styled-components 를 알아보자. npm install styled-components import styled from 'styled-components' 1. 사용법 - 컴포넌트 생성 시, 스타일을 미리 지정하여 만들 수 있다. - `` 백틱 기호를 이용하여 css 스타일을 넣을 수 있음. 2. 장점 - css 파일 열어서 작성할 필요 없음. - js 파일에서 바로 스타일링 가능해서 다른 js 파일에 영향이 가지 않아서 좋음. - 페이지 로딩 시간 단축 3. props 로 재활용 가능 - 재사용되는 컴포넌트 UI 가 있을 경우 아주 용이함. import styled from 'styled-components'; let co..

1. CSS Preprocessor 가 뭐예요? - 전처리기 3대장으로는 Less, Sass(SCSS), Stylus 가 있음. - 보통 CSS Preprocessor 라고 부름. - 사스는 기초 언어에 힘을 주는 css 의 확장임. - 웹에서는 css 만 동작하기 때문에 전처리기는 직접 동작시킬 수 없음. - 전처리기는 css 문법과 굉장히 유사하지만 선택자의 중첩이나 조건문, 반복문, 다양한 단위의 연산을 활용할 수 있음. - 표준 css 보다 훨씬 많은 기능을 사용해서 편리하게 작성이 가능함. - 단, 웹에서는 직접 동작을 하지 않으니 전처리기를 작성 후, 웹에서 동작 가능한 표준의 css 로 컴파일 해야 함. - 컴파일 방법은 많음... 주로, node-sass 라는 Node.js 기반 컴파일러인..