이번주에는 style에 대한 것을 배웠다!
Syntactically Awesome Style Sheet의 줄임말로 CSS pre-processor이다.
sass에서는 두 가지의 확장자 .scss / .sass
를 지원한다. 보통은 scss 문법이 더 많이 사용된다!
sass 설치
yarn add node-sass
CSS와 달리 Sass는 HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS selectors를 이용해 중첩해 꾸밀 수 있다!
CSS와 달리 HTML의 부모-자식 관계에 따라 스타일 속성들도 네스팅할 수 있다.
→ 불필요한 클래스를 만들거나 선택자를 한 줄에 길게 써야 하는 수고를 덜어 준다.
이게 무슨 말이냐 !
nav li{
margin: 0 auto;
padding: 0;
list-style: none;
}
nav ul{
display: flex;
}
nav a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
이렇게 nav 태그 안에 있는 li/ul/a태그에 대한 css를 작성하려면 저렇게 선택자를 한 줄에 길게 써주어야 한다.
반면 Sass는
nav{
li{
margin: 0 auto;
padding: 0;
list-style: none;
}
ul{
display: flex;
}
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
이런식으로 여러 태그를 한 줄에 길게 쓰지 않고 쓸 수 있다 !!
→ Scss는 $
기호를 사용하여 변수를 만든다 .
`$변수명: 속성값` 이런식으로 변수를 만들 수 있다.
Example
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
→ mixins는 스타일시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능으로 스타일 블록을 함수처럼 사용할 수 있게 해준다!
@mixin
은 재사용할 내용을 선언하는 부분@include
는 @mixin
에서 정의된 내용을 삽입하고 적용하는 부분@mixin 믹스인이름 {
스타일;
}
→ 네스팅하고 있는 셀렉터를 치환하는데 ‘문자’를 치환하기 때문에 클래스명을 쪼개서 쓸 수도 있다!
Example
btn, btnBlue, btnRed 라는 클래스명을 가지는 변수들이 있을 때, 여기서 공통 속성은 btn이다.
개별 속성은 해당 네스팅 내에, &Blue, &Red로 또 네스팅해서 추가할 수 있다!
btn을 &으로 치환한 느낌이랄까?!
styled-components는 현존하는 리액트 CSS-in-JS 관련 라이브러리 중에서 가장 잘 나간다고 한다.
styled-components에서는 스타일을 입력할 떄 Tagged Template Literal 이라는 ES6 문법을 사용한다.
이 문법을 사용하는 이유는
이렇게 생긴 백틱?을 사용할 때 내부에 JavaScript 객체나 함수가 전달될 때 이를 따로 추출하기 위해서다
styled-components는 하나의 자바스크립트 파일 안에 스타일까지 작성할 수 있다.
그래서 추가적인 .css나 .scss 같은 파일이 필요없다!
또한 styled-components 클래스 이름으로 스타일링을 하는 CSS와 달리 props
를 이용한 조건부 스타일링도 가능하다.
설치 :
yarn add styled-components
styled.태그명
을 사용해 구현한다.import styled from 'styled-components';
const MyComponent = styled.button`
padding: 20px;
color: black;
(스타일 작성)
`;
태그명
자리에 div
, input
등 원하는걸 넣어서 사용하면 된다. 만약 보여줘야 할 태그 형식이 유동적이거나, 아니면 특정 컴포넌트에 스타일링 을 해야 하는 상황이라면 다음과 같이 구현할 수 있다.import styled from 'styled-components';
// 문자열로 styled 의 인자로 전달
const MyInput = styled('input')`
background: gray;
`;
// 컴포넌트 형식의 값을 넣어준다
const MyLink = styled(Link)`
color: blue;
`;
JavaScript로 CSS 스타일을 작성하도록 설계된 라이브러리로 소스 맵, 레이블 및 테스트 유틸리티와 같은 기능이 있다. 문자열 및 개체 스타일 모두 지원 가능.
div
, ul
등의 태그를 써놓지 않으면 이게 어떤 태그인지 바로 알기는 어렵다!특정 조건에서 브라우저 화면의 넓이나 높이가 어떤 기기에서 실행되고 있는지를 파악해서 기기별로 서로 다른 스타일을 제공하는 방법을 선택하는 것을 반응형 프로그래밍이라고 한다~!
방법에는 두 가지가 있다 (react-responsive / Mediaquery)
react-responsive
yarn add react-responsive
or
npm install react-responsive
반응형 웹을 만들고 디자인하다 보면 구조나 기능 자체를 다르게 해야 하는 경우에 사용!!
ex) PC에서는 길게 늘어진 메뉴 → 모바일에서는 메뉴 버튼
Mediaquery
@media screen and (max-width: 768px) {
font-size: 15px;
font-weight: bold;
}
이런식으로 사용한다 !
위의 코드를 설명해보자면 768px 전!! 까지의 width에서는 font-size는 15px, font-weight는 bold 속성을 적용한다는 의미이다!
주로 개발할 때는 svg
아이콘을 많이 사용하는 것을 확인할 수 있다.
svg 파일로 저장하고 img태그의 속성값에 넣어 사용하기
import React from 'react';
import smile from '../assets/smile.svg';
const SaleItem = () => {
return (
<div>
//src 속성값에 넣어준다
<img src={smile} alt="smile" />
</div>
);
};
export default SaleItem;
svg 파일로 저장하고, 불로와서 svg를 컴포넌트처럼 사용하기
import React from 'react';
import { ReactComponent as Smile } from '../assets/smile.svg';
const SaleItem = () => {
return (
<div>
<Smile fill="blue"/>
</div>
);
};
export default SaleItem;
svg 태그를 바로 사용하기
npm install file-loader --save-dev