<유튜버 - 생활코딩> WEB2 - CSS

1. HTML로 색깔 바꾸기

<font color="색깔"></font> 

이렇게 하면 폰트를 red, blue ,yellow 등으로 바꿀 수 있다.

 

<!--

--> 이렇게 하면 사이의 코드가 무시된다.

 

2. CSS 적용

디자인과 관련된 것은 이 <style></style> 안에 들어있는 것 / HTML은 정보에 전념한다.

 

<style> 
a {
color:색깔;
}
</style>

 

a는 이 웹 페이지에서 주고 싶은 효과를 누구에게 줄 것인가를 선택한다.

a = selector 라고 부른다.

이 선택자에게 지정될 효과를 효과라고도 하고 선언 declaration 이라고 한다. = color:색깔;

color = Property, 속성

red = proverty의 값. 즉, proverty Value

 

CSS를 적용하면서 얻을 수 있는 좋은 효과는 웹페이지를 디자인할 떄 HTML을 이용해서 디자인 하는 것보다 훨씬 더 효율적이다. 왜냐하면 만약에 1번처럼 <font>를 계속 사용한다면 웹페이지 크기가 커질 것이고 대형 사이트들은 많은 이용자들이 있기에 혼란을 지장할 수도 있다. 또한 건드려서 안되는 그런 것들도 폰트가 바꿔 버리는 경우가 있기 때문에 CSS가 유용한 것이다. 한 번의 수정으로 전부 다 바꿀 수 있으니까!

 

style 라는 속성을 HTML으로 직접 사용하는 경우, style 태그가 위치하고 있는 태그에게 효과를 줄 것이기 때문에 a라는 선택자를 사용할 필요가 없다.

ex)  <li><a href="2.html" style="color:red">CSS</a></li>

 

웹페이지 안에 CSS를 삽입하는 2가지 방법

1. style 태그를 쓴다. (css)
2. style 속성을 쓴다. (html)

3. 다른 속성, 효과

text-decoration: none; - 밑줄을 없애고 싶다

text-decoration: underline' -밑줄을 쓰고 싶다

 

; ← 세미 콜론을 집어 넣는 이유는 디스크립션이 시작되고 끝나는 것을 구분하기 위해 존재

고로 효과를 지정한 다음에는 끝에 항상 써야한다. 그러면 한 줄에다가 써도 잘 작동한다.

 

정리

1. 웹 페이지에 css를 삽입하는 방법으로 style 태그와 속성을 쓰면 된다는 것
2. 효과라는 것이 있다는 것.
3. 효과를 하나의 선택자에 대해서 여러 개의 효과를 지정할 수 있는데 그 경우에는 세미콜론으로 구분한다.

2가지의 여정

1. css를 통해서 웹페이지를 디자인하는 어떠한 property가 존재하는가
2. 그 효과를 더 정확하게 선택해서 지정하기 위해서 다양한 선택지를 알아가는 과정을 걷게 된다.

4. 효과, 속성 배우기

h1의 글자 크기나 배열을 어떻게 조정할 수 있을까?

<style></style> 안에 h1{ }을 입력하면 된다. 그러면 </head> 밑에 있는 h1 친구들이 다 적용된다.

 

www.w3schools.com/cssref/pr_text_text-align.ASP

이 사이트에서 property들을 검색할 수 있다. 코드를 입력하다보면 자동완성으로 컴퓨터가 추천해 주는데

p는 property의 약자. 잘 활용하길

EX)  css font size property / css text align(정열하다) property

 

5. 선택자 배우기

만약에 기본 베이스를 검은색, 들어갔다 온 링크를 회색, 현재 있는 페이지를 빨간색으로 하고 중복을 피하려면 어떻게 해야할까?

 

일단 베이스로

a {

color:black;

}

하고 이제 나머지 1.html과 2.css를 회색으로 표현하고 싶다. 그렇다면 같은 group으로 묶어줘야한다.

<class="saw"> 라고 하면 된다.

 

그리고 선택자 a밑에

saw.{

color:gray;

}

하며 될 것 같았지만. 적용이 되지 않았다.

 

왜냐하면 saw의 뜻은 이 웹페이지의 모든 saw라는 이름의 태그를 선택하는 선택자이기 때문이다.

근데 우리가 하고 싶은 것은 class 값이 saw인 태그임으로,

이 때 약속된 특수한 기호 점(.)을 사용할 수 있다.

.saw {

color:gray;

}

라고 적용하면 된다. 이 '.'을 붙이면 웹페이지에 있는 모든 class가 saw인 태그를 가리키는 선택자가 된다.

 

Q. 자 이제 지금 들어와있는 페이지를 빨간색으로 표시하고 싶으면 어떻게 해야할까?

<class="saw active">라고 하면 된다. 현재 활동중인 화면이라는 뜻.

그 후 head위로 올라가서

.active {

color:red;

}

를 쓰면 적용된다.

 

여기서 알 수 있는 것

1. class라는 저 속성의 값은 여러 개의 값이 들어올 수 있다
2. 띄어쓰기로 구분한다
3. 하나의 태그(<class>)에는 여러개의 속성이 들어올 수 있다.
4. 여러 개의 선택자(head 사이)를 통해서 하나의 태그를 공동으로 제어할 수 있다.

Q. 근데 a와 .saw와 .active로 겹치는 코드들이 있는데 css가 빨간색이 되는 이유가 무엇일까?

보다 가까이에 있는 명령이 더 큰 영향력을 갖게 된다. 가장 최근에 명령한 코드를 듣는 것.

BUT, 우선순위가 높은 것을 사용하려면 id선택자를 활용하면 된다. 이 때, 선택자는 #을 활용하면 된다. (class는 . 인 것 처럼)

 

#active{
  color:red;
  }

  <li><a href="2.html"class="saw" id="active">CSS</a></li>

 

결국 id선택자 > 클래스 선택자 > 태그 선택자 순으로 우선순위가 정해져 있다.  

a선택자는 어딜 뒀든간에 가장 약하고, class 선택자를 나열해 놓을 시, 가장 밑에 있는 선택자가 힘이 가장 강하다.

 

Q. 원리를 이해 해야 안까먹는다! WHY??? 왜 저런 우선순위가 만들어졌을까?

#active 이 선택자가 있는데 이 웹페이지에서 id:active를 한 번 썼으면 더 이상 중복해서 쓰면 안된다. 써도 안 될뿐더러 쓰지말라고 한다. 학교 id학번, 주민등록증, 군번 처럼 id의 핵심은 중복되서는 안된다. 유일무이한 값.

대신, id:xxx active만 아니면 xxx에 뭐가 나오든 상관은 없다.

 

Therefore, 포괄적인 것 = a선택자 / 中포괄 中구체 = .class선택자 / 구체적인 것 = #id선택자

css의 개발자들은 구체적인 id선택자의 우선순위를 더 높여주었다. 그렇게해야 전체적인 태그의 디자인을 쭉 해내고 그 중 예외적인 것들의 id를 딱, 딱, 딱 찍어 가면서 예외를 두는 것이 아무래도 디자인하고 코딩하는 데 훨씬 더 효율적이기 때문이다.

 

구글에 css selector를 치면 여러 가지 selector가 있는데 우리는 이제 이것을 해석 할 수 있다! 또한 이 선택자를 사용하면서 우리는 코드의 양을 획기적으로 줄이고, 한 부분만 수정하면 나머지가 바뀌는 똑똑한 코드를 만들어 낼 수 있다!