CSS Intro

CSS란?

• CSS는 Cascading Style Sheets의 약자입니다.
• CSS는 HTML 요소를 화면 또는 기타 미디어에 표시하는 방법을 설명합니다.
• CSS는 많은 작업을 절약합니다. 여러 웹 페이지의 레이아웃을 한 번에 제어할 수 있습니다.
• 외부 스타일시트는 CSS 파일에 저장됩니다.

CSS를 사용하는 이유

CSS는 웹 페이지의 스타일(디바이스나 화면 사이즈에 따른 표시의 설계, 레이아웃등)을 정의하기 위해서 사용됩니다.

예제 1

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS에 의한 큰 문제 해결

HTML은 웹 페이지 형식을 지정하기 위한 태그를 포함하도록 의도된 것이 아닙니다.

HTML은 다음과 같은 웹 페이지의 내용을 설명하기 위해 작성되었습니다.

<h1> 제목 </h1>

<p> 단락 </p>

HTML 3.2 사양에 <font>와 같은 태그와 색상 속성이 추가되었을 때 웹 개발자들에게는 악몽이 시작되었습니다. 페이지마다 글꼴과 색상 정보가 추가되는 대형 웹사이트 개발은 길고 비용이 많이 드는 과정이 되었습니다.

이 문제를 해결하기 위해 World Wide Web Consortium(W3C)은 CSS를 만들었습니다.

CSS가 HTML 페이지에서 스타일 포맷을 삭제했습니다!

CSS로 작업 대폭 절감!

스타일 정의는 일반적으로 외부 .css 파일에 저장됩니다.

외부 스타일시트 파일을 사용하면 하나의 파일만 변경해도 웹사이트 전체의 모양을 바꿀 수 있습니다!