알기 쉬운 CSS

공헌자 숫자: 2명

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

CSS 시작하기 안내서 6번째; CSS 언어 자체의 Style과 문법에 대해 논의 해보자. 좀더 이해하기 쉬운 방향으로 CSS를 바꿔 보자.

정보: 이해하기 쉬운 CSS

좀더 이해하기 쉽게 CSS를 만들기 위해 stylesheet 내에 공백이나 주석을 첨가 해도 된다. 또한 다은 방법으로 선택된 element에 같은 Style을 적용 하기 위해 그룹 설렉터를 함께 사용하는 것도 가능하다.

공백

공백은 말그대로 공백(탭이나 개행문자 같은)이다. stylesheet의 내용을 이해하기 쉽게 정리 하기 위하여 공백을 추가 해도 된다.

지금까지의 예제는 한라인에 최소한의 공백으로 이루어진 하나의 규칙만 있다. 복잡하게 결합된 Stylesheet같은 경우는 분석하기도 어려우며, 유지보수에도 힘들다.

보통은 개인적으로 사용하기위해 써왔지만, 공동작업하는 프로잭트에 사용되는 stylesheet를 만든다면 작업하는 프로잭트에서 기본적으로 Stylesheet을 만드는 기본 형식이 있을 것이다.

예제

일부 개발자는 지금까지의 예제에서 사용해왔던 형식으로, 라인 길이가 길어지면 다음라인으로 단순하게 분리하는 방법을 좋아 하기도 한다.

.carrot {color: orange; text-decoration: underline; font-style: italic;}

어떤 개발자는 하나의 라인에 하나의 특성 값만 나타나게 하는 것을 좋아 하기도 한다.

.carrot
{
color: orange;
text-decoration: underline;
font-style: italic;
}

또 어떤 개발자는 들여쓰기로 2개의 공백, 혹은 4개, 또는 탭을 선호하기도 한다.

.carrot {
  color: orange;
  text-decoration: underline;
  font-style: italic;
}

또다른 개발자는 수직적으로 한라인에 두는 것을 좋아하기도 한다.(이와 같은 방법은 유지 보수가 불편할 수도 있다.)

.carrot
    {
    color           : orange;
    text-decoration : underline;
    font-style      : italic;
    }

어떤 개발자는 배치를 위해 탭만을 사용하기도하고 탭 대신 공백만으로 사용하기도 한다.

주석

CSS에서 주석은 '/*'로 시작하고 '*/'로 끝난다.

주석은 stylesheet내에서 설명을 위해 작성을 해도 되고, 코드중 일부를 임시적인 테스트 용도로 주석처리 해서 적용 되지 않도록 막는 용도로도 사용 가능하다.

Stylesheet의 일부를 작동하지 않도록 주석 처리 하면 브라우저에서는 그 부분을 무시하고 나머지 부분을 처리 한다. 주석처리는 시작과 끝을 주의하여 사용하라. 주석외의 나머지 부분은 정확한 문법이 유지 되어야 한다.

예제
/* style for initial letter C in first paragraph */
.carrot {
  color:            orange;
  text-decoration:  underline;
  font-style:       italic;
  }

그룹 설렉터

많은 element들에 같은 style을 적용 할때, 콤마(,)로 구분 시켜 나열하는 방법인 그룹 설렉터를 쓸수 있다. 이와 같은 선언으로 콤마로 나열된 element들은 모두 같은 style이 적용 된다.

그렇지 않다면 예제 stylesheet네에 각각에 대해 반복적으로 같은 설렉터를 각각에 적용되도록 선언 해야 한다.

예제

아래 규칙은 <h1>, <h2>, and <h3> elements를 같은 색으로 선언한 것이다.

나중에 바꾸기 편하게 같은 색으로 적용할 element들은 한곳에 모아서 공통 적용하는 것이 좋다.

/* color for headings */
h1, h2, h3 {color: navy;}

액션: 주석을 추가 하고 배치를 개선하자

  1. 순서에 상관 없이 예제 CSS에 아래와 같이 만들어 보자.
    strong {color: red;}
    .carrot {color: orange;}
    .spinach {color: green;}
    #first {font-style: italic;}
    p {color: blue;}
    
  2. 위의 예제를 읽기 쉽고 보기 좋게 재 배치 하고, 탭이나 공백을 추가 하여도 좋고,  설명이 포함된 주석을 추가 해 보라.
  3. 작성된 예제 파일을 저장하고 브라우저에서 다시 읽어서 확인 해 보라. 그리고 위에서 변경한 작업들이 표시에는 영향 받지 않는 것을 확인 하라.
    Cascading Style Sheets
    Cascading Style Sheets
도전과제

다른 것은 건들이지 말고 첫글자가 빨간색으로 표시되는 부분을 주석 처리 해보라.

Cascading Style Sheets
Cascading Style Sheets

(해결책은 여러가지 방법이 있다.)

Possible solution
One way to do this is to put comment delimiters around the rule for .carrot:
.carrot {
  color: orange;
}
A more specific selector, p#second also works. Hide solution
정답확인

다음에는?

지금까지의 예제 stylesheet는 이탈릭 문자열과 밑줄 문자열로 되어 있다. 다음 장에는 문자열을 표시하는 다양한 방법에 대해 알아보자.

문서 태그 및 공헌자

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