CSS:: 스타일 태그 & 스타일 속성 & 선택자 rough note

HTML은 정보를 표현하기 위해서 고안된 언어. 하지만 사람들은 정보만으로는 못산다고 불평을 쏟아내기 시작함. html 내에서 디자인을 위한 tag를 만들어 해결해보려 했으나 여러 문제점에 봉착(대표적으로 무분별하게 추가된 디자인 기능은 정보로서의 웹이라는 가치를 오히려 퇴보시켜버림), 근본적인 해결책인 CSS라는 새로운 언어를 만들어냄.

​

​

[1] <style> </style>; 스타일 태그란?

<style>

 

</style>

이 코드 적으면 그 안의 코드는 CSS

​

​

[2] <style> </style>; 스타일 태그 사용법

<style>

a {

color: navy;

}

</style>

이건 폰트 색상 정해주는 CSS(저 a{ }는 이 html 페이지의 모든 링크를 다 부르는 코드. 얘는 이 웹 페이지에서 우리가 지금 주고 싶은 효과를 '누구에게 줄 것인가'를 '선택'한다는 점에서 'selector, 선택자'라고 부름. color: navy;는 선택자에게 지정될 '효과, declaration'​이라고 부름. )

☞개발을 잘하는 방법 중 하나는 바로 '중복의 제거'임.

<li><a href="PUL_Videos.html"><font color="navy">Videos</font></a></li>

<li><a href="PUL_Articles.html"><font color="navy">Acticles</font></a></li>

<li><a href="PUL_Recipes.html"><font color="navy">Recipes</font></a></li>

이게

<style>

a {

color: navy;

}

</style>

이렇게 jonna簡単해져버림...

​

​

[3] style="color:orange"; 스타일 속성 사용법​

근데 여기서.. 예컨대, 내가 지금 눌러서 들어간 탭이 Articles면 내가 어느 탭에 있는지 정확히 보여주도록 List에서 얘가 색이 다르게 보이면 좋겠어. 이건 어떻게 할까?

↳<li><a href="PUL_Articles.html" style="color:orange">Acticles</font></a></li>

이렇게 style=" "태그라는 html의 속성을 주면, 웹브라우저는 CSS 문법에 따라 해석하여 그 결과를 style 속성이 위치한 태그(a href="PUL_Articles.html")에 적용해(그러므로 따로 selector 지정이 필요 없음)

​

​

[4] text-decoration: none; 태그?​

<style>

a {

color: navy;

text-decoration: none;

}

</style>

☞현재 웹페이지 내의 모든 링크의 밑줄을 없애버림(깔-끔). 근데 선택된 탭 리스트 만큼은 밑줄 그이게?

↳<li><a href="PUL_Articles.html" style="color:orange;text-decoration:underline">Acticles</font></a></li>

​

***여기까지 하면 ☟이렇게 됨~

​

​

[5] CSS 선택자의 기본​

✔사용자가 이미 방문한 두 페이지의 리스트값은 핑크색으로 색을 달리 하고싶다? 이 때..

<li><a href="PUL_Videos.html" style="color:pink">Acticles</font></a></li>

<li><a href="PUL_Articles.html" style="color:pink">Acticles</font></a></li>

이렇게 적으면 중복(!)이 등장함. 이러면 안됑~!!~!~

그래서 여기서 class를 도입함(자바야..?) class는 '그룹핑'하는 것이쥬?

①<li><a href="PUL_Videos.html" class="saw">Videos</font></a></li>

<li><a href="PUL_Articles.html" class="saw">Acticles</font></a></li>

② .saw {

color:pink;

}

✔사용자가 현재 머무른 페이지의 리스트값은 오렌지색으로 하고싶다?

①<li><a href="PUL_Articles.html" class="saw active">Acticles</font></a></li>

② .active {

color:orange;

}

☞결론: 클래스의 값은 여러개가 들어올 수 있고, 띄어쓰기로 구분한다!

☞하나의 태그에는 여러가지 속성이 들어올 수 있고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다!

​

☞선택자는 나중에 작성한 것일수록 힘이 쎔!! but 역학 관계가 존재; 태그 선택자<클래스 선택자<id 선택자

↪Why? ⭐ID 값의 핵심은 '중복 제외'임. 즉, #active{ }와 id="active" 선택자는 해당 문서에서 유일무이하게 딱.한.번. 나오는 매우 구체적인 값!!! 그러므로 걍 포괄적으로 '해당 페이지의 링크 전체'를 뜻하는 태그 선택자 a보다 힘이 센 것.

①#active {

color:orange;

}

.saw {

color:pink;

}

.....

<li><a href="PUL_Articles.html" class="saw" id="active">Acticles</font></a></li>

이렇게 하면 id선택자는 class 선택자(.saw)보다 먼저 적혔음에도 힘이 더 셈

②class 선택자 vs tag 선택자가 붙으면? class 선택자가 이김.

.saw {

color:pink;

}

a {

color: black;

text-decoration: none;

}

이렇게 쓰더라도 이미 saw한 class들은 color가 pink로 유지됨!!