CSS의 정의 : Cascading Style Sheetes(CSS)는 HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링 되어야 하는지를 지정한다. 라고 MDN 문서에 적혀있다. 한마디로 웹 문서를 스타일링을 해줄 수 있는 코드를 작성하는 것이라고 보면 될것 같다.
웹 개발을 공부하기 전에도 너무 익숙히 들었던 친구라서 다른 소개 없이 바로 사용 방법을 보는 것이 더 효과적일 것이다.
CSS 연동 방법
Inline Style Sheet
인라인 스타일은 html 태그 내부에 스타일을 정의하는 방법이다. 아래와 같이 예시를 보면 이해가 쉽다.
<h1 style="color:blue;text-align:center;">This is a heading</h1>위와 같이 h1과 같은 html 태그 내부에 style 속성을 지정하여 값으로 css 문법을 적어주면 해당 스타일이 태그에 적용된다.
- 장점
- HTML 페이지에 CSS 규칙을 쉽고 빠르게 삽입할 수 있다. 그렇기에 빠르게 테스트하거나 변경된 사항을 미리 보고 수정하고 싶을 때 유용하다.
- 밑에 다룰 External Style과 같이 별도의 문서를 생성하여 업로드할 필요가 없다.
- 단점
- 이 방법은 내가 스타일을 원하는 태그마다 지정해줘야 하기 때문에 CSS 규칙을 추가하는데 시간이 오래걸리고 무엇보다 HTML 구조를 지저분하게 만든다.
- 위 방법이 단순한 테스트나 짧은 코드가 전부라면 문제없지만 엄청 긴 코드들을 전부 다 저 방식을 이용해 스타일을 지정한다고 생각해보자 같은 p태그에 같은 스타일을 지정하고 싶어도 같은 코드를 모든 p태그에 달아줘야 하는 번거로움이 생기고 무엇보다 코드가 너무 길고 보기 힘들어질 것이다.
- 여러 요소의 스타일을 지정하면 페이지 크기와 다운로드 시간에 영향을 줄 수 있다.
- 이 방법은 내가 스타일을 원하는 태그마다 지정해줘야 하기 때문에 CSS 규칙을 추가하는데 시간이 오래걸리고 무엇보다 HTML 구조를 지저분하게 만든다.
사실상 거의 대부분의 개발자들이 싫어하고 안 쓰기를 권장하는 방법이다. 보기 힘들뿐만 아니라 개발 시간이 오래 걸린다.
Internal Style Sheet
html 문서 내에 스타일 방식을 정의하는 방식이다. 위의 방법과는 달리 html과 css가 구분되어 구별하기 쉽고 재사용이 가능하다. 이 방식은 <head> 섹션 내에 <style> 요소를 추가하여 css를 정의한다.
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>- 장점
- 스타일 작성 시 주로 사용하게 될 class와 ID 선택자를 사용할 수 있다.
- 동일한 HTML 파일 내에서만 코드를 추가하므로 여러 파일을 업로드할 필요가 없다.
- 단점
- HTML 문서에 코드를 추가하면 페이지 크기와 로딩 시간이 늘어날 수 있다.
위에서 재사용이 가능하다고 말했는데 정확히는 같은 html 문서 내에 태그들만 재사용이 가능하다. 이 말은 index.html이 있고 app.js가 있을 때 index.html에서 지정한 p태그의 css 코드를 index.html 내부에 존재하는 p태그들은 적용되지만 app.js의 p태그는 다시 새로 css 코드를 작성해야 한다.
External Style Sheet
별도의 CSS 파일을 만들어 해당 파일에 CSS를 정의하고 html 문서에서 해당 CSS를 불러와 적용 시키는 방법이다.
사실상 이것만 주로 사용하게 될 것이다. 물론 라이브러리를 사용하게 됨으로 달라질 수 있지만 그외에는 보통 이 방식을 선호한다.
이 방법은 <head> 섹션 내에 <link> 요소를 추가하여 css 파일을 참조시켜 사용한다.
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
</body>- 장점
- CSS 코드가 별도의 문서에 있으므로 html 파일의 구조가 더 깔끔하고 크기가 작아진다.
- 여러 html 문서에 동일한 CSS 파일을 사용할 수 있다. 즉 제대로된 재사용이 가능하다.
- 단점
- 외부 CSS가 로드될 때까지 페이지가 올바르게 렌더링되지 않을 수 있다.
- 여러 CSS 파일을 업로드하거나 링크하면 사이트의 다룬로드 시간이 늘어날 수 있다.