스타일 (6) 썸네일형 리스트형 리액트 - 스타일 라이브러리(부트스트랩) 리액트 애플리케이션에 스타일라이브러리를 추가하는 방법을 살펴보자 부트스트랩 아래 커맨드를 통해 부트스트랩 설치 npm i bootstrap index.js 파일에 경로추가 import 'bootstrap/dist/css/bootstrap.css'; 이상 참고 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 Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. R.. 스타일 라이브러리 - 테일윈드 테일윈드는 부트스트랩과 같은 스타일 라이브러리입니다. 부트스트랩처럼 클래스명으로 스타일을 지정하지만 CSS 고유 스타일 속성 명칭과 유사한 구조를 가지고 있어 CSS 지식이 있으면 빨리 배울 수 있는 장점이 있습니다. 테일윈드 설치하기 프로젝트 콘솔에 아래 명령어를 실행 npm install -D tailwindcss npx tailwindcss init 생성된 테일윈드 구성 파일에 아래 코드추가 content: ["./src/**/*.{html,js}"] CSS파일에 아래 코드 추가 @tailwind base; @tailwind components; @tailwind utilities; 플러그인 사용하기 테일윈드의 다른 장점은 다양한 플러그인을 사용할 수 있다는 점입니다. 데이지 유아이 프로젝트 콘솔에.. 기본 스타일 - 리셋 CSS의 각 요소는 미리 지정된 기본 스타일을 가지고 있습니다. 예를 들어 요소의 경우 기본적으로 마진을 가지기 때문에 화면에 아래와 같이 표시됩니다. 문제점 기본 스타일은 때에 따라서 필요한 경우도 있지만 스타일 작업 시 기본 스타일도 고려하려야 하기 때문에 스타일링 작업을 힘들게 하는 요소로 작용합니다. 또 브라우저마다 각 요소의 기본 스타일이 다르게 설정되어 있어 같은 웹사이트라도 브라우저마다 다르게 표시되어 사용자에게 부정적인 경험을 줄 수 있겠죠. 기본 스타일 제거하기 따라서, 스타일 작업에 앞서 기본 스타일을 제거하거나 일반화하는 작업이 필요한데요. 아래와 같은 방법 중 하나로 가능합니다. 1. CSS reset 말 그래도 CSS 스타일을 리셋하고 시작하는 방식으로 아래와 같은 코드를 사용합니.. 티스토리 - 스타일링 완성된 공통스타일 코드 /* Custom Styles */ img { border-radius: 5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); margin: 10px 0 !important; } .entry-content p, span, a, td { font-size: 1.2rem !important; } .entry-content h1 { font-size: 1.8rem !important; } .entry-content h2 { font-size: 1.7rem !important; } .entry-content h3 { font-size: 1.6rem !important; } .entry-content h4 { font-size: 1.5rem !impo.. 앵귤러 - 스타일 라이브러리(부트스트랩, 제이쿼리, 폰트어썸) 라이브러리는 간단한 설정만으로 작성된 코드를 사용할 수 있게 해 주기 때문에 작업속도를 배가시켜 줍니다. 앵귤러도 다양한 라이브러리와 연동이 가능한데 오늘은 앵귤러 애플리케이션과 다양한 라이브러리를 연결하는 방법을 살펴보겠습니다 HTML 삽입 미리보기할 수 없는 소스 앵귤러 템플릿 - style binding & ngStyle 앵귤러 style 바인딩은 특정 요소에 동적으로 스타일을 추가하거나 제거하는 기능입니다. style 바인딩과 ngStyle 디렉티브는 기능이 동일하고 사용법이 유사하기 때문에 같이 설명하도록 하겠습니다. 사용방법 1. style binding 한 가지의 스타일을 추가하는 경우 아래와 같이 해당 속성을 지정 style. 뒤에 지정해 줍니다. 이때, 문법은 html 스타일 문법과 camelCase문법 둘 다 사용가능합니다. 단위를 가지는 스타일의 경우 아래와 같이 두 가지 방법으로 단위 지정이 가능합니다. 복수의 스타일을 적용하는 경우 아래와 같이 구현가능합니다. // class.componet.ts import { Component } from '@angular/core'; @Component({ sele.. 이전 1 다음
