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

처음부터 다시 배우는

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

양용석(ugpapa@gmail.com)

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

강의 목차

1. CSS 기초 학습에 들어가기 앞서

2. CSS 기초

3. CSS를 적용하는 다양한 방법

4. 인라인 방식으로 스타일 적용

5. 임베디드(Embedded) 방식으로 CSS 적용

6. 외부파일에 의한 CSS 적용

7. 선택자 적용 정리


CSS 기초 학습에 들어가기 앞서
2부에서는 CSS에 대한 내용을 살펴보도록 하겠습니다.

웹 표준에서는 CSS가 가장 중요한 역할을 합니다. 특히 웹 개발자와 웹 디자이너는 반드시 CSS에 대
한 내용을 적어도 한 번은 학습을 해야 합니다. HTML이 웹 문서의 구조를 이룬다면, CSS는 웹 문서의
표현을 담당하기 때문입니다. 그렇기 때문에 웹 표준 사이트를 제작하기 위해서는 CSS가 반드시 필요
한 것입니다.

특히 이 책은 CSS2와 CSS3에 대한 내용을 한꺼번에 배우게 됩니다. CSS3는 CSS2의 연장선으로
CSS2에서 디자이너들이나 개발자가 요구했던 사항들이 대거 반영된 버전입니다. 특히 CSS3에 포함
된 border-radius와 같은 구문은 기존에 여러 편법을 통해 만들었던 것을 단 한 줄의 코드로 해결해 줄
수 있습니다.

CSS3 또한 HTML5와 같이 현재 진행형인 기술이기 때문에 모든 브라우저에 적용되진 않습니다. 하지
만 어떤 기능들이 있으며, 어떤 역할을 하는지에 대한 내용을 익히면, 향후 더욱 버전업 된 브라우저가
나오면 모든 기능이 대거 채용되기 때문에 한 번쯤은 미리 익혀 두는 것이 좋겠습니다.


CSS 기초
이번 장에서는 CSS(Cascading Style Sheet)가 어떻게 사용되고 적용되는지 살펴보겠습니다.

CSS1부터 최신 CSS3까지의 내용을 포괄하고 있습니다.

CSS를 자유롭게 다룰 수 있다는 것은 어떤 웹 문서도 디자이너가 원하는 모습으로 바꿀 수 있다는 것을
의미합니다. 즉, CSS를 잘만 활용하면 각자 전문 분야의 역할을 더 분명하게 할 수 있습니다. 기획자는
HTML로 문서의 뼈대를 잡고 디자이너는 CSS를 이용해서 웹 문서를 화려하게 만들어주며 프로그래머
는 만들어진 웹 문서로 웹 서버와 상호 커뮤니케이션을 할 수 있도록 해줍니다. 따라서 웹 표준 이전에
웹사이트를 개발할 때는 하나의 단계가 끝나야 다음 단계의 작업을 할 수 있었지만, 웹 표준으로 작업하
게 되면 동시 작업이 가능해지기도 합니다. 단, CSS가 웹 문서 내부에 있는 경우에는 동시 작업이 어렵
습니다.

이 장에서는 CSS를 활용할 수 있는 여러 가지 방법을 살펴보며 그 중에서 웹 표준에 맞는 게 어떤 건지
구체적으로 알아보겠습니다.


CSS를 적용하는 다양한 방법
CSS를 적용하기 위해선 먼저 선택자의 개념과 활용 방법을 알아야 합니다. 선택자는 영어로 Selector
라고 하고 속성이 적용되는 곳을 선택한다고 해서 선택자라고 합니다.

먼저 어느 항목에 원하는 속성을 지정하기 위해선 그곳을 선택하고 선택자에 속성을 부여하면 그 항목
에 대해서 원하는 속성이 적용됩니다.

그럼 선택자는 어떤 종류가 있으며, 어떨 때 어떤 선택자를 사용하는 살펴보겠습니다.

