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

처음부터 다시 배우는

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

양용석(ugpapa@gmail.com)

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

강의 목차

1. 선택자의 개념과 활용

2. 태그 선택자

3. 클래스 선택자

4. 아이디 선택자


선택자의 개념과 활용
이제 CSS의 핵심인 다양한 선택자에 대해 알아보겠습니다. 웹 표준에서 CSS의 역할은 문서와 표현을
분리해주기 때문에 아주 중요합니다. 그 핵심적인 요소가 선택자입니다.

선택자의 사용법을 정확하게 파악하면 사이트를 개발할 때나 관리할 때 정말 편리하고 빠르게 웹 페이
지를 만들고 수정할 수 있습니다. 그렇기 때문에 선택자는 반드시 하나 하나 어떻게 사용하는지 정확하
게 익히셔야 합니다.

선택자는 다음과 같은 선택자들이 있습니다.

• 태그 선택자 • 종속 선택자 • 전체 선택자
• 클래스 선택자 • 하위 선택자 • 자식 선택자
• 아이디 선택자 • 그룹 선택자 • 인접 선택자


태그선택자
태그 선택자는 말 그대로 HTML 태그를 선택자로 사용하는 것입니다. 각종 HTML 태그에 속성을 부여해
서 전체적인 페이지의 레이아웃을 잡아줄 수 있습니다. 예를 들어 <h1>...</h1>이라는 태그가 있다면,

h1 {

font-size: 20px;

color: #F00;

margin:10px;

}

이런 속성을 부여해 주면 <h1> ... </h1> 태그가 적용된 부분에는 동일한 속성이 적용됩니다.


태그선택자
<!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>태그 선택자</title> <title>태그 선택자</title>
</head> <style type="text/css">
<body> h1 {
<h1>Mac OSX 와 Windows 7 </h1> font-size: 20px;
<p>최근 아이폰이 스마트폰의 절대강자로 대두되면 color: #F00;
서, 맥킨토시에 대한 관심도 더불어 상승하고, 이전과 다 margin:10px;
르게 맥을 사용하는 사용자들이 많아졌습니다.<br> }
하지만 …</p> h2 {
<h2>Mac OSX</h2> font-size:14px;
<p>맥오에스텐은 현재 스노우레오퍼드 10.6 버전이 최 color:#36F;
신버전입니다.<br> margin:5px;
맥오에스텐은 2002년 출시해서…</p> }
</body> p{
</html> font-size: 12px;
color: #333;
margin:5px;
}
어떤 속성도 지정되지 않은 순수한 HTML 문서 </style>
</head>
<body>
<h1>Mac OSX 와 Windows 7 </h1>
…

태그 선택자에 스타일을 적용한 HTML 문서


태그선택자

스타일 미 적용(왼쪽) 태그 선택자에 스타일 적용(오른쪽)

결과는 단순하게 태그에 속성을 부여하는 것만으로도 전체적인 문서에 변화를 줄 수 있다는 것을 보
여줍니다. 태그 선택자는 HTML 태그에 속성을 부여하는 것이기 때문에 굳이 어떠한 정의(이름 지정)
를 하지 않아도 됩니다. 아주 쉽고 문서 전체에 영향을 줄 수 있는 선택자가 바로 태그 선택자입니다.
정리하면 HTML 태그(p, table, body, ul, li 등)를 선택자로 사용하는 것입니다.
태그 선택자는 간단하여 이 정도만 숙지해도 충분합니다. (많이 사용하는 선택자 중 하나입니다.)


div와 span 태그
실제 div와 span이 해주는 역할은 html 태그가 어떤 특정 값을 지니는 것과 다르게, 아무런 속성이 없다
는 것입니다.
즉 단독으로 사용할 때 css에서 어떤 속성이 부여되기까지는 html 문서 내부에 아무 곳에나
<div > </div> 또는 <span> </span> 을 적용해도 변하는 것은 아무것도 없습니다.
단 div는 블록 태그이기 때문에 <div>와 </div> 사이의 내용은 블록으로 지정됩니다. 인라인은 인라인
스케이트의 바퀴들이 한 줄로 되어 있듯이 한 줄로 되어 있는 부분을 인라인이라고 하고, 블록은 하나의
박스라고 생각하면 됩니다.

블록에 적용할 때의 방식입니다.
<div class=“headline”>...</div> 또는 <div id=“headline”>...</div>

