CSS 시작하기

개요

이 가이드는 CSS 해부, 선택자, 메모와 HTML에 적용하는 방법 등을 포함하는 CSS의 기본적인 기초를 다룬다.

소개

이 문서는 CSS의 기본을 다룬다. 이것은 당신이 강력한 스타일링 언어를 무장하고 시작할 수 있도록 도와준다. HTML 문서에 CSS를 적용하는 방법을 배울 것이다. 문서<head><style> 요소에 내장된 style 속성을 사용하는 인라인 스타일 또는 자신의 문서에 있는 외부 파일로 적용한다.

후자도 배울 것이다 — <link> 요소를 사용하여 외부 스타일 시트를 링크하는 방법 — 유지 보수 및 캐싱 측면에서 가장 의미가 있다.

또한, CSS의 기본적인 구문에 대한 개요가 제공된다. 메모, 선택자 유형, 선택자 그룹핑 추가에 대해 자세하게 다룬다.

CSS는 무엇인가?

HTML은 문서 구조를 만들고 브라우저에게 페이지 요소의 기능을 알려준다. (마크업은 다른 페이지로의 링크를 나타내거나, 또는 페이지 제목을 명시한다). 반면 CSS는 브라우저에게 특정 요소를 표시하는 방법을 지시하는 규칙을 제공한다 – 스타일링, 간격, 색 등. HTML이 집의 구조를 구성하는 기초와 벽돌이라면, CSS는 집을 장식하는 석고와 페인트이다.

CSS 스타일은 규칙의 시스템 (또는 rulesets)을 사용하여 적용된다. are applied using a system of rules (or ). CSS 규칙에 대한 정확한 구문은 아래에서 설명한다. CSS 규칙은:

  1. 어떤 HTML 요소에 스타일링 적용되어야 하는지를 알려준다.
  2. 스타일 HTML 요소의 속성(색상, 크기, 글꼴, 기타 속성)을 명시한다.
  3. 각 속성의 모양을 제어하는 값을 포함한다.

예를 들어, CSS 규칙은 다음과 같을 수 있다:

나는 페이지에 있는 모든 <h2> 요소를 찾아서, 이 태그로 둘러싼 텍스트의 색을 초록으로 바꾸고 싶다.

또는

나는 author-name class 속성을 가지고 있는 모든 <p> 요소를 찾아서, 배경색을 빨강으로 설정하고, 정상적인 문단 텍스트의 2배로 텍스트 크기를 조정하고, 각 인스턴스 주위의 간격은 10 픽셀을 추가하기를 원한다.

CSS는 자바스크립트와 같은 프로그램언어도 아니고, HTML과 같은 markup 언어도 아니다 — 사실 비교될 수 있는 건 아무 것도 없다. 웹 개발 이전에 인터페이스로 정의된 기술은 항상 표시 방법과 구조(presentation and structure)를 혼합하였었다. 이전에 토론했듯이, 이것은 웹과 같이 자주 변하는 환경에서 현명한 방법이 아니다, 이것이 CSS가 발명된 이유이다.

스타일 규칙을 정의

지체 없이, CSS 규칙 사례를 검토하고, 해부해보자:

관련 있는 사항은 다음과 같다:

  • 선택자는 어떤 HTML 요소가 이 규칙의 영향을 받는지를 알려준다. <body>와 같은 실제 요소 이름을 사용하거나, 또는 class 속성 값과 같은 다른 구분자를 사용한다. 이 문서에서 나중에 선택자의 유형을 설명한다.
  • 중괄호는 속성/값의 쌍들을 포함한다. 각 쌍은 세미 콜론으로 서로 분리된다; 속성은 콜론으로 각각의 값을 구분한다.
  • 속성은 선택된 요소에 어떤 것을 적용할지를 정의한다. 이는 매우 다양하게 적용된다. 텍스트 색, 배경색, 페이지에서의 해당 요소의 위치, 글꼴, 경계색과 두께 및 기타 모양과 레이아웃 제어와 같은 속성에 영향을 미칠 수 있다.
  • 값은 요소에 적용되는 각 속성을 상세하게 표시하는 설정값이다. 이 값은 속성에 따라 다르다. 예를 들어, 색에 영향을 주는 속성으로 #336699과 같은 16진법 색상, rgb(12,134,22) 같은 RGB 값 또는 red, green, blue 같은 색 이름을 사용할 수 있다. 위치에 영향을 주는 속성 margins, width, height 등은 pixels, ems, percentages, centimeters 또는 기타 단위로 측정할 수 있다.