앞서 CSS를 통해 웹 문서에 디자인을 입힌다고 했습니다. 그럼 디자인을 어떻게 입힐까요? 그건 디자
인할 곳을 먼저 선택하고 선택된 곳에 해당 디자인 속성을 지정해 줌으로써 디자인이 되는 것입니다. 바
로 문서의 디자인 일부 또는 전체를 어떤 방식으로 결정지을 것인지를 선택하게 해주는 것이 선택자 입
니다. 따라서 여러 가지가 존재하겠죠?

이 선택자만 알아도 웹 문서를 꾸미는 데 문제가 없을 만큼 아주 중요하기 때문에 꼭 숙지해야 합니다.


CSS 선택자의 종류는 크게 다음 표와 같이 정리할 수 있습니다.

용어 내용 CCS에서 적용 방법
태그 선택자 HTML 태그에 속성 적용 p, table, body, header, nav 등 HTML 태그

클래스 선택자 .(콤마)로 시작하는 선택자 .classname(개발자가 이름 지정)

아이디 선택자 #(샵)으로 시작 #idname(개발자가 이름 지정)

p.classname / table.classname / p#idname
종속 선택자 선택자에 종속된 선택자
(이름 붙여서 사용)

p a / p .classname / p #idname
하위 선택자 선택자 내부의 모든 자식 선택자
( 선택자와 선택자 사이에 빈칸 )

전체 선택자 전체 문서에 영향을 줌 *(별표/아스테리크)

P, .classname, #idname, table
그룹 선택자 여러 선택자를 복합적으로 적용할 때
(각각의 선택자를 ,(콤마)로 분리)

자식 선택자 선택자 바로 밑의 자식 선택자 p > a / ul > li (보다 큰 기호 사용 )

h1 + p ( + 기호 사용 )
인접 선택자 붙어있는 선택자와 선택자에 특정 효과를 줄 때 사용

주) 표에서 표기한 / 기호는 CSS 에서는 사용하지 않습니다.
각 선택자를 분리하기 위해서 책에서 표시한 것일 뿐입니다.


위 표에서 설명한 선택자에서 가장 많이 사용하는 선택자는 다음과 같습니다.

태그 선택자, 클래스 선택자, 아이디 선택자, 종속선택자, 하위 선택자, 전체선택자, 그룹선택자 까지 웹
개발 실무에서 많이 사용합니다.

선택자는 CSS의 일부분입니다. 그럼 CSS는 문서에 어떻게 적용될까요?

보통 인라인 방식, embeded방식, import를 이용하는 방식 그리고 마지막으로 link를 이용하는 방식이

있습니다.

우선 CSS 적용 방식부터 알아보고 선택자에 대한 자세한 내용은 다음에 자세히 다루겠습니다.


인라인 방식으로 스타일 적용
인라인 방식으로 스타일을 적용하는 방법은 절대 권장하는 사항은 아닙니다. 하지만 바로 바로 스타일
이 적용되는 것을 볼 수 있기 때문에 로컬 컴퓨터에서 스타일이 적용되는 것을 확인하거나 5페이지 내
외의 간단한 웹 페이지를 만들어야 할 때 또는 웹 페이지를 메일로 전송할 때 이외에는 사용하지 말아야
합니다. 그 이유는 인라인 방식으로 사용하면 나중에 웹 페이지 유지 보수할 때 정말 힘들기 때문입니다.

인라인 방식은 다음과 같이 적용하는 것을 말합니다.

<p style="color:red;"> ... </p>

인라인 방식은 태그에 직접 스타일을 적용하는 것이기 때문에 어떻게 적용되는지 바로 확인할 수 있습
니다.

㈜ 인라인 방식도 반드시 익히시기 바랍니다. 템플릿 방식으로 서비스 되는 몇몇 호스팅 업체의 서비스인 경우 외부
CSS 를 불러오지 못하기 때문에, 인라인 방식으로 스타일을 처리해야 하기 때문입니다.


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">

<title>Windows 7과 Mac OSX 비교</title>

