css 서택자의 가장 기본 3가지.

html을 이용해 홈페이지를 구성하는 방법은 다양합니다. 그만큼 자유롭게 자신의 개성을 표현할 수 있는 좋은 수단이기도 합니다.

하지만, 단순히 html 태그만을 이용해서는 자신이 원하는 디자인을 찾아내기 어렵기도 합니다. 이 부분을 보완할 수 있는 내용인 바로 css를 이용하는 방법입니다.

흔히 html과 css는 떨어뜨려서 생각하지 않습니다. html & css로 붙여서 이야기를 하곤 하는데, 가장 대표적인 이유는 둘 사이는 무조건 협업을 할 수 밖에 없는 구조이기 때문입니다.

구조적인 역할에 대한 이야기는 다음에 자세히 다루도록 하겠습니다. 이번에는 간략하게 둘 사이의 관계를 살펴보고, css 선택자의 가장 기본이 되는 3가지를 살펴보도록 하겠습니다.

왜, html & css라고 부르는 것일까.

웹사이트를 구성하는 것은 크게 3가지로 구분할 수 있습니다. 웹페이지를 구성하는 요소, 웹페이지를 일괄 관리하고 편리하고 빠르게 사용자에게 보여줄 수 있는 프로그램, 마지막으로 웹서버로 구분할 수 있습니다.

여기서 한가지 더 덧붙이자면 DB가 있을 수 있습니다. 웹 프로그램과 DB는 선택사항이므로 서비스와 목적성에 따라 사용될 수도 있고, 필요 없을 수도 있습니다.

가장 중요한 것은 웹페이지를 구성하는 요소와 웹서버 입니다. 이 두가지만 있다면 인터넷이 연결된 곳에서 24시간 자신의 웹사이트를 보여줄 수 있습니다. 즉, 서비스를 시작할 수 있습니다.

우리가 보게되는 웹사이트의 외관을 구성하는 기본이 되는 것이 바로 html과 css입니다.

여기서 html은 웹페이지의 기본 골격을 구성하게 됩니다. 건물로 치면 기본 적인 건축물의 골격과도 같습니다. 여기에 인테리어를 하게 되는데, 이 부분이 바로 css라고 할 수 있습니다.

더불어, 더 멋진 모습을 보여주고자 동적으로 움직이는 것이 흔히 이야기하는 자바스크립트(javascript)입니다.

자바스크립트의 경우, 웹페이지에서 구동하게 되는 프로그래밍 언어라고 할 수 있습니다. 굳이 필요하지 않다면 사용하지 않아도 됩니다.

하지만, html 과 css의 경우 기본이 됩니다. 물론, html 태그만을 이용할 수도 있습니다. 단지, 조금 더 디자인을 살리고자 할 때 css를 사용하게 됩니다.

css의 경우 과거에는 선택일 수 있으나, 지금은 기본이라 할 수 있습니다. 웹사이트의 목적성에 따라 다소 차이를 보일 수 있지만, 개인의 개성, 서비스의 목적성을 잘 드러내기 위해서는 디자인적인 요소를 빼놓을 수 없습니다.

장황하게 이야기 했지만, 정리하자면 이렇습니다. 기본적인 골격으로 html을 사용하게 되며, 외관을 더욱 돋보이게 하기 위해 css를 이용하게 됩니다. 기술의 발달로 layout을 자는데도 활용되곤 합니다.

따라서, html과 css는 떼 놓을 수 없는 존재라 할 수 있습니다.

우리가 사용하는 웹사이트들은 html구조와 style의 css로 이루어져 있습니다. 웹브라우저의 개발자 모드(f12)를 이용해 확인하면 head부분에 style 내용이 담겨있고, body부분에 콘텐츠가 담겨있는 것을 알 수 있습니다.

head에 담겨있는 style의 내용이 body로 보여지는 콘텐츠를 꾸며주게 되는 역할을 하게 됩니다. 여기서 style css의 경우, 3가지로 구분되기도 합니다.

필요에 따라, 개발자의 취향에 따라 사용되는 방법에는 차이를 보일 수 있습니다. 일반적으로 1번을 사용하는 경우가 많습니다.

복잡하고 많은 css를 사용하기 때문에 페이지에 기록하게 되면 복잡하고, 깔끔하지 않은 구조가 될 수 있습니다. 또한, 유지 보수에도 별도의 파일로 관리하는 것이 효율적입니다.

“별도의 공간에 기록한 style 내용이 특정 tag를 어떻게 꾸며줄 수 있을까요.” 이 부분을 해결하는 명령어를 css 선택자라고 부르게 됩니다.

css는 특정 태그 혹은 클래스(지정), 아이디(지정)을 통해서 적용될 수 있습니다. 인라인 css의 경우 기본 태그에 style 속성 값을 지정하는 것이기에 이해하기 어렵지 않습니다.

하지만, 내부 스타일 시트(head에 기록), 외부 스타일 시트(.css 외부 파일)의 경우에는 css가 적용되는 부분을 지정해줘야 합니다. 이렇게 지정되는 것이 앞에서도 언급한 선택자 입니다.

css 선택자는 다양하게 존재합니다. 개발자의 필요에 따라 구분하여 사용하게 됩니다. 보다 복잡하고 다양하며, 상속을 통해 세부적인 요소들을 지정할 수 있습니다.

이렇게 세부적인 요소들을 지정해 우리가 흔히 보게 되는 웹사이트 페이지가 완성되게 됩니다. 물론, 너무 많은 css의 요소들은 페이지의 속도를 늦출 수도 있습니다. 과거에는 말이죠.

현재의 경우 컴퓨터 성능이 발달하여 웬만해서는 속도의 차이를 체감할 수 없을 것입니다. 만약, 웹 서버의 속도가 느리다면 확실히 체감할 수 있습니다.

기본이 되는 css 선택자는 ‘태그’, ‘id’, ‘class’의 3가지가 있습니다. 태그는 html의 기본 골자가 되는 명령어들을 지칭합니다. 대표적으로 <body>, <p>, <div>, <span>등이 있습니다.

이 태그들을 선택해 해당되는 모든 태그에 css를 적용시킬 수 있습니다. 반면, id와 class의 경우 사용자가 선택적으로 지정할 수 있습니다.

다시 말해, 정해져 있는 것이 아니며 상황에 따라 지정해서 활용할 수 있습니다. id와 class의 가장 큰 차이점은 ‘유일성’입니다.

해당되는 웹 페이지에 유일하게 존재해야 한다면 id 속성을 부여하게 됩니다. 반대로 묶음, 그룹으로 활용되는 부분이라면 class라는 속성을 사용하게 됩니다.

왜 이렇게 번거롭게 구분할까요. 이 부분은 직접 개발을 해보시면 느껴질 수 있습니다. 그렇다고 꼭 사용해야 하는지에 대해서는 seo를 근거로 들 수 있습니다. 이 부분에 대해서는 다음에 다루겠습니다.

위에서 언급한 3가지의 기본 선택자를 활용하는 것으로도 우리는 멋진 웹페이지를 만들 수 있습니다. 여기에 애니메이션, before, after, hover등의 효과를 추가하고, javascript를 통해 동적인 웹페이지를 구성할 수 있습니다.

또한, php, python등과 같은 언어를 이용해 데이터를 빠르고 효율적으로 많은 사람들에게 제공하거나 처리할 수 있습니다.