인라인에 적용할 때의 방식입니다.
<span class=“headline”>...</span> 또는 <span id=“headline”>...</span>
하지만 span 일 경우 id 선택자를 사용하는 경우는 많지 않습니다.


클래스 선택자
태그 선택자가 HTML 태그에 직접 속성을 부여한다면, 클래스 선택자(class selector)는 사용자가 직접
이름을 만들어 속성을 지정합니다. 클래스 선택자는 다음과 같이 정의합니다.

.classname {속성값; }

클래스 선택자의 시작은 반드시 .(점)으로 시작해야 하며 첫 문자는 영문자로 시작해야 합니다. 소문자
와 대문자는 구분을 합니다. 또한 속성과 속성 사이는 ;(세미콜론)으로 구분합니다.

예를 들어 .headline{font-size:20px;}과 .HEADLINE{font-size:30px;}은 서로 다른 선택자입니다. 마찬가
지로 .Headline{font-size:40px;} 또한 다른 선택자입니다.

클래스 선택자의 중간에는 숫자 및 몇몇 특수문자도 사용할 수 있습니다. 하지만 반드시 첫 글자는 영문
자여야만 작동합니다. 클래스 선택자는 사용자가 원하는 속성을 지정해주고 태그나 div 또는 span을 이
용해서 값을 지정해 주면 됩니다.


클래스 선택자
아래의 코드를 <style> 태그 안쪽 아무 곳에나 삽입하고,

.headline {

color: #333;

border:1px solid #999;

margin:25px;

padding:10px;

}

아래와 같이 해당 클래스를 적용하면 다음 페이지의 그림과 같은 결과가 나타납니다.

<p class="headline">윈도우 7은 전작인 윈도우 비스타의 불편함을 개선하고, 또한 사용자 편의를 위해
서 이전 버전에 비해 많은 부분이 보강되었습니다.</p>


클래스 선택자

클래스 선택자 적용 부분

source/ch06/pic6-7.html

클래스 태그는 단독으로도 사용할 수 있지만, 종속 선택자로도 사용할 수 있습니다.
종속 선택자에 대한 설명은 „종속 선택자‟에서 배우겠습니다.


아이디 선택자
아이디 선택자(ID selector)는 클래스 선택자와 동일한 역할을 합니다. 동일한 역할을 하는데 굳이 아이
디 선택자와 클래스 선택자를 구분해서 사용하는 이유가 뭘까요?

아이디 선택자는 화면상에서 큰 레이아웃을 잡을 때 사용하고 클래스 선택자는 세부 내용에 디자인 속
성을 부여할 때 사용합니다. 같은 역할을 하는데, 이렇게 구분한 이유는 디자이너나 개발자들이 한눈에
문서의 구조를 파악할 때, 아이디 선택자를 문서 구조 잡는 곳에 사용하게 되면 “여기는 문서의 구조를
이루는 곳이구나.”라고 바로 파악할 수 있기 때문입니다.

아이디 선택자의 지정 방식은 다음과 같습니다.

#idname{속성값;}

아이디 선택자는 <div id=“idname”>...</div> 또는 <span id=“idname”>...</span>
<p id=“idname”>...</p>와 같이 클래스 선택자와 동일하게 사용하지만 아이디 선택자는 주로 블록 선택
자에 많이 사용하게 됩니다. 따라서 <div id=“idname”>...</div>에 많이 사용하게 됩니다.


아이디 선택자
앞서도 언급했다시피 보통 아이디 선택자는 문서의 구조를 만들어 주는 곳에 사용하게 되며, 클래스 선
택자는 문서의 모양을 만들어 주는 곳에 사용합니다.

그림을 보면 문서의 전체적인 큰 틀은 #header, #submenu, #footer, #main 등으로 잡고 #main 내부의
글꼴이나 텍스트에 대한 개별 속성과 그림들은 .txt1, .picture 등과 같이 클래스 선택자로 사용하고 있습
니다. 이렇게 되면 전체 구조를 쉽게 파악할 수 있습니다.

즉 문서 내부에서 #header라는

아이디 선택자는 반복적으로

사용되지 않고 한번만

사용됩니다. 하지만 .picture는

그림이 여러 개 있을 수 있고,

.txt1이라는 글꼴 속성 또한

단락마다 또는 문단마다 반복적

으로 사용할 수도 있습니다.


