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

공백 처리

• 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 속성 앞에 브라우저 제조사 만의 prefix를 붙이는 문법

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

Autoprefixer

• 자동으로 벤더 프리픽스를 수정해주는 라이브러리
• https://autoprefixer.github.io/
• vscode extention으로 추가할 수 있다.