[ex03~10] CSS (Selector)

ex03

CSS 문법

        선택자 { 속성명: 값; }

        선택자 { 속성명: 값;  속성명: 값; 속성명: 값;}

	<!-- **자주쓰는 형식 -->
        선택자 {
            속성명: 값; 
            속성명: 값; 
            속성명: 값; 
        }

        1. 선택자: 문서내에서 원하는 태그를 검색
        2. 속성: 서식의 종류
        3. 값: 서식의 값

CSS 선택자, CSS Selector
- HTML 문서내에서 서식을 적용하려는 대상 태그를 검색하는 도구

        1. 전체 선택자
        - 모든 태그를 선택한다.
        - 모든 태그에 동일한 서식을 적용할 때 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        * { color: green;}

    </style>
    
</head>
<body>

     <h1>수업 일지</h1>

     <p>오늘은 HTML 수업을 합니다.</p>
     <p>HTML 수업이 끝나면 CSS 수업으로 넘어갑니다.</p>
     
     <h2>수업 내용</h2>
     <ol>
        <li>문단 태그</li>
        <li>목록 태그</li>
        <li>테이블 태그</li>
        <li>이미지 태그</li>
        <li>링크 태그</li>
     </ol>

     <h2>복습할 내용</h2>
     <ul>
        <li>테이블 셀 병합하기</li>
        <li>이미지 사이즈 변경하기</li>
        <li>내부 링크 생성하기</li>
     </ul>


</body>
</html>

2. 태그 선택자
- 태그명을 가지고 원하는 태그를 선택한다.

- 검색된 모든 태그를 일괄 적용 > 생산성!!

- 사용 쉬움

- 단점 > 같은 태그를 일괄 적용

    <style>

        h2 { color: orange}
        
        p { color: gray}

        li { color: yellow}

    </style>

3. ID 선택자

        - 태그에 명시된 id 속성을 검색해서 태그를 선택
        - 태그명#ID
        - 원하는 태그를 직접 선택할 수 있다.
        - 일괄 적용이 안된다. > id는 유일하기 때문에

- id 중복 XXX (실행은 되지만 하면 안됨)

    <style>
        h2#title { color: orange;}
    </style>
    
... 

<h2 id="title">수업 내용</h2>

        4. Class 선택자
        - 태그에 명시된 class 속성을 검색해서 태그를 선택
        - 태그명.Class
        - 일괄 적용이 된다. > class 그룹을 묶기 위한 식별자라서

<style>
    li.item { color: greenyellow;}
</style>

...

     <ol>
        <li class="item">문단 태그</li>
        <li class="item">목록 태그</li>
        <li class="item">테이블 태그</li>
        <li class="item">이미지 태그</li>
        <li class="item">링크 태그</li>
     </ol>

ex04

        5. 그룹 선택자
        - 2개 이상의 선택자를 한번에 적용하는 방법
        - 선택자, 선택자, 선택자, { 구현부; }

<style>
h1, h2 { color: orange;}    
p, h2#title, li.item { text-decoration: underline;}

    /* id 선택자 이렇게 쓰는 것도 가능(모두 같은 의미)
    h2#title {}
    #title {}
    *#title {}
    */
    
    #title { color: orange;}

    /* class 선택자 이렇게 쓰기 가능(li 생략시 주의! li 아닌 태그에 item 붙이면 같이 적용됨)
    li.item {}
    .item{}
    *.item{}
    */

    li.item { color: greenyellow; }

</style>

ex06

6. 자식 선택자, Child Selector
- 선택자 > 선택자 {}

- 부모를 조건으로 자식 선택
- 구체적
- 정밀도 높음 + 범위 좁음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 부모를 조건으로 자식을 선택 */
        ol > li { color: orange;}
        ul > li { color: blue;}
        
        /* 구분 안될땐 할아버지까지 */
        ol > li > span { color: blue;}

        /* 자세히쓰면 이렇게 */
        html > body > ol > li > span { color: blue;}

    </style>
</head>
<body>
    <!-- ex05_selector.html -->

    <h1>커리큘럼</h1>

    <ol>
        <li class="item">Java <span>Programming</span></li>
        <li>Oracle Database</li>
        <li>JDBC <span>Programming</span></li>
        <li>Client <span>Programming(<b>HTML</b>)</span></li>
        <li>Client <span>Programming(<b>CSS</b>)</span></li>
    </ol>

    <h2>주의 사항</h2>

    <ul>
        <li>구글 드라이브에 <span>백업본</span>을 다운로드 받으세오.</li>
        <li>과제는 <span>금요일</span>까지 제출하세요.</li>
        <li>VS Code 설치 바랍니다.</li>
    </ul>

