CSS 개요 / CSS 선택자-1

• CSS(Cascading Style Sheets)
  : 마크업 언어(HTML)가 실제로 화면에 표시되는 방법(색상, 크기, 스타일 등)을 기술하는 언어
    ( == HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어)
   W3C(웹 표준 지정 기관)에서 CSS를 표준으로 지정함
  
  
• CSS Selector(선택자)
  : 현재 HTML 문서 내에 같은 태그를 선택하는 선택자
  - [ 작성법 ]
  : 태그명{ CSS코드; }

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

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

    <style>
        /* style 태그 : CSS코드만 작성할 수 있는 영역을 제공하는 태그 */
        /* CSS 주석 */

        /* 태그 선택자(태그명) */
        div{border: 3px solid blue;} /* 3px 두께의 파란 실선 */

        strong{background-color: pink;} 

        span{background-color: springgreen;}
   </style>

---

• id 선택자(#id속성값)
  : HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
  (중요!) id 속성값은 페이지 내에서 유일해야함!
             == 중복되는 id 속성값이 있으면 절대 안 됨
  - [ 작성법 ]
  #id속성값{ CSS코드; }

    <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>

/* 아이디 선택자(#) */
#li-1{background-color: red;}
#li-2{background-color: orange;}
#li-3{background-color: yellow;}
#li-4{background-color: green;}
#li-5{background-color: blue;}

/* 콤마(,)를 이용하여 여러 선택자 동시 작성 */
#li-1, #li-2, #li-3, #li-4, #li-5{color: aquamarine;}

---

• class 선택자(.class 속성값)
  : HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

    <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="aaa test-1 test-2">클래스 선택자 테스트9</li>
        <li class="test-2 aaa test-1">클래스 선택자 테스트10</li>
    </ul>

        /* 클래스 선택자(.) */
        .test-1{background-color: red;}
        .test-2{background-color: blue; color: white;}
        .aaa{font-weight: bold;} /* 글자 굵기 조절 */

---

• 모든 요소 선택자(*)
  : 모든 요소를 선택하는 선택자

    <h3>모든 요소 선택자(*)</h3>
    <pre>
        모든 요소를 선택하는 선택자
    </pre>

        /* 모든 요소 선택자(*) */
        *{
            font-size: 20px; /* 글꼴 크기 */ 
            font-family : 'SUITE-Regular'; /* 글꼴 모양 */
        }