</head>

<body>

<h1>Windows 7과 Mac OSX 비교</h1>

<p>윈도우 7은 최신 버전의 윈도우로써, 이전 XP 이후 출
시된 비스타의 실패를 만회하고자,

... 중략 …

조금은 틀립니다. </p>

</body>

</html>

인라인 스타일 미 적용 코드 source/ch06/ex6-1.html


예제에서 <h1> ... </h1> 부분에 인라인 스타일을 적용해 보겠습니다.

<h1 style="size:24px; color:#06F; font-family:'돋움'; ">Windows 7과 Mac OSX 비교</h1>

바로 위와 같이 HTML 코드에 스타일을 적용해 보면 결과는 그림과 같습니다.

인라인 스타일로 문서에 CSS를 직접 적용하는
것은 권장하지 않습니다. 이 방법은 웹 표준 이
전 방식과 별 차이가 없습니다.

즉 HTML 문서와 CSS를 통해 문서의 구조와 디
자인을 분리하는 방법이 아니라 예전 방식으로
HTML 문서에서 모든 것을 처리하는 방법이기
때문입니다. 페이지가 얼마 안 되면 각각의 페
이지를 열어서 수정할 수 있지만, 일반적인 웹
사이트는 수많은 페이지가 존재하기 때문에 만
약 웹 문서의 디자인을 수정할 일이 생기면 수
<h1>에 인라인 스타일이 적용된 결과
정 자체가 불가능할 수 있습니다.


임베디드(Embedded) 방식으로 CSS 적용
인라인 방식보다 많이 사용하는 방법 중 하나는 임베디드(Embedded) 방식입니다. 임베디드 방식은 인
라인 방식처럼 직접적으로 태그에 스타일을 적용하는 것이 아니라 <head>와 </head> 태그 사이에 스
타일을 지정해서 사용하는 방법을 말합니다. 즉 HTML 문서 내부에 따로 스타일을 적용해서 태그 및 클
래스 등에 스타일을 지정하는 것을 말합니다. 일반적으로 스타일을 지정하는 방법은 다음과 같습니다.

<style type="text/ccs" media="screen">

