웹사이트를 구성하는 것은 html과 css라고 할 수 있습니다. 이 중에서도 기본이 되는 것은 html이며, html로 만들어진 뼈대를 꾸며주는 요소가 바로 css입니다.
html은 흔히 많이들 들어봤으리라 생각됩니다. <head></head>와 <body></body>로 구분됩니다. 이렇게 구분된 영역은 하나의 페이지를 형성하는데 중요한 역할을 하게 됩니다.
<head>의 경우 기본적으로 웹 서버에서 발생되는 신호에 대응하게 됩니다. 주인이 누구인지, 방문을 허락하는지, 또는 페이지 영역에서 보이는 부분들에 필요한 요소들을 담고 있습니다.
<body>의 경우에는 본격적으로 사용자에게 다가가게 됩니다. 다시 말해 보이는 부분은 모두 body 태그의 영역이라고 생각하면 쉽게 접근할 수 있습니다. 우리가 사용하는 웹페이지의 요소는 바로 이 body 영역이기도 합니다.
이렇게 구분되어 있는 두 영역을 합쳐 웹사이트 하나의 페이지가 형성됩니다. 이런 페이지들이 모두 모이게 되면, 하나의 웹사이트, 또는 홈 사이트를 구성하게 됩니다.
하지만, 여기까지는 단순하게 뼈대에 불과하게 됩니다. 우리에게 필요한 것은 뼈대에 덧 씌워줄 수 있는 디자인이기도 합니다. 컴퓨터가 느렸던 과거에는 디자인 요소를 적게 쓸 수밖에 없었습니다.
지금은 기본적으로 컴퓨터의 성능이 좋아졌기 때문에 보다 다양하고 역동적인 모습의 웹사이트를 만날 수 있습니다. 더불어, 모바일 사용에 최적화될 수 있도록 직관적인 조작도 덧붙여집니다. 이런 역동적인 모습을 보이기 위해서는 css는 필수적인 요소일 수밖에 없습니다.
css는 태그, 클래스, 아이디로 크게 구분하여 해당되는 요소들을 지정하게 됩니다. 이렇게 지정하는 것을 하나의 선택 자라고 하게 되는 것이죠. 간단하게 이야기하면, 페이지의 뼈대가 되는 태그를 지정한다는 의미입니다.
이것이 어떤 의미를 지니고 있을까요. 앞에서도 언급했듯 페이지를 구성하고 있는 것은 결국 html 태그라고 할 수 있습니다. 각 태그는 고유의 효과를 지니고 있으며, 이런 효과를 통해 우리가 원하는 사이트 페이지를 구성할 수 있습니다.
이런 구성 요소는 단순하게 이야기하면 layout의 영역에서 크게 벗어나지 못합니다. 줄을 긋고, 글자를 넣고, 영역을 지정하는 것과 같습니다. 여기에 색을 입히고, 애니메이션을 넣는 효과는 결국 css의 역할이 됩니다.
그렇다면, css가 필요한 부분에 정확하게 그 효과가 작용해야 할 것입니다. 결국, 세분화되어 있는 태그들을 정확하게 지정할 수 있는 방법이 바로 css의 선택 자라고 할 수 있습니다. 이렇게 이해해둔다면 아무리 복잡한 코드들을 보게 되어도 어느 정도 이해할 수 있을 것입니다.
코딩은 결국 모든 것을 스스로 하기에는 어려움이 큽니다. 따라서, 예시로 제시되는 코드 혹은 타인의 코드를 학습하는 과정에서 자신의 실력이 향상될 수 있습니다. 타인의 코드를 그대로 베낀다는 것이 아닙니다.
참고하여 자신이 원하는 효과를 보다 효율적이게 적용한다는 것을 의미합니다.