</body>
</html>

        7. 자손 선택자, Descendant Selector
            - 선택자 선택자 {}
            - 조상을 조건으로 자식 선택
            - 정밀도 낮음 + 범위 넓음

<style>
    /* ol > li > span { color: blue;} */	

    /* 중간세대 생략 가능 */
    ol span { color: blue;}
</style>

ex06

테이블 스타일 지정

        /* 잘못된 족보 */
        table > tr > td { color: orange; }

        /* tbody 숨겨져있음 > 페이지 F12 > 요소에서 확인 */
        table > tbody > tr > td { color: orange; }

        /* 생략시 */
        table td { color: orange;}
        /* 혼용 가능 */
        table tr > td { color: orange;}
        
        /* table > tr > td { color: blue;} */
        /* ㄴ 구조만으로 구분할 수 없는 경우 > table에 id 지정 */
        
        /* 테이블 스타일 지정시 가장 많이 쓰는 방식 */
        #tbl1 td { color: blue;}

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* td { color: blue;} */

        /* 잘못된 족보 */
        /* table > tr > td { color: orange; } */

        /* tbody 숨겨져있음 > 페이지 F12 > 요소에서 확인 */
        /* table > tbody > tr > td { color: orange; } */

        /* 생략시 */
        /* table td { color: orange;} */
        /* 혼용 가능 */
        /* table tr > td { color: orange;} */

        /* table > tr > td { color: blue;} */
        /* ㄴ 구조만으로 구분할 수 없는 경우 > table에 id 지정 */

        #tbl1 td { color: blue;}

    </style>
</head>
<body>
    <!-- ex06_selector.html -->

    <h1>테이블</h1>

    <table border width="500" id="tbl1">
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
    </table>
    <h1>테이블</h1>

    <table border width="500">
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
        <tr>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
            <td>데이터</td>
        </tr>
    </table>
</body>
</html>

ex07

           8. 인접 형제 선택자, Adjacent Sibling Selector
                - 선택자 + 선택자
                - 정밀도 높음 + 범위 좁음
                - 자식 선택자 느낌

<style>
p + span { color: red;}

div + span { color: blue;}
</style>

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        p + span { color: red;}

        div + span { color: blue;}


    </style>
</head>
<body>
    <!-- ex07_selector.html -->

    <p>p 태그</p>
    <p>p 태그</p>
    <p>p 태그</p>
    <span>span 태그</span>
    
    <div>div 태그</div>
    
    <p>p 태그</p>
    <span>span 태그</span>
    <p>p 태그</p>
    
    <div>div 태그</div>
    <div>div 태그</div>
    <span>span 태그</span>

</body>
</html>

            9. 형제 선택자, Sibling Selector
                - 선택자 ~ 선택자
                - 정밀도 낮음 + 범위 넓음
                - 자손 선택자 느낌

<style>
div ~ span { color: orange;}
</style>

** 인접형제, 형제선택자는 사용 빈도 낮음(수정시 영향 받을 확률 ↑)

ex08

            10. 의사 클래스, Pseudo Class
                - 실제 태그에 class 속성 명시되어 있지 않은데..
                선택지에서 진짜 존재하는 클래스처럼 사용하는 클래스
                - <a> 태그만 지원 > 모든 태그 확장 + 종류 증가

        /* ---------이렇게 안씀--------- */
        /* a { color: orange;} */
        
        /* 브라우저가 한번도 방문하지 않은 상태 */
        /* a:link { color: red;} */

        /* 브라우저가 방문했던 상태 */
        /* a:visited { color: green;} */

        /* 활성화 상태(요즘 브라우저에서 지원X 잘 안씀) */
        /* a:active { color: blueviolet;} */

        /* 마우스 커서가 올라가있는 상태 */
        /* a:hover { color: orange;} */
        
        
        
        /* 보편적인 링크 */
        /* 서식 지우고 hover만 이용 */
        a {
            color: black; 
            text-decoration: none;
        }

        a:hover {
            color: red;
            text-decoration: underline;
        }

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>=

        /* a { color: orange;} */
        
        /* 브라우저가 한번도 방문하지 않은 상태 */
        /* a:link { color: red;} */

        /* 브라우저가 방문했던 상태 */
        /* a:visited { color: green;} */

        /* 활성화 상태(요즘 브라우저에서 지원X 잘 안씀) */
        /* a:active { color: blueviolet;} */

        /* 마우스 커서가 올라가있는 상태 */
        /* a:hover { color: orange;} */

        /* ---------이렇게 안씀--------- */


        /* 보편적인 링크 */
        /* 서식 지우고 hover만 이용 */
        a {
            color: black; 
            text-decoration: none;
        }

        a:hover {
            color: red;
            text-decoration: underline;
        }





    </style>