특별한 이 예제를 검토해 보자:

이 규칙이 영향을 미치는 HTML 요소는 <p>이다 — HTML 문서와 이 CSS 규칙이 적용되는 문서에 있는 모든 <p>는 이 스타일로 표시될 것이다. 더 특별한 규칙이 적용되면 예외이다. 이 경우 더 특별한 규칙은 이 규칙을 덮어 쓰게 된다. 이 규칙에 영향을 미치는 속성은 paragraphpin (이하 “문단”이라함) 주위 마진, 문단 내 텍스트 글꼴, 텍스트 색상이다. 마진은 5 픽셀, 글꼴은 Arial, 텍스트는 파랑으로 설정되어 있다.

이것들의 세부 사항은 나중에 논의하겠다 — 이 강좌의 주 목적은 세부적인 내용을 설명하기 보다는 CSS의 기초를 다루는 것이다.

전체 CSS 규칙은 스타일 시트를 형성하는 CSS 문서에 추가되어 있다. 이것은 CSS 규칙을 작성하는 가장 기본적인 구문이다. 일부 규칙은 더 복잡하지만, 많지 않다 – 아마도 CSS에서 가장 멋진 것은 간단하다는 것이다.

CSS의 공백

CSS 작업 시 공백은 HTML에서 동작하는 것과 정확히 같은 방식으로 작동한다 – 초과된 공백은 css를 제공하는 브라우저가 완전히 무시한다. 그래서 코드를 읽기 쉽도록 원하는 만큼 공백을 추가할 수 있다. 그래서 이 규칙은:

아래 규칙과 기능적으로 동일하다:

다른 부분과 구분하는데 필요한 중괄호, 콜론, 세미 콜론을 포함하는 한, 브라우저는 속성에 적용되는 값을 이해한다.

CSS 메모

초기에 알아야 할 한 가지는 CSS에 메모를 추가하는 방법이다. CSS에서는 /**/ 메모를 달아 메모를 추가할 수 있다. 메모는 여러 행으로 확장할 수 있다. 브라우저에서는 이 메모 내용을 무시한다:

규칙 사이 또는 속성 블록 안에 메모를 추가할 수 있다. 예를 들면, 아래 CSS에서 두 번째와 세 번째 속성이 메모 구분문자로 감싸져 있다. 그래서 브라우저는 이것들을 무시할 것이다. 이것은 당신의 웹 페이지에서 특정 규칙이 가지는 효과를 테스트하는데 유용하다; 그것들에 메모를 달고, CSS 파일을 저장하고, 브라우저에서 HTML 페이지를 재전송한다.

선택자 그룹화

여러 선택자를 그룹핑할 수 있다. h1p에 동일한 스타일을 적용하려면, 다음과 같이 CSS를 작성할 수 있다:

그러나 이 방법은 적합하지 않다. 왜냐하면 같은 정보를 반복하기 때문이다. 이를 해결하려면, 선택자를 쉼표로 그룹핑하여 CSS를 단축할 수 있다 – 중괄호 안의 규칙이 두 선택자에 적용된다:

선택자의 기본 유형

여러 가지 선택자가 있다. 각각 마크업의 다른 부분을 지정한다. 세 가지 유형의 선택자를 자주 보게 될 것이다:

요소 선택자

위의 경우, 요소 선택자가 페이지에서 <p>로 명명된 모든 요소를 지정한다. HTML 태그를 지정하면, 이 태그로 둘러싸인 모든 페이지 요소가 영향을 받는다.

class 선택자

