styled-components의 GlobalStyles 이란 무엇이고, 어떻게 사용해야 할까?
1강에서 사용한 styled컴포넌트는 특정 컴포넌트에서 사용하는 스타일에만 적용하는 방식이었다.
// BlogPost.js
import styled from "styled-components";
function BlogPost({ title, children }) {
return (
<Wrapper>
<Title>{title}</Title>
<Content>{children}</Content>
</Wrapper>
);
}
const Title = styled.h2`
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
font-size: 1.5rem;
margin: 0;
margin-bottom: 8px;
`;
const Content = styled.p`
margin: 0;
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
font-size: 1rem;
`;
const Wrapper = styled.article`
border: 1px solid;
border-radius: 8px;
padding: 16px;
margin: 16px auto;
max-width: 400px;
`;
export default BlogPost;이렇게 컴포넌트 단위로 적용한 스타일을 외부와 격리시켜 해당 컴포넌트 내부에서만 유효하도록 합니다.
하지만 application을 개발하다보면, 폰트 스타일을 맞추고 싶을 때도있을것이고, 특정 태그에 반복적으로 입력되는 style도 있을 것이다.
그럴 때 styled-components의 GlobalStyles(전역스타일링)을 사용한다.
CSS에서 글꼴 관련 속성은 부코엘리먼트에서 자식엘리먼트로 상속되기 때문에 <body>엘리먼트 대사응로 정의하는 것이 좋다.
styled Components에서 createGlobalStyle()함수를 사용하여 전역 스타일링을 진행한다.
// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
}
`;
export default GlobalStyle;위 코드에서 createGlobalStyle을 사용하여 *와 body태그에 폰트와 줄높이를 설정한 것을 볼 수 있다.
마지막으로 application에 import하여 적용시킨다.
// App.jsx
import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";
function App() {
return (
<>
<GlobalStyle />
<BlogPost title="Styled Components 전역 스타일링">
이번 포스팅에서는 Styled Components로 전역 스타일을 정의하는 방법에
대해서 알아보겠습니다.
</BlogPost>
</>
);
}
export default App;
그리고 위에서 특정태그들에 반복적으로 사용되는 style값을 적용시키는데에도 전역 스타일링을 사용한다고 했습니다.
// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Helvetica", "Arial", sans-serif;
line-height: 1.5;
}
h2, p {
margin: 0;
}
h2 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
`;
export default GlobalStyle;이렇게 h2, p태그에 margin값을 동일하게 설정하고 각 태그마다의 폰트사이즈를 전역스타일링한 모습을 볼 수 있습니다.
css nesting 이란 무엇일까?
nesting이란 보통 css로 코드를 작성할 때 부모, 자식 클래스명을 써워야하는데, 코드가 많아질수록 가독성이 떨어진다.
하지만 Sass(Scss)에서는 부모셀렉터를 줄여주고 HTML구조에 따라 눈에보기쉽게 css를 작성 할 수 있게한다.
yarn add node-sass
npm install node-sass작업하는 css파일 확장자를 scss혹은 sass로 변경한다.
적용 컴포넌트의 import도 './App.scss', './App.sass'로 변경한다.
이렇게 사용하면 sass, scss로 네스팅을 할 수 있다.
@charset "UTF-8";
@import "reset";
body {
background: #eee;
}
.wrap {
width: 100%;
border: 2px solid #bbb;
padding: 100px;
display: flex;
justify-content: center;
}
.wrap .item {
width: 300px;
padding: 30px;
background: #fff;
margin: 50px;
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}
.wrap .item h2 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin-bottom: 15px;
}
.wrap .item p {
font-size: 14px;
line-height: 1.3;
font-family: Arial, Helvetica, sans-serif;
color: #777;
margin-bottom: 20px;
}
.wrap .item a {
display: block;
width: 100px;
height: 40px;
border-radius: 20px;
background: gray;
font-size: 12px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}기존에 작성헀던 css파일이다. 이렇게 작성하게된다면 css만보고 구조를 파악하기 어렵다.
.wrap안의 .item안의 a, h2, p태그 를 모듈화 시키자.
.wrap {
width: 100%;
border: 2px solid #bbb;
padding: 100px;
display: flex;
justify-content: center;
.item {
width: 300px;
padding: 30px;
background: #fff;
margin: 50px;
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
h2 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin-bottom: 15px;
}
p {
font-size: 14px;
line-height: 1.3;
font-family: Arial, Helvetica, sans-serif;
color: #777;
margin-bottom: 20px;
}
a {
display: block;
width: 100px;
height: 40px;
border-radius: 20px;
background: gray;
font-size: 12px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
}
}이렇게 네스팅하게되면 최상단 부모 클래스명을 변경할 때 연결된 css파일도 자동으로 바뀌게된다.
//@import reset
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
ul,ol,li {
list-style: none;
}
a {
text-decoration: none;
}@charset "UTF-8";
@import "reset";
body {
background: #eee;
}
.wrap {
width: 100%;
border: 2px solid #bbb;
padding: 100px;
display: flex;
justify-content: center;
.item {
width: 300px;
padding: 30px;
background: #fff;
margin: 50px;
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
h2 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin-bottom: 15px;
}
p {
font-size: 14px;
line-height: 1.3;
font-family: Arial, Helvetica, sans-serif;
color: #777;
margin-bottom: 20px;
}
a {
display: block;
width: 100px;
height: 40px;
border-radius: 20px;
background: gray;
font-size: 12px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
&:hover {
background: blue;
h2 {
color: aqua;
}
p {
color: red;
}
a {
background: yellow;
}
}
}
}
CSS reset 이란, 무엇이고 왜 필요한가?
우리가 코드를 작성하고 브라우저 요소를 살펴보면 내가 적용하지 않은 style값이 들어가있는 것을 볼 수 있다.
이는 웹브라우저마다의 default값의 스타일이 적용되어있기 때문이다.
따라서 우리는 브라우저마다의 default스타일 값이 아닌, 동일한 css스타일을 보여주어야 하기 때문에
이런 default스타일 값을 초기화해주어야한다.
1. 구글에 Reset CSS 검색 후 초기화 코드를 찾는다. 나는 이곳을 선택했다.
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
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;
}
2. 해당 코드를 css폴더에 reset.css파일을 생성해 붙여넣는다.
3.작업하는 css파일에 @import "reset.css"를 최상단에 추가한다.
default style값이 사라진 것을 볼 수 있다.
Styled Components 전역 스타일링 (Global Style)
Engineering Blog by Dale Seo
www.daleseo.com
SASS - nesting 기능 소개, 사용법
nesting이란, 보통 css로 코드를 작성 시 부모 클래스를 써주고 자식이나 자손 클래스명을 써주어야했습니다 코드가 많아지면 많아질수록 가독성이 떨어지고 코드를 보기 힘들어지기도 하죠 하지
minjunkass.tistory.com
[SASS] SASS 문법02 - 네스팅(Nesting) 그리고 @at-root
=== Prologue === 지난 포스팅에서 변수와 믹스인에 대해 알아봤다. 포스팅 이후 새 작업을 시작했을 때 변수를 써서 작업해봤었는데 (네스팅만 쓰고 있었던지라) 사수님께서 알아보시고 좋아하셨다
bokartstudio.tistory.com
[React] 리액트 SCSS(SASS) 적용하는 법
프론트엔드 개발자라면 필수적으로 CSS 작업을 해야 할 일이 생긴다. 그리고, React와 같은 라이브러리를 쓴다고해도 마찬가지이다. 요즘은 많은 개발자들이 CSS 전처리기를 많이쓰고 있는데, 그중
sunnyfterrain.github.io
'1차 공부 > React공부' 카테고리의 다른 글
| 왜 useState가 불변성을 지켜야하고, 방식이 두가지가 있을까? (0) | 2022.12.02 |
|---|---|
| useState 복습 (0) | 2022.12.02 |
| 컴포넌트 꾸미기 (Styled Component) (0) | 2022.12.02 |
| SPA 방식과 MPA 방식은 무엇인가요? (0) | 2022.11.29 |
| DOM 요소에 접근하기(Ref) (0) | 2022.11.29 |