본문 바로가기

반응형

Style

(3)
React - Style Libraries (Bootstrap) Let's see how we can add style libraries in the React application Bootstrap Run the command shown below to install the bootstrap npm i bootstrap Add the path in the index.js file import 'bootstrap/dist/css/bootstrap.css'; Done References Adding Bootstrap | Create React App (create-react-app.dev) Adding Bootstrap | Create React App While you don’t have to use any specific library to integrate Boo..
Style Library - Tailwind Tailwind is a style library that is similar to Bootstrap. It also uses class names to specify styles but the difference is that the structure of class names in Tailwind is similar to that of the native CSS style. So if you have knowledge of how to use CSS, then learning how to use Tailwind is rather easy. Setting Up Tailwind Run the command below in the project console npm install -D tailwindcss..
앵귤러 템플릿 - style binding & ngStyle 앵귤러 style 바인딩은 특정 요소에 동적으로 스타일을 추가하거나 제거하는 기능입니다. style 바인딩과 ngStyle 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다. 사용방법 1. style binding 한 가지의 스타일을 추가하는 경우 아래와 같이 해당 속성을 지정 style. 뒤에 지정해 줍니다. 이때, 문법은 html 스타일 문법과 camelCase문법 둘 다 사용가능합니다. 단위를 가지는 스타일의 경우 아래와 같이 두 가지 방법으로 단위 지정이 가능합니다. 복수의 스타일을 적용하는 경우 아래와 같이 구현가능합니다. // class.componet.ts import { Component } from '@angular/core'; @Component({ sele..

728x90