[TIL] CSS 간단 지식

CSS

reset CSS

1. reset CSS 가 나오게 된 계기

브라우저 제작사들마다 각각 브라우저가 제공하는 요소의 기본 스타일이 모두 달라서

2. 대표적인 종류

• 에릭 마이어의 reset.css
  • reset.css는 기존 스타일을 모두 제거하는 적극적인 방법
• normalize.css
  • 브라우저 고유의 스타일을 존중하면서 거기에 스타일을 첨가하는 부드러운 방법
• 직접 필요한 부분만 reset해서 사용하기

---

공백처리, 주석 및 벤더프리픽스

1. 공백처리

css는 html과 마찬가지로 공백을 규합

2. 주석

/* 한 줄, 여러 줄 모두 이렇게 사용 */

3. 벤더프리픽스 (Vendor-Prefix)

벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어

아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어(prefix)를 붙이는 문법

ex)
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;

매번 모든 프로퍼티에 작성하려면 힘들기 때문에 자동으로 벤더프리픽스를 붙여주는 프로그램이 있음
ex) Autoprefixer

---

CSS Selector

1. CSS Selector 종류

---

선택자 우선순위

1. 우선순위 원칙

• 후자 우선의 원칙

  • 동일한 선택자가 연속으로 사용되었을 경우 더 늦게 작성된 문법 적용

• 구체성(명시도)의 원칙

  • 한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선

  • "어떤 선택자가 더 구체적인가?" 를 판단할때 가중치를 기준으로 판단

  • 가중치 점수

    inline-style : 요소의 안에 속성으로 선언되는 스타일, 1000 점의 가중치
    id 선택자 : 100점
    class, 가상클래스, 속성 선택자 : 10점
    타입, 가상요소 선택자 : 1점
    전체선택자(Universal Selector) 는 무시
    참고링크 : https://specificity.keegan.st/

  • 태그을 많이 겹쳐서 가중치 점수를 올려도 자리올림은 되지 않는다.
    ex) class 선택자 > 타입선택자 10개 이상

• 중요성의 원칙

  • !important 를 속성값으로 주면 다른 가중치점수들을 무시하고 바로 적용
  • 우선 순위 계산을 어렵게 만들기 때문에 권장하지않음

---

CSS Box Model

1. 박스의 구성

• 콘텐츠(content) 박스 : 요소의 콘텐츠가 표시되는 영역
• 패딩(padding) 박스 : 패딩은 콘텐츠와 테두리 사이의 공간
• 보더(border) 박스 : 보더 박스는 콘텐츠와 패딩을 둘러싸는 테두리
• 마진(margin) 박스 : 마진은 보더 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할

2. 박스의 유형

• 블록 박스

  • 사용 가능한 공간을 양 옆으로 100% 사용하며 사용하지 못하는 공간은 마진 영역으로 채움
  • width와 height속성을 사용하여 스타일을 컨트롤
  • 패딩과 마진, 보더 속성을 사용하여 스타일을 컨트롤 할 수 있음

• 인라인 박스

  • 기본적으로 컨텐츠 박스만큼의 크기만 가짐
  • width 와 height 속성을 사용할 수 없음
  • 패딩과 보더 속성을 사용할 수 있지만 마진 속성은 좌우만 조절할 수 있음

• diplay 속성

  • display 속성은 박스의 성질을 지정하여 다른 박스들과 어떤 방식으로 위치가 배치 될지 결정
  • 외부 디스플레이 타입, 내부 디스플레이 타입으로 나뉨

• 외부 디스플레이 타입

  • inline : 인라인 박스로 박스의 유형을 결정
  • block : 블록 박스로 박스의 유형을 결정
  • inline-block : inline 속성의 특징과 block 속성의 특징이 함께 존재하는 박스

• 내부 디스플레이 타입

  • flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축 혹은 Y축의 단방향으로 설정하는 속성
  • grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소안에서 X축과 Y축을 모두 이용해 배치하는 속성

마진 겹침 현상 (margin collapsing)
마진 겹침 현상이란?

• 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상
• 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상

해결방법
1. 부모 요소에 overflow 속성 값을 적용하기
2. 부모 요소에 display: inline-block 값을 적용하기
3. 부모 요소에 border 값을 적용하기
4. 부모 요소에 display 속성으로 flow-root을 사용하기 (IE 지원 불가)