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

처음부터 다시 배우는

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

양용석(ugpapa@gmail.com)

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

강의 목차

1. 그룹 선택자

2. 전체선택자

3. 자식 선택자

4. 인접 선택자

5. CSS 주석 달기

6. 수도 선택자

7. 패밀리 트리로 이해하는 상속

8. CSS 선택자 결론


그룹선택자
그룹 선택자(Group Selector)는 각각의 선택자를 그룹을 지어 속성을 부여하는 것을 말합니다. 각각의
선택자에서 동일한 속성이 있을 경우 이런 부분을 묶어 버리고, 다른 부분만 따로 속성을 지정한다
면, 스타일의 속성을 변경할 때, 그룹 선택자만 변경하더라도 묶여 있는 동일한 속성이 일괄적으로 변경
됩니다.

각각의 선택자를 그룹으로 묶는다고 해서 그룹 선택자라고 합니다. 예를 들어 각각 의 선택자에 동일한
값을 적용할 필요가 있을 때가 있습니다. 아래 그룹 선택자의 사용법을 보면 하위 선택자와 그룹 선택자
는 언뜻 보기에 비슷하게 보이는데(단순하게 선택자와 선택자 사이의 빈 공간으로 구분하는 것과 콤마
(,)로 구분하는 것), 결과는 완전히 다릅니다.

하위 선택자는 하나의 선택자의 하부 선택자를 지정하는 것이고, 그룹 선택자는 속성을 동일하게 부여
할 선택자를 한꺼번에 묶어서 지정하는 것입니다. 표현을 보면 하위 선택자에는 p a {속성값;}을 적용하
며 중간에 빈 공간만 있습니다. 그에 반해 그룹 선택자는 p, a{속성값;}을 지정합니다. 중간에 쉼표(,)가
있습니다.


그룹선택자
그룹 선택자 사용법은 다음과 같습니다.

.classname, #idname, h1, p {속성값;}

위와 같이 동일한 값을 적용할 태그 선택자 또는 클래스(아이디) 선택자를 ,(쉼표)로 묶어서 속성값을 부
여하는 방식을 그룹 선택자라고 합니다. 모든 선택자에 일일이 속성값을 부여하는 것이 아니라, 한꺼번
에 적용되기 때문에 편리하게 사용할 수 있습니다.


그룹선택자

h1, h2, .txt_box {
text-decoration: underline;
}

해당 태그 선택자와 클래스 선택자에 밑줄 효과를
준 것인데요. 각각의 선택자에 일일이 밑줄을 주는
것보다 일괄적으로 밑줄을 주거나 다른 속성을 부여
할 때, 이렇게 그룹 선택자를 잘 활용하게 되면 사이
트 디자인을 훨씬 더 빠르게 수정할 수 있습니
다. 그렇기 때문에 웹사이트 개발 초기에 전체 문서
의 구조 설계를 잘 해야 하며, 디자이너가 디자인한
시안을 기반으로 어떤 선택자를 사용할 것인지에 대
한 고민을 통해 설계가 완성되면, 최소의 코드로 최
대의 효과를 볼 수 있는 것입니다.


전체선택자
전체 선택자(Universal Selector)는 말 그대로 문서 전체에 영향을 주는 선택자를 말합니다. 그룹 선택자
는 선택자를 그룹으로 묶어서 하나의 스타일을 적용하는데, 전체 선택자는 태그 선택자, 클래스 선택
자, 아이디 선택자, 종속 선택자, 복합 선택자, 수도 선택자 등 모든 선택자에 일괄적으로 동일한 스타일
을 한꺼번에 적용하고자 할 때 사용합니다.

전체 선택자가 가장 많이 사용되는 예가 전체 마진과 패딩 값을 “0”으로 조정할 때입니다.

사용법은 다음과 같습니다.

*{

margin:0;

padding:0;

}


전체선택자
이와 같이 설정하면 문서 내부에 마진과 패딩 값이 모두 0부터 시작합니다. 또한 * {margin:10px;} 이렇
게 지정해 주면 모든 태그 선택자, 클래스 선택자, 아이디 선택자, 복합 선택자 가릴 것 없이 마진 값이
10픽셀이 적용됩니다. 전체 선택자는 다른 선택자의 일부분으로도 사용 가능합니다.

