CSS syntax, 구성

이번 시간에는 CSS파일을 만든 후, CSS구성에 대해 알아보도록 하겠습니다.

그럼 제일 먼저, 마우스 오른쪽 버튼을 클릭한 후, new file을 클릭 하겠습니다.

 

 

파일명은 style.css로 작성 후 생성하면 됩니다.

 

 

이때, 확장자를 html이 아닌, css로 쓰고 있다는 점 확인하시기 바랍니다. 

파일을 생성했다면, CSS의 구성에 대해 알아보겠습니다. 
CSS는 크게 두 부분, 1>selector와 2>property 부분으로 구성되어 있습니다. 

2> property부분은 selector 내부에 쓰여지는 내용으로, property-name: value;와 같이 생겼습니다.

 

 

property-name은 소문자로 써야 되고, 공백이 없습니다.
그리고 value뒤에 쌍반점, semicolon, 세미클론, ;을 꼭 붙여 주어야 합니다. 

1> selector는 HTML의 태그와 property를 연결해주는 연결고리입니다.

예를 들어, property와 HTML의 h1태그를 연결하고 싶다면, 
h1을 쓰고 {}, 괄호를 연 다음, 조금 전에 작성한 property를 붙여넣으면 됩니다.

 

 

여기서, h1 {} 부분을 selector라고 부릅니다.

뿐만 아니라, 괄호안에 수많은 property를 원하는 만큼 써 넣어줄 수 있고, 이 property 모두 다 h1에 적용됩니다.
h1 {property-name: value; property-name: value; property-name: value; property-name: value;}

 

 

h1태그 뿐만 아니라, 링크, 문단, header, footer, div, 등 태그 이름, name이 모두 selector가 될 수 있습니다. 

 

 

 

ID, class도 selector에 쓰일 수 있습니다.
ID의 경우에는 #name으로 작성하고, #name {property-name: value;}

 

 

class의 경우에는 .name으로 작성해야 됩니다. .name {property-name: value;}

 

 

 

뿐만 아니라, 태그 이름, name과, ID, class를 함께 섞어 selector에 쓸 수 있습니다.
예를 들어,  h1 .name {property-name: value;} 와 같이, 태그이름 .name로 쓰입니다.

 

 

 

다시 말하면, ID, class, 또는 tag name을 selector로 쓴 다음, 괄호를 열어 property를 작성하면 됩니다. 
selector (id, class, tag name) {property-name: value;}