CSS 속성, 선택자

CSS

css 속성 , 선택자

1. class 와 id

스타일을 지정시 사용하는 속성
★ 생성 규칙
1. 영문자로 작성
2. 첫번째 글자는 숫자가 들어갈 수 없음
3. 특수문자는 "_" , "$" 2가지만 사용

1-1 class

여러 태그들을 그룹으로 묶어 스타일을 지정시 사용하는 속성입니다.
스타일 지정시 .class명으로 작성합니다.

1-2 id

스타일을 지정시 하나의 태그만 지정해서 사용하는 속성입니다.
하나의 문서에서 고유한 id명만 사용이 가능합니다.
스타일 지정시 #id명으로 작성합니다.

2. 선택자

2-1. 전체 선택자

패턴 * 를 사용하여 내부의 모든 요소를 선택하여 스타일을 지정할 수 있습니다.

예시1)

* {
  margin: 0;
  padding: 0;
}

2-2. 태그 선택자

HTML의 기본 요소를 직접 지정하여 스타일을 지정할 수 있습니다.

예시2)

p {
 font-size: 16px;
}

2-3. 복합 선택자

2개 이상의 선택자 요소를 모아서 스타일을 지정할 수 있습니다.

예시3)

span.orange {
  color: green
}

<div>
  <ul>
   <li>사과</li>
    <li class="orange">오렌지</li>
   </ul>
    <div>토마토</div>
    <span class="orange">오렌지</span>  <-- 이 부분이 선택됩니다.
</div>

2-4. 자식 선택자

선택자1 > 선택자2 처럼 작성하여 선택자1의 자식요소 선택자2만 선택하여 스타일을 지정할 수 있습니다.

예시4)

ul > .orange {
  color: red;
}

<div>
  <ul>
   <li>사과</li>
    <li class="orange">오렌지</li> <-- 이 부분이 선택됩니다.
   </ul>
    <div>토마토</div>
    <span class="orange">오렌지</span>  
</div>

2-5. 하위 선택자 (자손 선택자)

선택자1 선택자2 처럼 띄어쓰기가 선택자의 기호로 사용됩니다.

예시5)

div .orange {
  color: blue;
}

<div>
  <ul>
   <li>사과</li>
    <li class="orange">오렌지</li> <-- 이 부분이 선택됩니다.
   </ul>
    <div>토마토</div>
    <span class="orange">오렌지</span> <-- 이 부분이 선택됩니다.
</div>

2-6. 인접형제 선택자

선택자1 + 선택자2 처럼 선택자1 바로 다음에 오는 동생 선택자2의 스타일을 지정할 수 있습니다.

예시6)

.orange + li {
  color: red;
}

<div>
  <ul>
    <li>레몬</li>
    <li class="orange">오렌지</li>
    <li>사과</li> < 이 부분이 선택됩니다.
    <li>포도</li>
  </ul>
</div>