아이디 선택자
HTML5 문서에서는 전체 문서의 구조를 잡아주는 <header>, <nav>, <footer>와 같은 태그가 추가되었
습니다. 하지만 고객이 XHTML1.0 형식으로 사이트를 만들어 달라는 요구를 하게 되면, HTML5에서 사
용하는 <header>, <nav>, <footer> 태그는 사용할 수 없습니다.

그렇지만 <div id=“header”>, <div id=“nav”>, <div id=“footer”>와 같이 HTML5에서 사용하는 태그를 아
이디 선택자로 정의해 주면 나중에 사이트 유지 보수를 할 때, 다른 개발자가 보더라도 문서의 구조를
파악하기 쉽다는 것입니다.

즉 아이디 선택자를 이용해서 전체 문서 구조를 잡아주고, 클래스 선택자를 통해 세부적인 디자인을 하
게 되면 개발할 때도 편리하지만, 추후 웹 개발 인력이 바뀌더라도, 누가 살펴보든 구조를 파악하기 쉽
습니다.


아이디 선택자
예를 한번 보겠습니다. [예제 6-7] 문

서 내부에 아이디 선택자를 <style> 태그 안에 아래와 같이 만들고,

#head {

height:50px;

background:#3CF;

padding:10px;

border:1px solid #09F;

color:#FFF;

}

아래와 같이 <h1> 태그에 아이디 선택자를 지정하면

우측 그림과 같은 결과가 나옵니다.

<h1 id="head"> Mac OSX와 Windows 7 </h1>
source/ch06/pic6-9.html


아이디 선택자
클래스 선택자에서의 그림과 아이디 선택자에서의 그림을 비교해 보면 h1이 적용된 부분의 색이 변경
되어 있습니다. 이것은 상속에 의해서 색상이 변경되어 버린 것입니다. 두 개의 색상이 겹쳐 버릴 때, 어
떤 색상이 적용될지는 추후 강의할 „패밀리 트리의 이해‟ 부분에서 다룰 예정입니다.

아이디 선택자도 클래스 선택자와 같은 방식의 종속 선택자가 존재합니다.


종속 선택자
종속 선택자(Defendant Selector)는 클래스 선택자 또는 아이디 선택자가 태그와 결합된 형태입니다. 종
속 선택자의 표현법은 다음과 같습니다.

태그선택자.classname {속성값;}

태그선택자#idname{속성값;}

HTML 태그가 먼저 나오고 .(점) 또는 #(샵)을 붙여 종속 선택자를 만듭니다.

이렇게 사용하면 태그 선택자 내부에 있는 클래스 선택자 또는 아이디 선택자에만 속성이 부여됩니다.

또는 #idname.classname { 속성값;} 처럼 사용도 됩니다.


