코밍이의 하루
[CSS3] 주요 선택자 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3 |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] HTML5 + CSS3 웹 표준의 정석 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) 전체 선택자
- 말 그대로 스타일을 모든 요소에 적용할 때 사용
- 전체 선택자로는 *(별표) 사용
| 기본형 |
| * { 속성 : 속성 값; 속성: 속성 값; ...} |
2) 태그 선택자
- 특정 태그가 쓰인 모든 요소에 스타일 적용
| 기본형 | 예제 |
| 태그 { 스타일} | p { font-size: 12px; font-family: 돋움; } |
- 태그 VS 요소
① 태그 : 말 그대로 태그 자체를 가리키는 말
② 요소 : 태그가 적용된 것
3) 클래스 선택자
- 특정 부분에 스타일 적용
- 클래스 이름 앞에 마침표(.)를 붙임
- 문서 안에서 여러 번 적용할 수 있음
| 기본형 | 예제 |
| .클래스명{ 스타일 } | .blue { color:blue; } |
4) id 선택자
- 웹 문서 안의 특정 부분에 스타일 지정할 때 사용
- # 기호를 사용
- 문서 안에서 한 버난 적용할 수 있음(중복 불가)
- 문서의 레이아웃과 관련된 스타일을 지정하거나 자바스크립트 프로그램에서 웹 요소들을 구별할 때 사용
| 기본형 |
| #아이디명{ 스타일 } |
5) 그룹 선택자
- 둘 이상 요소에 같은 스타일 적용
- 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일은 한 번만 정의
| 기본형 | 예제 |
| 이름1, 이름2, .... | h1, h2 { text-align:center; } |
3. 소스 코드 및 실행 화면
- tag-selector.html
<!doctype html>
<html lang="ko">
<head>
<title>이지스퍼블리싱</title>
<meta charset="utf-8">
<style>
* {
margin: 20px auto;
}
#container {
width:600px; /* 너비 */
padding:15px; /* 테두리와 내용 사이의 여백 */
border:1px dotted gray; /* 테두리 스타일 */
}
p {
font-size:0.9em; /* 글자 크기 */
line-height:2.0; /* 줄간격 */
}
.bluetext {
color:blue;
}
h2.accent {
background-color:#222;
color:#fff;
padding:5px;
}
.browntext {
color:brown;
}
.boldtext {
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<h1>회사 소개</h1>
<h2 class="accent">“사람을 구체적으로 도와주는 책”</h2>
<p>이지스퍼블리싱(주)의 책에는 <span class="browntext boldtext">‘사람들에게 구체적으로 도움이 되는 책’을 만든다는 출판 가치가 담겨 있습니다.</span></p>
<p> 2010년 5월 출범한 이지스퍼블리싱(주)는 크게 두 영역의 책을 출간합니다. IT 실용 도서와 학습 분야 도서입니다.
IT 교재와 사진 책 등 실용서는 이지스퍼블리싱 브랜드로, 학습과 자녀교육 도서는 이지스에듀 브랜드로 출간하고 있습니다. </p>
<h2 class="bluetext">이지스퍼블리싱의 미션</h2>
<p>사람에게 구체적으로 <span class="bluetext">도움</span>을 주는 책<br>
우리는 열심히 사는 사람들에게 도움이 되고 싶습니다.<br>
우리는 책을 출간하기 전에 질문할 것입니다.<br>
"이 책이 사람들에게 도움이 됩니까?"</p>
<p class="bluetext">정보의 지름길을 만들어 빠르게 원하는 곳으로 가도록 도와주는 책.
손에 잡히는 이익을 얻을 수 있도록 도움이 되는 책을 만들고 싶습니다.</p>
</div>
</body>
</html>
'웹언어 공부 > CSS3' 카테고리의 다른 글
| [CSS3] 브라우저 접두사 (0) | 2021.08.26 |
|---|---|
| [CSS3] 스타일 우선순위와 상속 (0) | 2021.08.26 |
| [CSS3] CSS(Cascading Style Sheets) 기초 (0) | 2021.08.26 |
'웹언어 공부/CSS3' Related Articles
more
