왜 CSS를 사용하나?

개요

이 강좌에서 CSS를 사용해야 하는 이유와 그리고 문서를 스타일링하기 위해 왜 시각적인 표현을 하는 HTML 보다 CSS를 사용하는 것이 더 좋은가를 알아본다.

정보: 왜 CSS를 사용하나?

CSS는 문서의 정보 내용을 이것을 표시하는 방법에 대한 세부사항과 분리하여 관리할 수 있게 한다. 문서를 표시하는 방법에 대한 세부사항은 style이하 한다. 스타일을 내용과 분리하면, 다음과 같은 유리한 점이 있다:

  • 중복을 피할 수 있다
  • 유지 보수가 쉽다
  • 같은 내용을 다른 목적을 위해 다른 스타일을 적용한다

당신의 웹 페이지는 비슷한 모양을 가진 수 천페이지를 가지고 있을 수 있다. CSS를 사용하여, 모든 페이지를 공유하는 공통 파일에 스타일 정보를 저장한다. 사용자가 한 웹 페이지를 표시할 때, 사용자의 브라우저는 페이지 내용과 함께 스타일 정보를 로드한다. 사용자가 한 웹 페이지를 인쇄할 때, 프린트된 페이지를 읽기 쉽게 하기 위해 다른 스타일 정보를 제공한다.

일반적으로 HTML을 사용하여, 문서의 스타일이 아닌 정보 내용을 설명하기 위해 마크업 언어를 사용한다. 물론 이 규칙에 예외가 있다 – HTML 같은 마크업 언어도 스타일을 지정하는 방법이 있다. 예를 들어, HTML에서 텍스트를 굵게 표시하기 위해 <b> 태그를 사용하고, <body> 태그 안에 페이지의 배경색을 지정할 수 있다. CSS를 사용할 때, 문서의 모든 스타일 정보가 한 곳에 있도록 마크업 언어의 이런 기능을 사용하지 말자.

Action: 스타일 시트 만들기

  1. 이전과 같이 같은 디렉토리에 다른 텍스트 파일을 만든다. 이 파일이 당신의 스타일 시트가 될 것이다. style1.css

  2. 라고 명명한다.

  3. CSS 파일에, 이 한 줄을 복사해서 붙여 넣고, 이 파일을 저장한다:

문서를 스타일 시트에 링크하기

  1. 문서를 스타일 시트에 링크하기 위해, HTML 파일을 편집한다. 여기에 강조된 행을 추가한다:

  2. 파일을 저장하고 브라우저를 새로 고침으로 다시 표시한다. 스타일 시트가 처음 문자를 아래와 같이 빨강으로 표시한다:

    Cascading Style Sheets

다음 다룰 내용은?

지금 샘플 문서에 별도의 스타일 시트를 연결하였다. 이제 브라우저가 문서를 표시할 때 스타일 시트를 어떻게 결합하는 가를 배울 준비가 되었다.

참고 사항

도전

빵강 색 뿐만 아니라, CSS는 다른 색도 사용할 수 있다. 참조를 보지 않고, 스타일 시트에서 작동하는 색을 다섯 개 더 찾아 보자.

답글 남기기