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

1. 공백처리

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

2. 주석


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

2. 벤더 프리픽스

벤더 프리픽스

웹 브라우저

예

-webkit-

크롬, 안드로이드, 사파리, 오페라 파이어폭스 등 웹키트 기반 브라우저

-webkit-transition: all .5s;

-moz-

파이어폭스 등 모질라 기반 브라우저

-moz-transition: all .5s;

-ms-

마이크로소프트 인터넷 익스플로러(사라져 제발ㅎㅎ, 지원 곧 종료됩니다.)

-ms-transition: all .5s;

-o-

오페라 기반 브라우저

-o-transition: all .5s;

다 외울 수가 없기 때문에 아래 자동완성을 사용해주세요. 2021년 10월 현재 시점에서 벤더 프리픽스는 줄어들고 있습니다! 다행이도요! 익스플로러도 종료 예정이고요. 소리질러!!

Autoprefixer CSS online

Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes include comment with configuration to the result You can also see which browsers you choose by filter string on browserl.ist Autoprefixer online - web repl for original Autoprefixer. It parses your CSS and adds vendor prefixes to CSS rules using values from Can I Use.

https://autoprefixer.github.io/