# 기본지식(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 %}

![](/files/-MeeCViS-wnLDo46EkyL)

## flex 와 grid의 차이점

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/_-1/css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.