CSS :: 문법

📝 CSS

• Cascading Style Sheets
• 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트
  
  

💡 형태

선택자 { 속성: 값; }

• 선택자 : 스타일(CSS)을 적용할 대상
• 속성 : 스타일(CSS)의 종류
• 값 : 스타일(CSS)의 값

💡 선언 방식

• 내장 방식

<style>
  div {
  	color: red;
    margin: 20px;
  }
</style>

• 링크 방식

<link rel="stylesheet" href="./main.css">

• 인라인 방식

<div style="color: red; margin: 20px;"> Hello, World! </div>

• @import 방식
  • hello.css를 @import한 main.css를 link 방식으로 가져옴으로써 hello.css에 작성된 스타일(CSS)도 적용됨

<link rel="stylesheet" href="./main.css">

// main.css  									// hello.css
@import url("./hello.css");						
												div {
div {											  margin: 20px;
  color: red;									}
}												

💡 선택자

• 기본
  • 전체 선택자 * { }
  • 태그 선택자 태그이름 { }
  • 클래스 선택자 .클래스이름 { }
  • 아이디 선택자 #아이디이름 { }
    
    
• 복합
  • 일치 선택자 태그이름.클래스이름 { } : 태그와 클래스를 동시에 만족하는 요소 선택
  • 자식 선택자 태그이름 > .클래스이름 { } : 태그의 자식 요소 중 해당하는 클래스 선택
  • 하위 선택자 태그이름 .클래스이름 { } : 태그의 하위 요소 중 해당하는 클래스 선택
  • 인접 형제 선택자 .클래스이름 + 태그이름 { } : 해당하는 클래스의 태그이름에 해당하는 바로 다음 요소 하나 선택
  • 일반 형제 선택자 .클래스이름 ~ 태그이름 { } : 해당하는 클래스의 다음에 있는 태그이름에 해당하는 모든 요소를 선택
    
    
• 가상 클래스 선택자
  • 선택자이름:hover { } : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
  • 선택자이름:active { } : 선택자 요소에 마우스를 클릭하고 있는 동안 선택
  • 선택자이름:focus { } : 선택자 요소에 포커스되면 선택
  • 선택자이름:first-child { } : 선택자 요소 중 첫째 선택
    * 첫째가 해당하는 선택자이름이 아닐 경우 선택되지 않음
  • 선택자이름:last-child { } : 선택자 요소 중 막내 선택
  • 선택자이름:nth-child(n) { } : 선택자 요소 중 (n)째라면 선택
    • 짝수만 선택 : 2n
    • 홀수만 선택 : 2n + 1
    • ❔ 이상 선택 : n + ❔
      
      
• 부정 선택자
  • 요소이름:not(선택자이름) { } : 해당하는 선택자가 아닌 요소 선택
    
    
• 가상 요소 선택자
  • 선택자이름::before { } : 선택자 요소의 내부 제일 앞에 내용을 삽입
    • 내용 삽입 시 content 무조건 사용
  • 선택자이름::after { } : 선택자 요소의 내부 제일 뒤에 내용을 삽입
    • 내용 삽입 시 content 무조건 사용
      
      
• 속성 선택자
  • [속성이름] { } : 해당하는 속성을 가진 요소 선택
  • [속성이름="값"] { } : 해당하는 속성에 해당 값을 가진 요소 선택