[CSS] CSS란?

• CSS(Cascading Style Sheets)
  • HTML이나 XML로 작성된 문서의 전반적인 레이아웃과 스타일을 정의하는 스타일 시트 언어
  • HTML은 문서의 구조 정의, CSS는 문서의 디자인과 스타일 담당
• CSS의 역할
  • 레이아웃 조정
  • 텍스트 스타일링
  • 색상 및 배경 관리
  • 애니메이션 및 전의 효과
  • 반응형 디자인
• CSS 선택자
  • HTML 또는 XML 문서에서 스타일 적용할 요소를 선택하는 방법을 지정하는데 사용
  • 전체 선택자(*)
    • 모든 요소를 선택
    • ex) * { margin: 0; }
  • 요소 선택자
    • 특정 HTML 요소 선택 (태그)
    • ex) p { color: blue; }
  • 클래스 선택자(.)
    • 특정 클래스를 가진 요소 선택
    • ex) .highlight { background-color: yellow; }
  • ID 선택자(#)
    • 특정 ID를 가진 요소를 선택
    • ex) #header { font-size: 24px; }
  • 자식 선택자(>)
    • 특정 부모 요소의 직계 자식을 선택
    • ex) nav > ul { list-style-type: none; }
  • 하위(후손) 선택자()
    • 특정 부모 요소의 모든 하위 요소를 선택
    • ex) article p { line-height: 1.5; }
  • 인접 형제 선택자 (+)
    • 같은 부모를 가진 특성 요소의 다음 인접 형제를 선택
    • h2 + p { font-style: italic; }
  • 일반 형제 선택자(~)
    • 같은 부모를 가진 특정 요소의 모든 형제 선택
    • ex> h2~p { color: green; }
• CSS 사용 방법
  • External CSS
    • 외부에 css파일을 만들어서 사용
    • 적용은 해당 html 파일 head 안의 <link rel="stylesheet" href="a.css(css 파일명)">
  • Internal CSS
    • html 문서내 <style></style> 태그 이용해 적용
    • head 태그 내 style 태그
  • Inline CSS
    • 태그 내 style 속성을 이용해서 스타일 적용
    • ex) <ul style="list-style: none; color: blue;">