CSS는 HTML로 만들어졌다. 콘텐츠에 디자인요소와 레이아웃을 정의 하는 기술로 잘 설계된 css는 재활용이 가능하다. 템플릿의 형태로 확장될 수 있고 JavaScript와 연계해 콘텐츠의 내용이나 디자인을 동적으로 처리할 수도 있다.
그래서 CSS가 뭐냐고?
Cascading Style Sheet.
HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이다. HTML이 뼈대를 만드는 용도라면 CSS는 디자인을 담당한다. 색상, 크기, 이미지 크기나 위치, 배치 방법 등을 웹 문서에 담는다.
그럼 왜 CSS를 사용해야됨?
웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주기 때문이다. 이는 사이트의 전체 스타일을 손쉽게 제어할 수 있다. 또, 웹 사이트의 스타일을 일관성 있게 유지해 주며, 그에 따른 유지 보수가 쉬워진다. 그렇기 때문에 사용한다. 이외에도 여러가지 이유가 있지만 몇개 정리해보자면
1.HTML만으로 웹페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 다 지정해줘야한다.
2.이러한 작업은 매우 많은 시간이 걸리며 비효율적이다. 완성한 후에도 스타일의 변경 및 유지 보수를 하기 매우 어렵다.
3.이러한 문제점을 해소하기 위해서 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 CSS임.
4.CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
5.또한 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워짐.
6.이러한 외부 스타일 시트는 보통 확장자를 .css 파일로 저장함.CSS의 역사같은거는 위키백과를 참고하자.
https://ko.wikipedia.org/wiki/CSS
그럼 CSS는 어떻게 사용해야함?
CSS의 문법은 선택자(selector)와 선언부(declaration)로 구성된다.
선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킨다.
선언부는 하나 이상의 선언들로 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({})를 사용하여 전체를 둘러싼다.
각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결된다.
이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마친다.
선택자 h1 태그를 선언부 안에 속성명, 속성값으로 채운 모습이다.
CSS의 핵심은 적절한 선택자를 사용하는 것이며 복잡한 문서 구조에서 특정 부분을 선택하기 위한 선택자 지정은 어려울 수 있으며 HTML 구조를 처음부터 잘 설계하는 것이 중요하다.
그러면 CSS를 적용하는 방법이 뭐가 있는데?
3가지가 있다. 내부 스타일시트, 외부 스타일시트, 인라인 스타일로 구분한다.
1.내부 스타일시트
html 파일에 스타일을 기술하는 방법. ex) 태그 사이에 태그 부분에 작성한다. HTML과 CSS가 한 파일에 있으므로 작성은 쉽다. 하지만 CSS의 재활용이 안되서 외부 스타일 시트를 다들 권장하는 쪽이다.
ex)
<head>
<style>
body {
background-color: red;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
...
</body>2.외부 스타일시트
CSS를 사용하는 가장 기본적인 방법이며 가장 권장되는 방식이다. 별도의 파일에 CSS를 작성하고 해당 CSS를 필요로 하는 HTML 문서에 불러와서 적용시키는 형식이다. 이때 CSS는 동일한 서버에 있어도 되고 url을 통해 다른 서버의 CSS를 불러오는 것도 가능하다.
ex)
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">3.인라인 스타일
HTML 태그에 필요한 디자인 속성을 직접 작성하는 형식이다. 그때그때 바로 필요한 형식을 지정할 수 있다는 것이 장점이지만 일관된 디자인 체계를 유지하거나 양이 많은 경우 일일이 작성, 유지 보수를 해줘야 하지 때문에 효율성이 매우 떨어진다. 진짜 필요한 경우가 아닌 이상 사용하지 않는 것을 권장한다.
ex)
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>그러면 어떻게 작성해야됨?
CSS의 Cascading이 뭔지부터 알고가보자. 사전적 의미로는 '폭포처럼 떨어져 내리는' 이라고 한다. CSS에서는 디자인 속성이 HTML 문서의 구조=DOM(Document Object Model) Tree 에서 상위 요소에서 정의 한 것들이 하위 요소에게도 전달된다는(상속의 개념)에서 유래되었다고 한다.
상위 태그에서 정의된 디자인 속성들은 하위 태그에 전달됨.
하위 태그에서 상위 태그에 정의된 디자인을 변경할 수 있다.
만약 위에 말했던 외부, 내부, 인라인 스타일이 동시에 적용된다면 어떻게 될까?
우선순위가 적용된다. 우선순위는 가장 나중에 정의되는 스타일에 있다. 인라인 스타일시트가 가장 높은 우선순위로 적용되고 외부, 내부 스타일시트는 문서상 정의된 순서에 따라 우선순위가 결정된다.
*브라우저 디자인 정의 -> 외부 스타일 시트-> 내부 스타일시트 -> 인라인 스타일시트
참고자료
W3Schools.com CSS 강좌: https://www.w3schools.com/css/default.asp
Mozilla CSS 개발자 문서 : https://developer.mozilla.org/ko/docs/Web/CSS
Codecademy CSS 무료강좌: https://www.codecademy.com/learn/learn-css
