CSS

Cascading : 계단식 (폭포처럼 흐르는)
Style : 스타일
Sheets : 시트 (여러 스타일 규칙을 포함하는 문서)
== 계단식으로 적용되는 스타일 규칙을 담고있는 시트

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

CSS Selector (선택자)

선택자란?
현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열.
* 요소란, 태그를 이용하여 만들어진 모든 것.

태그 선택자

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

  <div>
    <strong>strong 태그에 작성된 내용</strong>
    <br>
    <span>span 태그에 작성된 내용</span>

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

id 선택자

HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자.
* id 속성 : 요소를 식별할 수 있는 고유 식별자 역할
한 HTML 문서 내에서 같은 id 중복으로 작성 금지.

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

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

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

class 선택자

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

[작성법]
.class속성값 (css 코드;)
. == class

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

모든 요소 선택자(*)

모든 요소를 선택하는 선택자

[작성법]
* { css 코드; }

기본 속성 선택자

태그에 작성된 특정 속성을 선택하는 선택자.

[작성법]
선택자[속성명="속성값"] { css코드; }

(참고)
1) 선택자는 생략할 수 있다.

2) "속성값" 양쪽의 쌍따옴표("")는
홑따옴표('')로 변경 가능함.

<div name="name-1" test="test">div1</div>
  <div name="name-1">div2</div>
  <div name="name-2">div3</div>
  <div name="name-2">div4</div>

  <p name="name-1">p1</p>
  <p name="name-1">p2</p>
  <p name="name-2">p3</p>
  <p name="name-2">p4</p>

자식 선택자

지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자

[작성법]
선택자1 > 선택자2 { css 코드; }

- 선택자1 : 부모 요소 선택
- 선택자2 : 자식 요소 선택

<ul id="parent-ul">부모
     <li>자식1</li>
     <li>
      <span>자식2</span>
     </li>
     <li>자식3</li>
     <li>
      <span>자식4</span>
     </li>
  </ul>

후손(자손) 선택자

지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자

[작성법]
선택자1 선택자2 ( css 코드; )

- 선택자1 : 부모(조상) 요소 선택자
- 선택자2 : 후손 요소 선택자

<div id="test-div">
    <p>test-div의 자식 요소입니다.</p>
    <p>test-div의 후손 요소입니다.</p>

    <div>
      <p>저도 후손일까요?</p>
    </div>
   </div>