27. CSS 기초

What is CSS?

HTML이 문서를 구축하고 특정 Element의 기능적 구조적 설명을 브라우저에 하는 동안(예를 들면 링크인가? 표제인가? 등) CSS는 특정 Element의 간격 및 배치에 대한 디자인 표현방법을 브라우저에 지시합니다.

HTML이 집을 만들기 위해 필요한 벽돌이나 버팀목 역할을 한다면 CSS는 그것 들을 잘 쌓고 색칠하여 집을 꾸미는 역할을 한다고 말 할 수 있습니다.

CSS는 정해진 규칙(룰)에 의해서만 사용할 수 있으며, html Element가 추가되는 고유한 style 요소를 수정 할 수 있고 색깔, 크기, 글꼴, 등을 다룰 수 도 있습니다.

예를 들어 그리고 모든 h2 태그의 텍스트 색상을 전부 “녹색”이라고 설정하고 싶거나, selector를 기준으로 특정 태그나 class, id이름을 가진 각 단락을 찾아 배경색을 변경한다거나 해당 단락의 텍스트 크기를 원문의 두 배의 사이즈로 변경할 수도 있습니다.

CSS는 javascript와 같은 프로그래밍 언어가 아니며 HTML과 같은 마크업을 이용해서 컨텐츠를 나타내는 언어도 아닙니다. (실제로 CSS와 비교할 수 있는 언어는 없습니다.)

웹 개발 이전의 인터페이스를 정의하던 기술은 항상 구조와 표현을 섞었습니다.
그러나 이 방식은 웹처럼 자주 변화하는 환경에서는 그리 좋은 방법이 아니기 때문에 CSS가 발명되었다 라고 말할 수 있습니다.

Defining style rules – Style 정의와 규칙

아래 코드는 CSS의 기본형 코드 입니다. 이 코드에 대해서 다음과 같은 설명을 할 수 있습니다.

