처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차

처음부터 다시 배우는

HTML5&CSS3
실전 웹 표준 사이트 제작까지

양용석(ugpapa@gmail.com)

처음부터 다시 배우는 HTML5 & CSS3

강의 목차

1. 케스케이딩 스타일 시트(CSS) 이해하기

2. CSS의 진화 과정

3. CSS와 HTML의 상호작용 원리

4. CSS 일반 규칙과 CSS3에서 추가된 속성

5. 클래스 선택자와 아이디 선택자의 차이점


케스케이딩 스타일 시트(CSS) 이해하기
우리가 MS워드나 한글워드를 사용해서 문서를 작성할 때 스타일을 항상 적용합니다. 스타
일은 문서를 더 보기 좋게 꾸며주고 다른 사람이 글을 읽을 때 더 편하게 만들어 주는 역할
을 합니다. 스타일은 문서의 양식이라고 보면 됩니다.
문서의 글꼴 크기를 정하며 색을 바꾸고 두께를 지정하는
역할을 합니다. 또한 문서의 타이틀을 정하며 머리말과
꼬리말 등을 정하는 역할을 합니다.
한글과 MS워드에서도 스타일을 지정하는
메뉴가 있습니다.

MS워드에서 스타일 적용
한글워드에서 스타일 적용


문서에 별도의 스타일을 적용하게 되면 원래 만든 문서의 디자인을 쉽게 바꿀 수
있습니다. 그래서 문서를 작성할 때는 항상 본문과 타이틀에 대해서 정확하게 지
정해 줘야 합니다. 그래야 문서를 바꿀 때 한꺼번에 스타일을 바꿀 수가 있기 때
문입니다. CSS는 워드프로세서의 스타일을 웹에 적용한 것이라고 보면 이해하
기 쉽습니다.

웹 페이지의 한 페이지에만 적용할 수도 있고 전체 웹사이트에 적용할 수도 있습
니다. 케스케이딩 스타일 시트란 단어 자체는 계단식 스타일 시트라는 말입니다.
즉 맨 위에서부터 아래까지 계단식으로 적용된다는 뜻을 갖고 있습니다.

CSS 자체는 HTML의 보조적인 역할을 합니다.
HTML이 문서의 구조를 담당한다면 CSS는 문서의 디자인적인 요소를 담당한다
는 것이죠.


과거의 HTML 문서를 보면 문서 내에서 직접 코드에 속성을 적용했습니다.
예를 들어, 아래와 같이 일일이 HTML 코드에 속성을 직접 지정했습니다.

<font face="굴림" size="14px" color="red"> 글자속성 </font>

하지만 CSS에서는, 아래와 같이 CSS를 만들어 놓고,

.font1 {
font-family: "굴림";
font-size: 14px;
color: #F00;
}

다음과 같이 HTML에서 속성을 정의해 주면 됩니다.

<span class="font1">글자 속성</span>


과거의 HTML 문서 방식의 문제점은 웹 페이지가 몇 개 안 되면 문제가 되지 않
지만 10페이지를 넘어 100페이지 이상이 되었을 때 “글자속성”을 적용해준 부분
의 색을 변경하려면 100페이지를 전부 열어서 수정해야 한다는 것이었습니다.

CSS를 적용하게 되면 단순하게 CSS 코드에서 해당 부분만 수정하면 모든 페이
지에 적용됩니다.

이렇게 CSS를 이용하면 하나의 스타일을 가지고 모든 페이지에 같은 속성을 지
정해 줄 수 있기 때문에 작업 시간도 단축될 뿐만 아니라, 예전에는 자바스크립
트를 써서 만들었던 간단한 HTML 효과를 단순히 CSS만으로도 처리할 수 있습
니다.

또한 CSS3에 이르러서는 이미지 파일을 이용하지 않고서도 많은 그래픽적인 요
소를 CSS만으로 처리할 수 있는 막강한 기능들이 있습니다.


CSS의 진화 과정
CSS는 W3C라는 국제적인 기관과 브라우저를 만드는 기업의 연계를 통해 규격을 정하고 있습니다. 현재 최신의 브라우저는 전부
CSS2의 규격을 준수하고 있습니다.

