CSS(Cascading Style Sheet)
웹 페이지를 디자인하기 위해 사용하는 언어
CSS 참조 방식
인라인 방식
요소의 style 속성에 직접 스타일을 작성하는 방식
<div style="color: red; margin: 20px;"></div>디자인을 적용하기 위해 각 태그마다 style 속성을 적어줘야 하기 때문에, 같은 스타일을 가진 태그를 사용하려고 해도 따로 작성해줘야 한다. 즉, 재사용이 불가능하기 때문에 추천하지 않는 방식이다.
내장 방식
<style></style>의 내용(Contents)으로 스타일을 작성하는 방식
<style>
div{
color: red;
margin: 20px;
}
</style>HTML의 <head> 태그 내부에 <style> 태그를 선언하여 각 태그에 적용할 스타일을 작성한다. 인라인 방식에 비해 재사용성은 높아졌지만, 코드의 길이가 굉장히 길어지기 때문에 추천하지 않는 방식이다. HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용하게 사용될 수 있다고 한다.
링크 방식
모든 Style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
div{
color: red;
margin: 20px;
}위 스타일 코드가 들어있는 파일의 이름을 main.css라고 설정했다면,
<link rel="stylesheet" href="./css/main.css">HTML의 <head> 태그 내부에 <link> 태그를 선언하여 연결하면 된다.
HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있으므로 가장 널리 사용되는 방식이라고 한다.
CSS 우선순위
- 기본적으로 뒤에 나오는 CSS의 우선순위가 높다.
- 세 방식 중에 인라인 방식이 가장 우선순위가 높다.
- 내장, 링크 방식은 늦게 쓰여진 것이 우선이다.