</head>
<body>
    <!-- ex08_selector.html -->

    <h1>링크</h1>

    <a href="https://naver.com">네이버로 이동합니다.</a>
    <br>
    <a href="https://amazon.com">아마존으로 이동합니다.</a>

</body>
</html>

ex09

이미 존재하는 선택자 조합 > 클래스 더하기

<style>
        .one { color: blue;}
        .two { text-decoration: underline;}
        .three { font-style: italic;}
</style>

...

<p class="one">1 문단입니다</p>
    <p class="two">2 문단입니다</p>
    <p class="three">3 문단입니다</p>
    <!-- 클래스 더하기 가능 -->
    <p class="one two three">4 문단입니다</p>

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .one { color: blue;}
        .two { text-decoration: underline;}
        .three { font-style: italic;}

        /* 이미 존재하는 선택자를 조합해서 새로운 선택자 생성 > 불가능 */
        /* BUT 적용할때 가능 */
        /* .four { 
            color: blue;
            text-decoration: underline;
            font-style: italic;
        } */



    </style>
</head>
<body>
    <!-- ex09_selector.html -->

    <p class="one">1 문단입니다</p>
    <p class="two">2 문단입니다</p>
    <p class="three">3 문단입니다</p>
    <!-- 클래스 더하기 가능 -->
    <p class="one two three">4 문단입니다</p>
    
</body>
</html>

ex10

            충돌
            - 선택자 충돌
            - 동일한 태그를 서로 다른 선택자가 동시에 선택했을 때

            선택자 우선 순위
            - 충돌 발생하면 우선 순위가 가장 높은 선택자가 적용(코딩 순서 상관X)
            - 점수 계산

            선택자 점수 계산
            1. 태그 선택자 > 1점      > "사람"
            2. 클래스 선택자 > 10점   > "남자"
            3. 아이디 선택자 > 100점  > "홍길동"

            계산 어려우면 마우스 갖다대기 > (100점, 10점, 1점) 순

/* 선택자 충돌 > 선택자 중복 가능(둘 다 적용됨) 좋은방법은X */
div { color: red; }
div { font-style: italic; }

/* 선택자 충돌 + 속성 충돌 > 점수 같으면 나중에 적힌게 적용 */
div { color: red; } 
div { color: yellow;} 

/* 
#box1 { color: olivedrab; }
div { color: red; }
.box { color: yellow; } 
*/

/* 태그 3개 > 3점(더 자세히 찾음)
body > div { color: blue; } 
div { color: red; } 
html > body > div { color: salmon; }
*/

/* 101점 */
/* div#box1 { color: red; } */

/* 100점 */
/* #box { color: blue; } */

/* 10점 */
.box {}

/* 11점 */
div.box {}

/* 111점 */
div#box1.box {}

/* 131점 */
div#box1.box.one.two {

- 태그가 11개면 클래스 1개를 이기는지? > X (점수는 상징적인 의미)

/* 태그가 11개면 클래스 1개를 이기는지? > X (점수는 상징적인 의미) */
/* {0, 0, 11} vs { 0, 1, 0} >> 오른쪽이 우선 */
div > div > div > div > div > div > div > div > div > div > div {
    color: blue;
}

.box2 {
    color: red;
}

- 우선순위 조정

#box1 {
    color: blue;
}

/* 밀려남 */
.one {
    color: yellow;
}

/* div에 걸려있는 모든 css 상황 > F12, 찾을부분 클릭 > 스타일 > 작대기 그어져있으면 밀린것 */

/* 우선순위 높아지도록 수정 (10>110점) */
/* #box1.one {
    color: yellow;
} */

/* !important : 우선순위 무시하고 최우선적으로 처리(비권장.. 구조 고치는게 나음) */
.one {
    color: yellow !important;
}

'프로그래밍 공부 > HTML&CSS' 카테고리의 다른 글

[ex12~13] CSS(background) (0)	2023.04.13
[ex11] CSS(Emmet) (1)	2023.04.13
[ex01~02] CSS (Style Sheet) (0)	2023.04.13
[ex07~ex16] HTML(heading, hr, style, list, link, anchor, image, tag, table (1)	2023.04.13
[ex01~06] HTML (0)	2023.04.10

🚀

[ex03~10] CSS (Selector)

'프로그래밍 공부 > HTML&CSS' 카테고리의 다른 글

티스토리툴바

[ex03~10] CSS (Selector)

'프로그래밍 공부 > HTML&CSS' 카테고리의 다른 글

'프로그래밍 공부/HTML&CSS' Related Articles

티스토리툴바