WEB2 - CSS 1 to 5

CSS (Cascading Style Sheets)

---

생활코딩님의 WEB1 - HTML & Internet 강의를 듣고 바로 다음 WEB2 - CSS 강의를 공부한다.

---

CSS의 등장

• Web page를 디자인할 때 두 가지 방법이 있다.
  쉽지만 한계가 있었던 방법, HTML에서 태그를 추가하는 것
  HTML의 태그를 추가하는 것보다 훨씬 어렵지만 근본적인 해결책을 가져다주는 방법, CSS
  (HTML에서 <font>를 추가하는 것이 아닌 본질적으로 꾸며주는 것) 
  Ex) HTML <font>태그 사용
  

  <h1><a href="index.html" title="到百科"><font color="red">WEB网络</font></a></h1>
  <h2>计算机语言-常见语言</h2>
  <ol>
  <li><a href="1.html" title="到HTML意义"><font color="red">HTML超文本标记语言</font></a></li>
  <li><a href="2.html" title="到CSS意义"><font color="red">CSS层叠样式表</font></a></li>
  <li><a href="3.html" title="到JavaScript意义"><font color="red">JavaScript</font></a></li>
  </ol>

  Ex) CSS를 사용
  

  <style>
  	a {
        color:red;
      }
  </style>​

   
• <font>태그에서의 중복된 코드를 단 하나의 코드로 나타낼 수 있다. 중복의 제거
  만약 중복된 태그가 1억개라면 웹페이지의 사이즈는 훨씬 더 클 것이다.
  (규모가 큰 회사일수록 큰 차이가 난다.)
• CSS를 사용하면 Web page를 유지·보수하는 것에 더 효율적으로 할 수 있고 가독성을 높인다. 
• CSS의 도입 이유
  1. HTML이 정보에 전념하기 위해 HTML로부터 디자인을 빼 온 것이 CSS라고 할 수 있다.
  2. CSS를 통해서 디자인 하는 것이 HTML을 통해서 디자인 하는 것보다 훨씬 더 효율적이기 때문.

---

CSS의 기본문법

WEB1 - HTML & Internet에서 만든 WEB 홈페이지에서 2. CSS层叠样式表 페이지에 들어갔을 경우 들어왔는지 표시를 위해 2. CSS层叠样式表에 색과 밑줄로 구분하고 싶을 경우를 가정하여 예를 들었다.

1. <style>태그를 사용
   

     <style>
       a {
         color:black;
         text-decoration: none;
       }
     </style>​​

     <style>
       a {                            ------------ 선택자(Selector)
         color : black;               ------------ 효과, 선언(Declaration)
         text-decoration : none; ------------ 효과, 선언(Declaration)
       }                               ------------ 선택자(Selector) 
     </style>​
   1. 선택자(Seletor)
      이 Web page에서 주고 싶은 효과를 누구에게 줄 것인지를 선택한다.
      여기서는 Web page의 모든 a를 선택한다.
   2. 효과, 선언(Declaration)
      선택자가 지정하는 태그들에 대해서 어떠한 효과를 줄 것인가
   3. 속성(property)
      위의 코드블럭에서는 color, text-decoration에 해당
      
   4. property의 값(property value)
      위의 코드블럭에서는 black, none에 해당 
2. style 속성을 사용
   

   <a href="2.html" title="到CSS意义" style="color:red;text-decoration:underline">CSS层叠样式表</a>

    <a> 태그 안에 color:red만 쓰면 HTML인지 CSS인지 모른다.
   여기서 style이라는 속성을 사용했으면 그 속성의 값을 웹브라우저는 css의 문법에 따라 해석해서 그 css의 문법에 따라 해석된 결과를 style 속성이 위치하고 있는 이 태그에 적용할 것이다.
   
   style="     " ---- HTML의 속성
   이 속성은 그 값으로 반드시 CSS의 효과가 들어온다 라고 되어 있다. 
   
   추가적으로 Declaration은 스타일 태그에 속성으로 직접 사용되었다면 스타일 태그가 사용된 태그에 직접 사용될 것이기 때문에 선택자(Selector)를 사용할 필요가 없다.
   
   또한, 효과를 지정하고 난 다음에는 세미콜론(;)으로 구분한다. (태그에나 속성에나 다 붙여서 구분)

---

이전에는 무엇을 모르는지 모르는게 문제였다.
이제 무엇을 모르는지 아는 상태에 왔다...

 

이후 두가지의 여정이 있다.

하나는 이 CSS를 통해서 Web page를 디자인하는 어떠한 Property가 있는지 알아가는 과정
또 하나는 그 효과를 더 정확하게 선택해서 지정하기 위해 다양한 선택자를 알아가는 과정이다.