CSS(Cascading Style Sheets)는 HTML과 같은 구조화 된 문서를 화면에 어떻게 렌더링할 것인지를 정의하는 언어이다.
HTML5이전에서는 HTML에 스타일을 컨트롤 가능한 태그(font , center)가 존재하여 스타일표현이 가능하였으나 정보와 구조를 담당하는 HTML 본연의 역할과 동떨어진 일까지 하다보니 언어의 정체성에 혼란이 왔다.
HTML5부터는 HTML은 정보와 구조화 CSS 스타일의 정의라는 명확한 구분이 생겼다.
위 그림에서 볼 수 있듯이 HTML은 정보와 구조화, CSS는 스타일의 정의 JS는 동적 기능을 추가하는 역할을 한다.
1.선택자(Selector)
CSS는 HTML의 요소를 스타일링을 정의하는데 사용된다.
그래서 스타일을 적용하고자 하는 HTML요소를 선택할 수 있어야 하는데 선택자는 스타일을 적용하고자 하는 HTML요소를 선택하기위한 수단이다.
위의 구문은 HTML문서의 태그 선택자를 통해h1태그를 선택한 후 h1태그에 스타일을 적용하고 있다.
2.속성(Property)
선택자를 이용해 HTML요소를 선택하고 {}내에 속성과 값을 지정하는 것으로 다양한 스타일을 정의할 수 있다. 속성은 이미 지정되어 있는것을 사용해야하며 사용자가 임의로 정의할 수 없다. 여러개의 속성을 연속해 지정할 수 있으며 세미콜론으로 구분한다.
h1{
color : red;
font-size : 1rem;
}위의 코드에서 초록색으로 표기된 부분이 속성이다.
3.속성값(Value)
선택자로 지정한 HTML요소에 스타일을 적용하기 위해 속성을 사용했다.
속성의 값은 해당 속성에 사용할 수 있는 값을 키워드 , 크기 , 색상 등의 특정 단위로 지정하여야 한다.
h1{
color : red;
font-size : 1rem;
}위의 코드에서 검정색으로 표기된 부분이 속성값이다.
4.HTML과 CSS의 연동
Link 태그 이용
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
</html><link rel="stylesheet" href="css/style.css">부분이 HTML문서에 css파일을 연결한 부분이다.
