[Css] 기본 문법 - 구조, 주석, 벤더 프리픽스

CSS(Cascading Style Sheets)란?

• CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 스타일 시트 언어로, 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다.
• HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 하지만, CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.

CSS 기본 구조

http://www.tcpschool.com/css/css_intro_syntax

• CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다.
• 선택자는 CSS를 적용하고자 하는 HTML 요소를 가리키며, 선언부는 하나 이상의 선언들을 세미콜론 ; 으로 구분하며 중괄호 { } 를 사용해 전체를 감싼다.
• 각 선언은 CSS 속성(property)과 속성값(value)을 가지며, 그 둘은 콜론 : 으로 연결되고, CSS 선언은 언제나 마지막에 세미콜론 ; 으로 끝난다.

CSS 주석(comments)

• 주석이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문으로, 웹 브라우저에 의해 해석되지 않는다.
• 주석 내부에 또 다른 주석을 넣지 않는다.

/* 주석내용 */

<style>
p { color: teal; /*이것은 한 줄짜리 주석입니다.*/ font-size: 30px; }
/* 
이것은 두 줄짜리 주석입니다.
몇 줄이라도 가능합니다. 
*/
</style>

 

벤더 프리픽스(Vendor Prefix)

• 벤더 프리픽스란 새로운 기능을 제공할 때 이전 버전의 웹 브라우저에 그 기능을 알려주기 위해 사용하는 접두사(prefix)로, 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 한다.
• CSS 표준 문법 코드는 벤더 프리픽스로 작성된 코드가 모두 나오고 난 후에 나와야만, 벤더 프리픽스가 포함된 코드가 정상적으로 동작할 수 있다.

.button {
    background: red;             /* gradient 속성 지원 않는 모든 브라우저 */
    background: -webkit-linear-gradient(red, yellow); /* 크롬,사파리,모바일 */
    background: -ms-linear-gradient(red, yellow);     /* 익스플로러, 엣지 */
    background: -moz-linear-gradient(red, yellow);    /* 파이어폭스 */
    background: -o-linear-gradient(red, yellow);      /* 오페라 */
    background: linear-gradient(red, yellow);         /* CSS 표준 문법 */
}

• 많은 브라우저를 위한 벤더 프리픽스 사용은 코드의 양을 늘리기에, Prefix Free 사이트에서 라이브러리를 다운받고 include하면 벤더 프리픽스 없이 모든 CSS를 사용할 수 있다.

<script src="prefixfree.min.js"></script>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/