#idname * {속성값;}

위와 같이 적용하면, idname이라는 아이디 선택자를 적용한 페이지의 모든 요소에 포함된 모든 태그에
값이 적용됩니다. 마찬가지로, 다음과 같이 적용하면 .classname이라는 선택자를 적용한 페이지의 모
든 요소에 포함된 모든 태그에 값이 적용됩니다.

.classname * {속성값 ;}

전체 선택자는 자주 사용하는 선택자는 아니지만, 가끔 유용하게 사용할 경우가 있습니다.


자식 선택자
자식 선택자를 가장 많이 사용하는 곳은 리스트 태그입니다. 자식 선택자라 함은 선택자의 바로 아래 선
택자를 직접 지정한 선택자를 말합니다. 즉 선택자 내부의 선택자 중 이 선택자는 “내 자식이요.”라고 지
정하는 것입니다.

하위 선택자는 선택자 내부의 선택자를 전부 지칭하기 때문에, 자식도 되고 사촌 형제들도 하위 선택자
가 되는 반면, 자식 선택자는 “얘는 내 자식이요.”라고 손가락으로 지정하는 것과 같습니다.

사용법은 다음과 같습니다.

선택자 > 선택자 {속성값;}

자식 선택자는 주로 ul과 li로 이루어진 리스트에서 많이 사용합니다. 특히 복잡한 구조의 리스트일수록
자식 선택자는 유용하게 사용됩니다.


자식 선택자
HTML 코드 내부에,
<ul class="list1">
<li>제주글꼴의 가장 큰 특징
<ul class="list2">
<li>제주 사투리(고어)를 표현할 수 있어야 한다.</li>
... 중략 ...
</ul>
</li>
</ul>
이렇게 다중 구조의 리스트가 있을 때 다음 페이지 그림에 있는 ➊번 CSS 스타일을 적용하면 모든 li에 테두리
가 생깁니다. 이 경우 자식 선택자를 이용해서 ➋번 CSS 스타일로 지정하면 첫 번째 li 부분에만 테두리가 생기
고, 나머지 하부에 있는 li 부분에는 테두리가 생기질 않습니다.
그림을 자세히 보면 ➊번 CSS 스타일은 하위 선택자이기 때문에 모든 하위선택자 li에 대해서 테두리가 생기는
것입니다. 하지만 ➋번 CSS 스타일에서는 바로 밑에 있는 자식을 바로 지정하고 “여기에만 테두리를 줄 것이
니, 다른 하위 선택자는 테두리를 주지 마라.”라고 지시하는 것과 같은 역할입니다.


자식 선택자

source/ch06/pic6-13_2.html
source/ch06/pic6-13_1.html
ul.list1 > li {
padding:10px;
border:solid 1px #CCCCCC;
}
<ul class="list1">
<li>제주글꼴의 가장 큰 특징 ➋번 CSS 스타일
ul.list1 li { <ul class="list2">
padding:10px; <li>제주 사투리(고어)를 표현할 수 있어야 한다.</li>
border:solid 1px #CCCCCC; <li>제주 글꼴이라는 느낌이 줘야 한다.</li>
} <li>기본 고딕체가 있어야 한다.</li>
<li>기본 명조체가 있어야 한다.</li>
➊번 CSS 스타일 </ul>
</li>
</ul>


인접 선택자
인접 선택자( Sibling Selector)는 근접해 있는 두 개의 형제 관계에 있는 선택자에 스타일을 적용할 때
사용합니다. 문단에서는 보통 제목을 <h1> 또는 <h2>를 이용해서 지정하고 본문 내용은 <p>를 이용해
서 단락을 지정합니다. 여기서 <h1>과 <p>는 형제 관계에 있습니다.

왜 형제 관계인가 하면, <h1> 내용 </h1>으로 끝나고 <p> 내용 </p>로 끝납니다.

즉 <h1> 내부에 <p>가 있는 것이 아니라 <h1>으로 시작하고 </h1>으로 닫아줘서 끝나버리고 다시 <p>
로 시작해서 </p>로 닫아줬기 때문에 두 태그 선택자 사이는 형제 관계에 있는 선택자가 됩니다.

