[CSS] CSS개요, CSS선택자 1

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

CSS(Cascading Style Sheets)

: 마크업 언어(HTML)가 실제로 화면에 표시되는 방법(모양, 색상, 크기, 스타일...)을 기술하는 언어
-> HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어
(W3C (웹 표준 지정 기관)에서 CSS를 표준으로 지정함)

CSS Selector(선택자)

: 현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
: 스타일을 적용하고자 하는 요소를 선택하는 방법

태그 선택자

:현재 HTML 문서 내에 같은 태그를 선택하는 선택자

[작성법]
태그명 { CSS 코드; }

<style>
div { border : 3px solid red; }

strong { background-color yellow; }

span { background-color : pink; }

</style>

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

        <br>

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

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

id 선택자 (#id 속성값)

: HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
id 속성값은 페이지 내에서 유일해야 한다!
-> 중복되는 id 속성값이 있으면 안된다!

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

<style>
 #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: white;
        }
</style>


	

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

class 선택자(.class 속성값)

: HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자
== class는 중복되어도 괜찮다

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

<style>
.test-1 {color:red;}
        .test-2 {color:white; background-color: black;}

        .aaa{font-weight : bold;}
</style>

	<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 css 코드 작성 순서에 따라 다름
        -->
        <li class="test-1 test-2 aaa">클래스 선택자 테스트9</li>
        <li class="test-2 test-1 aaa">클래스 선택자 테스트10</li>
    </ul>

모든 요소 선택자 (*)

* { 
	/* 글꼴 크기 */
	font-size : 20px;
    /* 글꼴 폰트 */
    font-family : @@체;
    }
    
    -> 페이지 내 모든 글꼴의 크기와 폰트가 바뀜