# 기본지식(CSS)

## CSS 전처리기란?

 css 전처리기는 태생적으로 기존 css가 가질 수 있는 불리한 점을 해결하기 위해 탄생하였다.

**ex) sass, scss, less , stylus**

### sass,  scss 차이점

 **Sass는 코드를 작성할 때 중괄호(`{}`)를 사용하는 대신 파이썬과 같이 들여쓰기로 구문을 감지하며, 세미콜론(`;`)을 사용하지 않습니다.** 이는 css 를 작성하는 것과 다소 차이가 있는 부분입니다. 이후, Sass를 개발하는 사람들은 `Sassy Css` 를 의미하는 `SCSS`를 제공하게 됩니다. 즉 css 와 거의 비슷한 문법으로 Sass를 지원하자는 것입니다**. SCSS 는 코드 작성 시 css와 동일하게 중괄호나 세미콜론 등을 사용**합니다.

## CSS  적용 우선순위

1. 속성 값 뒤에 !important를 붙인 속성
2. HTML 에서 style을 직접 지정한 속성
3. \#id로 지정한 속성
4. .클래스 :추상클래스로 지정한 속성
5. 태그이름으로 지정한 속성
6. 상위 객체에 의해 상속된 속성

**같은 우선 순위에 있는경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용된다.**

## Button 

### button type

button type은 submit, reset, button이 있다.

button의 기본 타입은 submit 이다. 

### input type="button"

&#x20; **\<input>은 열린 태그여서 자식요소를 가질 수 없다는 단점이 있다. 하지만< button>은 자식 태그를 가질 수 있기 때문에 이미지/텍스트/가상요소 등의 다양한 활용이 가능하다.**

\<button>은 \<input> 의 역할을 잇기 위해 나중에 추가된 태그이다.

## rem 과 em 차이점

### **em**

&#x20;:point\_right: **em**은 스타일을 **지정한 요소**의 **폰트 크기**를 **곱한 값**을 나타낸다.

### rem

&#x20;:point\_right: rem 단위는 변환된 픽셀 크기는 **최상위(rem에서 r은 root를 뜻함) 요소의 폰트 크기가 기준**이 된다.\
(최상위 요소의 폰트 크기에 rem 단위로 지정한 숫자를 곱한 값이 변환된다.)

## 가상클래스(Pseudo Class)

&#x20;**가상 클래스는 선택이 될 요소에 대해 특별한 상태 에 대한 스타일을 입혀줍니다.** 흔히 사용하는 `:active`, `:hover` 와 같이 특정 상태에 대한 `:가상 클래스명` 을 적어주고 그 아래에 '그 상태' 에 대한 스타일을 기술해줍니다.

## 가상요소(Pseudo Element)

가상 요소는 특정한 부분에 스타일을 입히고 싶을 때 사용한다. 가상 **클래스는 특정 상태에 대한 스타일이라면, 가상 요소는 특정 콘텐츠에 대한 스타일을 적용 시키기 위해 사용한**다.

자주 쓰는 가상 요소&#x20;

* [`::after`](https://developer.mozilla.org/ko/docs/Web/CSS/::after): 콘텐츠 뒤에 위치하는 공간 선택
* [`::before`](https://developer.mozilla.org/ko/docs/Web/CSS/::before): 콘텐츠의 앞에 위치하는 공간을 선택
* [`::selection`](https://developer.mozilla.org/ko/docs/Web/CSS/::selection): 드래그한 콘텐츠를 선택 지원하지 않는 브라우저가 있어 체크해야한다. 그리고 `::` 콜론은 두 개만 지원 한다고한다.
* `:last-child`: 부모 요소 안에 있는 마지막 자식만 선택하는 선택자
* `:first-child`: 부모 요소 안에 있는 첫번째 자식만 선택하는 선택자
* `:first-of-type`: 같은 태그의 첫번째 요소만 선택
* `:last-of-type`: 같은 태그의 마지막 요소만 선택
* `:not(:last-child)`: 마지막 요소를 제외한 것들 선

### 싱글클론:과 더블클론::의 차이점

싱글 콜론은 css2.1 규격 : before : after&#x20;

더블 콜론은 css3 규격 ::before ::after

**ie8에도 적용하려면 싱글콜론으로,  css3 지원브라우저만 적용하려면 더블콘론으로 사용하면 된다.**

## CSS  삼각형 만들기

{% tabs %}
{% tab title="HTML" %}

```markup
<div class="tri"></div>
```

{% endtab %}

{% tab title="CSS" %}

```css
.tri{
  width: 0px;height: 0px;
  border-top:50px solid none;
  border-bottom:50px solid red;
  border-right: 50px solid transparent;
  border-left: 50px solid  transparent;
}
```

{% endtab %}
{% endtabs %}

![](https://810537134-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZh1fxUzW3zjggiSfv4%2F-MeeBlDIBCOqOUV4k4Lm%2F-MeeCViS-wnLDo46EkyL%2Fimage.png?alt=media\&token=1cfe213f-a72b-4a00-ba0e-4927a0976d0e)

## flex 와 grid의 차이점

&#x20;:point\_right: **Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.**

:point\_right: **그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다.**