5/5 생활코딩 < CSS 시작 >

오늘의 진도:

 WEB2 - CSS

  커버 페이지~CSS 선택자를 스스로 알아내는 방법

 

Atom에서 특정 부분 코드를 무시하게 하기:

 괄호!-- (무시할 부분) --괄호

 

CSS는 html과 완전히 다른 언어이다.

따라서 웹브라우저에게 그것이 CSS라는 사실을 알려줘야 한다.

= head 안에 style 태그 안에 담는다.

 

모든 a에 대해서: a 하나만 쓰면 된다.

대괄호 열고

폰트색 바꾸기: color:red;

 

< 태그가 아닌 속성을 사용하는 방법 >

ex) 생활코딩 WEB1 웹사이트 中

현재 2. 태그라는 페이지에 있다는 것을 표시하기 위해서

2. 태그를 빨간색으로 하고 싶다.

 

-> 해당 a 링크의 주소 옆에 style="color: red"를 추가해준다.

a href="02.html" style="color:red"

 

 

여기서 style=""은 (CSS가 아니라) html의 속성(property)이다.

 ※ red는 property value

그리고 style이라는 속성은

그 값으로 반드시 CSS의 효과가 들어온다.

 

cf) head 안의 style 태그는

해당 효과(declaration)가 본문 중 어디에 적용될지 지정해주는

선택자(Selector)가 필요하다.

ex) a {}

 

 

밑줄을 없애고 싶다면

{} 안에 text-decoration:  none;을 추가해준다.

 

※ 왜 끝에 ;를 추가하는가?

줄바꿈이 없다고 생각하면 어디서 하나의 효과가 끝나는지 인식할 수 없으므로

하나의 효과가 끝난 후에는 항상 세미콜론을 적어준다.

 

※ "color:red" text-decoration:underline 이 아니고

 "color:red;text-decoration:underline"이다.

 

* index.html의 "생활코딩 WEB1" 꾸미기

 

→ 선택자: h1

font-size: 45px;
text-align: center;

 

* 03.html에서 

1. 들어가기, 2. 태그, 3. 속성은 '이미 보았다'는 의미에서 회색으로 바꾸고,

3. 속성은 '현재 페이지'라는 뜻에서 빨간색으로 바꾸기

 

→ (1) 1, 2, 3에 class라는 속성을 주고,

그 속성의 값을 saw로 지정한다.

a href="01.html" class="saw"

a href="02.html" class="saw"

a href="03.html" class="saw"

※ 여기서 class와 saw는 모두 (CSS가 아니라) html이다.

 

 (2) 선택자: .saw

※ saw는 태그가 아니라 class이므로 앞에 점을 붙여준다.

color:gray;

 

 (3) 3의 class 속성에 active를 추가한다.

a href="03.html" class="saw active"

 

 (4) 선택자: .active

color:red

 

∵ class라는 속성의 값은 여러개가 들어올 수 있고

 띄어쓰기로 구분한다.

  하나의 태그에는 여러 개의 속성이 들어올 수 있고

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

 

but 이것은 좋은 방법이 아니다.

∵ 3. 속성이라는 a 태그는 두 개의 class(color:gray, color:red)의 영향을 받고 있다.

 그런데 왜 빨간색이 된 걸까?

 순서 때문이다. head의 style에서 active가 saw보다 나중에 등장했기 때문

 만약 둘의 순서를 바꾸게 되면 회색이 된다.

 즉, 더 가까이에 있는 명령이 더 큰 영향력을 갖게 된다.

 

∴ 좀 더 우선순위가 높은 것(id 선택자)을 사용할 필요가 있다.

 이것은 04.html에 적용해보겠다.

a href="01.html" class="saw"

a href="02.html" class="saw"

a href="03.html" class="saw"

a href="03.html" class="saw" id="active"

 

 .saw{
   color:gray;
 }
 #ative{
   color:red
 }

로 하면 빨간색이 된다.

 

즉, id 선택자와 class 선택자가 붙으면 id 선택자가 이긴다.

그리고 태그선택자 (a)와 class 선택자가 붙으면 class 선택자가 이긴다.

tag < class < id 선택자 순으로 강한 것이다. (이것은 입력한 순서와 상관 없다.)

같은 선택자라면 마지막에 등장한 것이 우선순위가 높다.

 

∵ 특정 id값(ex) active)을 가진 태그는 하나여야 한다.