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

처음부터 다시 배우는

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

양용석([email protected])

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

강의 목차

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

2. CSS 의 진화 과정

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

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

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


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

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


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

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

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


케스케이딩 스타일 시트 (CSS) 이해하기과거의 HTML 문서를 보면 문서 내에서 직접 코드에 속성을 적용했습니다 .예를 들어 , 아래와 같이 일일이 HTML 코드에 속성을 직접 지정했습니다 .

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

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

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

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

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


케스케이딩 스타일 시트 (CSS) 이해하기과거의 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 태그입니다 . 이 태그는 표를 만들기 위한 용도인데 , 웹 페이지의 레이아웃을 잡는 데 사용되기 시작했습니다 .

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


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

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

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


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

http://www.csszengarden.com


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

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

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


CSS 와 HTML 의 상호작용 원리두 개의 소스를 직접 확인해 보면 볼드체로 되어 있는 부분만 빼고는 완벽하게 소스는 동일합니다 . 이 볼드체 처리한 부분이 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 일반 규칙과 CSS3 에서 추가된 속성클래스 선택자를 이용하는 방법은 다음과 같습니다 . CSS 내부에 다음과 같은 방법으로 속성을 정의합니다 .

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

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

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


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

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

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

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

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


CSS 일반 규칙과 CSS3 에서 추가된 속성CSS 의 구성요소를 그림으로 나타내면 다음과 같습니다 .


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

CSS 속성 값 내 용

Borders테두리의 색을 다양하게 적용할 수 있습니다 . 또한 테두리에 이미지를 넣을 수 있고 모서리를 둥그렇게 적용할 수 있습니다 .

Backgrounds하나의 태그에 다중 이미지를 추가할 수 있고 백그라운드의 위치를 정확하게 잡을 수 있습니다 . 또한 백그라운드의 사이즈도 조절할 수 있습니다 .

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

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

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

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

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

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

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

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

CSS3 에 새롭게 추가된 속성들

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


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

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

border 속성 적용 (IE9)

border 속성 적용 (Firefox)

source/ch04/pic4-7.html


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


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


CSS 일반 규칙과 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 라는 텍스트에도 투명도가 지정된 것을 볼 수 있습니다 .


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

투명 배경 적용

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



CSS 일반 규칙과 CSS3 에서 추가된 속성transformation 은 말 그대로 변형을 나타내는 말입니다 . 박스를 기울게 하거나 , 회전이 가능하게 처리할 수 있습니다 .

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

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



CSS 일반 규칙과 CSS3 에서 추가된 속성표에서 CSS3 에서 추가된 속성이라고 했지만 , 현재 모든 브라우저에서 정확

하게 모든 속성이 적용되지는 않습니다 .

즉 현재 HTML5 와 CSS3 는 확정형이 아닌 진행형입니다 . 그리고 각 브라우저 개발업체에서도 계속해서 새로운

브라우저를 출시할 예정이기 때문에 , 조만간 모든 브라우저에서 CSS3 에서 새롭게 추가된 속성을 지원할 것으로

생각합니다 .

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

이번 강의에서는 CSS 가 어떻게 동작하는지 그리고 CSS Zen garden 을 통해서 CSS 의 강력함을 보았습니다 .

이렇게 CSS 만 바꿈으로써 , 사이트의 구조는 유지하고 전체 웹사이트 디자인을 바꿀 때 HTML 태그만을 이용한

웹사이트 디자인보다 유연하고 빠른 시간 내에 디자인을 변경할 수 있습니다 .

또한 실무적으로도 CSS 에 완벽하게 적응되면 , 이전 방식 (HTML 태그만 이용 ) 은 더 이상 사용할 수 없을 정도로

편리합니다 .


클래스 선택자와 아이디 선택자의 차이점 CSS 와 관련해서 .( 클래스 ) 와 #( 아이디 ) 선택자에 대해서 많은 분들이 처음에 이해하기 힘들어 합니다 .

왜 하나의 선택자에 대한 정의만 해주지 두 개의 선택자를 만들어서 사람 헷갈리게 만드냐고 하는 말들이 많습니다 . 간단한 예를 하나 들어 보겠습니다 .

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

웹사이트를 개발하다 보면 이런 식의 레이아웃을 정의하는 단어를 많이 만들어야 합니다 . 그러다 보면 ,

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

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

Technology