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

공백 처리

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

h1 {color: black;}
h1 {
    color: black;
}
h1 {
    color : black;}
h1 {
    border: solid 1px black;
}
h1 {
    border: 
        solid 
        1px 
        black;
}
h1 {
    border: 
        solid 
        1px 
        black
    ;
}

전부다 사용 가능!!

주석

/* 한 줄, 여러 줄 모두 이렇게 사용합니다. */

벤더프리픽스 (Vendor-Prefix)

벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어 입니다. 아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어를 붙이는 문법

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

벤더프리픽스의 종류

-webkit- 크롬, 안드로이드, 사파리, ios 기반 파이어폭스, 오페라 등 웹킷 기반 브라우저
-moz- 파이어폭스 브라우저
-ms- 마이크로소프트 인터넷 익스플로러, 레거시 엣지
-o- 레거시 오페라 브라우저

웹킷 기반 브라우저란?
웹킷(Webkit)은 브라우저가 HTML,CSS를 화면에 그려줄때 사용하는 렌더링 엔진 입니다. 크롬, 안드로이드, 사파리, ios 기반 파이어폭스 등 많은 브라우저들이 사용했습니다. 현재 크롬, 안드로이드, 오페라, 마이크로소프트 엣지 브라우저 등은 Blick 엔진으로 전환되었습니다. 참고로 Blink 엔진은 vendor-prefix가 존재하지 않습니다.

2022년 현재 시점에서 벤더 프리픽스는 줄어들고 있습니다. 하지만 여전히 새로운 CSS 기능들은 개발되고 있고, 아직까지 사용해야 하는 벤더 프리픽스들도 존재 합니다. 크로스 브라우징을 위해 레거시 브라우저들을 지원해야 하는점도 잊지 말아야 합니다.
필요는 하지만 사용하는 것은 귀찮기 때문에 자동화할 필요가 있습니다. Autoprefixer!!