하지만 CSS3는 현재 일부 브라우저에서만 지원되고 있는 실정입니다. 대표적으로 Internet Explorer의 경우에는 현재 버전 9부터
CSS3가 지원됩니다. CSS3가 지원되는 브라우저는 현재 파이어 폭스, 사파리, 오페라 그리고 크롬 등의 최신 버전입니다. 하지만
모든 최신 브라우저에서 CSS3의 기능이 완벽하게 동작하는 것은 아닙니다.

예를 들어 IE9에서는 gradient(그라데이션) 기능은 CSS3에서 지정한 방식대로 동작하지 않습니다. CSS1은 1996년 W3C에 의해서
공식 발표되었으며, 단순하게 글꼴을 정의하거나 텍스트 정렬 방식 그리고 마진 값에 대한 정의 정도만 지정하는 역할을 했습니다.
넷스케이프4 버전과 IE 3, 4 버전에서 지원되었습니다.

CSS2는 1998년에 규격이 발표되었으며, 거의 모든 브라우저에서 채택되었습니다.

글꼴 속성에서 텍스트 포맷 그리고 마진과 패딩 등 현재 사용하는 CSS에 대한 모든 규격이 포함되어 있습니다.

그리고 2006년에는 CSS2.1 버전이 공개되어 이전에 있는 버그가 고쳐졌으며, 서서히 CSS2를 교체해 나가고 있습니다. 최신의 브
라우저에서는 CSS2.1 버전이 지원됩니다.

CSS3는 현재도 개발 중에 있으며, W3C 산하의 CSS Working Group에 의해서 규격이 정해지고 있으며, 현재는 워킹 그룹 내의 일
정에 따라 개발이 진행되고 있습니다.


CSS와 HTML의 상호작용 원리
초창기 HTML이 세상에 처음 나왔을 때는 HTML만 존재하고 CSS는 존재하지
않았습니다. 그래서 모든 웹 페이지는 HTML로만 이루어져 있었습니다.

하지만 모든 웹 페이지들이 HTML로만 만들어지다 보니 문제점이 나타나기 시
작했습니다. 사이트가 커지기 시작하면서부터, 관리의 효율성과 원래 의도했던
태그가 엉뚱한 방향으로 사용되기 시작했습니다.

대표적인 예가 table 태그입니다. 이 태그는 표를 만들기 위한 용도인데, 웹 페이
지의 레이아웃을 잡는 데 사용되기 시작했습니다.

또한 여러 가지 태그가 원래 지정했던 용도 이외의 다른 용도로 사용되어 디자인
을 위해 사용되는 쓸모 없는 코드가 늘어나기 시작하였습니다.
따라서 웹 페이지의 파일 사이즈가 커져 네트워크에 대한 부담이 늘어나게 되었
습니다.


이에 따라 W3C에서는 HTML을 디자인과 구조로 분리하자라는 논의가 나왔고
CSS는 웹 페이지의 디자인을 담당하고 HTML은 순수하게 문서의 구조를 담당
하게 되었습니다. 자바스크립트 또한 웹 페이지의 중요한 구성요소로서 HTML +
CSS + JavaScript의 구조로 웹 페이지가 이루어지게 되었습니다.

이 세 가지 요소는 불가분의 관계로서 현재는 이들이 없는 웹 페이지는 거의 존
재하지 않습니다. 간단하게 말하면, HTML은 웹 페이지의 뼈대가 되는 것이고
CSS는 뼈대를 포장하는 살(피부)이 되고 JavaScript는 이 둘을 움직이는 근육이
되는 것입니다.

이렇게 3가지 요소가 상호 작용함으로써 현재 우리가 보는 웹 페이지가 완성되
는 것입니다.


CSS만 변경하더라도 전체적인 디자인을 쉽게 바꿀 수 있는데, 이런 예를 단적으
로 보여주는 사이트가 http://www.csszengarden.com/입니다.

http://www.csszengarden.com

앞장의 두 개의 그림에서 보이는 사이트는 완전히 다른 사이트처럼 보이지만 자
세히 살펴보면 내용(텍스트 및 메뉴 명)은 동일하다는 것을 알 수 있습니다.
여기서 소스를 통해 한번 비교해 보겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head> <head>
… …
중간 생략 중간 생략
… …
 http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script> <script type="text/javascript"></script>
