CSS는 Cascading Stye Sheets의 약자로 웹문서의 형식을 지정해줍니다. C, C++, C#과는 큰 관계가 없습니다. 어느 부분이 문서의 어느 위치에 위치해야 할지, 글자의 크기, 글씨체, 서식 등이 어떠해야 할지 등을 정할 수 있습니다. 예를 들면,
body{
margin:0;
padding:0;
background: #fff;
color: #4a4a4a;
}와 같이 HTML에서 body에 속하는 부분의 여러 설정을 변경할 수 있습니다.
CSS 파일을 HTML문서에 추가하는 부분은 HTML문서 <head> 부분에 <link rel="stylesheet" href="index.css"/> 와 같은 tag를 추가하여 링크할 수 있습니다. 또 여러 link 태그를 추가하여 적용시킬 수도 있습니다.
만약 html문서에서 여러 <p> element 중에 어느 한 element만 변경하고 싶다면 문제가 생깁니다. 위의 방법처럼 p{ color:red; } 같은 구문을 추가해버리면 모든 p element가 변경될 테니까요. 이를 해결할 수 있는 방법이 id 입니다. HTML 문서의 변경하고 싶은 부분의 tag에 id="wanttochange" 와 같은 속성을 추가한 후 CSS 파일에서
#wanttochange{
color : red;
} 와 같은 구문을 추가해주면 됩니다. id의 앞 부분에 #가 붙은 것에 주목해주세요.
하지만 id는 같은 id를 가지는 다른 element가 존재해서는 안되며, 마찬가지로 한 element는 한 id만 가질 수 있습니다.
만약 여러 element를 한 그룹에 포함시켜 한 번에 같은 방법으로 변경시키고 싶거나, 한 element가 여러 그룹의 변화에 영향을 받게 하고 싶다면 class를 이용해주면 됩니다. class="classname" 과 같은 속성을 추가해주고
.classname{
test-decoration: underline;
}와 같은 구문을 CSS파일에 추가하면 classname이라는 class를 갖는 모든 element들에 밑줄이 그이게 될 것입니다. class의 이름 앞에 .이 붙은 것에 주목해주세요.
한 element가 여러 class에 포함되게 하려면 class="classname1 classname2"와 같이 class의 이름들을 공백으로 구분해주고 연결시키면 됩니다.
