학생때 css는 적용만 되면 "됐다!" 했기 때문에 제대로 된 사용법도 모르고
취업을 하면서 이미 퍼블팀이 있었기 때문에 css를 건들지 않아도 됐기 때문에
조금이라도 알던 css에 대한 지식이 이미 날라가버린 상황...
쓸데없는 소리 그만하고 그래서 지금부터 css가 무엇인지 정리를 해볼려고 한다.
css란?
CSS(Cascading Style Sheets)는 계단식으로 스타일을 정의하는 문서이다.
즉, html의 요소들이 웹에서 어떻게 보일지 정의하는 스타일 시트 언어이다.
쉽게 생각하면 외출하기 위해 옷을 입고, 머리 손질을 하고 꾸미는 작업을 한다고 생각하면 될 것 같습니다.
CSS 기본 문법
CSS는 선택자(selector)와 선언부(declaration)로 구성이 되어 있다.
선택자 { 속성 : 값; .... }
ex) p태그에 색상을 초록색으로 지정
p {
color : green;
}
HTML문서에서 선언해준 class명과 id명으로도 사용이 가능하다.
ex) . → class명 , # → id명
class명이 p1인 선택자에 굵기를 bold로 지정
.p1 {
font-weight: bold;
}id명이 p1인 선택자에 굵기를 bold로 지정
#p1 {
font-weight : bold;
}
이렇게 지정을 해줄 수 있다.
그렇다면 css는 어떻게 적용을 할 수 있을까? css를 적용시키는 기본적인 방법은 세가지가 있다.
CSS 적용 방법
- 태그에서 style 속성을 추가하는 방법 (Inline Style Sheet : 인라인 방식)
- html에서 style태그로 적용하는 방법 (Internal Style Sheet : 내부 스타일 시트)
- css 파일을 만들어 연결해주는 방법 (Linking Style Sheet : 외부 스타일 시트)
CSS를 사용하는 이유
HTML만으로 웹페이지를 만드는 경우에는 요소 하나하나 세부적인 스타일을 지정을 해주어야 한다.
예시를 하나 들자면
이렇게 작성되어 있는 HTML 문서가 있다고 하면 A,B,C,D 전부 다 수정을 해줘야 한다.
지금은 예시로 4개만 수정하면 되지만 코드가 200~300줄이 된다고 하면?
이러한 경우에는 너무 많은 시간이 소요가 되고, 완성이 된 후에 스타일 변경을 해야하는 경우에 매우 힘들고 마찬가지로 유지 보수 또한 매우 힘들어진다.
따라서, 이러한 문제점을 해결하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 CSS이다.
