CSS : Cascading Style Sheet

CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소

• HTML이 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당

Rule set

특정 요소들을 지정하고 어떻게 렌더링(Rendering) 것인지 알려주는 CSS 문장
스타일 규칙이라고 불리고 하며 문장이 모여 스타일 시트를 이룬다.

기본 구조

CSS 선택자 : Selector

선택해 주는 요소로 특정 요소들을 지정하여 스타일을 적용할수 있도록 도와준다.

선택자의 종류

전체 선택자(Universal Selector)

* { 속성1: 속성값; }

• HTML 안에 모든 요소를 읽고 적용시킨다. 보통 기본값이나 초기화를 위해 사용

태그 선택자(Tag Selector)

태그이름 { 속성1: 속성값1; 속성2: 속성값2; } 

• HTML에 태그를 직접 지칭하여 사용

클래스 선택자(Class Selector)

.클래스이름 { 속성1: 속성값1; 속성2: 속성값2; } # 해당클래스 전체 적용
태그이름.클래스이름 { 속성1: 속성값1; 속성2: 속성값2; } # 태그안에 해당 클래스만 적용

• HTML에 클래스를 직접 지칭하여 사용
• 태그 선택자와 같이 이용해 해당 태그안에 클래스로 범위를 지정할 수 있다.
• 클래스 선택자는 구조를 대신 할 수 없기 때문에 클래스 말고 사용할 수있는 태그가 있으면 태그를 사용하게 좋다.

ID 선택자(ID Selector)

#id이름 { 속성1: 속성값1; }
태그이름#id이름 { 속성1: 속성값1; }

• HTML에 id를 직접 지칭하여 사용
• 태그 선택자와 같이 이용해 해당 태그안에 id로 범위를 지정할 수 있다.

비교

클래스 선택자	id 선택자
- 한 페이지 안에 여러 스타일을 번복이 필요할때 사용	- 단 한번 적용시킬 스타일을 이용할때 사용
- 글자색이나 글자굵기등 나중에 다른곳에서 사용 가능한 속성을 다룰때	- 웹 페이지 안에서 요소 위치를 지정할때 자주 사용
- 속성값을 2개 이상가질 수 있어 여러 스타일 규칙을 적용 가능	- 클래스 선택자보다 우선순위가 높아 우선 스타일 적용을 필요할때 사용

복합 선택자

일치 선택자(Basic Combinator)

두 가지 조건을 동시에 만족하는 요소 선택

태그이름.클래스이름 { 속성1: 속성값1; 속성2: 속성값2; } 

span.orange {
    color : red;
}

<div>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li class=“orange”>오렌지</li>
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class=“orange”>오렌지</span>   <!— 선택 —>
</div>

자식 선택자(Child Combinator) :

해당 태그의 밑에 있는 자식요소를 선택
자식요소 : 특정 요소 바로 아래에 속한 요소

태그이름>.클래스이름 { 속성1: 속성값1; 속성2: 속성값2; }

ul > .orange {
    color : red;
}

<div>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li class=“orange”>오렌지</li>   <!— 선택 —>  
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class=“orange”>오렌지</span>   
</div>

하위 선택자(Descendant Combinator)

해당 태그의 밑에 있는 후손요소를 선택
후손요소 : 특정 요소 이하의 모든 요소

태그이름 .클래스이름 { 속성1: 속성값1; 속성2: 속성값2; }

div .orange {
    color : red;
}

<div>
    <ul>
        <li>사과</li>
        <li>배</li>
        <li class=“orange”>오렌지</li>   <!— 선택 —>  
    </ul>
    <div>당근</div>
    <p>토마토</p>
    <span class=“orange”>오렌지</span>   <!— 선택 —>
</div>

인접 형제 선택자(Adjacent Sibling Combinator)

해당 클래스의 형제 요소를 선택
형제요소 : 부모요소가 같은 요소

.클래스이름 + 태그이름 { 속성1: 속성값1;}

<ul>
    <li>딸기</li>
    <li class="orange">오렌지</li>
    <li>망고<li> <!--선택-->
</ul>

일반 형제 선택자(General Sibling Combinator)

클래스의 다음 일반 형제요소들 모두 선택

 .클래스 ~ 태그요소 {속성1: 속성값1;}

.orange + li {
    color : red;
}

<div>
    <li>딸기</li>
    <li>수박</li>
    <li class=“orange">오렌지</li>
    <li>망고</li>                     <!— 선택 —>
    <li>사과</li>                     <!— 선택 —>
</div>
                      

복합 선택자 우선순위

style > id selector > class selector > tag > *(전체)