class 선택자는 지정된 값의 class 속성을 가지고 있는 모든 요소를 지정한다. 위에서 <p class="example">, <li class="example"> or <div class="example">, 또는 example이라는 class를 가지고 있는 모든 요소를 지정한다. 선택자는 어떤 특정 요소 이름에 대해서는 테스트하지 않는다는 사실을 주목해라.

ID 선택자

ID 선택자는 지정된 값의id 속성을 가지고 있는 모든 요소를 지정한다. 위에서 <p id="example">, <li id="example"> or <div id="example">, 또는 example이라는 id를 가지고 있는 다른 모든 요소를 지정한다. ID 선택자는 어떤 요소 이름에 대해서는 테스트하지 않는다는 사실을 주목해라. You can only have one of each ID per 각각의 HTML 문서에는 각각의 ID를 하나만 사용할 수 있다 — 각 페이지에서 고유하다.

다음 예제에서 작동하고 있는 선택자를 볼 수 있다. 브라우저에서 이 예지를 열면, 리스트 항목과 문단 모두에 warning 스타일 적용된다는 사실을 주목해라 (글 머리 기호가 사라진다면, 흰색 배경에 흰색 텍스트를 설정했기 때문이다).

선택자 결합

더 구체적인 규칙을 정의하기 위해 선택자를 합칠 수 있다:

  • p.warning {}warning이라는 class를 가지고 있는 모든 문단을 지정한다.
  • div#example {} matches the element with an attribute example이라는 id 속성을 가지고 있는 요소를 지정한다, 단 div에만 적용된다.
  • p.info, li.highlight {}info라는 class를 가지고 있는 문단과 highlight라는 class를 가지고 있는 리스트 항목을 지정한다.

다음 예제에서, 다른 warning 스타일들을 차별화하기 위해 이것들을 사용하고 있다:

CSS 축약

이 과정에서 정기적으로 만나게 되는 것이 CSS 축약이다. 당신의 시간과 노력을 줄이기 위해 여러 개의 관련 CSS 속성을 하나의 속성에 결합시킬 수 있다. 이 장에서 가능한 축약의 형태를 살펴볼 것이다.

예를 들어, border 속성은 축약형이다.

는 아래와 동일하다.

개별 값과 축약 값의 비교

다음의 margin 규칙을 살펴보자:

이 규칙도 다음과 같이 작성될 수 있다:

이 속성도 4개 값 미만을 취할 수 있다. 다음과 같다:

  1. 모든 방향에 같은 값이 적용된다 — margin: 2px;
  2. 위와 아래에는 첫 번째 값이, 좌측과 우측에는 두 번째 값이 적용된다 — margin: 2px 5px;.
  3. 첫 번째와 세 번째는 각각 위와 아래에 적용되고, 좌측과 우측에는 두 번째 값이 적용된다 — margin: 2px 5px 1px;.

이와 비슷하게 작동하는 속성들이 많이 있다.padding, marginoutline 등이 포함된다. 나중에 이것들은 더 다룰 것이다.

하나의 속성 또는 축약 값을 사용하기 위한 선택을 하기

축약 marginpadding 속성은 사용 점유율이 가장 높다. 그러나, 축약 속성을 피하는 것이 최선인 상황이 있다. 또는 적어도 신중하게 고려되어야 하는 상황도 있다. 다음과 같은 상황이다:

  • 하나의 마진을 설정해야 할 경우. 한 속성 만이 설정되어야 하는 상황에서, 동시에 여러 속성을 설정하는 것은 보통 간단 명료 (KISS (Keep It Simple, Stupid))의 원칙을 위배한다.
  • 속성이 적용되는 선택자가 많은 극단적인 상황에 있게 된다. 이런 일이 발생할 경우 — 이 상황은 조만간 일어날 것이다 — 불가피하게 많은 축약 값은 수정하거나 또는 레이아웃을 변경할 때 찾아내기가 어렵다.
  • 당신이 작성한 스타일시트를 제한적인 CSS 스킬 (또는 공간 추론 능력)의 소유자가 유지보수 하게 되었을 때. 그들에게 이 문서를 읽게 할 수 있다면, 이 시나리오에 대해 걱정할 필요가 없을 것이다. 그러나 어떤 가정을 하지 않는 것이 최선의 방법이다.
  • 극단적인 경우를 해결하기 위해, 값을 대체할 필요가 있다. 이 요구사항은 문서나 스타일 시트가 잘못 디자인 되었다는 신호이다. 그러나 그것들은 거의 알려지지 않고 있다.

