웹 브라우저가 읽을 수 있는 언어는 HTML, CSS, JS 세가지 언어 뿐 입니다. 세가지 언어중 HTML은 문서 구조를 담당하고 있습니다. 그리고 오늘의 핵심 주제인 CSS는 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할을 합니다. 말로만 들으니 HTML문서가 뭔지, CSS가 뭔지 잘 와닿지 않으시죠? 눈으로 직접 보며 HTML 문서에 CSS가 있고 없고의 차이를 느껴보도록 하겠습니다.
왼쪽과 오른쪽 이미지의 차이가 느껴지시나요?
이렇게 CSS는 페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아주며, 요소 하나하나를 개성있고 사용이 편리하도록 꾸며주는 역할을 합니다.
CSS를 기본 구조는 위와 같습니다.
먼저 CSS 구문은 선택자(Selector) , 선언(Declaration) 로 구분됩니다.
그리고 선언은 다시 속성(property) , 속성값(property value) 의 구조를 가지고 있습니다.
선택자는 어떤 HTML 요소를 선택해서 스타일을 적용할 것인지 지정합니다.
선언은 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정합니다.
이 선언은 속성과 속성 값으로 이루어져 있는데,
속성은 적용하고자 하는 스타일의 종류를, 속성 값은 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정합니다.
선택자와 선언에 대해 자세히 알아보기에 앞서 먼저, 이렇게 작성한 CSS를 어떻게 HTML 문서와 연결할 수 있는지 알아봅시다.
CSS를 적용하는 방법에는 크게 3가지가 있습니다.
inline style 작성하기
인라인 CSS란 해당 태그에 직접 style 속성을 추가해주는 것 입니다.
<h1 style="color: blue;">제목이에요~</h1>
이와같이 h1같은 태그에 직접 style속성을 주어 css를 작성할 수 있습니다.
이 방법은 간편하지만 적용해야 할 스타일이 많아지면 가독성이 떨어지며, 유지보수가 어렵다는 단점이 있습니다.