CSS 기본문법

CSS는 정말 많은 것을 할 수 있게 해 줍니다.

CSS를 사용하여 많은 웹페이지들의 디자인을 한꺼번에 컨트롤 할 수 있습니다.

문법을 살펴볼까요?

CSS 기본 문법

CSS 표기는 크게 두 파트로 나눕니다.

하나는 selector라는 이름이구요.

다른 하나는 한개 이상의 Declaration들입니다.

아래 그림을 보면 이해가 쉽습니다.

selector는 우리가 스타일을 넣기 원하는 HTML엘리먼트 입니다.

그리고 각각의 선언(declaration)은 속성(property)과 값(value)으로 구성되어 있습니다.

속성은 우리가 바꾸기 원하는 스타일attribute입니다.

속성은 값을 가지고 있습니다.

CSS 예제

CSS 선언은 항상 세미콜론으로 끝납니다.

하나의 선언 그룹은 { } 으로 싸여 있습니다.

p {color:red; text-align:center;}

실무에서는 위의 인라인 표기법으로 많이 사용합니다.

가독성이 좋게 하기 위해서 아래와 같이 쓰기도 합니다.

p {

  color:red; 

  text-align:center;

}

CSS 주석

주석(Comments)은 코드를 설명하여 유지보수성을 좋게 해 주는데 사용합니다.

코드를 작성하고 오랜시간이 지나면 작성한 사람도 잊게 되므로 주석을 달아주는 습관은 매우 중요합니다.

주석은 브라우저에서 무시되므로 스타일이 적용되지 않는 것입니다.

CSS의 주성은 이것하나만 사용합니다.

/* 주석내용 */

/*  이 곳은 P태그에 관한 스타일입니다. */

P{

  text-align:center;

  /* 색깔과 폰트를 지정 */

  color:black;

  font-familly:arial;

}