[43-5 HTML] CSS syntax, selector, property, value, 선택자, 속성, 값

CSS Syntax

The grammar of the CSS language

누구나 한번쯤, 콘솔창에서 Syntax Error를 본 적이 있을거다.

Error 코드 중에 가장 빈번하게 나오는 것이 Syntax 에러인데,

문법적인 오류가 있다는 뜻이다. 

Syntax는 '구문'이라는 뜻으로 '문법'과 비슷한 의미이다. 

 

오늘은 CSS의 Syntax(문법)을 알아보고, 

CSS를 올바른 Syntax로 작성하여

내 웹페이지의 스타일에 영향을 주기위해

CSS 코드 안의 어떤 요소를 변경해야 하는지 생각해보자.

 

selector { property : value ; }

 

1) 선택자 selector { 속성 : 값 ; }

선택자 selector: 시작부분에 나오는 것으로, 그 뒤에는 중괄호 쌍이 나온다. 

어떤 대상 who의 스타일을 바꿀 것인지를 말한다.

 

2) 속성 propery: 중괄호 부분의 키에 해당하는 것이다.

선택자의 무엇what(ex 색깔, 크기, 배경색, 위치 등등)을 바꿀 것인지를 정의한다.

 

3) 구분 :

속성과 값을 구분하기 위해 : 쌍점을 찍는다.

 

4) 값 value: 중괄호 부분의 값에 해당하는 것이다.

속성을 어떻게 how 바꿀 것인지를 정의한다. 속성이 색깔이라면 파랑색, 빨강색, 노랑색 등의 값을 뜻한다. 

 

5) 끝 ; 

마지막을 나타내는 마침표와 같은 역할을 세미콜론이 한다. 

 

h1 {
  color: blue; 
  font-size: 200;
}

 

+tip

1. ; 세미콜론이 끝나는 지점에서 한 줄을 띄워주는 것이 좋다. 

2. 보통 알파벳 순으로 속성을 나열하는 것이 좋다.

 

<예시>

body {
  background-color: grey;
  background-image: url('C:/Users/samsung/Desktop/web/my first website/ann-modified.png');
}

hr {
  border-color: blue;
  border-style: none;
  border-top-style: dotted;
  border-width: 5px;
  height: 50px;
  width: 30%;
}

h1 {
  color: blue;
  font-size: 200;
}
img {
  background-color: blue;
}