HTML이 구조를 잡는 데 사용된다면, CSS는 웹페이지의 스타일링과 디자인을 하는 데 사용됩니다. HTML 코드에서 CSS가 적용된 화면입니다.
https://codepen.io/tinystone/pen/vPaaGV
HTML 태그 내에 스타일을 삽입한 코드입니다. CSS는 HTML 문서에 있는 요소에 선택적으로 스타일을 적용할 수 있습니다.
매우 간단한 웹페이지라면 이렇게 HTML 코드 내에 스타일이 들어가있어도 문제가 없는데, HTML과 CSS의 역할이 다르고 또 필요한 부분이 한 눈에 들어오지 않기 때문에 가급적이면 별도로 stylesheet를 작성해서 연동하는 것이 좋습니다.
https://codepen.io/tinystone/pen/ywqqVa
CSS만 따로 코드가 적혀 있으니 보기가 더 편하죠?
그럼, CSS에서 사용되는 용어를 알아보겠습니다. CSS는 HTML 요소의 스타일을 정의하는 데 사용되는데요. 이를 위해서는 해당 요소를 선택할 수 있어야 합니다. 선택자, 영어로는 셀렉터는 스타일을 적용하고자 하는 요소를 선택하기 위해 CSS가 제공하는 수단입니다. 선택자에는 여러 종류가 있는데요. 기본적인 종류만 먼저 보겠습니다. 태그 선택자 / 요소 선택자는 가장 간단한 선택자로, HTML 요소의 이름을 직접 지칭함으로써 선택자가 지칭하는 타입의 모든 요소를 선택합니다. 태그선택자만으로는 정교하게 디자인하는 데에 한계가 있습니다. 가령, 모든 p 요소 가운데 특별히 하나의 요소를 선택하고 싶거나 기타 다른 요소 하나에만 디자인 속성을 부여하고 싶다면 어떻게 해야 할까요? 주어진 class 값을 attribute 값으로 보유하고 있는 html 요소를 찾아 선택하는 방법이 있는데요. 이를 클래스 선택자라고 합니다. 선택하려는 class 속성값 앞에 마침표를 하나 추가해서 작성하며 굉장히 보편적으로 자주 사용됩니다. id 선택자는 클래스 선택자와 거의 유사한데, class 속성이 같은 속성값을 여러 개의 HTML 요소가 공유할 수 있는 데에 반해, id 속성값은 하나의 HTML 요소만 사용할 수 있습니다. 어떤 요소가 유일하고 문서 내에서 중요한 역할을 담당한다면 id 속성이 부여될 수도 있습니다. id 선택자는 선택하려는 id 속성값 앞에 #기호를 추가하면 됩니다.
그 외에 여러 선택자를 한꺼번에 선택하는 등 여러 규칙이 있는데, 추후에 더 알아보도록 하겠습니다.
셀렉터로 HTML 요소를 선택하고 나면, 괄호 안에 속성, 프로퍼티와 값을 지정합니다. 프로퍼티는 이미 스펙에 정해져 있는 것만 사용이 가능하고, 마찬가지로 값 또한 해당하는 단위 혹은 키워드만 사용이 가능합니다. 예를 들어 글씨 색깔을 바꾸고 싶다고 하면, font-color 혹은 text-color 같은 프로퍼티는 존재하지 않으며 color라고 명시해주어야 합니다. 해당하는 값은 140개의 표준 색이름 내에서 사용하거나, 색상 코드 (#000000), RGB값 및 투명도 rgba(0,0,0,0), hsl(Hue, Saturation, Lightness) 등으로 표기하는 방법만을 사용해야 합니다. 그 외에 다른 방식은 지원하지 않습니다.
프로퍼티와 값 쌍은 선언이라고 합니다. 선언은 세미콜론으로 구분합니다. 이렇게 작성된 하나의 구문을 룰셋이라고 부릅니다. 룰셋은 해당 HTML 요소를 어떻게 렌더링할 것인지 브라우저에 지시하는 역할을 합니다.
HTML이 구조를, CSS가 스타일링을 담당하게 되면서, 여러 장점이 생겼는데요. 다수의 개발자가 서로 다른 부분을 개발할 수 있고,유지보수하는 것이 쉬워졌습니다. 또한, 검색엔진이 정보를 수집하기에도 쉬워지고 스크린리더 같은 보조기기도 이해하기가 쉽습니다. HTML 코드 안에 스타일링이 함께 들어 있다면 검색엔진이나 스크린리더 같이, 해당 속성을 읽어들이는 기계가 HTML 자체를 파악하기에 쉽지 않을 것입니다. 그 외에도 성능에 긍정적인 영향을 미쳤습니다.
CSS는 1996년에 들어서야 CSS1 상세 스펙이 발표되었을 정도로 발전이 늦은 편인데요. 현재는 다양한 스타일과 디자인을 표현할 수 있고, 또한 레이아웃 방식도 고도화되었습니다. 과거 자바스크립트를 사용해서만 구현이 가능했던 애니메이션도 CSS를 통해 구현이 가능해 졌습니다.
CSS의 어려움을 토로하는 사람들이 자주 사용하는 움직이는 그림인데요. 하나를 건드리면 다른 하나가 영향을 받는 방식이라 초보자들이 굉장히 어려워 하는 부분입니다. CSS는 프로그래밍 언어가 아니라서 논리적이지 않아 어렵다는 말까지도 나오는데요. 절대 그렇지 않습니다. CSS의 원리를 모르고 코딩을 하면 이렇게 되지만, 우리는 기초부터 차근차근 해나갈 테니 너무 걱정하지 마세요!