예를 들어, <h1>...</h1>, <p>...</p> 형식의 문장에서 <p> 문장의 첫 번째 단어의 크기를 조정할 때 인
접 선택자를 편리하게 사용할 수 있습니다. 인접 선택자를 사용하지 않는다면, 해당 첫 글자에는 클래스
선택자를 이용해서 값을 지정해야만 합니다.

인접 선택자는 아래와 같은 형식으로 지정합니다.

선택자 +(플러스기호) 선택자 { 속성값; }


인접 선택자
다음 그림을 보면. <h1>...</h1>, <p>...</p>로 구성된 문장과 <h2>...</h2>, <p>...</p>로 이루어진 두 가
지 종류의 문단이 있는데 각각 문단의 첫 글자를 큰 글자로 만들고 싶을 때 h1+p:first-letter : 속성값; 형
식으로 문단의 첫 글자 크기를 키울 수 있습니다.

또한 h2+p:first-letter: 속성값; 형식으로 다음에 나오는 문장의 첫 글자도 다른 크기와 색으로 지정해 준
것을 알 수 있습니다.

이렇게 인접 선택자는 인접한 두 개의 선택자와 결합하여 다른 효과를 낼 때 유용하게 사용할 수 있는
선택자입니다.
h1+p:first-letter {
float:left;
h1 {
font-family: "돋움"; margin:10px 5px 0 0;
font-size:3em;
font-size: 3em;
color: #F90;
color: #06F;
}
}

h2 {
font-family: "궁서"; h2+p:first-letter {
font-size: 2em; float:left;
margin:10px 5px 0 0;
color: #39C;
font-size:2.2em;
line-height:1em;
color: #F00;
}
}
source/ch06/pic6-14.html

CSS 주석 달기
CSS도 다른 프로그래밍 언어와 같이 주석을 사용할 수 있습니다. 주석을 사용하면 CSS 선택자가 어떤
역할을 하는지 그리고 어디에 사용되는지 파악할 수 있기 때문에 작업이 끝나고 수정할 때 그리고 처음
에 디자인할 때 매우 편리하게 사용할 수 있습니다. 사용 방법은 아래와 같습니다.

/* 주석 문장 */

주석 사용법은 다른 프로그래밍 언어와 동일합니다. 참고로 HTML 문장의 주석 형식입니다.



약간의 차이가 있지만, 사용하다 보면 금방 익숙해집니다. 주석은 CSS 문장이 어떻게 작동되는지에 대
해 설명하는 역할도 하지만, 나중에 사용하지 않는 CSS 문장을 잠시 막아둘 때도 사용합니다.

즉 아래와 같이 처리하면 h1 태그 선택자는 더는 작동하지 않게 됩니다.

/* h1{color:red;} */


수도 선택자
영어로 수도 선택자(Pseudo Selector)라고 하는 특수 선택자가 존재합니다. Pseudo는 영어로 허위
(의), 가짜(의)란 형용사와 명사로 사칭자 또는 꾸며보이는 사람을 뜻 합니다.

수도 선택자는 선택자로 바로 사용하는 것은 아니고 선택자와 같이 사용되며, 선택자를 꾸며 주는 역할
을 하게 됩니다. 다음페이지의 표 에서 수도 선택자의 역할과 형식(포맷)을 간단하게 표로 정리했습니
다. 이외에도 여러 가지가 존재합니다만, 표에서 열거한 선택자가 가장 많이 사용됩니다.

:hover, :active, :link, :visited 4개의 선택자는 a 태그와 함께 가장 많이 사용되며, 링크를 정의할 때 사용
합니다. 단지 링크에만 적용된다고 해서 반드시 링크 태그인 a 에서만 사용하는 것은 아닙니다. table에
서 특정 열에 효과를 줄 때도 사용합니다.

또는 박스에서뿐만 아니라 다양한 용도로 사용되지만, 가장 많이 사용하는 것이 a 태그에 의한 링크에
많이 사용된다는 의미입니다. 여기서 자세히 설명하는 것보다, 실전에서 직접 하나씩 적용해 보면 수도
선택자는 바로 이해할 수 있습니다.


