CSS- 선택자

선택자

1. 전체 선택자

 - 스타일을 모든 요소에 적용
 - * 기호를 사용해서 표현한다
- 너무 많은 요소가 있는 html에 사용할 경우 클라이언트에 부하를 걸수 있음
ex) * { 속성명1: 속성값1; 속성명2: 속성값2; }
✔ 개별 적용된 스타일은 우선순위로 적용됨

2. 요소 선택자

- 특정 요소가 쓰인 모든 요소에 스타일을 적용

        ✔ 상속
                 - 부모요소의 속성값이 자식 요소에게 전달 되는것

3. id 선택자

- 웹 문서 안에 특정 부분 스타일을 적용
- # 기호를 사용해서 id속성을 가진 요소에 스타일을 적용

            CSS
            h2 { font-size: 30px; }  /* 안녕하세요, 반갑습니다 모두 적용됨 */ 
            h2#hello { font-size: 20px; } /* 안녕하세요가 20픽셀로 변경 */
            #hello { color: pink; } /* 안녕하세요를 pink 컬러로 변경 */

            HTML
            <h2 id="hello">안녕하세요</h2>
            <h2>반갑습니다</h2>

4. class 선택자

- 특정 집단의 요소를 한번에 스타일을 적용하는 방법
- . 기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
- 두개 이상 클래스를 적용시키고 싶으면 띄어쓰기로 사용할수 있음

            css
            h2 { font-size: 20px; } /* 안녕하세요, 반갑습니다 적용 */
            h2.hello { color: deeppink; } /* 안녕하세요 적용 */
            .hello { color: deepskyblue; } /* 안녕하세요, 하이 */
            p { font-weight: bold; } /* 하이, 또 만났군요 적용 */

            html
            <h2 class="hello">안녕하세요</h2>
            <h2>반갑습니다</h2>
            <p class="hello">하이</p>
            <p>또 만났군요</p>

 

5. 그룹 선택자

        - 여러개의 요소를 나열하고 , 로 구분하여 스타일을 적용

        h2, p { text-align: center; }

 

6. 자식 선택자

        - 부모의 요소 하위에 자식요소의 스타일을 적용                     
            body > p { color: deepskyblue; }

7. 자손 선택자

        - 조상요소 하위에 모든요소의 스타일을 적용
        - 자손은 자식을 포함
            body p { color: deepskyblue; }

8. 인접 형제 선택자

        - 동일한 부모의 요소를 갖는 자식요소들의 관계
        - 연속된 동생 요소의 스타일을 적용
            h2 + p { color: deepskyblue; }

9. 일반 형제 선택자

        - 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
            h2 ~ p { color: deeppink; }

10. 속성 선택자

- HTML 요소에서 src, href, style, type, id, class ... 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 많음 -> MDN 참고 https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors

        css
        [src] { border: 3px solid red;}
        [src='apple.png'] { width: 200px; height: 200px;}

        HTML
        <img src='apple.png' alt='사과이미지'>
        <ing src='banana.png' alt='바나나이미지'>

11. 가상 선택자

        - 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택

            css
            .deepsky { color: deepskyblue; }

            html
            <ul>
                <li class='deepsky'>김사과</li>
                <li class-'deepsky'>오렌지</li>
            </ul>

        - li:first-child
            li 요소중에서 첫번째 해당하는 요소의 스타일을 적용
            ex) ul > li:first-child { color:deeppink; }
        
        - li:last-child
            li 요소중에서 마지막에 해당하는 요소의 스타일을 적용

        - li:nth-child(n)
            li 요소중에서 n번째 요소에게 스타일을 적용

        - li:nth-child(odd)
            li 요소중에서 홀수에게

        - li:nth-child(even)
            li 요소에서 짝수번째에게

12. 스타일링 링크

        - a:link 
            하이퍼링크가 연결되었을때 선택
        
        - a:visited
            특정 하이퍼 링크를 방문 한적이 있을 때 선택

        - a:hover
            특정요소에 마우스를 올렸을때
        
        - a:active
            특정요소에 마우스 버튼을 클릭하고 있을 때 선택