<style type="text/css" title="currentStyle" media="screen"> <style type="text/css" title="currentStyle" media="screen">
@import "/001/001.css"; @import "/213/213.css";
</style> </style>
<link rel="Shortcut Icon" type="image/x-icon" <link rel="Shortcut Icon" type="image/x-icon"
href="http://www.csszengarden.com/favicon.ico" /> href="http://www.csszengarden.com/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="RSS" <link rel="alternate" type="application/rss+xml" title="RSS"
href="http://www.csszengarden.com/zengarden.xml" /> href="http://www.csszengarden.com/zengarden.xml" />
</head> </head>
… …
중간 생략 중간 생략


두 개의 소스를 직접 확인해 보면 볼드체로 되어 있는 부분만 빼고는 완벽하게
소스는 동일합니다. 이 볼드체 처리한 부분이 CSS 코드가 있는 곳입니다.
비교해 보면 다음과 같습니다
<style type="text/css" title="currentStyle" media="screen">
@import "/001/001.css";
</style>

<style type="text/css" title="currentStyle" media="screen">
@import "/213/213.css";
</style>

위의 코드를 보면 다른 부분도 다 똑같고 @import라고 되어 있는 부분의 CSS 파일명과
경로명이 다르다는 것을 알 수 있습니다. 이것은 무슨 말인가 하면, @import 를 통해 css
파일을 웹 문서에 적용하는데, 웹 문서 즉 html 파일 내부에 001.css 파일을 불러와서 앞
장 그림(뒤쪽 )처럼 보이는 것이고 213.css 파일을 불러와서 앞장 그림(앞쪽 )와 같이 보
이는 것입니다

이렇게 단순히 CSS만 변경했는데, 완벽하게 다른 사이트처럼 보이게 되는 것입니다.
CSS를 이용하게 되면 향후 사이트의 디자인을 전면적으로 바꿀 때, HTML 소스 자체는
거의 건드리지 않고 디자인 전체를 변경할 수 있습니다.


CSS 일반 규칙과 CSS3에서 추가된 속성
CSS는 세 가지 방식으로 적용할 수 있습니다.
먼저 HTML 코드에 직접 적용(태그 선택자)하는 법,
클래스(Class) 선택자를 만들어서 적용하는 법,
그리고 아이디(ID) 선택자를 만들어서 적용하는 법으로 나눌 수 있습니다.

HTML 코드에 직접 적용하는 방법은 이렇습니다.(태그 선택자)

