wiki:css:css_note:css_selectors
문서의 이전 판입니다!
목차
Document
- description : CSS Selectors
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-04
Source of the article
- “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
CSS Selectors
CSS 선택자는 디자인하려는 HTML 요소를 선택합니다.
CSS 선택자는 5개의 카테고리로 구분할 수 있습니다.
- 단순 선택자 (Simple Selectors) : 이름, id, class 기반 HTML 요소들을 선택합니다.
- 연결자 선택자 (Combinator selectors) : 요소들 사이의 특정 관계에 기반한 요소들을 선택합니다.
- 의사 클래스 선택자 (Pseudo-class selectors) : 특정 상태에 기반한 요소들을 선택합니다.
- 의사 요소 선택자 (Pseudo-elements selectors) : 요소의 일부분을 선택하고 디자인합니다.
- 속성 선택자 (Attribute selectors) : 속성 또는 속성 값에 기반한 요소들을 선택합니다.
CSS 요소 선택자
요소 선택자는 요소 이름에 기반하여 HTML 요소들을 선택합니다.
p {
text-align: center;
color: red;
CSS id 선택자
id 선택자는 특정 요소를 선택하기 위해 HTML 요소의 id 속성을 사용합니다.
요소의 id는 페이지 내에서 고유하므로, id 선택자는 하나의 고유한 요소를 선택하기 위해 사용됩니다.
특정 id를 지닌 요소를 선택하기 위해, 해시 (hash, 우물 정자(#))를 쓰고, 요소의 id 이름을 기재합니다.
#para1 {
text-align: center;
color: red;
}
CSS class 선택자
class 선택자는 특정 class 속성을 가진 HTML 요소들을 선택합니다.
특정 class룰 가진 요소들을 선택하기 위해, 마침표 (., period, 피어리어드)를 쓰고, class 이름을 기재합니다.
.center {
text-align: center;
color: red;
특정 HTML 요소들만 class에 영향을 받도록 명시할 수 있습니다.
기본형
p.center {
text-align: center;
color: red;
}
예제
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> // 이 HTML 요소만이 영향을 받습니다.
</body>
</html>
HTML 요쇼들이 하나 이상의 class도 참조할 수 있습니다.
기본형
<p class="center large">This paragraph refers to two classes</p>
상기 예제에서 <p>태그의 요소들은 class=“center”와 class=“large”에 따라서 디자인됩니다.
예제
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
<style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
</body>
</html>
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_selectors.1614823207.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