h1 { color: #ffc; }

</style>

먼저 스타일의 형식을 text/css로 지정해 주고 media 타입을 지정합니다. 그리고 스타일 내부에서 태그
및 클래스 또는 아이디의 형식을 지정합니다.


<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<style type="text/css" media="screen">

h1 { size:24px; color:#06F; font-family:'돋움'; }

</style>

</head>

<body>


<p>윈도우 7은 최신 버전의 윈도우로써, 이전 XP 이후 출시된 비스타의 실패를 …

</body>

</html>

예제 1 임베디드 방식으로 스타일 적용


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1 style="size:24px; color:#06F; font-family:'돋움'; ">Windows 7과 Mac OSX 비교</h1>
...
응용프로그램인 경우 윈도우와 맥인 경우 동일한 것(어도비 포토샵, MS 오피스) 있지만, 매우 다른 프로그램들
이 존재하고, 사용법도 조금은 틀립니다. </p>
<p>윈도우 7은 최신 버전의 윈도우로써, 이전 XP 이후 출시된 비스타의 실패를 만회하고자…
</body>
</html>

예제 2 인라인 방식의 스타일 적용


[예제 1]과 [예제 2]의 차이점은 인라인 방식은 태그에 직접 적용한 것이고 임베디드 방식은 CSS 스타일
을 따로 지정했다는 점입니다.

현재 상태에서 결과는 동일합니다.

하지만 여기서 차이점이 하나 더 있습니다.

인라인 방식과 임베디드 방식에서 <h1> 태그로 감싼 구문이 하나 더 있을 경우 어떻게 될까요?

이 경우 결과는 완전히 다르게 됩니다. 인라인 방식의 경우 h1 태그에 인라인으로 적용한 부분만 스타
일이 적용되고 임베디드 방식인 경우 h1 태그에 있는 모든 곳에 값이 적용됩니다.

인라인 방식(왼쪽)과
임베디드 방식(오른쪽)의 차이


여기서 임베디드 방식에 인라인 방식과 똑 같이 처음에 나오는 h1에만 스타일을 적용하고 싶을 때는 어떻게 할
까요? 이럴 때는 클래스 선택자를 사용해 주면 됩니다. 클래스 선택자에 대해서는 따로 설명 드립니다.

.firsthead { size:24px; color:#06F; font-family:'돋움'; }

클래스 선택자의 시작은 .(점, 콤마)로 시작합니다. 이게 다른 선택자와의 차이점입니다. .(점)으로 시작하는 선
택자는 클래스 선택자다라고 기억하시면 됩니다.

CSS 내부에서는 .(점)으로 시작하고 HTML 문서에서는 class=”클래스 선택자 이름”으로 정의합니다. HTML
문서 내부에서는 .(점)을 빼고 이름만 사용합니다. 왜냐하면 앞 부분에 class= 이라고 클래스를 지정하는 문구가
나오기 때문입니다. 만약 class=”.클래스 선택자 이름”으로 지정하면 값이 적용되질 않습니다.

이렇게 스타일을 적용하고 해당 h1 태그에,

<h1 class="firsthead"> ... </h1>

이렇게 지정해 주면 인라인 스타일과 똑같이 스타일이 해당 h1에만 적용됩니다.


어떻게 보면 인라인 스타일을 적용하는 법과 동일합니다.
단 여기서는 클래스 이름을 지정해 주고 해당 클래스를 원하는 곳에 지정해 주는 것에서 차이가 있습니
다. 그것보다 더 큰 차이는 해당 클래스를 적용한 곳이 많으면 많을수록 수정하기가 쉬워진다는 것입니
다

만약 문서 안에 글꼴 크기를 24픽셀, 색상은 #06F로 지정하고 글꼴 모양을 돋움으로 지정한 곳이 100군
데가 있다고 합시다. 갑자기 디자인적으로 필요해서 색상을 다른 색으로 바꾸게 되었을 때, 인라인 방식
은 100군데를 전부 수정해야 하지만 클래스로 지정했을 경우 해당 클래스의 속성만 바꿔주면 한꺼번에
100군데가 수정되는 것입니다.

하지만 이런 임베디드 방식도 대형 사이트를 만들 때 사용하면 불편한 경우가 있습니다. 대형 사이트인
경우 디자인적인 요소도 많을 수밖에 없고 그에 따라 CSS 코드의 길이도 늘어날 수밖에 없습니다. 그렇
다면 CSS 코드의 길이가 제어하기 힘들 정도로 늘어날 경우에는 방법이 없을까요? (실제 업무에서
CSS 코드 길이만 200라인이 넘어가는 경우가 흔합니다.)
바로 외부에 CSS 파일을 별도로 저장하여 HTML과 파일 자체를 분리해주는 방법이 있습니다.


외부파일에 의한 CSS 적용
많은 사이트가 임베디드 방식을 사용하고 있지만 외부파일에 의해서 CSS 파일을 지정해 주면 사이트
관리가 더욱 편리합니다.

외부 파일에 의한 CSS 적용은 말 그대로 확장자가 .css인 파일을 외부에 저장해 놓고 HTML 문서에
@import 방식 또는 link를 통해서 불러오는 방법입니다.

임베디드 방식이 HTML 문서 내부에 스타일을 정의한 반면 외부파일에 의한 방식은 <head>와 </head>
사이에 연결 방법에 따라 다음과 같이 지정해서 CSS 스타일을 불러옵니다.

@import 방식

<style type="text/css" media="screen">

@import url(main.css);

</style>

link 방식

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


그렇다면, 외부에서 파일을 불러오는 방법을 왜 두 가지로 나눌까요?

첫 번째는 @import 방식은 아주 구식 브라우저에서 @import라는 구문을 이해하지 못합니다. 따라서
@import를 사용하면 구식 브라우저에서는 해당 CSS 파일을 적용하지 못하게 됩니다. 두 번째는
@import 구문을 사용하게 되면 CSS 파일 내부에서 다른 CSS 파일을 불러올 수 있습니다.

[그림 6-4]를 보면 main.css 파일에 문서의 기본이 되는 속성을 지정해 주고 company.css 파일에는 회
사 소개와 관련된 페이지의 디자인 속성이 있고 member.css 파일에는 회원 가입과 관련된 페이지 디자
인 속성을 지닌 스타일이 있다면 main.css 파일을 각각의 파일에서 import 해주면 됩니다.


main.css 파일에 아래와 같이 속성을 지정해 주고,
body {
padding:0;
margin:10px;
font:12px/14px Arial, Helvetica, sans-serif;
color: #333;
}
.firsthead { size:24px; color:#06F; font-family:'돋움'; }

company.css 파일에는 아래와 같이 속성을 지정해 주면,
@import url("main.css");
body {
background-color: #FF6;
}
.firsthead {
text-decoration: underline;
color: #F00;
}
company.html 파일에서는 company.css 파일 하나만 임포트 해도 main.css의 속성과 company.css 파일의 속성이 동시에 적용됩니다.


여기서 자세히 보시면 main.css 파일에 있는 .firsthead 클래스 선택자의 글꼴 색상 (color:#06f;)이
company.css (color:#f00;) 파일과 다릅니다. 이럴 경우에는 어떻게 적용될까요? main.css만 불러온 문
서와 main.css를 임포트한 company.css만 불러온 문서는 어떻게 보여질까요?

다음 페이지 그림에서 보면 main.css만 불러온 문서 파일과 main.css를 @import한 company.css 파일
을 불러온 문서 파일의 결과를 보실 수 있습니다.

CSS의 사전적 의미를 다시 한번 생각해 보세요. 계단식 스타일 시트, 즉 물이 위에서 아래로 내려오다
중간에 다른 색 물감을 풀어 놓으면 마지막에 도착한 물의 색은 중간에 풀어놓은 색으로 보여지게 됩니
다. 즉 main.css에서 지정한 색이지만 여기는 상단에 지정된 색이고 company.css에서 다른 색 물감을
풀어놓았으니 당연히 company.css 파일을 적용한 HTML 문서는 그 색으로 보여질 것입니다.

@import의 장점은 개별 CSS 파일을 서로 내부에서 불러올 수 있는 장점이 있습니다. 그래서 여러 개의
CSS 파일을 조합하여 하나의 css 파일로 만들어서 사용할 수도 있고 임베디드 방식으로 스타일을 적용
하면서 필요한 요소만 따로 @import 할 수도 있습니다.


<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"> charset=UTF-8">
<title>Windows 7과 Mac OSX 비교</title> <title>Windows 7과 Mac OSX 비교</title>
<style type="text/css"> <style type="text/css">
@import url("main.css"); @import url("company.css");
</style> </style>
</head> </head>
<body> <body>
<h1 class="firsthead">Windows 7과 Mac OSX 비교</h1> <h1 class="firsthead">Windows 7과 Mac OSX 비교</h1>
<p>윈도우 7은 최신 버전의 윈도우로써, 이전 XP 이후 출시 <p>윈도우 7은 최신 버전의 윈도우로써, 이전 XP 이후 출
된 비스타의 실패를 만회하고자, 마이크로소프트에서 출시 시된 비스타의 실패를 만회하고자, 마이크로소프트에서 출
한 … 중간 생략 … 시한 … 중간 생략 …

이전 페이지 화면 왼쪽에 있는 html 코드 이전 페이지 화면 오른쪽에 있는 html 코드

@import 를 사용하면 필요한 CSS 문을 따로 저장해서, 하나의 CSS 문서 처럼 보여줄 수 있는 장점이
있는데, 이것은 단점으로도 작용됩니다. 예를 들어 10개의 CSS 문이 있는데, 어떤 CSS 문을 하나의
CSS로 @import를 했는지 개별 CSS 문에 대한 정확한 계획이 없다면, 나중에 어떤 CSS가 무슨 역할을
하는지 몰라, 모든 CSS 문이 엉켜버리는 경우도 있기 때문입니다.


@import는 CSS 파일 내부에서도 임포트할 수 있지만, link는 개별적인 파일로 따로 따로 불러와야만 합
니다.

즉 HTML 문서 내부에 <head>와 </head> 사이에서,


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

이런 방식으로 별도 파일로 따로따로 불러와서 적용을 하게 됩니다.


link 방식은 임포트 방식처럼 css 파일 내부에 다른 css 파일을 링크할 수 없습니다. 임포트 방식의
company.css처럼,


body {

background-color: #FF6;

}

.firsthead {

text-decoration: underline;

color: #F00;

}

이런 식으로 내부에 다른 CSS 파일을 링크할 수 없습니다.


따라서 두 개의 CSS 파일을 불러와야 하는 경우에는 따로 <head>와 </head> 파일에서,


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

이렇게 두 개를 개별적으로 불러와야 합니다.

두 개의 방식은 사용법에서 별 차이는 없습니다. 하지만 개발자는 link를 사용하길 권합니다. 그것은
@import보다는 link를 사용하는 것이 css 파일을 불러올 때 속도적인 면에서 유리한 측면이 있습니다.
개인적으로도 웹사이트를 만들 때 @import보다는 link 방식을 많이 사용합니다. 아주 미세한 차이지만
속도면에서 link를 사용할 때 웹사이트가 더 빠르게 로딩되는 것을 피부로 느꼈기 때문이며, 사이트 관
리시 link를 사용하는 것이 많은 CSS 파일을 관리할 때 유리합니다.


선택자 적용 정리
여기서 선택자를 적용하는 방법에 대해서 간단하게 정리하고 다음으로 넘어가겠습니다.
선택자를 적용하는 방법은 4가지 방법이 있습니다.
 인라인방식
 임베디드 방식
 @import 를 이용하는 방식
 link를 이용하는 방식
여기서 추천하는 방식은 link 와 @import를 이용하는 방식이며, 다음으로 많이 사용하는 방식이 임베디드 방식입니다. 여
기서 절대적으로 추천하지 않는 방식은 인라인 방식입니다.
인라인 방식은 각각의 태그에 직접적으로 값을 적용하기 때문에, 개발할 때 편리할 수 있으나, 나중에 코드를 수정할 때
는 정말 고생하는 방식입니다. (하지만 상황에 따라 할 수 없이 인라인 방식을 사용할 수 밖에 없는 경우도 있음)
임베디드 방식은 HTML 문서 내부에 있는 <head> 와 </head> 태그 내부에 <style> .. </style>을 이용해서 스타일을 적용
해 주는 것입니다. 일반적으로 단일 문서인 경우에, 또는 개발의 편의를 위해서 사용하는 경우가 많습니다.
또한 @import 와 link 방식은 외부에 따로 CSS 파일을 저장해 놓고 import를 하던지, 아니면 link를 통해 해당 CSS 파일
을 문서에 적용하는 방식입니다. @import 방식은 CSS 내부에 다른 CSS 문서들을 @import 방식으로 불어와서 마치 하
나의 CSS 파일처럼 사용 가능합니다. link는 @import 처럼 여러 CSS 문서들을 하나의 CSS 문서처럼 사용할 수 없지만,
속도 면에서 @import 방식보다 빠른 잇점이 있습니다. 이런 차이점을 염두에 두고 사용하실 때 현재 개발하는 웹 문서
에 적합한 방식을 적용하면 됩니다.

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (11)

Ähnlich wie 처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차

Ähnlich wie 처음부터 다시 배우는 HTML5 & CSS3 강의자료 8일차 (20)

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