웹사이트 혹은 웹페이지는 html 태그를 기본 뼈대로 구성합니다. 대표적으로 레이아웃과 콘텐츠 영역이 있습니다. 여기에 버튼 혹은 구분선과 같은 표시를 넣게 됩니다. 기본적으로 태그를 이용해 뚜렷한 표시를 남길 수 있습니다. 단지, 색상 혹은 모양이 마음에 들지 않을 수 있는데요. 이런 경우, CSS를 이용해 마음에 드는 디자인으로 꾸며줄 수 있습니다.
CSS 요소가 꼭 필요한 것은 아닙니다. 단순히, 깔끔한 정적인 페이지를 보여주는 경우라면 html만 이용해도 충분할 수 있습니다. 하지만, 운영하는 웹사이트의 분위기, 방문자의 취향등을 고려한 디자인 요소는 방문자에게 긍정적인 경험을 안겨줄 수 있습니다. 이런 긍정적인 요소는 방문자의 체류시간 및 재방문률을 높이는데 도움이 되기도 합니다.
CSS 기본 선택자 3가지 정리
- CSS는 html 태그를 기본으로 사용하게 됩니다. 다시 말해, 태그를 지정하고, 해당 태그에 사용자가 지정한 디자인 요소를 추가하게 되는 것이죠. 예를 들어, <p>태그에 폰트 크기, 폰트 굵기, 그림자 등의 디자인 요소를 넣기 위해서는 p태그를 지정해야 합니다. 이렇게 지정하는 명령어를 CSS에서 선택자라 부르게 됩니다. '태그, 클랙스, 아이디'로 3가지의 선택자를 활용할 수 있습니다.
html의 기본적인 내용을 알고 있다면 태그, 클래스, 아이디라는 단어를 들었을 때 떠오르는 것이 있을 수 있습니다. 하지만, 단순히 티스토리와 같은 블로그 플랫폼을 꾸미기 위해 활용한다면 조금은 헤깔리는 부분이 존재할 수 있습니다. 아래에서 알아보는 css 선택자를 숙지한다면, 앞으로 css를 적용하는데 많은 도움이 될 수 있을 것입니다.
<body>
<div>
<p>단순히 태그를 이용하는 방법</p>
</div>
<div id = 'test_id'>
<p>아이디를 이용하는 방법</p>
</div>
<div class = 'test_class'>
<p>클래스를 이용하는 방법</p>
</div>
</body>위 코드 블럭은 임의로 예시를 만들어본 내용입니다. 기본적으로 텍스트를 입력할 때, p태그를 이용하게 됩니다. div태그는 하나의 영역을 지정하는 태그입니다. 여기에 속성을 지정할 수 있습니다. id와 class가 있습니다. 일반적으로 id는 웹페이지에서 고유한 값으로 이용하게 됩니다. class의 경우, 공통된 속성끼리 묶을 때 활용될 수 있습니다. 여기서는 CSS선택자에 대한 내용이 핵심이기 때문에 이정도만 알아보고 넘어가도록 합니다.
1. CSS선택자 - 태그
html에서 어떤 효과를 나타내기 위해 넣어주는 명령어를 태그라고 부르게 됩니다. 위의 예시에서는 <body>, <div>, <p>태그가 사용된 것을 알 수 있습니다. 각 태그는 각각의 효과를 부여하게 됩니다. CSS에서 태그를 지정하여 나태는 방법은 아래와 같습니다.
p{color:gray;}위 예시는 p태그의 폰트 색상을 회색(gray)로 지정한다는 것을 나타냅니다. 해당 방법은 스타일 시트로 적용되는 방법입니다.
2. CSS선택자 - id
html 문서 중에서 고유한 내용에 id값을 부여하게 됩니다. 위에서는 <div id = 'test_id'>태그로 묶여 있는 내용이 그것입니다. id 값을 지정해 CSS를 적용하는 방법은 아래와 같습니다.
#test_id{color:gray;}1번에서 알아본 태그를 지정하는 방법에서 차이는 '#'을 붙여주는 것입니다. 웹브라우저는 #이 붙어있는 내용을 인식한 후, 해당 id 값을 가지고 있는 태그에 지정된 효과를 적용하게 됩니다.
3.CSS선택자 - class
마지막으로 알아볼 내용은 특정 class 값을 가지고 있는 태그에 css효과를 적용시키는 방법입니다. 우선 적용한 방법을 먼저 살펴보도록 하겠습니다.
.test_class{color:gray;}위 예시는 test_class라는 class값을 가지고 있는 태그에 적용되는 효과입니다. class의 경우, 같은 값을 가지고 있는 태그가 다수 존재할 수 있습니다. 해당되는 모든 태그에 css 요소가 적용되게 됩니다.
마치며.
원하는 웹사이트에 css를 적용하는 가장 기본적인 방법이라 할 수 있습니다. 특정 태그를 지정한 선택자를 잘 활용하면 원하는 css효과를 적절하게 적용하여 나타낼 수 있습니다. 물론, css 효과의 명령어를 확실하게 알아둔다면 더 빠르게 원하는 디자인을 적용할 수도 있습니다. 하지만, 모든 효과를 기억한다는 것은 쉽지 않은 일이기도 합니다. 이런 경우, 원하는 css 효과를 검색을 통해 찾아 적용하면 되는데요. 이 때, 선택자를 알아두면 많은 도움이 될 수 있습니다.
