2021.12.03 TIL

0.CSS
1.SASS(SCSS)
4.CSS속성

CSS

CSS(Cascading Style Sheets)는 HTML 문서의 스타일을 구현하는 스타일 시트 언어이다.
HTML로부터 디자인적인 요소를 분리해 정의할 수 있으며, 잘 정의 된 css는 서로 다른 여러 웹 페이지에 적용할 수 있다.

SASS

SASS(Syntactically Awesome Style Sheets)는 프로젝트 규모가 커지면 CSS는 불가피하게 가독성이 떨어지는 등 유지보수의 어려움을 주는 요소가 된다. 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 개념이 SASS/SCSS라고 한다.

SASS는 CSS의 {} 블록이 아닌 들여쓰기 감지를 핵심특성으로 갖는 구문을 가리켰으나, SCSS라는 CSS 구문과 완벽하게 호환이 되도록 중괄호를 사용함으로써 SASS와 CSS 사이의 차이를 좁히는 방향으로 변화되어 왔다.
현재 SASS구문과 SCSS구문을 모두 사용가능하며, 동등한 기능을 갖고 있어 원하는 구문을 사용하면된다.

(SASS및 SCSS를 사용하기 위해서는 별도의 loader가 필요하다.)

SASS와 SCSS의 구문차이점을 아래 코드로 살펴보면 좀 더 이해하기 쉬울것 같다.

Sass

/**Sass Syntax**/

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

Scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS속성

opacity
요소의 불투명도를 설정하는 속성이다. 불투명도는 요소 뒤쪽에 컨텐츠가 숨겨지는 정도로, 투명도의 반대이다.
opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다.
(자식 요소를 불투명하게 유지하고 싶다면 background 속성을 대신 사용하는것이 좋다.)

apperance
운영 체제의 테마를 기반으로 플렛폼에 기본 스타일을 사용하여 요소를 표시하는데 사용된다.

all:unset
button, input, span 등 스타일을 적용하기 위해서 각 브라우저마다 기본으로 적용되어 있는 style을 초기화 시키는 속성이다.

rgb & rgba 차이점
RGB는 빨강, 녹색 및 파랑에 대한 데이터를 포함하는 3 채널 형식이다.
RGBA는 빨강, 녹색, 파랑 및 알파에 대한 데이터를 포함하는 4 채널 형식이다.(alpha는 투명도)
(RGBA는 색상을 투명/불투명하게 만드는 것 외에는 알파 채널을 하용하지 않는다.)