CSS 1.CSS란? CSS 적용 방법(요소, 선택자)

CSS란?

• Cascading Style Sheet
• 웹 페이지 스타일 지정 전용 언어 그리고 파일(.css)

스타일 적용 방식

• 요소(Element) 단위로 지정
• 웹 페이지 단위로 지정
• 웹 사이트 단위로 지정

style 태그

• <style> css 코드 </style>
• HTML 스타일 적용을 위한 코드 작성

Style 적용 코드 문법 - 요소, id명, class명

엘리먼트{ css코드 } : 요소를 이용한 방법

<style>
    p{
        color:blue
    }
</style>

식별자{ css코드 } : 식별자 id, class 를 이용한 방법

<style>
    #id명{
        color:red
    }

    .class명{
        color:saddlebrown
    }
</style>

CSS 선택자

• 부모, 자식, 형제 관계를 이용해 CSS 적용 대상을 결정하는 방법

자손 선택자(Descendent) : 선택자1 선택자2{ css코드 }

• 선택자1에 내부에 있는 선택자2에 대해 모두 적용. 깊이 무상관

  <style>
    div p{
        color:blueviolet
    }
  </style>

자식 선택자(Child) : 선택자1>선택자2{ css코드 }

• 선택자1에 자식인 선택자2에 대해 모두 적용. 깊이 엄격 적용

  <style>
    div#div1 p{
        color:blue
    }
  
    div#div2 p{
        color:red
    }
  </style>

인접 형제 선택자(Adjacent Sibling) : 선택자1+선택자2{ css코드 }

• 선택자1에서 가장 가까운(바로 아래) 형제 1개에 대한 CSS 처리

  <style>
    div#div3 p#p1 + p{
        color:pink
    }
  </style>

일반 형제 선택자(General Sibling) : 선택자1~선택자2{ css코드 }

• 선택자1에서 가장 가까운(바로 아래) 형제부터 모두에 대한 CSS 처리

  <style>
    div#div4 p#p2 ~ p{
        color:purple
    }
  </style>