[Tech-Talk] CSS & SCSS

⚠️ 해당 게시글은 모던애자일 팀원이 준비한 테크톡 내용을 스크랩했습니다.

출처 : 모던애자일 3기 이한결 블로그

CSS

⭐️ CSS ⭐️

⭐️ 크기 단위

px - 절대값
em,% - 상대값
cm mm inch ...

⭐️ Box

width,height : content 사이즈 설정
padding : content와 border 사이의 여백 설정
border** : border 설정 - style, color, size;
border - style : none, solid, dotted, dashed ...
border - color : rgb(0, 0, 0), #fff ...
border-radius : border 굴곡률 설정
margin : 요소와 요소 사이 간격

속기형 (상 우 하 좌)

margin : 1px 2px 3px 4px;

-> top: 1px, right: 2px, bottom: 3px, left: 4px

padding: 0 auto;

-> top, bottom : 0 right, left : auto

⭐️ display

Element 속성 설정 ->
none : 표시 안 함
block : 같은 라인에 다른 요소 block
inline : 같은 라인에 다른 요소 가능, width, height 설정 불가
inline-block : 같은 라인에 다른 요소 가능, width, height 설정 가능
table :
table-cell :

기본 속성이 block

div p ul li dl dt dd h1~h6 form ...

기본 속성이 inline

span img a input mark strong em abbr ...

⭐️ float

content size는 box size가 되고 다른 요소 위에 배치 (떠 있지만 위치는 보장)
none : 기본 설정
inherit : 부모 Element에 상속
inline-start inline-end : 부모 요소의 시작 or 끝에 위치
left right : 왼쪽 or 오른쪽에 밀착

⭐️ overflow

hidden, auto, scroll ...
clear : float된 Element를 인식
left, right, both ->> 왼쪽 or 오른쪽 or 양쪽에 있는 모든 Element들을 인식

pseudo Element

.className::before {
}

.className::after

flex

position

* { }

전체 요소에 적용될 기능

* {
	box-sizing: border-box;
}

가운데 정렬

⭐️ table

.parent {
  display: table;
  width: 100%;				
  table-layout: fixed;		⭐️ 모두 일정한 width값으로 100%
}
.child {
  display: table-cell;		
  text-align: center;		텍스트 가운데 정렬
  vertical-align: middle;	수직 가운데 정렬
}

⭐️ flex

.parent {
  display: flex;
  flex-direction: row;			기본값(row)
  justify-content: space-between;	row방향-같은margin값으로 스트래치
  align-items: center;			column방향 가운데 정렬
}
.child {
  width: 설정값;				⭐️ 별도의 width값 설정
  display: flex;			
  justify-content: center;	 
  align-items: center;
}

 

⭐️ SCSS ⭐️

CSS 문법에 선택자 중첩, 조건문, 반복문, 단위 연산 등의 기능을 사용하여 스타일링 작성.
웹에서는 직접 동작하지 않는다 -> 웹에서 동작 가능하도록 표준의 CSS 로 컴파일하는 과정이 필요하다.
전처리기로 작성 >> CSS 로 컴파일 >> 웹에서 동작

🔥 SASS 와 SCSS 의 차이점 🔥

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새로 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.
-> SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다

차이 1

{}(중괄호)와 ;(세미콜론)의 유무

Sass

.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px

Sass는 선택자의 유효범위 (자식 요소) 를 '들여쓰기'로 구분하고, SCSS 는 {} 로 구분한다.

SCSS

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

차이 2

Mixins (재사용 가능한 방식) 사용법

Sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

compile...
CSS

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
}

사용하는 Data Types

• Numbers 👉🏻 1, 10px, 2em etc ...
• Strings 👉🏻 bold, "/img/me.png", center etc ...
• Colors 👉🏻 red, #FFFFFF, rgba(240, 240, 80, .5) etc ...
• Booleans 👉🏻 true, false
• Nulls 👉🏻 null
• Lists 👉🏻 (apple, tomato), teal red 👉🏻 () 선택
• Maps 👉🏻 (apple: a, orange: o) 👉🏻 () 필수

🔥 사용법 🔥

🌈 중첩 선택 🌈

SCSS

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

compiled to CSS

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}

🌈 상위 선택자 참조 🌈

SCSS

.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

compiled to CSS

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}

SCSS

.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}

compiled to CSS

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

🌈 중첩 속성 🌈

font-(weight, size, color ... etc), margin-(top, right ... etc) 와 같이 동일한 이름 뒤에 오는 속성들 통일

SCSS

.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
}

compiled to CSS

.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
}

🌈 변수 사용 🌈

반복하여 사용할 값을 변수로 저장 $변수명: 값

SCSS

$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}

compiled to CSS

.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

🌈 import (가져오기) 🌈

외부파일을 @import 로 가져오면 모두 단일 CSS 파일로 병합된다.
가져온 파일에서 정의된 모든 변수, Mixins 등을 사용 가능하다

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);

@import "hi.scss", "mainLayout.css";

🌈 매개변수 🌈

SCSS

@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}
>
.box1 { @include dash-line(2px, gray); }
.box2 { @include dash-line(4px); }

compiled to CSS

.box1 {
  border: 2px dashed gray;
}
.box2 {
  border: 4px dashed black;
}

매개변수로 값을 전달하지 않을 경우 기본값 적용

🌈 확장 🌈

특정 선택자가 다른 선택자의 모든 스타일을 공유할 경우
❗️ 현재 선택자가 어디에 첨부될지 주의 ❗️

.btn {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  @extend .btn;
  background: red;
}

compiled to CSS

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}
.btn-danger {
  background: red;
}

🌈 기본 연산 🌈

• +
• -
• * ❗️ 하나 이상 값이 Number 인 경우 사용 가능
• \/ ❗️ 분모가 Number, 값이나 그 일부가 변수로 사용되는경우, /연산 값이 () 로 묶여있는 경우, 값이 다른 연산식에 포함되어있는 경우 사용 가능
• \%
• 비교연산 ==, !=, <, >, <=, >=
• 논리연산 and, or, not

👉🏻 상대적 연산

width: 50% - 20px;

단위 에러

width: calc(50% - 20px);

연산 가능