WEB-CSS-기본 선택자
기본 선택자
기본 선택자
전체 선택자
*를 사용 주로 웹 브라우저 기본 스타일 초기화 할 때 사용한다.
- 기본 코드
<style>
* {
background-color: black;
color: aliceblue;
}
</style>
- 출력 화면
타입 선택자
특정 태그를 사용하는 모든 요소에 스타일 적용
- <head> 코드
p {
background-color: black;
color: aliceblue;
}
- <body> 코드
<body>
<h1>hi</h1>
<p>안녕하세요?</p>
<p>ddddd</p>
</body>
- 출력 화면
같은 태그 다른 스타일 사용 - 클래스 선택자
- 기본형
.클래스명 {스타일 규칙}
<style>
.bg {
background-color: black;
}
.text_color {
color: aquamarine;
}
</style>
<body>
<h1>hi</h1>
<p class="bg text_color">안녕하세요?</p>
<p class="text_color">ddddd</p>
</body>
- 출력 화면
같은 스타일 규칙 사용 - 그룹 선택자
- 기본형
선택자1, 선택자2 {스타일 규칙}
h1, p {
color: blue;
}
- 출력 화면
출처
- (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.
