CSS의 개념

Cascading Style Sheet

• HTML 문서의 디자인적 요소를 분리하여 작성하기 위한 언어
• 상위 요소의 스타일 속성을 하위 요소에 상속하는 기능이 마치 폭포같아 'Cascading' 이라는 명칭이 붙음

CSS를 쓰는 이유

HTML 본연의 목적인 '구조화' 요소와 웹페이지에 표현되는 '디자인' 요소를 분리하여 여러 가지 장점을 취하는 데에 있다.

몇 가지 장점을 예로 들자면...

1. 코드를 보기 쉽다.

   /* css */
   greeting {
     color: green;
     font-family: 'Times New Roman';
     font-size: 10px;
     /*기타 등등 여러 스타일 속성*/
   }

   <!-- html -->
   <p class='greeting'>
     Hello World!
   </p>

         VS

   <!--html 인라인 스타일 속성 지정-->
   <p style='color: green; font-family: 'Times New Roman'; font-size: 10px;'>
     Hello World!
   </p>

   HTML 문서 내 요소가 많을수록, 요소마다 지정해야 할 스타일 속성이 다양할수록, '구조'와 '디자인'이 분리되었을 때 가독성은 비교가 안된다.
   
   

2. 보기에 쉽다는 것은... 유지보수가 편해진다.

   • HTML 요소 하나하나의 스타일을 건드릴 필요 없이, 연결된 CSS의 스타일 속성을 수정하면, 일괄적으로 반영할 수 있다.
   • 디자인적 요소를 CSS가 전담하기 때문에 웹 프로그래머와 웹 디자이너의 협업이 쉬워진다.
   • 같은 구조의 HTML을 모바일, PC 등 다양한 형태에 맞춰 출력이 가능하다
     
     

3. 구조만 남은 HTML 문서는 컴퓨터가 읽기에도 편해진다.
   (검색 엔진 노출, 데이터 크롤링이 용이하다)

CSS의 기본 구조

    Selector {property : value}

Selector(선택자) 지정은 header, footer, p, div, img 등 HTML 태그, .클래스, #아이디 등을 지정할 수 있고, 'p.클래스' 처럼 '후손' 을 지정하여 구체적인 요소를 지정하는 방법도 있다.
나무위키에 선택자를 다루는 방법이 보기 쉽게 정리되어 있다.

property는 지정된 선택자의 스타일 속성. 크기, 글꼴, 색, 위치, 여백, 정렬 방식 등 웹페이지에 표시되는 방식을 value로 지정할 수 있다.