컴포넌트 스타일링에는 3가지 종류가 있습니다.
- 일반 CSS
- CSS Module
- Styled-Component
일반 CSS
Css 파일을 만들어서 일반적으로 알고있는 Css스타일링을 합니다.
import './App.css'사용하고 싶은 Css 파일을 import 합니다.
JSX 네이밍
컴포넌트명-클래스명 같은 규칙을 이용하여 중복되는 클래스명을 방지합니다.
<div className = 'App'>
<header className = 'App-header'>
</header>
</div>Sass ( Syntactically Awsome Style Sheets)
현업에서는 Scss를 더 자주 사용하는걸로 알고있으므로 Scss기준으로 작성하겠습니다.
Sass는 Css 전처리기로서 변수, 상속, 혼합, 중첩 등 다양한 기능을 제공합니다. Sass 는 컴파일을 통하여 Css로 변환됩니다.
Sass 는 .scss와 .sass를 지원합니다. 물론 사용하는 문법또한 다릅니다.
sass 들여쓰기를 사용합니다.
$font-stack: Helvetica, sns-serif
$primary-color: #333
body
font: 100% $font-stack
color : $primary-colorscss 코드블럭을 사용합니다.
$font-stack: Helvetica, sns-serif
$primary-color: #333
body{
font: 100% $font-stack
color : $primary-color
}데이터타입 사용가능한 데이터 타입
| 타입 | 타입 | 사용 방법 |
|---|---|---|
| number | 숫자 | 1, 0.1, 20px, 2em .. |
| String | 문자 | bold, relative, "경로" ... |
| Colors | 색상 | red, #ffff00, rgba(255,0,0,.5) |
| Booleans | 논리 | true, false |
| Nulls | 빈값 | null |
| Lists | 공백 혹은 ,로 구분된 값의 목록 | (apple,orange,banana) / apple orange |
| Maps | List와 유사하나 Key,Value 형태 | (apple:red, banana: yellow) |
중첩 중첩을 통한 간략화
/* SCSS */
.section {
width: 100%;
.list {
padding: 20px;
li {
float: left;
}
}
}
---
/* 컴파일 된 CSS */
.section {
width: 100%;
}
.section .list {
padding: 20px;
}
.section .list li {
float: left;
}치환 &기호는 부모선택자로 치환(대치)됩니다.
/* SCSS */
.fs {
&-small {
font-size: 12px;
}
&-medium {
font-size: 14px;
}
&-large {
font-size: 16px;
}
}
/* Compile to CSS */
.fs-small {
font-size: 12px;
}
.fs-medium {
font-size: 14px;
}
.fs-large {
font-size: 16px;
}변수 반복적으로 사용되는 값을 변수에 저장할 수 있습니다.
/* SCSS */
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;
.box {
$Scope: '선언된 블럭 스코프'
width: $w;
margin-left: $w;
background: $color-primary url($url-images + "bg.jpg");
}
/*변수는 선언된 블럭 내에서만 유효합니다.*/
-Error-
.test {
background : $scope
}
/* Compile to CSS */
.box {
width: 200px;
margin-left: 200px;
background: #e96900 url("/assets/images/bg.jpg");
}템플릿 리터럴 JavaScript 의 템플릴 리터럴처럼 문자열에 사이에도 사용이 가능합니다.
/* SCSS */
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
/* Compile to CSS */
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");연산 레이아웃의 디테일을 편하게 조정 가능합니다.
| 연산자 | 기능 | 주의사항 |
|---|---|---|
| + | 더하기 | |
| - | 빼기 | |
| * | 곱하기 | 하나 이상의 값이 반드시 숫자 |
| / | 나누기 | 우측항의 값이 반드시 숫자 |
| % | 나머지 |
mixin 재활용할 스타일 코드블럭을 함수처럼 사용합니다.
/* 선언 - @mixin */
@mixin large-text {
font: {
size: 22px;
weight: bold;
family: sans-serif;
}
color: orange;
&::after {
content: "!!";
}
span.icon {
background: url("/images/icon.png");
}
}
/* 사용 - @include */
h1 {
@include large-text;
}
div {
@include large-text;
}Function ( 함수 ) 계산된 특정 값을 @return 키워드로 반환
Mixin과 Function 의 차이점
- Mixin : 지정한 Style을 반환
- Function : 계산된 특정 값을 반환
/* SCSS */
$max-width: 980px;
@function columns($number: 1, $columns: 12) {
@return $max-width * ($number / $columns);
}
.box_group {
width: $max-width;
.box1 {
width: columns(); // 1
}
.box2 {
width: columns(8);
}
.box3 {
width: columns(3);
}
}
/* Compile to CSS */
.box_group {
/* 총 너비 */
width: 980px;
}
.box_group .box1 {
/* 총 너비의 약 8.3% */
width: 81.66667px;
}
.box_group .box2 {
/* 총 너비의 약 66.7% */
width: 653.33333px;
}
.box_group .box3 {
/* 총 너비의 25% */
width: 245px;
}Condition ( 조건 )
if 문을 사용하여 값을 반환합니다. 삼항연산자와 비슷한 구조힙니다.
/* SCSS */
$width: 555px;
div {
width: if($width > 300px, $width, null);
}
/* Compile to CSS */
div {
width: 555px;
}if-else 문도 존재합니다.
/* SCSS */
$color: orange;
div {
@if $color == strawberry {
color: #fe2e2e;
} @else if $color == orange {
color: #fe9a2e;
} @else if $color == banana {
color: #ffff00;
} @else {
color: #2a1b0a;
}
}
/* Compile to CSS */
div {
color: #fe9a2e;
}Loop ( 반복 )
JavaScript의 for문과 유사한 반복문이 존재합니다.
- from a through b : a부터 b까지 반복 (b 포함)
- from a to b : a부터 b 직전까지 반복
/* SCSS */
/* 1부터 3까지 반복 (3번 반복) */
@for $i from 1 through 3 {
.through:nth-child(#{$i}) {
width: 20px * $i;
}
}
/* 1부터 3 직전까지 반복 (2번 반복) */
@for $i from 1 to 3 {
.to:nth-child(#{$i}) {
width: 20px * $i;
}
}
/* Compile to CSS */
.through:nth-child(1) {
width: 20px;
}
.through:nth-child(2) {
width: 40px;
}
.through:nth-child(3) {
width: 60px;
}
.to:nth-child(1) {
width: 20px;
}
.to:nth-child(2) {
width: 40px;
}@eachList 또는 Map 데이터를 반복할때 사용합니다.
JavaScript의 for-in / for-of 문과 유사합니다.
/* SCSS */
// List
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
// Map
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
/* Compile to CSS */
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/salamander.png");
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
Front End