처음부터 다시 배우는 html5 & css3 강의자료 10일차
DESCRIPTION
그룹 선택자 전체선택자 자식 선택자 인접 선택자 CSS 주석 달기 수도 선택자 패밀리 트리로 이해하는 상속 CSS 선택자 결론TRANSCRIPT
![Page 2: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/2.jpg)
처음부터 다시 배우는 HTML5 & CSS3
강의 목차
1. 그룹 선택자
2. 전체선택자
3. 자식 선택자
4. 인접 선택자
5. CSS 주석 달기
6. 수도 선택자
7. 패밀리 트리로 이해하는 상속
8. CSS 선택자 결론
![Page 3: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/3.jpg)
처음부터 다시 배우는 HTML5 & CSS3
그룹선택자그룹 선택자 (Group Selector) 는 각각의 선택자를 그룹을 지어 속성을 부여하는 것을 말합니다 . 각각의 선택자에서 동일한 속성이 있을 경우 이런 부분을 묶어 버리고 , 다른 부분만 따로 속성을 지정한다면 ,
스타일의 속성을 변경할 때 , 그룹 선택자만 변경하더라도 묶여 있는 동일한 속성이 일괄적으로 변경됩니다 .
각각의 선택자를 그룹으로 묶는다고 해서 그룹 선택자라고 합니다 . 예를 들어 각각 의 선택자에 동일한 값을 적용할 필요가 있을 때가 있습니다 . 아래 그룹 선택자의 사용법을 보면 하위 선택자와 그룹 선택자는 언뜻 보기에 비슷하게 보이는데 ( 단순하게 선택자와 선택자 사이의 빈 공간으로 구분하는 것과 콤마 (,) 로 구분하는 것 ), 결과는 완전히 다릅니다 .
하위 선택자는 하나의 선택자의 하부 선택자를 지정하는 것이고 , 그룹 선택자는 속성을 동일하게 부여할 선택자를 한꺼번에 묶어서 지정하는 것입니다 . 표현을 보면 하위 선택자에는 p a { 속성값 ;} 을 적용하며 중간에 빈 공간만 있습니다 . 그에 반해 그룹 선택자는 p, a{ 속성값 ;} 을 지정합니다 . 중간에 쉼표 (,) 가 있습니다 .
![Page 4: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/4.jpg)
처음부터 다시 배우는 HTML5 & CSS3
그룹선택자그룹 선택자 사용법은 다음과 같습니다 .
.classname, #idname, h1, p { 속성값 ;}
위와 같이 동일한 값을 적용할 태그 선택자 또는 클래스 ( 아이디 ) 선택자를 ,( 쉼표 ) 로 묶어서 속성값을 부여하는 방식을 그룹 선택자라고 합니다 . 모든 선택자에 일일이 속성값을 부여하는 것이 아니라 , 한꺼번에 적용되기 때문에 편리하게 사용할 수 있습니다 .
![Page 5: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/5.jpg)
처음부터 다시 배우는 HTML5 & CSS3
그룹선택자
h1, h2, .txt_box { text-decoration: underline;}
해당 태그 선택자와 클래스 선택자에 밑줄 효과를 준 것인데요 . 각각의 선택자에 일일이 밑줄을 주는 것보다 일괄적으로 밑줄을 주거나 다른 속성을 부여할 때 , 이렇게 그룹 선택자를 잘 활용하게 되면 사이트 디자인을 훨씬 더 빠르게 수정할 수 있습니다 . 그렇기 때문에 웹사이트 개발 초기에 전체 문서의 구조 설계를 잘 해야 하며 , 디자이너가 디자인한 시안을 기반으로 어떤 선택자를 사용할 것인지에 대한 고민을 통해 설계가 완성되면 , 최소의 코드로 최대의 효과를 볼 수 있는 것입니다 .
![Page 6: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/6.jpg)
처음부터 다시 배우는 HTML5 & CSS3
전체선택자전체 선택자 (Universal Selector) 는 말 그대로 문서 전체에 영향을 주는 선택자를 말합니다 . 그룹 선택자는 선택자를 그룹으로 묶어서 하나의 스타일을 적용하는데 , 전체 선택자는 태그 선택자 , 클래스 선택자 , 아이디 선택자 , 종속 선택자 , 복합 선택자 , 수도 선택자 등 모든 선택자에 일괄적으로 동일한 스타일을 한꺼번에 적용하고자 할 때 사용합니다 .
전체 선택자가 가장 많이 사용되는 예가 전체 마진과 패딩 값을 “ 0” 으로 조정할 때입니다 .
사용법은 다음과 같습니다 .
* {
margin:0;
padding:0;
}
![Page 7: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/7.jpg)
처음부터 다시 배우는 HTML5 & CSS3
전체선택자이와 같이 설정하면 문서 내부에 마진과 패딩 값이 모두 0 부터 시작합니다 . 또한 * {margin:10px;}
이렇게 지정해 주면 모든 태그 선택자 , 클래스 선택자 , 아이디 선택자 , 복합 선택자 가릴 것 없이 마진 값이 10 픽셀이 적용됩니다 . 전체 선택자는 다른 선택자의 일부분으로도 사용 가능합니다 .
#idname * { 속성값 ;}
위와 같이 적용하면 , idname 이라는 아이디 선택자를 적용한 페이지의 모든 요소에 포함된 모든 태그에 값이 적용됩니다 . 마찬가지로 , 다음과 같이 적용하면 .classname 이라는 선택자를 적용한 페이지의 모든 요소에 포함된 모든 태그에 값이 적용됩니다 .
.classname * { 속성값 ;}
전체 선택자는 자주 사용하는 선택자는 아니지만 , 가끔 유용하게 사용할 경우가 있습니다 .
![Page 8: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/8.jpg)
처음부터 다시 배우는 HTML5 & CSS3
자식 선택자자식 선택자를 가장 많이 사용하는 곳은 리스트 태그입니다 . 자식 선택자라 함은 선택자의 바로 아래 선택자를 직접 지정한 선택자를 말합니다 . 즉 선택자 내부의 선택자 중 이 선택자는 “내 자식이요 .” 라고 지정하는 것입니다 .
하위 선택자는 선택자 내부의 선택자를 전부 지칭하기 때문에 , 자식도 되고 사촌 형제들도 하위 선택자가 되는 반면 , 자식 선택자는 “얘는 내 자식이요 .” 라고 손가락으로 지정하는 것과 같습니다 .
사용법은 다음과 같습니다 .
선택자 > 선택자 { 속성값 ;}
자식 선택자는 주로 ul 과 li 로 이루어진 리스트에서 많이 사용합니다 . 특히 복잡한 구조의 리스트일수록 자식 선택자는 유용하게 사용됩니다 .
![Page 9: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/9.jpg)
처음부터 다시 배우는 HTML5 & CSS3
자식 선택자HTML 코드 내부에 ,
<ul class="list1">
<li> 제주글꼴의 가장 큰 특징
<ul class="list2">
<li> 제주 사투리 ( 고어 ) 를 표현할 수 있어야 한다 .</li>
... 중략 ...
</ul>
</li>
</ul>
이렇게 다중 구조의 리스트가 있을 때 다음 페이지 그림에 있는 ➊번 CSS 스타일을 적용하면 모든 li 에 테두리가 생깁니다 . 이 경우 자식 선택자를 이용해서 ➋번 CSS 스타일로 지정하면 첫 번째 li 부분에만 테두리가 생기고 ,
나머지 하부에 있는 li 부분에는 테두리가 생기질 않습니다 .
그림을 자세히 보면 ➊번 CSS 스타일은 하위 선택자이기 때문에 모든 하위선택자 li 에 대해서 테두리가 생기는 것입니다 . 하지만 ➋번 CSS 스타일에서는 바로 밑에 있는 자식을 바로 지정하고 “여기에만 테두리를 줄 것이니 ,
다른 하위 선택자는 테두리를 주지 마라 .” 라고 지시하는 것과 같은 역할입니다 .
![Page 10: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/10.jpg)
처음부터 다시 배우는 HTML5 & CSS3
자식 선택자
<ul class="list1"> <li> 제주글꼴의 가장 큰 특징 <ul class="list2">
<li> 제주 사투리 ( 고어 ) 를 표현할 수 있어야 한다 .</li><li> 제주 글꼴이라는 느낌이 줘야 한다 .</li><li> 기본 고딕체가 있어야 한다 .</li><li> 기본 명조체가 있어야 한다 .</li>
</ul> </li></ul>
ul.list1 li { padding:10px; border:solid 1px #CCCCCC;}
ul.list1 > li { padding:10px; border:solid 1px #CCCCCC;}
➊ 번 CSS 스타일
➋ 번 CSS 스타일
source/ch06/pic6-13_1.htmlsource/ch06/pic6-13_2.html
![Page 11: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/11.jpg)
처음부터 다시 배우는 HTML5 & CSS3
인접 선택자인접 선택자 ( Sibling Selector) 는 근접해 있는 두 개의 형제 관계에 있는 선택자에 스타일을 적용할 때 사용합니다 . 문단에서는 보통 제목을 <h1> 또는 <h2> 를 이용해서 지정하고 본문 내용은 <p> 를 이용해서 단락을 지정합니다 . 여기서 <h1> 과 <p> 는 형제 관계에 있습니다 .
왜 형제 관계인가 하면 , <h1> 내용 </h1> 으로 끝나고 <p> 내용 </p> 로 끝납니다 .
즉 <h1> 내부에 <p> 가 있는 것이 아니라 <h1> 으로 시작하고 </h1> 으로 닫아줘서 끝나버리고 다시 <p> 로 시작해서 </p> 로 닫아줬기 때문에 두 태그 선택자 사이는 형제 관계에 있는 선택자가 됩니다 .
예를 들어 , <h1>...</h1>, <p>...</p> 형식의 문장에서 <p> 문장의 첫 번째 단어의 크기를 조정할 때 인접 선택자를 편리하게 사용할 수 있습니다 . 인접 선택자를 사용하지 않는다면 , 해당 첫 글자에는 클래스 선택자를 이용해서 값을 지정해야만 합니다 .
인접 선택자는 아래와 같은 형식으로 지정합니다 .
선택자 +( 플러스기호 ) 선택자 { 속성값 ; }
![Page 12: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/12.jpg)
처음부터 다시 배우는 HTML5 & CSS3
인접 선택자다음 그림을 보면 . <h1>...</h1>, <p>...</p> 로 구성된 문장과 <h2>...</h2>, <p>...</p> 로 이루어진 두 가지 종류의 문단이 있는데 각각 문단의 첫 글자를 큰 글자로 만들고 싶을 때 h1+p:first-letter
: 속성값 ; 형식으로 문단의 첫 글자 크기를 키울 수 있습니다 .
또한 h2+p:first-letter: 속성값 ; 형식으로 다음에 나오는 문장의 첫 글자도 다른 크기와 색으로 지정해 준 것을 알 수 있습니다 .
이렇게 인접 선택자는 인접한 두 개의 선택자와 결합하여 다른 효과를 낼 때 유용하게 사용할 수 있는 선택자입니다 .
h1+p:first-letter { float:left; margin:10px 5px 0 0; font-size:3em; color: #F90;}
h2+p:first-letter { float:left; margin:10px 5px 0 0; font-size:2.2em; color: #F00;}
h1 { font-family: "돋움 "; font-size: 3em; color: #06F;}
h2 { font-family: "궁서 "; font-size: 2em; color: #39C; line-height:1em;}
source/ch06/pic6-14.html
![Page 13: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/13.jpg)
처음부터 다시 배우는 HTML5 & CSS3
CSS 주석 달기CSS 도 다른 프로그래밍 언어와 같이 주석을 사용할 수 있습니다 . 주석을 사용하면 CSS 선택자가 어떤 역할을 하는지 그리고 어디에 사용되는지 파악할 수 있기 때문에 작업이 끝나고 수정할 때 그리고 처음에 디자인할 때 매우 편리하게 사용할 수 있습니다 . 사용 방법은 아래와 같습니다 .
/* 주석 문장 */
주석 사용법은 다른 프로그래밍 언어와 동일합니다 . 참고로 HTML 문장의 주석 형식입니다 .
<!-- 주석 문장 -->
약간의 차이가 있지만 , 사용하다 보면 금방 익숙해집니다 . 주석은 CSS 문장이 어떻게 작동되는지에 대해 설명하는 역할도 하지만 , 나중에 사용하지 않는 CSS 문장을 잠시 막아둘 때도 사용합니다 .
즉 아래와 같이 처리하면 h1 태그 선택자는 더는 작동하지 않게 됩니다 .
/* h1{color:red;} */
![Page 14: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/14.jpg)
처음부터 다시 배우는 HTML5 & CSS3
수도 선택자영어로 수도 선택자 (Pseudo Selector) 라고 하는 특수 선택자가 존재합니다 . Pseudo 는 영어로 허위( 의 ), 가짜 ( 의 )란 형용사와 명사로 사칭자 또는 꾸며보이는 사람을 뜻 합니다 .
수도 선택자는 선택자로 바로 사용하는 것은 아니고 선택자와 같이 사용되며 , 선택자를 꾸며 주는 역할을 하게 됩니다 . 다음페이지의 표 에서 수도 선택자의 역할과 형식 ( 포맷 ) 을 간단하게 표로 정리했습니다 .
이외에도 여러 가지가 존재합니다만 , 표에서 열거한 선택자가 가장 많이 사용됩니다 .
:hover, :active, :link, :visited 4 개의 선택자는 a 태그와 함께 가장 많이 사용되며 , 링크를 정의할 때 사용합니다 . 단지 링크에만 적용된다고 해서 반드시 링크 태그인 a 에서만 사용하는 것은 아닙니다 . table
에서 특정 열에 효과를 줄 때도 사용합니다 .
또는 박스에서뿐만 아니라 다양한 용도로 사용되지만 , 가장 많이 사용하는 것이 a 태그에 의한 링크에 많이 사용된다는 의미입니다 . 여기서 자세히 설명하는 것보다 , 실전에서 직접 하나씩 적용해 보면 수도 선택자는 바로 이해할 수 있습니다 .
![Page 15: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/15.jpg)
처음부터 다시 배우는 HTML5 & CSS3
수도 선택자포 맷 역 할 비 고
:hover 마우스 커서가 링크에 올라가 있는 상태
:active 마우스 커서를 클릭한 순간부터 놓기 직전까지 상태
:link 링크를 클릭하지 않는 그냥 링크되어 있는 상태 a 만 써도 무관
:visited 링크를 눌러서 방문한 후 상태
:focus 입력 폼에서 키보드의 입력을 기다리는 상태
:first-line 첫 번째 문장에만 적용
:first-letter 문장의 첫 글자에만 적용
:before 문장이 시작되기 전
:after 문장이 끝난 다음
![Page 16: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/16.jpg)
처음부터 다시 배우는 HTML5 & CSS3
수도 선택자 source/ch06/pic6-15.html
a:link {color: #F60; text-decoration: none;}
tr:hover {background-color: #FC6;}
h1:before {content: url(bul1.gif);} h1:after {content: url(bul2.gif);}
a:visited {color: #999;}
a:hover {color: #06F; text-decoration: underline;}
a:active {color: #F00; text-decoration: line-through;} 그림에는 나타나지 않음
![Page 17: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/17.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속이번 섹션에서는 선택자를 설명할 때 중간중간 불쑥 나왔던 상속이란 용어에 대해 학습하겠습니다 . 상속은 패밀리 트리를 통해 이해하는 것이 가장 쉽습니다 . 대부분 의 다른 책들이 상속의 개념을 먼저 설명해 주고 관련 내용을 설명하지만 , 이 책은 먼저 “상속은 이런 식으로 된다 .” 라는 실제 예를 먼저 보여주고 상속의 개념을 나중에 설명하고 있습니다 . 독자가 실제 예를 보면서 “이게 뭔가 연결되어 속성이 적용되는 것 같은데 .” 라는 느낌을 받은 후 상속의 개념을 학습하게 되면 좀더 확실하게
개념을 이해할 수 있지 않을까 생각해서입니다 .
CSS 는 모든 것이 패밀리 트리에 의해서 결정된다고 볼 수 있습니다 . 패밀리 트리를 한국어로 바꾸면 ‘가계도’라고 할 수 있습니다 . 즉 할아버지 - 아버지 - 아들 이렇게 내려가는 부계 가계도라고 보시면 아주 이해하기 쉽습니다 .
할아버지에 의해서 발생한 유전적인 정보가 밑으로 계속해서 내려가면서 반영되지 만 , 제일 유전적으로 강한 영향을 받는 것은 아버지와 어머니에게 받은 유전적인 정보입니다 . 즉 할아버지에게서 유전적인 정보를 이어 받기는 하지만 , 중간에 어머니에 의해서 다른 속성이 부여되는 것입니다 .
![Page 18: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/18.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속
< 일반 가계도 >
<CSS 상속 구조 >
![Page 19: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/19.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속이것을 CSS 에 적용한다고 생각해 보면 다음과 같습니다 .
body 태그 선택자에서 글꼴 사이즈 12 픽셀 , 색상 #06F 로 지정했는데 , p 태그 선택자에서 글꼴 사이즈를 14 픽셀로 지정을 하게 되면 , p 태그로 감싼 부분은 글꼴 사이즈가 14 픽셀로 지정되며 , 나머지 부분은 12 픽셀로 지정됩니다 . 근데 다시 p 태그선택자 밑에 있는 a 태그 선택자의 글꼴 사이즈를 16
으로 지정하게 되면 a 선택자를 만난 글꼴의 사이즈는 16 픽셀로 됩니다 .
하지만 여기서 body 태그에서 글꼴의 색상은 #06F 로 지정했기 때문에 전체 글꼴의 색상은 #06F 로 되어 있습니다 . 이 색상은 하위 태그 선택자에 의해서 바뀌기 전까지는 모든 글꼴의 색상이 #06F 로 됩니다 . body 태그에 의해서 상속이 된 것이죠 .
![Page 20: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/20.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속<!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
![Page 21: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/21.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속
source/ch06/ex6-12.html
그림을 보면 전체 색상은 #06F 로 되어 있는데 , p 태그가 지정된 부분은 글꼴 사이즈가 14 픽셀 , a 태그로 감싼 부분은 16 픽셀 , .box 선택자로 감싼 부분은 12
픽셀인 것을 알 수 있습니다 .
![Page 22: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/22.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속다음 페이지의 그림을 보면 각각의 속성들이 상속에 의해 값이 적용된 것을 알 수 있습니다 . 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 하위 선택자를 보면 상속의 결과를 알 수 있습니다 .
![Page 23: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/23.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속
하위 선택자에 의한 상속 source/ch06/ex6-13.html
![Page 24: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/24.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속패밀리 트리에 의한 태그 선택자의 속성을 지정하는 법을 배웠는데 , 단순히 태그 선택자만 하위 선택자를 사용하는 것은 아닙니다 . 다른 유형의 선택자와 결합하게 되면 복합 하위 선택자를 생성할 수 있습니다 .
패밀리 트리를 통해 상속에 대한 내용까지 배웠으며 , 상속에 대한 개념을 바탕으로 지금까지 배운 선택자를 종합적으로 구현해 보겠습니다 . ( 반드시 소스를 보면서 강의해 주세요 .)
아래와 같이 태그 선택자를 이용해서 글꼴 크기를 14 픽셀로 적용을 했으며 ,
p {font-size:14px;}
태그 선택자의 종속 선택자로 p.fin{ 속성값 ;} 을 지정했습니다 .
그러면 이 선택자는 <p class=“fin”> </p> 내부에서만 적용됩니다 .
p.fin {color:#C90;}
![Page 25: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/25.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속다음은 종속선택자의 하위 선택자로 적용을 했으며 , <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;}
![Page 26: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/26.jpg)
처음부터 다시 배우는 HTML5 & CSS3
패밀리 트리로 이해하는 상속
p.fin a {color: #F60; text-decoration: under-line;}
p.fin {color:#C90;}
p .fin a{color: #39C; text-decoration: line-through;}
.fin a {color: #666; text-decoration: under-line;}
.fin {color: #666;}
p .fin {color:#F00;}
source/ch06/ex6-14.html
![Page 27: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/27.jpg)
처음부터 다시 배우는 HTML5 & CSS3
CSS 선택자 결론 CSS 의 처음이자 마지막이 선택자이기 때문에 , 선택자는 CSS 의 가장 기초가 되는 것이고 , 선택자를 어떻게 사용하는가에 따라서 코드의 수가 많아지거나 적어질 수 도 있습니다 . 태그 선택자 패밀리 트리에 의한 하위 선택자는 정말 다양한 방식으로 사용할 수 있고 클래스 선택자와 아이디 선택자 또한 적재적소에 사용함으로써 , 다양한 효과를 줄 수 있습니다 .
또한 이러한 선택자를 더욱 다양한 방법으로 사용할 수 있게 하는 수도 선택자를 사용하게 되면 , 웹 페이지를 꾸밀 때 , 그래픽 파일을 최소한으로 사용하면서도 더욱 화려한 효과를 낼 수 있습니다 .
특히 CSS3 에서는 border-radius 를 통한 둥근 테두리를 만들고 , background gradient 를 통한 그라데이션 효과 , text-shadow 를 통한 텍스트 그림자 효과를 주고 다양한 웹 글꼴 및 외부 글꼴을 사용함으로써 더 이상 포토샵을 이용한 디자인이 필요 없을 정도로 다양한 효과를 줄 수 있습니다 .
다시 한번 정리하면 선택자는 태그 선택자 , 클래스 선택자 , 아이디 선택자 , 종속 선택자 , 하위 선택자 ,
그룹 선택자 , 전체 선택자 , 자식 선택자 , 인접 선택자 이렇게 9 가지 종류가 있으며 복합적으로 수도 선택자도 추가적으로 사용할 수 있습니다 .
![Page 28: 처음부터 다시 배우는 HTML5 & CSS3 강의자료 10일차](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a457aac79592f2e8b5aee/html5/thumbnails/28.jpg)
처음부터 다시 배우는 HTML5 & CSS3
CSS 선택자 결론 가장 많이 사용하는 것이 태그 선택자 , 클래스 선택자 , 아이디 선택자 , 종속 선택자 , 하위 선택자 이렇게 5 가지 선택자입니다 . 사실 이 5 가지 선택자만 확실하게 이해하더라도 웹사이트를 만들 때 전혀 어려움이 없습니다만 , 다른 선택자의 역할과 사용법을 알게 되면 더욱 편리하게 웹사이트 개발이 가능합니다 .
자식 선택자와 인접 선택자는 아주 가끔 사용할 기회가 있을 것입니다 . 하지만 이 두 개의 선택자는 IE6 에서 지원이 되지 않기 때문에 사용시 조금은 고민이 될 수 있습니다 . 웹 개발자 입장에서는 어떤 브라우저에서건 같은 모양을 원하는데 , 일부 브라우저가 지원하지 않게 되면 고민될 수밖에 없지만 , 이제부터라도 IE6 는 제외하고 웹 개발을 하라고 권하고 싶습니다 .
웹 표준을 알게 되면 될수록 IE6 가 정말 싫어 질 것입니다 . IE6 때문에 엄청난 골치가 아파올 것입니다 .
심지어 구글에서는 더는 IE6 를 공식적으로 지원하지 않는다고 밝혔고 , IE6 를 만든 MS 및 네이버에서도 IE6 퇴출 운동을 벌이고 있습니다 . ( 2012년 2월 1 일자 기사에 XP 에서 IE6 와 IE7 을 IE8 로 ,
윈도우 7 에서는 IE9 으로 강제적으로 업그레이드하는 정책이 MS 에서 발표되었습니다 .)