왜 CSS를 사용하나?

공헌자 숫자: 2명

중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/13)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

이번CSS 시작하기 두번째 장에서는 왜 Document는 CSS를 쓰는지에 대한 안내와 설명을 포함한다. 먼저CSS를 샘플 document의 stylesheet에 추가 해 보자.

정보: 왜 CSS를 사용하나?

CSS는 Document의 정보 내용과 어떻게 보여 줄것인지에 대한 것을 분리하여 별도로 유지관리 할 수 있도록 도와 준다. 어떻게 보여질 것인지에 대한 것을 "스타일(Style)"라고 하며 이것은 Document의 내용 정보와는 별도로 관리 할 수 있다.

  • 중복 방지
  • 유지 보수가 편리
  • 같은 내용에 대해 다른 용도로 보이기 위한 다른 스타일 적용
예제

웹페이지를 보면 수천건의 페이지들이 비슷하게 보이는 경우가 있다. CSS를 이용하면 스타일정보를 파일로 저장 해서 다른 모든 페이지와 공유할수 있다.

웹페이지를 표시할때, 브라우저는 그 페이지의 정보 내용과 함께 스타일정보도 같이 읽어 들인다.

웹페이지를 인쇄할때는 프린트 페이지가 읽기 쉽도록 다른 스타일정보를 제공한다.

HTML에서 일반적으로, Style정보가 아니라 마크업 언어를 통해 내용정보를 꾸민다. Style을 명시하려면 내용 정보 자체에 하지말고 CSS로 하라.(이 안내서 후반부에서는 이 사항에 대한 예외사항을 확인 할 수 있을 것이다.)

좀더 자세히

HTML과 같은 마크업 언어에서도 style을 나타낼 수 있는 몇가지 방법을 제공한다.

예를 들면, HTML에서 <b> 태그를 사용하여 굵게 할수 있으며, <body> 태그로 배경 설정 할 수 있다.

CSS 사용시에는, 이와 같은 마크업 언어의 사용을 피하고 모든 Document의 Style을 한 곳에서 관리 하기를 권한다.

액션: stylesheet를 생성하라

  1. 위에 생성한 폴더에 stylesheet로 사용할 style1.css 파일을 만들어라.
  2. 그 파일에 아래를 복사해 붙여 넣고 저장하라.
    strong {color: red;}
    

Document에 stylesheet연결 하기

  1. Stylesheet를 Document와 연결하려면, HTML파일을 수정 해야한다. 여기 강조표시된 라인을 추가하라:
    <!DOCTYPE html>
    <html>
      <head>
      <meta charset="UTF-8">
      <title>Sample document</title>
      <link rel="stylesheet" href="style1.css">
      </head>
      <body>
        <p>
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
      </body>
    </html>
    
  2. 파일을 저장하고 브라우저에서 다시 해당 HTML파일을 열어보라. Stylesheet에 의해 아래와 같이 첫글자를 빨간색으로 표시 할 것이다.
    Cascading Style Sheets
도전

빨강 외에, CSS는 다른 몇몇 컬러가 사용이 가능하다.

참조부분을 보지 말고 Stylesheet에서 동작하는 5개 이상의 색상을 찾아보라.

Possible solution

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

Hide solution
정답 확인

다음에는?

이제 별도의 Stylesheet를 사용하는 예제 Document를 만들었으니 좀더 배우기(브라우저가 document표시하기 위해 어떻게 이것들을 결합하는지)를 위한 준비가 되었다.

문서 태그 및 공헌자

Contributors to this page: teoli, SpikeYou
최종 변경: teoli,