CSS선택자1

기본선택자

<h1>CSS Selector(선택자)</h1>
    <pre>
        Selector란? 
        현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열.

        스타일을 적용하고자 하는 요소를 선택하는 방법.
    </pre>

    <hr>

    <h3>태그 선택자</h3>
    <pre>
        현재 HTML 문서 내에 같은 태그를 선택하는 선택자.

        <strong>[작성법]</strong>
        태그명 { 
            CSS 코드;
        }
    </pre>

    <div>
        <strong>strong 태그에 작성된 내용입니다.</strong>
        <br>

        <span>span 태그에 작성된 내용입니다.</span>

        <ul>
            <li>
                <strong>strong 태그에 작성된 내용입니다.</strong>
            </li>
            <li>
                <span>span 태그에 작성된 내용입니다.</span>
            </li>
        </ul>
    </div>

    <hr>

    <h3>id 선택자(#id속성값)</h3>
    <pre>
        HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자.

        (중요!) id 속성값은 페이지 내에서 유일해야 한다!
                -> 중복되는 id 속성값이 있으면 안된다!!!

        [작성법]
        #id속성값 {
            css 코드;
        }

        # == id
    </pre>

    <!-- 
        Java : 카멜 표기법 ( helloWorld )
        DB : 대문자, 띄어쓰기 _ 로 표시 (MEMBER_NO)
        HTML : 하이픈 표기법 (li-1, class-1) / 언더바 표기법(li_1, class_1)
     -->

    <ol>
        <li id="li-1">id 선택자 테스트1</li>
        <li id="li-2">id 선택자 테스트2</li>
        <li id="li-3">id 선택자 테스트3</li>
        <li id="li-4">id 선택자 테스트4</li>
        <li id="li-5">id 선택자 테스트5</li>
    </ol>

    <hr>

    <h3>class 선택자(.class속성값)</h3>
    <pre>
        HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

        [작성법]
        .class속성값 {
            css 코드;
        }

        . == class
    </pre>

    <ul>
        <li class="test-1">클래스 선택자 테스트1</li>
        <li class="test-2">클래스 선택자 테스트2</li>
        <li class="test-1">클래스 선택자 테스트3</li>
        <li class="test-2">클래스 선택자 테스트4</li>
        <li class="test-1">클래스 선택자 테스트5</li>

        <li class="aaa">클래스 선택자 테스트6</li>

        <!-- 여러 클래스 적용 -->
        <li class="aaa test-1">클래스 선택자 테스트7</li>
        <li class="test-2 aaa">클래스 선택자 테스트8</li>

        <!-- 여러 클래스 작성 시 class 속성값 순서는 의미 없음
            -> style 태그 css 코드 작성 순서에 따라 다름
        -->
        <li class="test-1 test-2 aaa">클래스 선택자 테스트9</li>
        <li class="test-2 test-1 aaa">클래스 선택자 테스트10</li>

    </ul>

    <hr>

    <h3>모든 요소 선택자(*)</h3>
    <pre>
        (단독 또는 다른 선택자와 함께 사용가능한 선택자로)
        모든 요소를 선택하는 선택자
    </pre>```