[1] 강의
웹 프로그래밍(풀스택)
3. CSS - FE
3) CSS Selector
[2] 개념 정리
element에 style 지정을 위한 3가지 기본 선택자
tag로 지정하기
<style>
span {
color : red;
}
</style>id로 지정하기
<style>
#spantag {
color : red;
}
</style>
<body>
<span id="spantag"> HELLO World! </span>
</body>class로 지정하기
<style>
.spanClass {
color : red
}
</style>
<body>
<span class="spanClass"> HELLO World! </span>
</body>CSS Selector의 다양한 활용
id, class 요소 선택자와 함께 활용
#myid { color : red }
div.myclassname { color : red }그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면)
h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color : red }요소 선택 (공백) : 자손요소
아래 모든 span태그에 red색상이 적용됨
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu span { color : red }자식 선택 (>) : 자식은 바로 하위엘리먼트를 가리킵니다.
아래는 span tag 2만 red 색상이 적용됩니다.
<div id="jisu">
<div>
<span> span tag </span>
</div>
<span> span tag 2 </span>
</div>#jisu > span { color : red }n번째 자식요소를 선택합니다. (nth-child)
첫번째 단락에 red 색상이 적용됩니다.
<div id="jisu">
<h2>단락 선택</h2>
<p>첫번째 단락입니다</p>
<p>두번째 단락입니다</p>
<p>세번째 단락입니다</p>
<p>네번째 단락입니다</p>
</div>#jisu > p:nth-child(2) { color : red }
[3] 강의 정리
CSS 셀렉터에 대해서 알아보겠다. 우리가 자바스크립트 개발을 했던 분들은 쿼리 셀렉터나 제이쿼리 $ 같은 것들을 이용해서 도메인의 노드들을 찾을때 어떤 셀렉트 문법을 쓴다. 원래 출발점은 CSS에서 출발됐다. CSS 셀렉터라는 패턴 매칭을 시켜주는 어떤 방법이다. 트리 구조로 되어있는 되어있는 데이터를 빠르게 찾아가는 방법이다. 트리 구조로 되어 있는 게 DOM 트리고. DOM 트리에는 태그 네임 그리고 class나 id 같은 속성들을 이용 할 수가 있다.
그리고 상하관계가 있다. 부모와 자식 관계가 있기 때문에 트리를 어떤 속성과 태그 이름을 통해가지고 찾아가는 방법이다. 세 가지 기본 선택자가 있다. tag, id, class 이런 게 있다. tag로 지정할 때는 span 태그 이름을 쓰면 된다. 여러 개일 때는 맨 먼저 찾을 수 있는 것들을 바로 노출하게 되있다. span 태그라고 하면 모든 span 태그에 적용이 되는 거다. 예를 들어서 이전 예제에서 했던 여러 가지가 있는데. 여기도 spand이 있고, 여기도 span이 있다. 그럼 여기에다가 span { color : red; } 두개가 적용이 됬다. 얘도 빨간색, 얘도 빨간색. 그래서 이 span, 이 span 색깔이 적용된 것을 우리가 확인할 수가 있다. 그 다음 id로 지정을 할 수도 있다. id로 지정을 할 경우에는 id 값에 해당하는. id 같은 경우에 테스트를 해보면 이 spand에다가 만약에 id로 myspan id="#myspand" 이렇게 하고 그 다음에 똑같은 거를 여기에 span을 하면 어떻게 될까. span 이렇게 할 경우에는 자바 스크립트를 찾을 때는 이제 얘만 먼저 찾아진다. 쿼리 셀렉터를 쓸 때에는 color가 red인데. span을 이렇게 하지 말고 id 값으로 한번 해본다. myspan { color : red; }. id는 document, 즉 HTML 페이지에 하나만 쓰는 게 좋다. 유니크한 거 identifier이기 때문에 고유한 거 쓰면 된다. class는 이렇게 쓸 수 있다. .class로 이렇게 표시를 할 수 있다. 그 밖에 CSS 셀렉터를 한번 알아보면. id, class 또는 element. 이렇게 할 수도 있다.
.해가지고 붙어서 좀 더 구체적으로 이런 것들을 표시를 해줄 수가 있다. 얘는 span이다. span인데 #, id가 myspan인 놈들 똑같이 반영이 돼있다. 똑같이 반영된 걸 확인할 수 있다. 그룹을 선택할 수 있다. 얘들은 모두 red로 해준다. 매번 지정하기 힘드니 콤마를 기준으로 여러 개를 이렇게 지정할 수도 있다.
하위 요소는 자식은 이렇게 해서 선택을 할 수 있다. 그 다음에 자손, 자식의 자식의 자식. 또는 자식의 자식의 자식의 자식의 자식. 이런 것들을 공백으로 하면 자손이라고 한다. 하위에 있는 요소들을 선택을 할 수가 있다. n 번째 자식 요소는 좀 헷갈리는 부분이다. 쿼리 셀렉터에서 이 부분을 경험했으면 이게 뭐지 그랬을 테지. CSS에서도 동일한 동작이 된다. 이거는 한번 CSS 테스트할 겸 확인을 해보면 알 수 있다. 이거는 테스트를 통해가지고 여러분들이 확인할 수가 있다. 그 외에도 많은 CSS 셀렉터들이 있으니 치트 시트를 한번 복사해서 CSS 작업할 때 참고해도 좋을 거 같다. 여기서 CSS 셀렉터는 마치겠다.
'강의 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| 부스트코스 웹 프로그래밍(풀스택) - - 1. 웹 프로그래밍 기초 - 3-5-1 강의 정리 (0) | 2022.04.01 |
|---|---|
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-4 강의 정리 (0) | 2022.03.28 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-2 강의 정리 (0) | 2022.03.24 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-1 강의 정리 (0) | 2022.03.24 |