html 구조를 이렇게 나눌수도 있다. header, main 형식 등
li와 클래스에 둘다 배경색이 적용되어있지만, 이 경우에는 클래스 선택자가 더 구체적이고 우선시 되기 때문에 클래스에 선언한 배경색이 적용된다.
블록은 제한된 너비까지 다 가득차게 쓰는거고
인라인은 공간 낭비를 하지 않게 남은 공간도 알차게 쓰는??
지금까지 우리는 이미 많은 주요 CSS 선택자에 대해 배웠습니다. 다음은 CSS에서 사용할 수 있는 모든 CSS 선택기의 목록/요약입니다(아직 보지 못한 일부 포함):
● 태그 유형 선택자
o CSS: p { ... }
o 예를 들어 이 HTML 요소를 선택하면: <p>Some text...</p>
o 이 선택자는 이 태그 유형의 모든 HTML 요소를 선택합니다.
● 아이디 선택자
○ CSS: #some-id { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <h1 id="some-id">...</h1>
○ 이 선택자는 이 ID가 있는 요소를 선택합니다(페이지당 한 번만 가능)
● 클래스 선택자
○ CSS: .some-class { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <h1 class="some-class">...</h1>
○ 이 선택자는 이 클래스가 있는 모든 HTML 요소를 선택합니다.
● 속성 선택기(신규)
○ CSS: [src] { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <img src="...">
○ 이 선택자는 이 HTML 속성이 있는 모든 요소를 선택합니다.
● 범용 선택기(신규)
○ CSS: * { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <p>....</p><img ...>
○ 이 선택자는 모든 HTML 요소를 선택합니다(상속을 통하지 않고 모든 HTML 요소를 개별적으로 대상으로 지정하는 것처럼 직접 가능).
● 그룹화 선택자/선택자 리스트
○ CSS: p, .some-class { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <p>...</p><h2 class="some-class">...</h2>
○ 이 선택자는 해당 목록의 개별 선택자와 일치하는 모든 요소를 선택합니다.
● 결합 선택자
○ CSS: p.some-class { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <p class="some-class">...</p>
○ 이 선택자는 두 조건을 모두 충족하는 모든 요소를 선택합니다(예: 이 예제에서는 "some-class" 클래스가 있는 "<p>" 요소).
● 의사 선택자
○ CSS: a:hover { ... }
○ 예를 들어 이 HTML 요소를 선택하면: <a>...</a>(사용자가 해당 요소 위로 마우스를 가져갈 때)
○ 이 선택기는 이 "의사 상태"를 충족하는 모든 요소를 선택합니다(즉, 이 예에서 가리키고 있는 모든 링크).
'IT > Udemy 웹 개발 100일 과정' 카테고리의 다른 글
| [Udemy] 웹 개발 과정 5-6 일차 (0) | 2023.07.22 |
|---|---|
| [Udemy] 웹 개발 과정 3-4일차 (0) | 2023.07.20 |
| [Udemy] 웹 개발 과정 1-2 일차 (vscode 커밋 무한로딩 오류) (0) | 2023.07.20 |