01_CSS 개요, 선택자

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

---

---

태그 선택자(태그명)

현재 HTML 문서 내에 같은 태그를 선택하는 선택자.
[작성법]
태그명 {CSS 코드;}

    div {
        border: 3px solid red; /* 3px 두께의 빨간 실선*/
    }
    strong {
        background-color: yellow; /* 배경색 노란색*/
    }
    span {
        background-color: pink;
    }

---

id 선택자(#id 속성값) (# == id)

HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자.
(중요!) id 속성값은 페이지 내에서 유일해야 한다!
-> 중복되는 id 속성값이 있으면 안된다!!!
[작성법]
#id속성값 {css 코드;}

    #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;
    }

---

클래스 선택자(. == class)

class 선택자(.class속성값)
HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자
[작성법]
.class속성값 {css 코드;}

    .test-1 {color: red;}
    .test-2 {color: white; background-color: black;}
    .aaa {
        font-weight: bold;
    }
    
    

여러 클래스 적용

    <li class="aaa tset-1">클래스 선택자 테스트7</li>
    <li class="tset-2 aaa">클래스 선택자 테스트7</li>

여러 클래스 작성 시 class 속성값 순서는 의미 없음
style 태그 css 코드 작성 순서에 따라 다름

---

모든 요소 선택자(*)

(단독 또는 다른 선택자와 함께 사용가능한 선택자로)
모든 요소를 선택하는 선택자
[작성법]
* {css 코드;}

    @font-face {  /* 웹 폰트 추가 */
        font-family: 'CookieRun-Regular';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    -----------------------------------------------------------------------------------------
    * {
        /* 글꼴 크기 */
        font-size: 20px;
        /* 글꼴 모양 */
        font-family: CookieRun-Regular;
    }
    

---

CSS(Cascading Style Sheet)

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

W3C(웹 표준 지정 기관)에서 CSS를 표준으로 지정함.

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

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