7일차 - 속성과 선택자

CSS에서 어떠한 효과를 의미하는 용어를 프로퍼티(property)라고 한다.

제목이 1)좀 더 컸으면 좋겠다, 2)가운데로 정렬하고 싶다 그런 경우에는 html에서 어떤 태그인지 찾아야겠다는 생각이 들 것이다.

... 생략 ...
<style>
	a{
    	color: black;
        text-decoration: none;
    }
    h1{
    }
    </style>
... 생략 ...

1) 이미 제목으로 사이즈가 제일 큰 태그인 h1태그를 바꿀 수 있을까?

 

그럴때 구글에 'css text size property'를 검색한 후, 아래 링크에 접속해서 확인해보자

https://www.w3schools.com/cssref/pr_font_font-size.php

CSS font-size property

거기서 예제들을 볼 수 있는데, font-size를 통해 픽셀, h1 폰트사이즈의 퍼센테이지, property value 중 하나를 지정할 수 있다.

property value란 두번째 예시에서 font-size: large; 에서 large를 가르키는데, large외에 종류는 아래에서 확인할 수 있다.

 

 

2) 텍스트를 가운데로 정렬하고 싶을때는, 'css text center property'를 검색해보자

https://www.w3schools.com/cssref/pr_text_text-align.php

CSS text-align property

여기서도 property value가 존재한다.

 

요즘 코딩 툴들은 프로퍼티의 값을 추천해준다.

 

property value를 몰라도, 찾아보는 습관을 키워가자.

 

이 책은 생선을 잡아주는게 아닌 생선 잡는법을 알려주는 책인것을 다시 느꼈다.

 

 

 

CSS를 지배하는 두 가지 중요한 토대가 있다. 첫 번째는 효과이고 두번째는 선택자이다.

이전까지는 효과에 대해 진행했다.

<a>태그를 통해 링크를 사용자가 방문하면 색깔이 변경되는것을 모두가 경험을 통해 알것이다.

모든 링크는 기본적으로 검은색이며, 사용자가 방문했던 각 글들의 링크 색은 회색, 현재 페이지의 링크를 빨간색으로 변경해보자.

책에서 나와있는 코드를 보자면

<ol>
	<li><a href="1.html" style="color:gray;">HTML</a></li>
   	<li><a href="2.html" style="color:gray;">CSS</a></li>
    	<li><a href="3.html"">JavaScript</a></li>
</ol>

여기서 중복이 style에서 발생하는것을 확인할 수 있다.

이런 경우에 class라는 HTML속성을 지정한다.

saw라는 클래스를 지정했다면

<ol>
	<li><a href="1.html" class="saw">HTML</a></li>
   	<li><a href="2.html" class="saw">CSS</a></li>
    	<li><a href="3.html"">JavaScript</a></li>
</ol>

saw라는 클래스를 선언해줘야한다.

...생략 ...
<style>
	... 생략 ...
    .saw{
    	color: gray;
    }
    ... 생략 ...
</style>

 

웹 페이지에서 class가 "saw"인 모든 태그를 가리키는 선택자가 된다.

class를 사용할때는 꼭 '.'을 붙이자.

 

여기서 클래스라는 단어를 정리해보자

'grouping하다', '하나로 묶는다'라는 의미이다.

 

현재 머물고 있는 페이지의 링크를 빨간색으로 표시하고 싶다면

마찬가지로 class를 추가하고 변경해보자.

...생략 ...
<style>
	... 생략 ...
    .saw{
    	color: gray;
    }
    .active{
    	color:red;
    }
    ... 생략 ...
</style>

<ol>
	<li><a href="1.html" class="saw">HTML</a></li>
   	<li><a href="2.html" class="saw active">CSS</a></li>
    	<li><a href="3.html"">JavaScript</a></li>
</ol>

class라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분 한다.

여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있다.

위 방법은 좋은 방법은 아니다. 왜냐하면 <a> 태그는 두 개의 클래스에 영향을 받고 있고 순서가 중요하기 때문이다.

.active가 .saw보다 나중에 등장했기 때문에 순서를 아래와 같이 바꿔준다.

...생략 ...
<style>
	... 생략 ...
    .active{
    	color:red;
    }
    .saw{
    	color: gray;
    }
    ... 생략 ...
</style>

태그에 좀 더 가까이 있는 명령이 더 큰 영향력을 갖는다.

그러므로 좀 더 우선순위가 높은 것인 ID선택자를 사용하자.

ID 선택자는 class선택자의 기호인 .과 다르게 #을 사용한다.

<ol>
	<li><a href="1.html" class="saw">HTML</a></li>
   	<li><a href="2.html" class="saw" id="active">CSS</a></li>
    	<li><a href="3.html"">JavaScript</a></li>
</ol>

...생략 ...
<style>
	... 생략 ...
    #active{
    	color:red;
    }
    .saw{
    	color: gray;
    }
    ... 생략 ...
</style>

우선순위는

ID선택자 > class 선택자 > 태그 선택자 이다.

만약에 같은 형태의 선택자라면 맨 마지막에 등장하는 선택자가 우선순위가 높다.

 

ID 값은 단 한 번만 등장해야하고, 중복돼서는 안된다.