p { font-family:"굴림"; color:#ccc; font-size:12px; }

위와 같이 CSS를 정의해 주면 아래와 같이 p 태그로 감싼 HTML 내의 본문에 전
부 해당 속성이 적용됩니다.

<p> ... </p>


클래스 선택자를 이용하는 방법은 다음과 같습니다.
CSS 내부에 다음과 같은 방법으로 속성을 정의합니다.

.myClass { font-size:14px; color:#fcf; }

클래스는 처음 시작을 “.(점)”으로 합니다. 클래스는 어떤 이름을 만들어서 사용
하든지 상관은 없습니다.
단지 개발자가 알아보기 쉽게 명칭을 정해주는 것이 중요합니다. 또한 클래스는
문서 내에서 반복적인 부분에 사용하는 것이 좋습니다. 문서의 구조를 나타낼 때
클래스는 비교적 작은 부분(선택 범위가 작은 부분)에 적용될 수 있도록 사용하
기를 권합니다.
HTML 문서내부에서 사용법은 아래와 같습니다.

<div class="myClass"> ... </div> 또는 <span class="myClass"> ... </div>


아이디 선택자는 “#(샵)”으로 시작합니다.
아이디 선택자와 클래스 선택자는 동일한 작용을 합니다. 문서의 양식을 표현할
때 아이디 선택자를 사용하나 클래스 선택자를 사용하나 동일한 효과를 줍니다.
하지만 아이디 선택자는 큰 틀을 구성하는 곳에 사용하는 것이 좋습니다.
특히 문서 내에서 큰 레이아웃을 잡을 때 아이디 선택자를 사용하는 것이 좋습니
다.
아이디 선택자의 사용법은 다음과 같습니다.

CSS 속성에서는 다음과 같이 정의합니다.

#myID { margin:10px; padding:5px; }

HTML 문서 내부에서는 다음과 같이 적용합니다.

<div id="myID"> ... </div>


CSS의 구성요소를 그림으로 나타내면 다음과 같습니다.


CSS3에서 추가되거나, 새로운 기능이 추가된 사항은 다음의 표와 같습니다.
CSS 속성 값 내용

테두리의 색을 다양하게 적용할 수 있습니다. 또한 테두리에 이미지를 넣을 수 있고 모서리를 둥그렇게 적
Borders
용할 수 있습니다.
하나의 태그에 다중 이미지를 추가할 수 있고 백그라운드의 위치를 정확하게 잡을 수 있습니다. 또한 백그
Backgrounds
라운드의 사이즈도 조절할 수 있습니다.

Color 색의 농도(투명도)를 조절할 수 있습니다. 또한 RGB 색과 인쇄용인 HSL 컬러로 색을 지정할 수 있습니다.

텍스트에 그림자 효과를 줄 수 있습니다. 또한 단어가 잘리는 효과(word-wrap)를 줄 수 있으며, 텍스트 ove
Text
rflow 효과를 줄 수 있습니다.

Transformations 변형효과(크기조절, 기울기 효과, 회전효과 등)를 줄 수 있습니다.

박스에 그림자를 적용할 수 있고 사이즈 조절이 가능하며 세로축과 가로축을 기본으로 overflow를 각각 조
Box
절할 수 있습니다.

Content 요소(Element)에 직접적으로 콘텐츠를 지정해서 스타일을 줄 수 있습니다.

Opacity 요소(Element)에 투명도를 지정할 수 있습니다.

CSS2에서 사용하던 media를 다양하게 해상도나 색상 등 여러 가지 요소를 지정해 줄 수 있게 되었습니다
Media
.

Web fonts 웹 폰트가 정식으로 지원됩니다. 지금까지는 IE에서만 지원되었던 것이 모든 브라우저에서 지원됩니다.

CSS3에 새롭게 추가된 속성들


CSS3에서 가장 큰 특징 중 하나인 border는 둥근 테두리를 만들 수 있으며, 테두리에 배경
이미지(IE9 제외)를 넣을 수 있습니다. 또한 각 방향으로 전부 다른 색을 지정할 수 있습니
다. 여기서 간단하게 border에 속성을 적용해 보고, box에 그림자 효과를 넣은 예제를 보겠
습니다.

source/ch04/pic4-7.html

border 속성 적용(IE9)

IE9에서는 border에 백그라운드 이미지가 적용되지 않습니다
만, 다른 브라우저에서는 백그라운드 이미지가 적용됩니다.
border 속성 적용(Firefox)


CSS3에서는 백그라운드 이미지 사이즈를 조절할 수 있습니다. 그리고, 하나의 백그라운
드에 또 다른 백그라운드를 이중으로 적용할 수 있습니다. 예제에서 보는 백그라운드 이미
지는 전부 동일한 크기를 지니고 있습니다.


첫 번째 이미지는 백그라운드 사이즈를 줄인 것
이며, 두 번째 이미지는 원래 크기의 백그라운드
이미지이며, 마지막 이미지는 두 개의 백그라운
드 이미지를 겹친 것 입니다.


CSS3에서는 투명한 효과(Opacity)를 줄 수 있습니다.

박스뿐만 아니라 글자(텍스트)에도 투명효과를 줄 수 있습니다. 투명 효과를 주기 위해서는 색을
지정할 때 RGB 컬러 또는 HSL 컬러로 값을 지정해 줘야 합니다. HSL 컬러보다는 일반적으로
RGB 컬러가 많이 사용되는데, Red, Green, Blue의 축약형이 RGB 컬러이며, 값은 0부터 255까
지 각 색별로 부여되어 있습니다. HSL은 Hue, Saturation, Lightness의 약자이며, 색조, 채도, 밝
기를 나타냅니다. H는 0에서 300까지 나머지 S와 L은 0에서 100까지 값을 가집니다.

그리고 opacity를 나타낼 때는 0부터 1까지로 표시해 주는데, 0은 완전 투명 0.5는 중간, 1은 불투
명을 뜻합니다. 그래서 색상을 지정할 때는 color:rgba(255,255,255,0.5); 이렇게 표시해 주게 됩
니다.

다음페이지에 있는 예제 이미지를 보시면 배경이미지 위에 반투명의 박스가 있으며, 그 아래
BIG FONTS라는 텍스트에도 투명도가 지정된 것을 볼 수 있습니다.



투명 배경 적용

글자(텍스트)에 투
명도 적용



transformation은 말 그대로 변형을
나타내는 말입니다. 박스를 기울게
하거나, 회전이 가능하게 처리할 수
있습니다.

화면에서 보면 첫 번째 화면이 일반
적인 박스 이미지이며, 다음 박스는
기울이기(skew)가 적용된 모습이며,
마지막은 회전(rotation)이 적용된 화
면의 모습을 확인할 수 있습니다.

각 예제에 따른 소스는 직접 다운 받아 브라우
저에서 소스 코드 보기를 통해 소스를 확인해
보시기 바랍니다.



표에서 CSS3에서 추가된 속성이라고 했지만, 현재 모든 브라우저에서 정확
하게 모든 속성이 적용되지는 않습니다.
즉 현재 HTML5와 CSS3는 확정형이 아닌 진행형입니다. 그리고 각 브라우저 개발업체에서도 계속해서 새로운
브라우저를 출시할 예정이기 때문에, 조만간 모든 브라우저에서 CSS3에서 새롭게 추가된 속성을 지원할 것으
로 생각합니다.

강의에서는 표에 언급한 CSS3 속성 중 모든 브라우저에서 공통적으로 사용 가능한 속성들만 다루도록 하겠습
니다.

이번 강의에서는 CSS가 어떻게 동작하는지 그리고 CSS Zen garden을 통해서 CSS의 강력함을 보았습니다.
이렇게 CSS만 바꿈으로써, 사이트의 구조는 유지하고 전체 웹사이트 디자인을 바꿀 때 HTML 태그만을 이용한
웹사이트 디자인보다 유연하고 빠른 시간 내에 디자인을 변경할 수 있습니다.
또한 실무적으로도 CSS에 완벽하게 적응되면, 이전 방식(HTML 태그만 이용)은 더 이상 사용할 수 없을 정도로
편리합니다.


클래스 선택자와 아이디 선택자의 차이점
CSS와 관련해서 .(클래스)와 #(아이디) 선택자에 대해서 많은 분들이 처음에 이해하기 힘들어 합니다.
왜 하나의 선택자에 대한 정의만 해주지 두 개의 선택자를 만들어서 사람 헷갈리게 만드냐고 하는 말들
이 많습니다. 간단한 예를 하나 들어 보겠습니다.

.apple이라는 클래스 선택자와 #apple이라는 아이디 선택자는 다릅니다. 명백히 다른 문자인 것을 알
수 있습니다. 클래스 선택자는 점으로 문자가 시작됐으며, 아이디 선택자는 샵(#)으로 문자가 시작되었
기 때문입니다.

웹사이트를 개발하다 보면 이런 식의 레이아웃을 정의하는 단어를 많이 만들어야 합니다. 그러다 보면,
개발자들이 알기 쉬운 단어로 사이트 요소 요소를 정의해 줘야 하는데, 많은 단어를 사용하다 보면 사용
하는 단어의 한계에 부딪힐 수 있습니다. 그럴 경우 같은 이름을 사용하더라도, 앞에 오는 특수 문자에
따라 달리 사용해서 그 의미를 “.(점)으로 시작하는 것은 반복되는 속성을 지정할 때 사용하고, #(샵)이
라는 속성을 가진 선택자는 큰 레이아웃을 잡을 때 사용되는구나.”라고 파악한다면, 적은 수의 단어만
사용해서 정의해줄 수 있고 전체 문서의 구조를 살펴 보더라도 의미 파악이 쉬울 수 있습니다.

처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차

Similar to 처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차 (20)

Recently uploaded

Recently uploaded (7)

처음부터 다시 배우는 HTML5 & CSS3 강의자료 5일차