CSS 선택자 - 1
CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성된다.
이 선택자에 대해 알아보자 :)
선택자의 종류는 굉장히 많기때문에, 자주사용하거나 꼭 알아야하는것들로 몇가지만 적어봅니당
1) 전체 선택자
스타일을 모든 요소에 적용할 때 사용한다.
* { 속성: 속성값; }
[예시]
<style>
* {color : gray}
</style>
2) 요소 선택자
특정 요소가 쓰인 모든 요소에 스타일을 적용한다.
선택자 { 속성: 속성값; }
[예시]
<style>
p {color: deepskyblue;}
</style>
여기서 잠시 상속에 대해 간단하게 알아보자
상속 : 부모 요소의 속성 값이 자식 요소에게 적용되는 속성
이 말이 무슨 말이냐면!
<p>상속하는 <span>속성임</span></p>
<p>상속하는 <em>속성임</em></p>
<p>상속하는 <ins>속성임</ins></p>
<p>상속하는 <strong>속성임</strong></p>위와 같은 코드를 입력했을 때, <p>태그 내에 있는 <span>,<em>,<ins>,<strong>에도
컬러를 deepskyblue로 변경하는 스타일이 적용된다.
즉, 부모요소(<p>)의 속성 값이 자식요소(<span>,<em>,<ins>,<strong>)에게 적용된 것이다.
[결과]
하지만 상속이 가능하지 않은 요소들도 있기때문에, 아래 사이트에서 상속 여부를 확인한 후 사용하는것이 좋다.
www.w3.org/TR/CSS22/propidx.html
Full property table
'cursor' [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit auto yes visual, interactive
www.w3.org
3) id 선택자
웹 문서 안의 특정 부분 스타일을 적용 한다.
# 기호를 사용해서 id 속성을 가진 요소에 스타일을 적용하며, 주로 단독으로 스타일을 적용할 때 사용한다.
#아이디명{속성명: 속성값;}
[예시]
<style>
#red{color: red;}
</style>
<body>
<ul>
<li id = "red">반하나</li>
<li>김사과 </li>
<li>이메론</li>
</ul>
</body>
[결과]
4) class 선택자
특정 집단의 요소를 한 번에 스타일을 적용한다.
(.) 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용한다.
#클래스명{속성명: 속성값;}
[예시]
<style>
.red{color: red;}
.orange{color:orange;}
</style>
<body>
<ul>
<li class="red">나는 빨강</li>
<li>나는 파랑</li>
<li class="orange">나는 주황</li>
<li class="red">나는 빨강</li>
<li class="orange">나는 주황</li>
</ul>
</body>
[결과]
5) 그룹 선택자
여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 적용한다.
선택자,선택자{속성명: 속성값;}
[예시]
<style>
h2,p { text-align: center;}
h2{ color: deeppink; font-size: 50px;}
</style>
<body>
<h2>그룹 선택자</h2>
<p>여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 적용</p>
</body>
[결과]
6) 하위 선택자(자손)
조상요소 하위의 모든 요소의 스타일을 적용한다. (자손은 자식을 포함)
부모선택자 자손선택자{속성명: 속성값;}
[예시]
<style>
ul a {color: deeppink; text-decoration-line: none;}
/*text-decoration-line: none -> 링크 밑에 밑줄 사라짐*/
</style>
<body>
<h2>하위 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.com">구글</a>
</li>
<li>
<p>다음</p>
</li>
<li>
<a href="https://www.nate.com">네이트</a>
</li>
</ul>
</body>
[결과]
ul>a 와 ul>li>a 요소 모두 스타일이 적용된 것을 확인할 수 있다.
7) 자식 선택자
부모의 요소 하위의 자식요소의 스타일을 적용한다. (자손x 바로 밑 자식만)
부모선택자>자식선택자{속성명: 속성값;}
[예시]
<style>
ul > a {color: deeppink; text-decoration-line: none;}
/*text-decoration-line: none -> 링크 밑에 밑줄 사라짐*/
</style>
<body>
<h2>자식 선택자</h2>
<ul>
<a href="https://www.naver.com">네이버</a>
<li>
<a href="https://www.google.com">구글</a>
</li>
<li>
<p>다음</p>
</li>
<li>
<a href="https://www.nate.com">네이트</a>
</li>
</ul>
</body>
[결과]
ul>a만 적용이 되고 ul>li>a(자손)에는 적용되지 않은 모습을 확인할 수 있다.
8) 인접 형제 선택자
동일한 부모의 요소를 갖는 자식 요소들의 관계이다.
해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.
형 + 동생{속성명: 속성값;}
[예시]
<style>
h3 + p {color: white; background-color: deeppink; font: 20px;}
</style>
<body>
<h2>인접 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
</div>
</body>
[결과]
h3 요소 바로 뒤에 오는 p요소인 둘째에 해당 스타일이 적용된 모습을 확인할 수 있다.
9) 일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소의 스타일을 적용한다.
형 ~ 동생{속성명: 속성값;}
[예시]
<style>
h3 ~ p {color: white; background-color: deeppink; font: 20px;}
</style>
<body>
<h2>일반 형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯째</span>
</div>
</body>
[결과]
h3 요소 뒤에 오는 모든 p요소에 스타일이 적용된 것을 확인할 수 있다
열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.
수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>
'프로그래밍 > CSS' 카테고리의 다른 글
| 05 CSS의 컬러 다루기 (0) | 2021.04.27 |
|---|---|
| 04 CSS 선택자 - 2 (0) | 2021.04.25 |
| 02 CSS 적용( 인라인,내부,외부 스타일) (0) | 2021.04.24 |
| 01 CSS란? (0) | 2021.04.24 |
댓글