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

처음부터 다시 배우는

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

양용석([email protected])

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

강의 목차

1. 선택자의 개념과 활용

2. 태그 선택자

3. 클래스 선택자

4. 아이디 선택자


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

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

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

• 종속 선택자• 하위 선택자• 그룹 선택자

• 전체 선택자• 자식 선택자• 인접 선택자

• 태그 선택자 • 클래스 선택자 • 아이디 선택자


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

h1 {

font-size: 20px;

color: #F00;

margin:10px;

}

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


태그선택자<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> 태그 선택자 </title></head><body><h1>Mac OSX 와 Windows 7 </h1> <p> 최근 아이폰이 스마트폰의 절대강자로 대두되면서 , 맥킨토시에 대한 관심도 더불어 상승하고 , 이전과 다르게 맥을 사용하는 사용자들이 많아졌습니다 .<br>하지만 … </p> <h2>Mac OSX</h2> <p> 맥오에스텐은 현재 스노우레오퍼드 10.6 버전이 최 신버전입니다 .<br> 맥오에스텐은 2002 년 출시해서… </p></body></html>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title> 태그 선택자 </title><style type="text/css">h1 {

font-size: 20px; color: #F00; margin:10px;

}h2 {

font-size:14px; color:#36F; margin:5px;

}p {

font-size: 12px; color: #333; margin:5px;

}</style></head><body><h1>Mac OSX 와 Windows 7 </h1>…

어떤 속성도 지정되지 않은 순수한 HTML 문서

태그 선택자에 스타일을 적용한 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 { 속성값 ;} 처럼 사용도 됩니다 .


종속 선택자<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>

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

source/ch06/ex6-8.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{ 속성값 ;} 만 지정해도 해당 속성이 적용되기 때문입니다


하위 선택자 p a em{ color: #06F; font-style: nor-mal;}

p a { text-decoration:underline; font-weight: bold; color: #F60;}

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

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

source/ch06/ex6-9.html


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

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

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

하위 선택자는 많이 사용되는 선택자 중 하나입니다 . 주로 선택자 내부에 있는 선택자에 효과를 주기 위해서 사용되는 선택자입니다 . 만약 하위 선택자가 없다면 각각의 선택자에 클래스 선택자를 지정해 주거나 ,

아이디 선택자를 일일이 HTML 문서내부에 지정해야 하는데 , 하위 선택자를 사용하게 되면 , 이런 수고를 덜 수 있다는 장점이 있습니다 .

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

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

Technology