CSS intro

CSS (Cascading Style Sheets)

• HTML 문서를 시각적으로 꾸미는 역할
• 한번 작성에 여러 HTML 페이지에서 재사용 가능
• CSS 파일만 변경해도 해당 CSS를 적용한 모든 웹 페이지 요소가 자동으로 업데이트됨.

CSS 적용하기

간단하게 스타일을 적용하는 방법

    <style>
        <!-- CSS 코드 -->
    </style> 태그 사용

외부 CSS 파일 적용하는 방법 (링크 방식)

• 외부 CSS 문서를 가져와서 연결하는 방식

인라인 방식

• 요소의 style 속성에 직접 스타일을 작성하는 방식 (선택자 없음)

CSS 기본 문법

            스타일의 종류(Property)
            ----
    선택자 { 속성: 값; }
    -----
    스타일(CSS)을 적용할 대상(Selector)

• 주석( ctrl + / ) : /* 설명 작성 */

CSS 선택자 (Selector) - 기본

• HTML에 스타일을 적용할 때 HTML 요소를 지정하는 역할을 함.

전체 선택자 (universal selector)

• 특정 태그 대신 * 기호를 사용함.
• head를 포함한 HTML 문서 내의 모든 요소를 선택함.

    <style>
      *{color : green;}  
    </style>

유형(태그) 선택자 (type selector)

• 태그 이름이 OOO인 요소 선택
• 특정 태그를 지정해 작성하는 방식.
• 지정된 태그를 가지는 요소를 선택함.

     <style>
태그 유형{color : red;}  
     </style>

아이디 선택자 (ID selector)

• HTML id 속성의 값인 OOO인 요소 선택.
• 아이디로 요소를 식별해주는 선택자임.
• 모든 태그 요소 중에 특정 아이디 하나를 선택할 떄 사용함.
• 아이디는 중복되지 않는 고유한 값이어야 함.

    <p id="아이디">텍스트</p>

    <style>
     #아이디{color : red;}  
    </style>

• #을 아이디 앞에 붙여야 함.

• result

클래스 선택자

• HTML class 속성의 값이 OOO인 요소 선택.
• 클래스는 아이디와 비슷한 기능을 하지만, 클래스는 여러 태그를 하나의
  클래스로 묶을 수도 있고 태그 하나에 여러 클래스 이름을 붙여줄 수도 있음.

    <p class="클래스">텍스트</p>

    <style>
     .클래스{color : red;}  
    </style>

• .을 클래스 앞에 붙여야 함.

• result

여러 클래스

    <li class="orange1 myclass">오렌지</li>

    .myclass {background-color: cadetblue;}

• result

복합 선택자

• 선택자 OOO와 XXX를 동시에 만족하는 요소 선택.
• 부모와 자식 태그가 복합적으로 쓰임
• 서로의 관계와 위치를 유용하게 결합하는 방식을 제공함.

일치 선택자 (Basic combinator)

• 선택자를 동시에 만족하는 요소 선택

• result

자식 선택자 (Child combinator)

• 선택자 OOO의 자식 요소 XXX 선택
• 선택자의 자식 요소 선택
• OOO > XXX

• result

하위(후손) 선택자 (Descendant combinator)

• 선택자 OOO의 하위 요소 XXX 선택.
• 선택자의 하위 요소 선택
• ‘띄어쓰기’가 선택자 신호
• OOO XXX

    div .orange1 {background-color: yellow; }   

인접 형체 선택자 (Adjacent Sibling combinator)

• 선택자 OOO의 다음 형제 요소 XXX 하나를 선택
• 선택자의 다음 형제 요소 하나를 선택
• OOO + XXX

    .orange1 + li {color : olive;}

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

• 선택자 OOO의 다음 형제 요소 XXX 모두를 선택
• 선택자의 다음 형제 요소 모두들 선택
• OOO ~ XXX

    .orange1 ~ li {color : purple;}