HTML에 CSS 적용

HTML에 CSS를 적용하는 세 가지 방법이 있다: inline, 내장, external 스타일 시트이다. 특별한 이유가 없으면 external 스타일 시트를 사용한다. 그 이유는 곧 알게 될 것이다. 우선 다른 옵션들을 검토해 보자.

Inline 스타일

style 속성을 사용하여 특정 요소에 스타일을 적용할 수 있다. 다음과 같다:

이 속성 안에 모든 CSS 속성과 값을 적을 수 있다. (각각의 속성/값 쌍은 세미콜론으로 구분되고, 각각의 속성과 값은 콜론으로 구분된다.) Try viewing the source of this example을 참조하자.

브라우저에서 이 예제를 열면,If you open this example in a browser you will see that the paragraph with the style 속성이 흰색 텍스트에 파랗고, 크기가 다른 것과 다른 문단을 볼 것이다. 그림 1과 같다.

Screenshot of the Opera browser showing an applied inline style sheet

그림 1: 오페라에서 인라인 스타일 적용된 문단은 다른 것과 다르게 보인다.

inline 스타일의 장점은 브라우저에서 이 설정을 사용하려고 한다는 점이다. 다른 스타일 시트 또는 문서의 <head>에 내장된 어떤 스타일 시트도 이 스타일 시트에 의해 덮어 씌워진다.

큰 단점은 유지보수가 어렵다는 점입니다. CSS를 사용하면 문서의 구조와 표현방식이 구분되지만, inline 스타일은 반대로 하고 있는 것이다 – 문서 전체의 표현 규칙을 분산시킨다.

유지보수 문제 뿐만 아니라, CSS의 가장 강력한 수단( the cascade, 종속형시트)을 사용할 수 없다. cascade 개념은 나중에 상세히 논의된다. 그러나 지금 알아야 할 것은 cascade를 사용한다는 것은 한 곳에서 형태나 느낌(a look and feel)을 정의하면 브라우저는 특정 규칙을 적용하는 모든 요소에 그 형태나 느낌을 적용한다는 의미이다.

내장(내장) 스타일

내장 스타일은 문서의 <head> <style> 요소 안에 설정된다. as in this example 참조:

브라우저에서 위 링크 예제를 열면, 문서에 있는 모든 문단에 정의된 스타일이 적용된 것을 볼 수 있다. 그림 2에서 볼 수 있다. head 안에 있는 CSS를 보려면 예제 페이지의 소스를 참조하자.

Screenshot of the Opera browser showing how an 내장 style sheet affects a lot of elements

그림 2: 오페라는 내장 스타일 시트로 정의된 스타일을 가진 모든 문단을 보여준다.

내장 스타일의 장점은 각 단락마다 스타일 속성을 추가할 필요가 없다는 점이다 – 한번만 정의하면 모두 스타일을 적용할 수 있다. 이는 모든 단락의 형태와 느낌을 바꾸고자 한다면, 한 곳만 변경하면 된다는 의미이다. 그러나 아직 한 문서에만 적용된다 – 한 번에 모든 사이트의 단락 형태를 정의하고자 한다면 어떨까? 이를 위해 외부 스타일 시트를 사용한다.

외부 스타일 시트

외부 스타일 시트는 개인 파일에 모든 CSS 정의를 하는 것을 의미한다. .css 확장자로 저장된다. 그리고 문서 <head> 안에 <link> 요소를 사용하여 HTML 문서에 적용한다. example page를 참조하고, <head>external CSS file을 참조하는, <link> 요소가 포함되어 있는 것에 주목하자. 그리고 외부 CSS 파일에 정의된 스타일이 HTML에 적용된 것을 확인하자. <link> 요소를 자세히 보자:

