CSS(Cascading Style Sheets)
위키백과에 정의된 내용에 따르면 css는 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading style sheets)는 마크업 언어가 실제로 표기되는 방법을 기술하는 스타일언어(style sheet language)입니다.
css는 사실 html이 없다면 무엇인가를 표현할 수 있는 구조는 아닙니다. html에 종속이 되어 있는 것이죠. 또한 cascading이란 폭포와 같이 위에서 아래로 흐르는 것처럼 가장 바깥 쪽에 있는 요소에 스타일을 지정해주면 그 안에 있는 요소들까지 그 스타이링을 받게 된다는 것을 알 수 있습니다.
CSS도 HTML처럼 WC3에 의해서 권고안이 나오고 명세가 작성되는 식으로 구성이 됩니다. 하지만 CSS3부터는 이전과 다르게 모듈별로 버전링을 따로 하며 꾸준하게 업데이터가 되고 있습니다. 그렇기 때문에 새로운 속성을 사용할 때 브라우저마다 모듈별로 지원범위가 다를 수도 있다는 점을 알아두고 어떤 브라우저까지 지원이 되는지를 확인해보길 권장합니다.
1. CSS는 어떻게 생겼을까?
CSS는 룰 기반(Rule-based)의 언어로 여러가지 규칙을 나열하는 형식으로 구성이 되어 있습니다. 또한 CSS를 통해 특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있습니다.
h1 {
color:red;
font-size: 12px;
}여기서 h1은 selector로 어떤 요소에 접근을 할 것인지를 정의하게 됩니다. 그리고 선언블록 {} 내부에 어떻게 스타일링을 할지를 정의를 하게 됩니다. 선언들은 속성과 값이 쌍을 이루고 있으며 콜론(:) 을 통해 구분을 하고 있습니다. 또한 선언이 끝난 후에는 세미콜론(;)을 붙여줍니다.
주석
/ 내용 / 형식으로 작성합니다.
2. CSS를 적용하는 방법
HTML문서에 CSS스타일을 적용할 때는 다음의 세가지 방법을 사용할 수 있습니다.
2-1. 내부스타일(embedded)
HTML 문서의 head태그 내에 style태그를 사용해 css스타일을 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
h1 {
color: red;
}
</style>
<title>CSS</title>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>2-2. 인라인 스타일(inline)
HTML요소 내부에 style속성을 사용하여 css스타일을 적용할 수 있습니다. 하지만 이러한 방법은 유지보수에 좋지 않기 때문에 특정한 상황이 아니라면 사용을 지양합니다.
<body>
<h1 style="color:red">Welcome!</h1>
</body>2-3. 외부 스타일(external)
HTML의 head태그 내 link를 사용하여 외부 파일을 연결하는 방식으로 외부 파일을 가지고 와 CSS스타일을 적용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>CSS</title>
<link rel="stylesheet" href="style.css">
</head>3. 캐스캐이딩 원칙
최종적으로 적용되는 스타일은 다음의 순서에 따릅니다.
- 스타일 우선순위
- 스타일 상속
3-1 스타일 우선순위
- 동일한 스타일이라도 선언된 곳에 따라 우선순위가 정해집니다.
- 브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
- 적용 범위가 적을 수록 우선시 됩니다.
- tag 스타일 < class스타일 < id 스타일 < 인라인 스타일
- 소스코드의 순서가 뒤에 있으면 덮어씁니다.
3-2 스타일 상속
- 부모 요소에 있는 스타일 속성들이 자식 요소로 전달됩니다.
- 자식 요소에 재 정의할 경우, 부모의 스타일을 덮어씁니다.
- 상속이 되지 않는 속성도 있습니다( 배경이미지, 배경 색 등 )