종속 선택자
source/ch06/ex6-8.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>태그 선택자</title>
<style type="text/css">
...
p { font-size: 12px;color: #333;margin:5px;} /* 여기는 태그 선택자 */
.headline { color: #333; border:1px solid #999; margin:25px; padding:10px;} /* 여기는 클래스 선택자 */
p.txt1 { color:#36F; font-weight: bold;} /* 여기는 종속 선택자 */
.txt1 { font-weight: normal; color: #F60;} /* 여기는 클래스 선택자 */
</style>
</head>
<body>
<h1>Mac OSX 와 Windows 7 </h1>
<p class="txt1">최근 아이폰이 스마트폰의 절대강자로 대두되면서, 맥킨토시에 대한 관심도 더불어 상승하고, … 윈도우 7입니다.</p>
<p class="headline">윈도우 7은 전작인 윈도우 비스타의 불편함을 개선하고, 또한 사용자 편의를 위해서 이전 버전에 …</p>
<h2>Mac OSX</h2>
<div class="txt1">맥오에스텐은 현재 … 이전 버전에 비해 30% 정도 설치 후 용량이 감소되었습니다.</div>
</body>
</html>

태그 선택자, 클래스 선택자 그리고 종속 선택자의 차이


종속 선택자

종속선택자와 클래스 선택자의 의한 결과


종속 선택자
앞 페이지의 그림과 같이 종속 선택자(p.txt1)는 <p class=“txt1”> 태그에만 영향을 줍니다. 하지만 일반
선택자(.txt1)는 <div> 또는 <span>에 영향을 주었다는 것을 알 수 있습니다.

그림을 보면 <span class=“txt1”>이 적용된 곳과 <div class=“txt1”>으로 적용된 곳의 글꼴 사이즈가 다
른 것을 볼 수 있는데, <span class=“txt1”>은 상위 선택자인 <p> 태그 선택자에 의해서 글꼴 사이즈가
상속되었기 때문입니다. 상속에 대한 내용은 추후 „패밀리 트리‟ 강의에서 배우겠습니다.

예제 소스에서 보면 <p> 태그 선택자는 font-size:12px입니다. <div> 태그에는 아무런 글꼴 사이즈가 지
정되어 있지 않기 때문에 브라우저 기본 값인 16픽셀로 지정되었습니다.

또한 예제에서 보면 headline은 <p class=“headline”>으로 지정되어 headline 자체에도 <p> 태그의 속
성이 반영됩니다.

다시 한번 정리해 보겠습니다.

종속 선택자는 태그(아이디, 클래스) 선택자에 클래스(아이디) 선택자를 지정해 주는 것을 말합니다. 예
를 들어 p.txt1{속성값;}은 종속 선택자는 <p>라는 태그 선택자 내부에 <p class=“txt1”>...</p>에만 속성
이 적용되는 것이고, <div class=“txt1”>...</div> 부분에는 속성이 적용되지 않습니다. 하지만 .txt1이라
는 클래스 선택자 단독으로 사용할 때는 <p class=“txt1”>에도 적용되고

<div class=”txt1”>에도 적용되는 광범위한 값을 지정할 때 사용하는 것입니다.


하위 선택자
종속 선택자가 태그 선택자와 같이 사용하는 클래스(아이디) 선택자라고 한다면 하위 선택자(Descent
Selector)는 <p>...</p> 또는 <div id=“idname”>...</div>, <div class=“classname”>...</div> 내부에 존재
하는 선택자를 하위 선택자라고 합니다.

종속 선택자는 <p class=“classname”>...</p>처럼 태그 선택자 p와 클래스(아이디) 선택자 “classname”
을 붙여서 p.classname이라고 속성을 정의한다는 것이 하위 선택자와의 차이점입니다.

예를 들어,

<p> 문장 내용 <a href="#"> … </a> … </p>
이와 같은 구문이 있을 때, p 태그 선택자의 하위 선택자는 a가 됩니다. p 태그 하위 선택자 a에 속성을
적용하기 위해서는 CSS 구문 안에 다음과 같이 사용합니다.

p a {속성값;}

p 태그를 쓴 후 바로 한 칸 띄어서 a {속성값;}을 지정합니다.


하위 선택자
아래의 예를 보겠습니다.

<p> 문장 내용 <a href="#"> 링크 <em> 내용 </em> </a> … </p>

위의 경우는 p a em {속성값;}은 어떻게 적용될까요?

이것은 p em {속성값;}과 동일합니다. 왜냐하면 p 태그 선택자 하부에 자식 선택자 a와 em이 동시에 있
기 때문에 정확하게 하려면 p a em {속성값;}으로 지정하지만, p em{속성값;}만 지정해도 해당 속성이
적용되기 때문입니다


하위 선택자 pa{
text-decoration:underline;
font-weight: bold;
p a em{ color: #F60;
color: #06F; }
font-style: normal;
} source/ch06/ex6-9.html

ul.list1 li a {
font-weight: bold;
color: #F00;
text-decoration:
underline;
}

ul.list2 li a {
font-weight: bold;
color: #39F;
text-decoration: none;
}


하위 선택자
앞페이지의 그림을 보면 하위 선택자가 어떻게 적용되는지 알 수 있습니다.

p a{속성값;} 과 ul.list1 a{속성값;}, ul.list2 a{속성값;}이 전부 다르다는 것을 알 수 있습니다.

즉 하위 선택자에 따라 a(링크 태그)의 값을 전부 다르게 지정할 수 있습니다.

하위 선택자는 많이 사용되는 선택자 중 하나입니다. 주로 선택자 내부에 있는 선택자에 효과를 주기 위
해서 사용되는 선택자입니다. 만약 하위 선택자가 없다면 각각의 선택자에 클래스 선택자를 지정해 주
거나, 아이디 선택자를 일일이 HTML 문서내부에 지정해야 하는데, 하위 선택자를 사용하게 되면, 이런
수고를 덜 수 있다는 장점이 있습니다.

그렇기 때문에 익숙해질 때까지 꾸준한 연습이 필요합니다.

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

More Related Content

What's hot (20)

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

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