selector {
  property1:value;
  property2:value;
  property3:value;
}
  • 선택자(selector)는 html 규칙에 의해 확인할 수 있는 Element 이거나(예를 들면 body, div) 또는 이 Element의 속성중 class와 같은 것 들을 의미 합니다.
  • 중괄호({}는 property라는 속성과 value라는 속성값을 항상 한쌍의 형태로 담고 있습니다. 이것의 형태는 새미콜론으로 구분하며, 속성과 속성값은 콜론으로 구분합니다.
  • 속성(property)은 선택한 요소에 어떤 변화를 부여하고 싶은지를 정의합니다. 이 것은 매우 넓은 범위로 요소의 색상이나 배경, 위치, 여백, 글꼴타입, 그리고 그외 많은 변화를 말합니다.
  • 속성값(value)은 선택한 Element가 어떤 변화가 있을지를 정의 합니다. 속성값의 범위는 굉장히 넓으며, 예를들어 Element의 색상, 배경, 위치, 여백, 패딩, 글꼴 등을 정의할 수 있습니다.
  • 컬러의 변화를 주기 위해서 #336699와 같은 16진수나 RGB컬러값 또는 색상 명칭으로 입력할 수도 있습니다. 속성값은 위치,여백,가로,세로크기에 대한 단위를 일반적으로 pixels, ems, percentages, centimeters 등으로 나타낼 수 있습니다.

구체적인 예를 들어보면 아래 코드와 같습니다.

p {
  margin:5px;
  font-family:arial;
  color:blue;
}

위 코드는 HTML 문서내 선택된 모든 P Element는 위 예제코드의 style이 적용되며, 다른 css가 위 선언 내용을 덮어쓰는 경우에는 달라질 수 있습니다.
위 코드는 문단주의에 여백을 설정하고 문단안의 글꼴에 종류와 색상을 정의하고 있습니다.
여백은 상,하,좌,우 5px 크기로 설정될 것이며, 글꼴은 Arial, 색상은 파란색 으로 설정 될 것 입니다.

이번 과정은 CSS의 기초학습을 위한 설명일 뿐이고, 핵심적이고 세부사항을 전달하기 위한 내용은 아닙니다.
그저 CSS의 단순함, 간결함에 대한 이해만 하시면 됩니다.

CSS comments – CSS 주석

CSS에서는 /* 과 */를 둘러 싸는 것으로 주석을 정의 할 수 있습니다.

/* These are basic element selectors */
selector{
  property1:value;
  property2:value;
  property3:value;
}

주석은 한 줄로도 표현하거나 여러 줄로 늘릴 수도 있고, 속성영역 안쪽에서도 사용할 수 있습니다.
예를 들어 아래 CSS에서는 2번째 속성과 3번째 속성을 주석 문자로 둘러싸고 있어서 브라우저에서 이 코드는 무시할 수 있게 됩니다.

이런 주석 사용은 브라우저에 특정 style이 어떠한 영향을 미치는지 살펴보는데 유용하게 사용됩니다.
주석 처리 전 코드와 아래와 같은 형식으로 주석 처리한 코드를 각각 CSS파일로 세이브 하고 HTML페이지를 다시 새로고침 하면 다른 결과를 얻을 수 있습니다.

selector{
  property1:value;
  /*
  property2:value;
  property3:value;
  */
}

다른 언어와는 다르게 CSS는 싱글라인 주석을 지원하지 않습니다.
물론 억지로 만들 수는 있지만 반드시 주석은 시작(/*)과 끝(*/)으로 양쪽을 모두 감싸는 블록 레벨 주석만을 가져야 합니다.

Grouping selectors – 그룹 선택자

선택자는 여러 가지 형태로 사용할 수 있습니다.
만약 <h1>과 <p> Element에 동일한 스타일을 적용하고 싶다면 CSS를 이제 막 접해본 여러분은 들은 아래 코드와 같이 설정하면 된다고 생각했을 지도 모릅니다.

h1 {color:red}

p {color:red}

위와 같은 코드는 같은 정보를 반복해서 사용하고 있기 때문에 코드의 양적인 측면에서 비효율 적입니다.
따라서 아래와 같이 콤마(,)를 이용해서 선택자를 그룹화 하면 중복되는 불필요한 정보를 제거할 수 있습니다.

h1, p {color:red}

선택자 중에는 여러 가지 다른 선택자 들이 있는데 만약 여러분들이 CSS를 살펴 볼 때 가장 많이 보게될 기본적인 선택자는 다음 세가지 유형과 같습니다.

P {} : Element selector
페이지 상에 선택자로 지정한 이름으로 된 모든 Element에 적용하는 경우 (위의 경우는 <P> Element에 적용)

.example {} : class selector
특정 class명을 가진 모든 Element에 적용하는 경우, 예를 들어 <p class=”example”>, <li class=”example”>, <div class=”example”> 라는 코드가 있다면 모든 Element의 class가 example이기 때문에 모두 같은 스타일을 적용 받게 됩니다.
그만큼 class 선택자는 어떤 특정 Element의 이름으로 style을 정의하지 않는 다는 것이 중요합니다.

#example {} : id selector
특정 id명을 가진 Element에 적용하는 경우, 이경우는 class 선택자와 동일하지만 한가지 다른 점이 있는데 만약 한 페이지에 <p id=”example”>, <li id=”example”>, <div id=”example”> 와 같은 코드가 있다면 이 코드는 올바른 코드라고 말 할 수가 없습니다. 왜냐하면 HTML문서는 동일한 이름의 ID를 두번 설정할 수 없기 때문입니다. 따라서 어느 Element든 모두 서로 다른 id명을 가져야 합니다.

위 규칙대로 몇몇 예제를 살펴보면..

p.warning{} – 는 warring class가 있는 단락은 모두 스타일을 적용하라는 뜻입니다.

div#example{} – id가 example 인 div일 경우에만 스타일을 적용하라는 뜻입니다.

p.info, li.highlight{} – info의 class를 가진 단락과 highlight의 class를 가진 리스트에 스타일을 적용하라는 뜻입니다.

아래 예제는 스타일 별 차이의 구분을 주기위한 예제 입니다.

Advanced CSS selectors

위에서는 CSS 선택자 Element, class, id 의 선택자의 가장 기본적인 것에 대한 소개를 했습니다.
이런 선택자들로 인해 여러분들은 많은 유형의 것을 배웠을 거라 생각되는데요.. 이것이 모든 선택자의 전부는 아닙니다.

이번 장에서는 보다 구체화되고(명확하고) 표준에 기초한 스타일로 Element를 선택할 수 있게 해주는 선택자에 대한 설명을 합니다.

  • Universal selectors : 보편적인 셀렉터는 페이지상의 모든 Element를 선택하는데 사용합니다.
  • Attribute selectors : 속성 셀렉터는 이름에서 말하듯이 엘리먼트의 속성에 기초한 선택자를 말합니다.
  • Child selectors : 자식 선택자는 특정 Element의 하위 Element 선택자를 말합니다.
  • Descendent selectors : 전승 셀렉터는 특정 Element에서 내려온 스타일을 말하며 자식 선택자와 조금 다른 개념으로 바로 아래 직게 자식들만을 말하는 것은 아니고 트리 구조로 더 하위 자식 Element에 대한 선택자를 말합니다.
  • Adjacent sibling selectors : 인접 선택자는 특정 Element에 종속된 특정 Element를 선택하는 것을 말합니다.
  • Pseudo-classes : 의사 클래스는 Element가 무엇인지 뿐만 아니라 링크의 상태에 대해서도 스타일을 할 수 있게 합니다.(예를 들어 마우스를 올렸을 때 라던지 또는 방문했던 적이 있냐 없냐 등)
  • Pseudo-Element : 의사 Element는 전체 Element 보다는 Element내 특정 내용(부분)에 대한 스타일을 할 수 있게 해줍니다.(예를 들면 해당 Element내에 첫 번째 글자를 선택 등) 또한 특정 Element앞이나 뒤에 내용을 삽입 할 수 있게도 할 수 있습니다.

앞으로 남은 교육 과정에서는 더 복잡한 선택자도 있습니다. 하지만 여러분이 이 것들을 전부 이해할 필요는 없습니다.
왜냐하면 웹 페이지를 스타일링 한다는 것은 결국 많은 경험 속에서 알 수 있다는 것을 차차 알 수 있을 것이기 때문입니다.

중요한 건 앞 과정에서 언급한 기본 선택자 세가지를 알고 있는 것이 우선은 가장 좋고, 그 다음 자신감을 얻은 후에 나머지 복잡한 선택자 들을 알아가는 것이 중요합니다.

Universal selectors – 보편적 선택자

보편적 선택자는 간단하게 말하자면 스타일을 적용하기 위한 페이지에서 모든 Element를 선택한다 라고 말할 수 있습니다.

* {
  border: 1px solid #000000;
}

Attribute selectors – 속성 선택자

속성 선택자는 선택되는Element가 담고 있는 속성에 기초한 것에 대한 스타일을 정의합니다.
예를 들면, 다음 예제는 선택자에 alt 속성을 가진 <img>를 모두 선택한다는 뜻 입니다.

img[alt] {

  border: 1px solid #000000;

}

위 예제는 alt 속성을 가진 어떤 이미지의 테두리를 검정색(#000000)으로 설정하는 스타일 입니다.
같은 형식으로 빨간색으로 변경해 보는 연습도 해보시기 바랍니다.

img[src="alert.gif"] {

  border: 1px solid #000000;

}

이런 방법들은 매우 유용한 방법입니다. 실제로 프로그래밍의 디버깅에서도 사용할 수 있는데요. 더 유용한건 Attribute의 특정 부분에 대한 선택 능력입니다. 예를 들어 CSS 3 부터는 Attribute의 vluse에 관해 텍스트 문장에 기초해서 선택할 수 있는 Attribute의 선택자를 세가지 타입으로 제공 하고 있습니다.
Read Christopher Schmitt’s article on CSS 3 attribute selectors

Child selectors – 자식 선택자

특정 Element의 특정 자식 Element를 선택하기 위해서 하나의 자식 선택자를 사용할 수 있습니다.
예를 들어 아래쪽은 <h3>의 자식 Element인 <strong>의 텍스트 색상을 파란색으로 바꾸는 스타일을 주지만
다른 <strong>에 대해서는 바꾸지 않습니다.

h3 > strong {

  color: blue;

}

다만 아쉬운 건 IE6에서는 이 자식 선택자를 지원하지 않습니다.

Descendent selectors – 전승 선택자

전승(내림차순) 선택자는 자식 선택자가 오직 직계 자손 Element야만 선택된다는 것만 제외하면 자식 선택자와 매우 흡사합니다. 즉, 전승 선택자는 단지 직계 자손 Element뿐만 아니라 Element계층 어디서든 선택된 Element를 찾습니다.

이것이 어떤 의미인지 좀 더 살펴보도록 합시다.

<div>
  <em>hello</em>
  <p>In this paragraph I will say
    <em>goodbye</em>.
  </p>
</div>

위 HTML코드에서는 <div>는 다른 요소의 부모가 됩니다. 즉 <em>과 <p>요소를 자식으로 가지고 있는데요.
만약 자식 선택자와 같이 <div>내부의 하나의 em을 선택한다면 아래와 같은 코드를 구성 하면 되지만

div > em {

 ...

}

전승 선택자와 같이 모든 <em>에 적용 되게하려면 아래 코드와 같이 선택 하면 됩니다.

div em {

 ...

}

Adjacent sibling selectors – 인접 선택자

인접 선택자는 특정 Element이후 선언된 특정 Element를 선택할 수 있게 해줍니다.
예를 들어 모든 <p>중 <h2>이후에 선언된 <p>에 대해서 스타일을 정의하고 싶다면 아래 코드와 같이 설정 하면 됩니다.

h2 + p {

 ...

}

하지만 IE6버전 이하 에서는 인접 선택자를 인식하지 못합니다.

Pseudo-classes – 의사 클래스

의사 클래스는 Element에 대한 내용이 아니라 Element의 상태에 대한 내용 입니다.

이 의사 클래스를 확인할 수 있는 가장 보편적인 방법은 연결상태(링크)에 대한 스타일인데요 아래 설명은 링크의 상태별 의사 클래스에 대한 설명 입니다.

  • :link – 링크들의 표준(정상) 상태를 나타냅니다. 가장 처음 링크를 접한 상태가 바로 :link 상태 일때 입니다.
  • :visited – 현재 사용하고 있는 브라우저에서 한번이라도 방문한 적이 있는 링크의 상태를 나타냅니다.
  • :focus – 현재 링크에서 키보드를 이용해 커서이동이 된 상태를 나타냅니다.
  • :hover – 현재 마우스 포인트가 링크의 위에 위치해 있는 상태를 나타냅니다.
  • :active – 지금 링크를 클릭하고 있는 상태를 나타냅니다.

그렇다면 아래 CSS룰을 보고 설명 해 보겠습니다.

링크는 기본설정이 텍스트에 밑줄이 생기는데 아래 CSS 규칙은 기본 링크의 텍스트 색상은 파란색으로 설정, 마우스를 올리거나 키보드로 포커스를 위치하게 되면 밑줄이 사라지게 됩니다. 보통 마우스를 올렸을 때나 키보드로 링크에 위치했을 때에는 같은 스타일(효과)을 설정하는 것이 좋습니다.

그리고 이미 방문한 링크의 텍스트 색상은 회색으로 설정하고 클릭중인 상태일 때는 텍스트가 굵어지게 설정 되어 있습니다.

a:link{

 color: blue;

}

a:visited{

 color: gray;

}

a:hover a:focus{

text-decoration: none;

}

a:active{

 font-weight: bold;

}

위 예제처럼 명령에 대한 정확한 규칙이 명확히 정해 졌는지 여부를 주의해야 합니다.
CSS는 같은 스타일 설정을 나중에 선언한 규칙이 앞에 선언된 규칙을 무시하게 하는 방식을 사용하기 때문에 기대와 다른 결과로 작동할 수도 있습니다.

:focus 클래스 같은 경우는 아래와 같이 <input>의 입력필드에 커서가 이동 했을 때 스타일을 적용하기 위한 용도로도 사용할 수 있습니다.

input:focus {

 border: 2px solid black;
 background color: lightgray;

}

다음은 Element의 first-child 의사 클래스에 대해 살펴보겠습니다.
first-child는 부모 Element의 첫 번째 자식 Element에 대한 스타일을 말합니다.
아래 예제코드는 리스트의 첫 번째 Element의 텍스트를 굵게 스타일 하기 위한 코드 입니다.

li:first-child {

 font-weight: bold;

}

마지막으로 :lang 의사 클래스에 대한 내용입니다.
이것은 lang 속성에 대한 특정 언어를 선택자로 선택해서 스타일을 설정할 수 있습니다.

<p lang="en-US">A paragraph of American text, gee whiz!<p>
p:lang(en-US) {

 ...

}

Pseudo-elements – 의사 엘리먼트

의사 Element는 두 가지 용도가 있습니다.

첫 번째는 텍스트의 첫 번째 글자나 첫째 줄을 선택하기 위해 사용할 수 있습니다. 아래 예제코드는 모든<p>안에서 첫 번째 글씨에 대해 강조할 수 있게 합니다.

p:first-letter {

  font-weight: bold;
  font-size: 300%
  background-color: red;

}

위 코드는 첫 번째 단락의 나머지 글자들 보다 300% 더 크고 굵고 배경색이 들어간 글씨로 지정할 수 있고
모든 단란의 첫 번째 줄을 굵게 만들기 위해서는 아래와 같은 코드를 사용 하면 됩니다.

p:first-line {

  font-weight: bold;

}

의사 Element의 두 번째 사용 용도로는 CSS를 통해 새로운 컨텐츠를 추가할 수 있게 하는 것 입니다.
이 작업(일?)은 다소 복잡한 면이 있는데요 선택한 Element의 앞이나 뒤에 컨텐츠를 넣어야 한다는 것을 구체적으로 정의하기 위해 :after 혹은 :before 의사 Element로 사용할 수 있습니다.

a:after{

  content: " " url(flower.gif);

}

또한 Element의 속성 값을 Element 컨텐츠로 넣기 위해서 attr()함수를 사용할 수도 있습니다. 예를 들면 문서에 모든 <a>의 href값을 <a>컨텐츠 선언 후에 표시되도록 할 수 있습니다. 문서내 있는 모든 폭표물은 괄호 안에 넣을 수 있습니다.

a:after{

  content: "(" attr(href) ")";

}

프린트 페이지를 위한 스타일 규칙도 있습니다. 이 규칙은 여러분이 프린트 전용 css를 지정하면 사용자가 페이지를 인쇄할 때 자동으로 적용되게 되어 있습니다.
사용자에게 웹 페이지에서 보는 스타일과 프린트 페이지에 최적화 된 스타일을 따로 지정 할 수 있어 유용하게 사용 할 수 있게 됩니다.

이 밖에도 counter() 기능을 이용하여 반복되는 Element의 수치를 계산해 번호를 부여할 수 있는 기능도 있습니다.
Css counters

하지만 이런 선택자 들은 IE6과 그 하위 브라우저에서는 대부분 기능이 지원되지 않습니다.
그리고 사용자가 임의 조작으로 여러분이 제공한 스타일을 이용하지 않을 수도 있다는 것도 알고 있어야 합니다.
위에서 설명 한 규칙들은 스타일을 하기 위한 CSS이며 내용을 담고 있는 HTML을 위해 존재 합니다.

CSS shorthand – 축약(단축) CSS

이 과정에서는 CSS제작의 시간과 노고를 줄이기 위한 CSS 속성들과 관련된 여러 가지를 하나의 속성으로 합칠 수 있는 단축 할 수 있는 CSS에 대해 알아 보도록 합니다.
지금까지는 아마도 별다른 이유나 언급 없이 단축 속성방식을 사용해 왔을 것 입니다.
예를 들어 border:2px solid red; 라는 속성이 있다면 border-width: 2px;, border-style: solid;, border-color: black;으로 구체화 할 수 있습니다.

Comparing individual and shorthand values – 단위와 단축 값

아래 margin에 대한 룰은 이렇지만.(padding도 마찬 가지 입니다.)

div.foo {
  margin-top: 1em;
  margin-right: 1.5em;
  margin-bottom: 2em;
  margin-left: 2.5em;
}

아래와 같은 방식도 똑 같은 결과 입니다.

div.foo {
    margin: 1em 1.5em 2em 2.5em;
}

Providing less than four values for the margin property – 단축 속성에 대해 4가지 속성값보다 적게 규정하기

아래 리스트에 있는 단축 속성값은 모두 4개 속성값을 취하고 있습니다. 각 규정된 속성값 배열(정렬)에 의해 결과가 다르게 나타납니다.

  • 하나의 속성값만 선언하면 4면(상,하,좌,우) 모두 동일한 값이 적용 됩니다. (예: margin:2px;)
  • 두 개 속성값만 선언하면 첫 번째 속성값은 위쪽과 아래쪽에 적용 되고 두 번째 속성값은 왼쪽과 오른쪽에 적용 됩니다. (예: margin:2px 5px;)
  • 세 개 속성값만 선언하면 첫 번째와 세 번째 속성값은 각각 위쪽과 아래쪽에 적용되고 가운데(두 번째) 속성값은 왼쪽, 오른쪽에 적용 됩니다. (예: margin:2px 5px 1px;)
  • 네 개 속성값을 모두 선언하면 위 예제 코드와 같이 위,아래,왼쪽,오른쪽에 각각 적용 됩니다.

일반적으로 4가지 속성값을 설정하는 가장 알맞은 방법은 사용하기가 간단하며 읽기가 쉽기 때문에 단축 속성값 형식으로 설정하는 것이 좋습니다.(padding 방법도 마찬가지 입니다.)

Making the choice to use a single property or a shorthand value – 단일 속성이나 단축 속성값 을 사용하기 위한 선택

margin, padding 과 같은 속성을 단축속성으로 지정하는 방법이 많이 사용되고 있지만, 단축속성을 피하는 것이 좋습니다. 하지만 사용해야 한다면 최소한 주의 깊게 생각해 봐야 할 몇 가지 상황이 있습니다.

  • 오직 단일 margin만 필요한 설정 : 하나의 속성값을 지정 해야 할 필요가 있을 때 동시에 여러 개의 속성을 지정하는 것은 KISS(간단명료)원칙에 어긋납니다.
  • 스타일 속성이 적용되는 선택자는 다양한 예외오류의 영향을 받게 됩니다. : 이런 일은 나중이나 혹은 곧 일어날 수 있는 문제이며, 유지보수나 레이아웃을 바꾸려 할 때 문제가 될 수 있습니다.
  • 내가 작성한 스타일을 나보다 낮은 스킬의 소유자 혹은 방향성(margin, padding) 감각이 떨어지는 다른 사람이 유지보수 하게 되었을 때 : 다음 업무 진행자가 위 정보를 숙지했다면 문제나 걱정할 필요가 없지만 애초에 이런 경우를 만들지 않는 것이 좋습니다.
  • 예외오류를 해결하기 위해서는 속성값을 대체할 필요가 있습니다 : 이런 조건은 문서나 스타일 시트가 조잡하게 설계될 페이지의 신호 입니다. 이런 상황은 신중하게 고려해야 합니다.

Shorthand reference – 단축기법 참조

1. 다른 속성들에 대한 border 단축 : 이미 이 장 첫 부분에서 설명 했듯이 적용이 가능하며, 아래와 같이 응용도 할 수 있습니다.

border-left-width: 2px;
border-left-style: solid;
border-left-color: black;

2. 같은 속성에 대한 margin, padding 그리고 border의 단축기법 : 이 속성들은 모두 Comparing individual and shorthand values에서 설명한 방식으로 사용합니다.
3. font 단축기법 : 단 한 줄의 단축기법으로 아래의 다양한(사이즈, 굵기, 스타일, 글꼴, 행간) 속성을 설정할 수 있습니다. 예를 들면 아래 코드와 같이 말이죠.

font-size: 1.5em;
line-height: 200%;
font-weight: bold;
font-style: italic;
font-family: Georgia, "Times New Roman", serif;

위 코드와 같은 코드들을 하나의 코드로 명시할 수 있습니다.

font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;

4. background 단축기법 : 배경의 색상, 이미지, 이미지 반복, 이미지 위치에 대한 설정을 하나의 속성으로 명시할 수 있습니다.

background-color: #000;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position; top left;

위 코드는 아래 코드로 표현할 수 있습니다.

background: #000 url(image.gif) no-repeat top left;

리스트 단축기법 : 리스트 속성은 bullet, 위치, 이미지 속성 등을 표현할 수 있으며,

list-style-type: circle;
list-style-position: inside;
list-style-image: url(bullet.gif);

아래 코드처럼 하나의 속성이 표현할 수 있습니다.

list-style: circle inside url(bullet.gif);

참고로 색상의 16진수 기입 방식중 #000000 과 #000은 값의 차이가 없습니다. 왜냐 하면 #000은 #000000의 단축 표현 방식이기 때문입니다.

만약 #66cc99 의 값이라면 #6c9로 축소하여 기입할 수 있습니다.

Applying CSS to HTML – HTML에 CSS 적용하기

CSS를 HTML에 적용하는 방식은 크게 세가지 가 있습니다.

직접 스타일 방식과, 임베디드 스타일 방식 그리고 외부 스타일 시트 방식 입니다.
각 스타일 방식에 대해 알아 보겠지만 만약 첫 번째와 두 번째 방식을 반드시 사용해야 할 이유가 있지 않다면 세 번째 방식을 사용하는 것을 권장합니다.

Inline styles – 직접 스타일 입력 방식

Element에는 다음 코드와 같이 style을 직접 입력 할 수 있습니다.

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

Element의 Style속성 내부에서는 모든 CSS속성과 속성값을 작성할 수 있습니다.
각 속성/속성값의 한 쌍은 세미콜론(;) 으로 다른 한 쌍과 분류되고, 이 방식은 CSS에서 스타일을 정의 하는 방식과 동일합니다. 예제 페이지는 Try viewing the source of this example 에서 확인 할 수 있습니다.

위 예제 페이지 에서 코드가 적용된 부분은 아래 이미지와 같이 파란 배경색과 출력되게 됩니다.

그림과 같이 직접 스타일 입력 방식은 다른 공통적인 스타일선언 혹은 외부 스타일 시트에 의한 스타일이 적용 된 상태 일 지라도 가장 우선적으로 적용 되게 됩니다.

직접 스타일 입력 방식의 가장 큰 단점은 유지, 보수가 어렵게 된다는 점입니다.

CSs의 사용은 구조로부터 문서의 표현을 분리하는 것이 가장 핵심적인 목적이지만 직접 스타일 입력 방식은 단지 그 문서에서 표현을 출력하기 위한 목적만을 가지고 있기 때문입니다.

그런데다 유지 관리 관점에서는 CSS의 기능인 케스케이드 를 할 수 없기 때문에 각각의 컨텐츠에 일일히(세부적으로) 스타일을 적용해 줘야 하기 때문입니다. 케스케이드란 상위에서 적용한 스타일이 특정 규칙에 매칭 되는 모든 Element에 적용되도록 한다는 것을 의미 합니다.

Embedded styles – 임베디드(끼워넣는) 스타일 입력 방식

임베디드 스타일 입력 방식은 아래 예제 처럼 HTML 문서의 <head> 부분에서 <style> Element로 선언하는 것을 말합니다. (예: as in this example)

<style type="text/css" media="screen">
  p {
    color:white;
    background:blue;
    padding:5px;
  }
</style>

위 링크의 예제 페이지는 아래 그림과 같이 <p>에는 모두 스타일이 정의된 것을 볼 수 있습니다.

임베디드 스타일 입력 방식은 직접 입력 방식처럼 각 Element에 하나하나 선언하지 않아도 된다는 장점이 있습니다. 예제 코드를 보시면 알겠지만 한번의 스타일 정의로 모든 단락에 동일한 스타일을 적용할 수 있습니다. 그리고 class나 id등 구분 할 수 있는 선택자를 활용하여 다른 단락과 다른 스타일을 지정할 수도 있습니다.

하지만, 구조와 표현의 구분은 됐지만 여전히 하나의 문서에서만 적용이 가능하기 때문에 사이트 전체적인 적용이 힘들다는 단점은 직접 입력 방식과 동일하다고 할 수 있습니다.

한번의 설정으로 전체 사이트에 모두 적용 할 수 있는 방법은 없을까요? 외부 스타일 시트 적용 방법이 바로 그 해결 방법 입니다.

External style sheets – 외부 스타일 시트 적용 방식

외부 스타일 시트는 위에서 말한 CSS의 모든 정의를 입력할 수 있는 CSS파일을 만드는 것이고,(확장자는 CSS 입니다.) HTML문서 <head>영역에서 <link>요소로 호출 하는 방식을 말합니다.
(HTML예: example page), (CSS 예: external CSS file)

위 HTML예제 페이지를 보면 <head>영역에서 <link>태그를 이용해서 외부 CSS파일을 호출하고 있고, CSS파일에서 정의된 스타일이 HTML 페이지에 적용되고 있는 모습을 볼 수 있습니다.
<link>태그는 아래 코드처럼 명시 되어 있고 각 속성별 설명은 다음과 같습니다.

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

<link> Element의 href속성은 호출할 CSS파일을 가리키며, media는 어떤 media가 이 CSS가 적용된 것 처럼 보이게(출력되게)할 것인지 설정하며, type은 링크된 리소스(자원)이 어떤 목적인지(무엇인지)를 정의합니다.

스타일 적용 기법 처음 설명에서 말했듯이 이 방식이 가장 좋은 스타일 적용 방식 입니다.

이 방식은 페이지의 외형(모습)과 분위기(느낌)의 정의를 한 곳에 유지할 수 있도록 HTML과 독립된 하나의 CSS파일로 만들어 놓으므로 서 이 CSS를 호출하는 모든 페이지에 스타일을 적용 시킬 수 있고 것을 의미 합니다.

@importing stylesheets – @importing 스타일 적용 방식

외부 스타일 시트를 HTML로 가져오는 방법 중 또 다른 하나의 방법은 @import명령을 이용하는 방법 입니다.

이 방식은 스타일을 선언하는 임베디드 스타일 방식이나 외부 스타일시트 방식에 끼워넣는 방식으로 적용할 수 있는데요. 문법은 아래와 같습니다.

<style type="text/css" media="screen">
  @import url("styles.css");

  ...other import statements or CSS styles could go here...

</style>

혹시 괄호 없이 선언된 코드를 본 적이 있겠지만 모두 같은 방식입니다.

중요한 것은 @import를 스타일시트에 끼워 넣을 때엔 반드시 첫 번째에 선언 되어야 한다는 것 입니다.

마지막으로 스타일 시트는 미디어 타입 설정을 포함할 수 있기 때문에 아래 코드 처럼 특정 미디어 타입을 명시하여 설정할 수 도 있습니다.

<style type="text/css">
  @import url("styles.css") screen;

  ...other import statements or CSS styles could go here...

</style>

혹시 이런 의문을 가진 적 있습니까? “어째서 내 HTML문서에 스타일을 적용하는데 외부스타일 시트를 이용하는 방식을 사용해야 하는가?”

물론 반드시 그렇게 해야 할 필요는 없습니다. 실제로 태그에 직접 style을 기입 한다 던지 임베디드 방식을 사용 하는 편이 작성자 입장에서는 오히려 더 편할 수도 있습니다.

어느 방식을 사용하느냐는 전적으로 여러분들에게 달렸지만 <link>를 이용한 방식은 현재까지 알려진(공인된) 가장 최상의 방식입니다.

<link>태그 대신 @import로 외부 스타일 시트파일을 요출하는 방식을 할 수도 있지만 이 방식은 브라우저 별로 아주 사소한 문제가 있습니다.

그리고 오래된 브라우저(IE4이하, 네스케이프4 이하)는 @import 에 대해 인식(받아들이지)하지 못하고 무시해 버립니다. 그래서 오래된 브라우저와 최신 브라우저에 대한 스타일 대응을 각각 하기 위해 @import를 사용하곤 합니다.
하지만 요즘은 IE와 네스케이프 4 버전 이하의 하위 호환성을 보장할 필요는 없습니다.

그리고 IE6 에서는 @import 선언 시 미디어 타입에 대한 선언을 인식하지 못합니다. 때문에 미디어 타입별로 다양한 스타일을 준비하기위해서는 @import방식은 그리 좋은 방식이 아닙니다.

혹시 많은 양의 스타일을 선언할 시에 @import 방식이 <link>선언 방식보다 코드 량이 작기 때문에 좋다라는 의견도 있지만 그 정도 차이는 무시할 수 있는 수준입니다.

이 글과 비슷한 종류의 글은 'CSS' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.