이진욱의코딩

css의 선택자 본문

CSS

css의 선택자

Crucifi 2019. 7. 13. 07:41

인간의 언어는 주어와 서술어로 이루어져 있습니다. 이 두가지는 언어를 구성하는 양대축입니다. 선택자는 인간의 언어로 치면 주어에 해당하는 매우 중요한 요소입니다. 주어를 자유롭게 사용하지 않으면 정상적인 언어 생활을 할 수 없는 것처럼 선택자를 자유롭게 사용할 수 없으면 CSS를 정복할 수 없습니다. 

 

1.선택자와 선언

 

어떤 태그를 디자인하기 위해서는 디자인하려는 태그를 

  1. 선택하고 (선택자)
  2. 선택한 대상에게 효과를 줘야 합니다. (선언)

이번 시간에는 CSS에서 가장 기본적인 문법이라고 할 수 있는 이 선택자(selector)와 선언(declaration)에 대해서 알아봅시다. 가장 중요한 내용이라고 할 수 있습니다. 

 

<!DOCTYPE html>
<html>
  <head>
    <style>
      li{
        color:red;
        text-decoration:underline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

코드를 보도록 하자.

 

저번 html포스팅에서 봤던 부모와자식태그인 <ul>태그안에 <li>태그를 적은 뒤 목록을 먼저 적습니다.

그 뒤 <style>태그를 <head>바로 밑에 선언을 합니다. 그리고 자식태그인 <li>태그안에 있는 3가지의 목록의 변화를 주도록 하는데 색상은 red, text-decoration에 underline을 주도록 합니다. 말그대로 데코레이션이기 때문에 목록에서 선언했던 html,css,javascript의 목록에 변화(?)를 준다고 생각하면 됩니다.

 

결과를 한 번 보도록 하죠.

 

강렬한 red.

 

 이런식으로 목록에 색상을 입히고 밑줄까지 쳐진 모습을 볼 수 있습니다.

 

오늘 배웠던 내용을 다시 한 번 정리를 하면

 

구글에서 css selector검색

 

이렇습니다. 코딩을 하다가 전체적인 내용이해가 필요하면 구글링을 해서 한번에 보기쉽게 이해하는것도

아주 좋은 방법입니다.

'CSS' 카테고리의 다른 글

css로 가로 세로 가운데 정렬하기  (0) 2019.07.14
부모 자식 선택자  (0) 2019.07.13
선택자의 종류  (0) 2019.07.13
HTML과 CSS가 만나는 법  (0) 2019.07.13
css란 무엇인가?  (0) 2019.07.13
'CSS' Related Articles more