[CSS] Style 속성+선택자Selector와 효과Declaration

웹브라우저에 CSS를 적용하는 방법은

 

어디서부터 어디까지가 CSS인가-라는 정보를 전달해주는 <style>태그를 적용하는 방법도 있지만

 

HTML 태그에 직접 style 속성을 적용하는 방법도 있다.

 

현재 웹페이지는 걸려있는 <style> 태그는

 

 

이렇게

링크의 색깔을 꾸미는 color 속성과 그의 검은색으로 표현하는 효과 black,

선으로 텍스트를 꾸미는 text-decoration 속성과 그의 밑줄을 없애는 효과 none

 

두 가지를 적용하고 있다.

 

나는 '현재 cuthbert페이지에 있다'를 표현하기 위해,

이미 style 태그에 걸어둔 효과를 유지하면서도

목차링크를 빨간색으로 바꾸고, 없앴던 밑줄을 다시 나타내고 싶다.

 

그러기 위해서 2번 페이지 <a>태그에 직접 style 속성을 적용시켰다.

 

이렇게, 2번 페이지로 이동하면 빨간색과 밑줄이 나타나고, 다른 페이지로 이동하면 사라진다.

 

 

이러한 방식은 정리하자면,

 

속성의 값이 CSS 문법에 따라 해석된 결과를

style 속성이 위치한 태그에 적용하는 것이다.

 

 

이 쯤 되면 style 태그와 속성의 차이가 뭐가 있는지 궁금해진다.

그러기 전에 style 태그의 관계를 정리해주는 용어를 이해하면, 차이도 이해하기 편해진다.

---

ex)

 

<style>

a{

          color:black;

          text-decoration:none;

  }

</style>

---

a : 효과를 누구에게 줄 것인가 -> 선택자(selector)

color:red;text-decoration:none; : 선택자에게 지정될 효과 -> 선언, 효과(decelaration)

color, text-decoration -> 속성(property)

black, none -> 값(value)

---

 

• style 속성

HTML 태그 안에 적었던 것을 기억하자. HTML의 속성이다.

그리고 그 값으로 반드시 CSS의 효과가 반드시 들어오도록 약속되어 있는 것이다.

이렇게 HTML 태그에 직접 사용할 경우에는

그 스타일 태그가 위치한 태그에게 바로 효과를 줄 것이기 때문에 선택자를 사용할 필요가 없다.

 

 

• style 태그

효과만 있어서는 누구에게 지정할지 설명할 수 없으므로 태그명 + {}라는 태그가 추가적으로 필요하다.

 

 

 

 

 

+

추가로 ;(세미콜론)이 효과마다 빠짐없이 나오는데, 

이렇게 하지 않으면 효과의 구분을 하기 힘들기 때문이다.

그러니 꼭 세미콜론을 잊지 말고 붙여줘야 한다.

 

 

출처 - <생활코딩 : 혁명적 변화>