고정 헤더 영역
상세 컨텐츠
본문
목차
Styled Components
Sass
CSS RESET
Styled Components
CSS-in-Js
자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식.
Styled Components
리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지
패키지란?
React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램
npm이라는 마켓 안에 모여 있음
사용하고자 하는 패키지를 npm install 또는 yarn add를 통해서 설치해서 사용 가능함.
사용하기
1. VScode Extensions 설치
vscode-styled-components 설치
2. vscode에서 프로젝트를 열고 vscode 터미널에서 아래 명령을 입력해서 패키지를 설치
yarn add styled-components
3. js 파일에 import 해주기
import styled from "styled-components";
조건부 스타일링
props를 통해서 부모 컴포넌트 ➔ 자식 컴포넌트로 데이터를 전달받아 조건부 스타일링 가능.
Styled Components - GlobalStyles
GlobalStyles(전역 스타일링)
전역 스타일링 : 프로젝트 전체를 아우르는 style ➔ ‘전역적으로(globally)’ 스타일을 지정한다.라고 표현함.
styled Components : 해당 컴포넌트 안에서만 style 지정.
Sass 소개, Nesting
Sass(Syntactically Awesome Style Sheets)란?
CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어.
코드의 재사용성을 높이고, 가독성 또한 향상해 줄 수 있는 방법.
변수 사용 가능
$color: #4287f5;
$borderRadius: 10rem;
div {
background: $color;
border-radius: $borderRadius;
}
중첩(Nesting) 가능
label {
padding: 3% 0px;
width: 100%;
cursor: pointer;
color: $colorPoint;
&:hover {
color: white;
background-color: $color;
}
}
다른 style 파일을 import 할 수 있음
- common.scss
// colors
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;
- style.scss
//style.scss
@import "common.scss";
.box {
background-color: $color3;
}
CSS RESET
브라우저는 기본적으로 default style을 제공함.
이 default style을 초기화하고 우리가 정하는 대로만 표현되는 것이 중요함.
css 초기화하기
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./reset.css" />
</head>
<body>
<span>Default Style을 테스트 해 봅니다.</span>
<h1>이건 h1 태그에요</h1>
<p>이건 p 태그에요</p>
</body>
</html>
reset.css 코드
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
index.js
import ‘./reset.css’;
'TIL' 카테고리의 다른 글
| 리액트 숙련 - Redux (0) | 2023.06.22 |
|---|---|
| [ React 숙련 ] React Hooks, 의존성 배열(dependency array), clean up (0) | 2023.06.21 |
| [TIL] React 입문 - 개발 환경 세팅을 위한 필수 프로그램 (0) | 2023.06.14 |
| [TIL] React 입문 - 리액트에서 자주 사용되는 ES6 문법(변수와 상수, JavaScript Scope, Object 선언, 객체 복사, Template Literals ,구조분해할당, 전개 연산자(...), 화살표 함수 (1) | 2023.06.13 |
| [TIL] React 입문 - React, SPA와 MPA (1) | 2023.06.12 |
댓글 영역