수도 선택자
포맷 역 할 비고

:hover 마우스 커서가 링크에 올라가 있는 상태

:active 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태

:link 링크를 클릭하지 않는 그냥 링크되어 있는 상태 a 만 써도 무관

:visited 링크를 눌러서 방문한 후 상태

:focus 입력 폼에서 키보드의 입력을 기다리는 상태

:first-line 첫 번째 문장에만 적용

:first-letter 문장의 첫 글자에만 적용

:before 문장이 시작되기 전

:after 문장이 끝난 다음


수도 선택자 source/ch06/pic6-15.html

a:link {color: #F60; text-decoration: none;}
a:visited {color: #999;}

tr:hover {background-color: #FC6;} a:active {color: #F00; text-decoration: line-through;}
그림에는 나타나지 않음

h1:before {content: url(bul1.gif);} h1:after {content: url(bul2.gif);}

a:hover {color: #06F; text-decoration: underline;}


패밀리 트리로 이해하는 상속
이번 섹션에서는 선택자를 설명할 때 중간중간 불쑥 나왔던 상속이란 용어에 대해 학습하겠습니다. 상
속은 패밀리 트리를 통해 이해하는 것이 가장 쉽습니다. 대부분 의 다른 책들이 상속의 개념을 먼저 설
명해 주고 관련 내용을 설명하지만, 이 책은 먼저 “상속은 이런 식으로 된다.”라는 실제 예를 먼저 보여
주고 상속의 개념을 나중에 설명하고 있습니다. 독자가 실제 예를 보면서 “이게 뭔가 연결되어 속성이
적용되는 것 같은데.”라는 느낌을 받은 후 상속의 개념을 학습하게 되면 좀더 확실하게

개념을 이해할 수 있지 않을까 생각해서입니다.

CSS는 모든 것이 패밀리 트리에 의해서 결정된다고 볼 수 있습니다. 패밀리 트리를 한국어로 바꾸면
„가계도‟라고 할 수 있습니다. 즉 할아버지-아버지-아들 이렇게 내려가는 부계 가계도라고 보시면 아주
이해하기 쉽습니다.

할아버지에 의해서 발생한 유전적인 정보가 밑으로 계속해서 내려가면서 반영되지 만, 제일 유전적으
로 강한 영향을 받는 것은 아버지와 어머니에게 받은 유전적인 정보입니다. 즉 할아버지에게서 유전적
인 정보를 이어 받기는 하지만, 중간에 어머니에 의해서 다른 속성이 부여되는 것입니다.



<일반 가계도>

<CSS 상속 구조>


이것을 CSS에 적용한다고 생각해 보면 다음과 같습니다.

body 태그 선택자에서 글꼴 사이즈 12픽셀, 색상 #06F로 지정했는데, p 태그 선택자에서 글꼴 사이즈를
14픽셀로 지정을 하게 되면, p 태그로 감싼 부분은 글꼴 사이즈가 14픽셀로 지정되며, 나머지 부분은
12픽셀로 지정됩니다. 근데 다시 p 태그선택자 밑에 있는 a 태그 선택자의 글꼴 사이즈를 16으로 지정
하게 되면 a 선택자를 만난 글꼴의 사이즈는 16픽셀로 됩니다.

하지만 여기서 body 태그에서 글꼴의 색상은 #06F로 지정했기 때문에 전체 글꼴의 색상은 #06F로 되
어 있습니다. 이 색상은 하위 태그 선택자에 의해서 바뀌기 전까지는 모든 글꼴의 색상이 #06F로 됩니
다. body 태그에 의해서 상속이 된 것이죠.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>패밀리 트리 이해 1</title>
<style type="text/css">
body { font-size: 12px; color: #06F; font-family:"맑은 고딕", "돋움"; }
p { font-size:14px; }
a { font-size:16px; }
.box { margin:10px; padding:5px; border:1px solid #666; }
</style>
</head>
<body>
<h1>제주글꼴 <strong>공개</strong> 되었습니다</h1>
<p>원래는 2010년 5월 4일 공개된 글꼴이지만,<a href="#">다시 여러분에게</a> 안내해 드리겠습니다. 첫 번째로 제가 생각한 내용은 대한민국
에서 가장 유명한 관광지인 제주를 ... 보기 시작했고, 다행이 이렇게 현실적인 결 과물이 나오게 되었습니다. </p>
<div class="box">제주글꼴은 1년여의 제작기간을 통해 산돌커뮤니케이션과 제주도디자인협동조합과의 ... </div>
</body>
</html>

source/ch06/ex6-12.html



그림을 보면 전체 색상은 #06F로 되어 있
는데, p 태그가 지정된 부분은 글꼴 사이즈
가 14픽셀, a 태그로 감싼 부분은 16픽
셀, .box 선택자로 감싼 부분은 12픽셀인
것을 알 수 있습니다.



다음 페이지의 그림을 보면 각각의 속성들이 상속에 의해 값이 적용된 것을 알 수 있습니다. h1 strong과 p strong에 따른
각각의 값이 적용되기 때문에 결과 값도 다르게 나오는 것을 알 수 있습니다. 상속을 잘 설명해 주는 선택자가 하위 선택
자입니다. 하위 선택자에서 선택자(이것을 “부”라고 하겠습니다) 내부에 있는 선택자(이것을 “자”라고 하겠습니다)를 보
면 자 선택자는 부 선택자의 속성을 상속하는 것을 볼 수 있습니다. 그럼 여기서 부에 해당 하는 h1에 속성을 다음과 같이
부여해 보겠습니다.
h1 {
font-size:18px;
font-weight: normal;
color: #333;
}
그리고 자에 해당하는 h1 strong에 다음과 같이 속성을 부여하겠습니다.
h1 strong {
color:#F30;
}
이 경우 h1 strong은 h1의 속성을 전부 상속 받는데, h1 strong 속성에서 색상만 변경되어 최종적으로 색상을 제외한 값
을 상속 받게 됩니다. 마찬가지로 p 태그 선택자와 p strong 하위 선택자를 보면 상속의 결과를 알 수 있습니다.



하위 선택자에 의한 상속 source/ch06/ex6-13.html


패밀리 트리에 의한 태그 선택자의 속성을 지정하는 법을 배웠는데, 단순히 태그 선택자만 하위 선택자
를 사용하는 것은 아닙니다. 다른 유형의 선택자와 결합하게 되면 복합 하위 선택자를 생성할 수 있습니
다.

패밀리 트리를 통해 상속에 대한 내용까지 배웠으며, 상속에 대한 개념을 바탕으로 지금까지 배운 선택
자를 종합적으로 구현해 보겠습니다. ( 반드시 소스를 보면서 강의해 주세요.)

아래와 같이 태그 선택자를 이용해서 글꼴 크기를 14픽셀로 적용을 했으며,

p {font-size:14px;}

태그 선택자의 종속 선택자로 p.fin{속성값;}을 지정했습니다.
그러면 이 선택자는 <p class=“fin”> </p> 내부에서만 적용됩니다.

p.fin {color:#C90;}


다음은 종속선택자의 하위 선택자로 적용을 했으며, <p class=“fin”> 내부에 <a href=“..”> </a>로 적용된 부분에만 값이
적용됩니다.
p.fin a {color: #F60; text-decoration: underline;}
아래 코드를 잘 보셔야 합니다. 이 선택자는 종속 선택자가 아니라 하위 선택자로서 역할을 합니다. 종속 선택자인 p.fin
과 p .fin은 완전히 다른 선택자가 됩니다. P와 .fin을 붙여서 쓴 것은 종속 선택자로서 역할을 하지만 p와 .fin 사이에 공백
이 있는 것은 하위 선택자입니다. 이것은 <p>와 </p> 태그 사이에 .fin{속성값;}을 지정한 부분에만 값이 적용되는 것입니
다.
p .fin {color:#F00;}
아래 부분도 하위 선택자입니다. <p>와 </p> 태그 사이에서 .fin 값이 지정된 부분에 <a href=“..”> </a>가 되어 있는 부분
에만 스타일이 적용되는 것을 말합니다.
p .fin a{color: #39C;text-decoration: line-through;}
아래는 클래스 선택자입니다. 종속 선택자와 하위 선택자보다는 광범위에 걸쳐서 스타일 값이 적용되는 것을 말합니다.
즉 <h1 class=“fin”> 또는 <table class=“fin”>과 같이 모든 태그 및 다른 선택자에 광범위하게 사용될 때 사용되는 것을 말
합니다.
.fin {color: #666;}
다음은 a 태그가 .fin 클래스 선택자의 하위 선택자를 말하는 것입니다.
.fin a {color: #666;text-decoration: underline;}



p.fin a {color: #F60; text-decoration: underline;}

p.fin {color:#C90;}

p .fin a{color: #39C;
text-decoration: line-through;
}


p .fin {color:#F00;}
.fin {color: #666;}

.fin a {color: #666; text-decoration: underline;}


CSS 선택자 결론
CSS의 처음이자 마지막이 선택자이기 때문에, 선택자는 CSS의 가장 기초가 되는 것이고, 선택자를 어
떻게 사용하는가에 따라서 코드의 수가 많아지거나 적어질 수 도 있습니다. 태그 선택자 패밀리 트리에
의한 하위 선택자는 정말 다양한 방식으로 사용할 수 있고 클래스 선택자와 아이디 선택자 또한 적재적
소에 사용함으로써, 다양한 효과를 줄 수 있습니다.

또한 이러한 선택자를 더욱 다양한 방법으로 사용할 수 있게 하는 수도 선택자를 사용하게 되면, 웹 페
이지를 꾸밀 때, 그래픽 파일을 최소한으로 사용하면서도 더욱 화려한 효과를 낼 수 있습니다.

특히 CSS3에서는 border-radius를 통한 둥근 테두리를 만들고, background gradient를 통한 그라데이
션 효과, text-shadow를 통한 텍스트 그림자 효과를 주고 다양한 웹 글꼴 및 외부 글꼴을 사용함으로써
더 이상 포토샵을 이용한 디자인이 필요 없을 정도로 다양한 효과를 줄 수 있습니다.

다시 한번 정리하면 선택자는 태그 선택자, 클래스 선택자, 아이디 선택자, 종속 선택자, 하위 선택
자, 그룹 선택자, 전체 선택자, 자식 선택자, 인접 선택자 이렇게 9 가지 종류가 있으며 복합적으로 수도
선택자도 추가적으로 사용할 수 있습니다.


CSS 선택자 결론
가장 많이 사용하는 것이 태그 선택자, 클래스 선택자, 아이디 선택자, 종속 선택자, 하위 선택자 이렇게
5가지 선택자입니다. 사실 이 5가지 선택자만 확실하게 이해하더라도 웹사이트를 만들 때 전혀 어려움
이 없습니다만, 다른 선택자의 역할과 사용법을 알게 되면 더욱 편리하게 웹사이트 개발이 가능합니다.

자식 선택자와 인접 선택자는 아주 가끔 사용할 기회가 있을 것입니다. 하지만 이 두 개의 선택자는 IE6
에서 지원이 되지 않기 때문에 사용시 조금은 고민이 될 수 있습니다. 웹 개발자 입장에서는 어떤 브라
우저에서건 같은 모양을 원하는데, 일부 브라우저가 지원하지 않게 되면 고민될 수밖에 없지만, 이제부
터라도 IE6는 제외하고 웹 개발을 하라고 권하고 싶습니다.

웹 표준을 알게 되면 될수록 IE6가 정말 싫어 질 것입니다. IE6 때문에 엄청난 골치가 아파올 것입니다.
심지어 구글에서는 더는IE6를 공식적으로 지원하지 않는다고 밝혔고, IE6를 만든 MS 및 네이버에서도
IE6 퇴출 운동을 벌이고 있습니다. ( 2012년 2월 1일자 기사에 XP에서 IE6와 IE7을 IE8로, 윈도우7에서
는 IE9으로 강제적으로 업그레이드하는 정책이 MS에서 발표되었습니다.)

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (10)

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

Similaire à 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차 (18)

Dernier

Dernier (6)

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