1. CSS의 개념

계단식 스타일 시트Cascading Style Sheets.

웹페이지에 시각적 표현(디자인)을 입히는 언어이다.

실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현을 담당한다.

HTML + CSS로 만들어진 웹 페이지는 웹 브라우저에게 전달되어 코드가 해석된 다음에 화면에 출력된다. CSS의 특성상, 독립적으로 존재할 수는 있으되 HTML과 결합되지 않으면 아무런 역할을 하지 못한다.

• CSS를 통해서 기대되는 효과들

-> 정보(HTML)과 디자인(CSS)를 분리할 수 있다.

-> 정보를 수정하지 않고 디자인만 변경할 수 있다.

-> 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문하도록 유도할 수 있다.

-> HTML에서 디자인 분리함으로서 시각장애인을 위한 프로그램인 스크린리더가 HTML을 해석할 수 있도록 할 수 있다.

2. HTML에서 CSS 사용하기

• inline 방식, 엘리먼트에 스타일을 직접 기술하는 방식.

-> 셀렉트가 필요 없다.

-> CSS 선언이 분명해서 style tag 방식에 비해 엘리먼트에 영향을 주고 있는 CSS를 추적하기가 쉽다.

-> 코드가 많아지고, 의미와 디자인의 분리라는 CSS의 취지와 벗어난다.

• style tag 방식, style 태그에 기술하는 방식.

-> inline 방식 대비 경제적으로 코딩할 수 있다.

-> 의미와 디자인의 분리라는 CSS의 취지에 부합한다.

• 외부 파일 방식, CSS를 별도의 파일로 분리해서 링크하는 방식.

-> 문법적으로는 style tag와 동일

-> 파일의 교체로 디자인을 변경할 수 있다는 점에서 유지보수가 편리하다.

0. 참고자료

생활코딩, CSS란?

생활코딩, CSS의 사용

유노코딩, 입문자를 위한 CSS 기초 강의 #1 CSS란?