이 과정 앞에서 <link> 요소에 대해 논의하였다. 요점은: href 속성 CSS 파일을 가리키고, media 속성은 어떤 media에 이 스타일이 적용되는지를 정의한다 (이 예에서는 이와 같이 인쇄하기를 원하지 않기 때문에 (screen이다). type은 링크된 대상이 어떤 것인지를 정의한다 (파일 확장자는 이것을 정의하기에 불충분하다).

Screenshot of the Opera browser showing how an external style sheet affects a lot of elements

그림 3: 오페라는 링크 요소를 가지고 링크되었을 때, 외부 스타일 시트로 정의된 스타일을 보여준다.

이것은 세계에서 최고이다: 하나의 파일로 모양과 느낌을 정의한다. 이것은 하나의 파일을 변경하여 전체 사이트를 변경할 수 있다는 의미이다. 그리고 브라우저는 이것을 한 번 로드하고, 그것을 참조하는 모든 문서들 위해 캐시할 수 있다. 다운로드를 덜 하게 된다.

@스타일 시트 가져오기

HTML 파일로 외부 스타일 시트를 가져오는 다른 방법이 있다 – @import 속성. 이것은 내장 스타일 시트에 삽입된다. 위에서 보여준 내장 CSS와 같은 방법이다. 구문은 다음과 같다:

때때로 import 문은 괄호 없이 작성되지만, 같은 목표를 달성한다. 인식해야 할 또 다른 것은 이 @import는 항상 내장 스타일 시트에서 처음에 있어야 한다는 점이다. 마지막으로, 가져온 스타일 시트는 가져 오기 문의 끝 부분에 미디어 유형을 포함하여, 특정 유형의 미디어에만 적용할 것을 지정할 수 있다 (IE6 이하 버전을 제외한 모든 브라우저에서 작동). 다음은 이전 코드 예제와 같은 일을 한다 :

궁금한 첫 번째 질문은 “도대체 왜 HTML 문서에 외부 스타일 시트를 적용하기 위한 다른 방법이 필요한가?”이다. 그렇다, 실제로 필요 없다 – 완벽하게 하기 위해 여기에서 @import 정보를 소개하고 있다. <link>대신 @import 요소를 사용하면, 몇 가지 사소한 장점/단점이 있다. 그러나, 그것들은 매우 사소하다. 그래서 어떤 방법을 사용하는 가는 당신에게 달려 있다. 요즘 <link> 요소는 일을 하기 위해 인정받는 최선의 방법이다.

  • 이전 브라우저는 @import를 전혀 인식하지 못하므로 완전히 무시한다 (Netscape 4 이전 버전, IE 4 이전 버전에서 파일 이름 주위에 괄호를 생략하면), 그러므로 오래된 버그가 있는 브라우저(이것들을 부정확하게 사용하는)에서 스타일을 숨기기 위해 @import문을 사용할 수 있다. 외부 스타일 시트에 최신 스타일을 설정하고 @import문으로 가져올 수 있다. 그러면 기본 스타일이 적용된다. 외부 스타일 시트로 IE/Netscape 4를 망치게 하지 않을 것이다. 이 방법은 유용하지만, 요즘 IE/Netscape 4와의 호환성을 확보할 필요가 거의 없다!
  • 앞에서 언급했듯이, IE6는 @import 행 끝에 media 유형 설정을 지원하지 않는다. 그래서 다른 미디어를 위해 여러 개의 스타일 시트를 삽입하려는 경우, 좋은 방법이 아니다.
  • 여러 개의 @import 문을 위한 코드가 여러 개의 <link> 요소를 위한 코드 보다 더 적다고 주장할 수 있다. 그러나 이것은 무시할 수 있다.

See also

Exercise Questions

  • What are the benefits and problems of inline styles and how do you apply them to an element?
  • What is a style rule? Describe the different components and syntax.
  • Say you have a bunch of style rules, what do you need to do to make them into an external style sheet?
  • What does the following CSS selector match: ul#nav{}?
  • What is the benefit of grouping selectors?
  • How can you define a print style sheet?

답글 남기기