728x90
생성자 | 작성방법 | 작성상세 |
태그 | 태그명 | 태그명 { CSS코드 ; } |
아이디 | # | # id속성값{css 코드;} |
클래스 | . | . class속성값{ css코드; } |
속성 | [ ] | 선택자[속성명 = "속성값"] { CSS 코드; } |
자식 | > | 선택자1 > 선택자2 { CSS 코드; } |
후손 | ( ) 띄어쓰기 | 선택자1 선택자2 { CSS 코드; } |
🔊 기본 속성 생성자
태그에 작성된 특정 속성을 선택하는 선택자 (id, class도 선택 가능 하지만 보통 #, .을 사용함)
[작성법]
선택자[속성명 = "속성값"] { CSS 코드; }
(참고)
1) 선택자는 생략할 수 있다.
-> 특정 속성을 가진 모든 요소 선택1
2) "속성값" 양쪽의 쌍따옴표("")는
홑따옴표('')로 변경하거나 생략할 수 있다.
|
✅ CSS 작성
div[name ="name-1"]{background-color: aqua;}
[name="name-2"]{background-color: violet;}
p[name =name-1]{ background-color: brown;}
✅ HTML 작성
<div name="name-1">div1</div>
<div name="name-1">div2</div>
<div name="name-2">div3</div>
<div name="name-2">div4</div>
<p name="name-1">p1</p>
<p name="name-1">p2</p>
<p name="name-2">p3</p>
<p name="name-2">p4</p>
✅ 결과물
🔊 자식 선택자 (자식 : 1단계 아래)
지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
[작성법]
선택자1 > 선택자2 { CSS 코드; }
- 선택자1 : 부모 요소 선택(반드시필요)
- 선택자2 : 자식 요소 선택(반드시필요)
|
✅ CSS 작성
#parent-ul > li { background-color: orange;}
#parent-ul > li > span{ background-color: red;}
✅ HTML 작성
<ul id="parent-ul">부모
<li>자식1</li>
<li>
<span>자식2</span>
</li>
<li>자식 3</li>
<li>
<span>자식4</span>
</li>
</ul>
✅ 결과
🔊 후손(자손) 선택자 (후손 : n단계 모두)
지정된 요소의 모든 하위에 있는 요소를 선택하는 선택자
[작성법]
선택자1 선택자2 { CSS 코드; }
선택자1 : 부모(조상) 요소 선택자
선택자2 : 후손 요소 선택자
|
✅ CSS 작성
/* 후손 선택자*/
#test-div{border : 2px solid black;
}
#test-div p {
background-color: aqua;
}
✅ HTML 작성
<div id="test-div">
<p>test-div의 자식 요소 입니다.</p>
<p>test-div의 후손 요소 입니다.</p>
<div>
<p>이것도 후손일까?</p>
</div>
</div>
✅ 결과
728x90
'ON > HTML CSS' 카테고리의 다른 글
[CSS] 클래스 선택 (0) | 2023.06.11 |
---|---|
[CSS] 문자열 속성 [ ~= / |= / ^= / $= ] (0) | 2023.06.09 |
[CSS] 태그 | 아이디 | 클래스 (0) | 2023.06.08 |
[HTML] 이미지 | 하이퍼링크 | 입력 | form (0) | 2023.06.07 |
[HTML] 글씨 | 목록 | 표 | 영역 태그 작성법 (0) | 2023.06.07 |