📋오늘의 목표📋
css의 선택자에 대해서 알아보자
📕 선택자
- 내가 꾸미고 싶은 html 요소를 선택해야한다.
📖 요소 선택자
- 선택자에 해당하는 문서 내 해당하는 태그를 모두 꾸며준다.
- 선택자를 그룹화할 수 있다.
📒 그룹화
- 선택자를 그룹화 할 수 있다.
- 선언을 그룹화 할 수 있다.
h1, h2, h3, h4, h5, h6 { color: yellow; font-size: 2em; background-color: gray; }- 전체 선택자 * : 성능에는 좋지 않다.
* { color: yellow; }🤔 동일한 태그인데 다른 효과를 주고 싶으면 어떻게 할까?
답은 html의 class속성를 활용하기!!
📖 class선택자 .
- 가장 일반적인 방법이라고 한다.
- 꾸며주고 싶은 요소에
class속성을 통해속성값을 추가한다. - class선택자
.를 이용해서 작성한다.
.속성값 { color: yellow; }
✍️ css
.foo { font-size: 30px; }👉 class 선택자 foo를 선택하는 방법
✍️ html
<p class="foo"> ... </p>📒추가 규칙 : class에 여러값을 넣을 수 있음.
- HTML의 class요소에는 여러 속성값을 넣을 수 있다.
- 각각의 속성값에 css규칙을 작성할 수 있다.
✍️css
.foo { font-size: 30px; }
.bar { color: blue; }✍️html
<p class="foo bar"> ... </p>👉 <p>는 2개의 규칙이 모두 적용된다.
📖 id 선택자 #
- html속성에
id속성을 추가한다. - id 선택자
#를 통해서 작성한다.
#bar { background-color: yellow; }
✍️css
#bar { background-color: yellow; }✍️html
<p id="bar"> ... </p>📒 class선택자 .와 id 선택자 #의 차이
- id는 문서내에서 유일해야한다.
id로 꾸밀 수 있는 태그는 딱 하나만 가능하다. - class는 여러 태그에 사용할 수 있다.
한 class로 여러 태그를 한번에 꾸밀 수 있다.
📖 클래스 선택자를 조합하기
👉동시에 만족하는 태그들이 선택된다.
📒 요소와 class의 조합
p.bar { ... }👉<p>이면서 class속성에 bar가 있는 경우
📒 다중 클래스의 경우
.foo.bar { ... }👉 class 속성에 foo와bar 모두 있는 경우
📒 id와 class의 조합
#foo.bar { ... }👉 id가 foo이며 class가 bar인 경우
📖 속성선택자 태그[]
- 단순 속성으로 선택
- 정확한 속성값으로 선택
- 부분 속성값으로 선택
📒 단순 속성으로 선택
- 선택자와, 대괄호[]를 사용해서 속성이름을 선택하고 해당선택자이며, 속성이름을 포함한 태그를 꾸민다.
p[class] { }:<p>이면서class속성을 포함한 코드를 꾸며준다.
p[class][id] { }:<p>이면서class,id속성을 포함한 코드를 꾸며준다.
📒 정확한 속성값으로 선택
- 선택자와 []를 사용한다.
- []안에는 속성과 속성값을 다음 네가지의 경우와 같이 쓴다.
📒 부분 속성으로 속성과 속성값을 쓰는 네가지 방법
- 속성~=속성값 : 공백으로 구분해서 포함될 때 ex)color ful 일때 ful
- 속성^=속성값 : 속성값으로 시작될 때
- 속성$=속성값 : 속성값으로 끝날 때
- 속성*=속성값 : 단순 포함될 때 ex)colorful
📕 문서의 구조
✍️예시 코드
<html>
<head>
</head>
<body>
<div>
<h1><span>HTML</span>: Hyper Text Markup Language</h1>
</div>
<span>HTML 설명</span>
<p>HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다.</p>
</body>
</html>
✍️예시 코드의 부모자식 관계 설명
- 직접적으로 수직적인 관계
- `div`의 부모: `body`
- `div`의 자식: `h1`과`span`✍️예시 코드의 조상,자손 관계 관계 설명
- 수직적인 관계를 나타냄
- `div`의 조상: `body`,`html`
- `div`의 자손: `h1`,`span`,`span`✍️예시 코드의 형제 관계 관계 설명
- 같은 부모를 가진 요소들
- 인접한 형제 요소 : 바로 뒤에 나오는 형제
- `div`의 형제 요소 : `span`,`p`
- `div`의 인접한 형제 요소 : `span`📖문서구조를 이용한 선택자
- 자손 선택자
- 자식 선택자
- 인접 형제 선택자
📒 자손 선택자 공백
- 선택자와 선택자 사이에 아무런 기호없이 공백으로 써준다.
div span { }📒 자식 선택자 >
- 선택자 사이에 > 를 사용한다.
div > span {}📒 형제 선택자 ~
- 뒤에 있는 형제 선택자를 구며준다.
h1+h2{}📒 인접 형제 선택자 +
- 선택자 사이에 + 를 사용한다.
- 인접한 형제 태그만 가능
- 뒤 선택자를 꾸민다
div + span {}✍️ 중요한 건 맨 뒤 선택자만 해당된다는 것!
🔥오늘 배운 것🔥
css선택자에 대해서 배워봤고 중간에 부모 자식관계에 대해서도 알아봤다.
특히 선택자 그룹화 방법에 대해서 많이 배웠는데 헷갈리지 않도록 정리를 잘 해야할 것 같다.
24년도까지 프로젝트 두개를 마치고 25년에는 개발 팀장을 할 수 있는 실력이 되자!