기본지식(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"

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

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

rem 과 em 차이점

em

👉 em은 스타일을 지정한 요소의 폰트 크기를 곱한 값을 나타낸다.

rem

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

가상클래스(Pseudo Class)

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

가상요소(Pseudo Element)

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

자주 쓰는 가상 요소

• ::after: 콘텐츠 뒤에 위치하는 공간 선택

• ::before: 콘텐츠의 앞에 위치하는 공간을 선택

• ::selection: 드래그한 콘텐츠를 선택 지원하지 않는 브라우저가 있어 체크해야한다. 그리고 :: 콜론은 두 개만 지원 한다고한다.

• :last-child: 부모 요소 안에 있는 마지막 자식만 선택하는 선택자

• :first-child: 부모 요소 안에 있는 첫번째 자식만 선택하는 선택자

• :first-of-type: 같은 태그의 첫번째 요소만 선택

• :last-of-type: 같은 태그의 마지막 요소만 선택

• :not(:last-child): 마지막 요소를 제외한 것들 선

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

싱글 콜론은 css2.1 규격 : before : after

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

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

CSS 삼각형 만들기

HTML

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

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;
}

flex 와 grid의 차이점

👉 Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다.

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