<aside> <img src="/icons/cursor-click_green.svg" alt="/icons/cursor-click_green.svg" width="40px" /> 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!
</aside>
웹 브라우저가 읽을 수 있는 언어는 HTML,CSS,JS 세가지 언어 뿐 입니다. 세가지 언어중 HTML은 문서 구조를 담당하고 있습니다. 그리고 오늘의 핵심 주제인 CSS는 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할을 합니다. 말로만 들으니 HTML문서가 뭔지, CSS가 뭔지 잘 와닿지 않으시죠? 눈으로 직접 보며 HTML 문서에 CSS가 있고 없고의 차이를 느껴보도록 하겠습니다.
왼쪽과 오른쪽 이미지의 차이가 느껴지시나요?
이렇게 CSS는 페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아주며, 요소 하나하나를 개성있고 사용이 편리하도록 꾸며주는 역할을 합니다.
CSS를 기본 구조는 위와 같습니다.
먼저 CSS 구문은 선택자(Selector) , 선언(Declaration) 로 구분됩니다.
그리고 선언은 다시 속성(property) , 속성값(property value) 의 구조를 가지고 있습니다.
선택자는 어떤 HTML 요소를 선택해서 스타일을 적용할 것인지 지정합니다.
선언은 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정합니다. 이 선언은 속성과 속성 값으로 이루어져 있는데, 속성은 적용하고자 하는 스타일의 종류를, 속성 값은 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정합니다.