CSS 셀렉터(선택자)

CSS 셀렉터(선택자)

태그명을 선택자로 사용

태그명으로 선택자를 사용하는 방법에 대해서 알아보겠습니다.
이것은 매우 간단합니다 태그명을 적고 괄호를 열고 닫고 하면 됩니다. 다음과 같이요.
예를 들어 p태그를 선택한다고 하면..
p{CSS속성:값}

태그를 선택자로 사용한다는 것은 해당 태그로 감싸진 부분은 모두 적용이 된다는 것을 의미해요. 다음과 같이 p태그를 여러번 사용했을 경우 모든 태그에 같은 CSS속성이 적용됩니다.

p태그의 텍스트 칼라를 빨강으로 지정해 보도록 하겠습니다. 이부분에서 우리가 배울것은 동일 태그에 대한 스타일을 적용시키는 것입니다.
태그에 클래스 속성을 지정하여 선택자 사용

위의 소스와 똑같은데 hello korea만 빨강으로 표현되게 해봅시다.

즉, 같은 태그라도 그 중에 특정 태그만 스타일을 적용시키는 방식인데요 그렇게 할려면 그 특정태그에 별도의 이름을 부여 해야 합니다.

class="이름" 이라고 적용할 태그 안에 작성합니다. 앞으로 이것은 굉장히 많이 사용 합니다. 그리고 어렵지도 않습니다.
<p class="red">hello korea</p>

위처럼 시작하는 p태그 안에 클래스를 지정하고 이름을 지정 해주면 끝입니다. 위처럼 클래스명을 red로 지정 하였습니다.

그럼 클래스 선언을 했을경우 스타일 시트에는 다음과 같이 선언 하면 됩니다.
.클래스명{css값}

.red{color:red}

즉 점을 찍고 클래스명 그후 {스타일 시트 요소}

아래의 소스를 작성하여 테스트 해보도록 합시다. 클래스의 특징은 하나의 이름을 여러번 사용가능 하다는 점입니다

 

 

 

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)