CSS 기본 개념

선택자는 스타일을 적용할 대상, 속성은 스타일의 종류, 값은 스타일의 값이다. {}는 스타일 범위의 시작과 끝을 정해준다. 예를 들어 div { color: red; } 이렇게 사용하면 된다.

image

CSS 기본 선택자

  • *: 전체 선택자 (Universal Selector)
    • 모든 요소를 선택
  • ABC: 태그 선택자 (Type Selector)
    • 태그 이름이 ABC인 요소 선택
  • .ABC: 클래스 선택자 (Class Selector)
    • HTML class 속성의 값이 ABC인 요소 선택
  • #ABC: 아이디 선택자 (ID Selector)
    • HTML id 속성의 값이 ABC인 요소 선택

CSS 복합 선택자

복합 선택자는 마지막에 있는게 찾는것이고 그 앞의 것은 조건이라고 생각하면 쉽다.

  • ABCXYZ: 일치 선택자 (Basic Combinator)
    • 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택
    • span 태그이면서 orange 클래스를 가진 요소들만 선택 image
  • ABC > XYZ: 자식 선택자 (Child Combinator)
    • 선택자 ABC의 자식 요소 XYZ 선택 image
  • ABC XYZ: 하위(후손) 선택자 (Descendant Combinator)
    • 선택자 ABC의 하위 요소 XYZ 선택
    • ‘띄어쓰기’가 선택자의 기호 image
  • ABC + XYZ: 인접 형제 선택자 (Adjacent Sibling Combinator)
    • 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 image
  • ABC ~ XYZ: 일반 형제 선택자 (General Sibling Combinator)
    • 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택 image

CSS 가상 클래스 선택자

가상 클래스 선택자는 :을 하나 쓴다.

  • ABC:hover
    • 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택
    • image
  • ABC:active
    • 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택
  • ABC:focus
    • 선택자 ABC 요소가 포커스되면 선택 (포커스 아웃되면 blur 된다고 함)
    • focus가 가능한 요소들에만 적용 가능 (div는 불가능)
    • image
  • ABC:first-child
    • 선택자 ABC가 형제 요소 중 첫째라면 선택
    • image
    • 첫번째 자식 요소가 div 이어야 검색이 가능한데 아래는 첫번째 자식요소가 span이기 때문에 결과값이 없음 (뒤에서 부터 하나씩 조건을 확인하는 방식)
    • image
  • ABC:last-child
    • 선택자 ABC가 형제 요소 중 막내라면 선택
    • image
  • ABC:nth-child(n)
    • 선택자 ABC가 형제 요소 중 (n)째라면 선택
    • image
    • image

CSS 가상 요소 선택자

가상 요소 선택자는 ::를 쓰고, 가상의 요소를 만들어서 그 안에 내용을 넣을 수 있다. 가상 요소 선택자는 인라인(글자) 요소이다.

  • ABC::before
    • 선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입
    • image
  • ABC::after
    • 선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입
    • image

CSS 속성 선택자

속성 선택자는 대괄호 []를 사용한다. 대괄호 안에 속성을 작성하면 그 텍스트를 HTML의 속성과 비교해서 요소를 찾는다.

  • [ABC]
    • 속성 ABC을 포함한 요소 선택
    • image
  • [ABC]="XYZ"
    • 속성 ABC을 포함하고 값이 XYZ인 요소 선택
    • image

CSS의 속성 (properties)

CSS의 속성은 박스 모델, 글꼴/문자, 배경, 배치, 플렉스(정렬), 전환, 변환, 띄움, 애니메이션, 그리드, 다단, 필터 로 나눌 수 있다.

  • 박스 모델: 화면에 보여지는 각각의 상자들을 어떤 구조로 만들 수 있는지 정의하는 속성(width, height, margin, padding, border_radius)
  • 글꼴/문자: 다양한 서체를 정의하는 속성/가운데 정렬, 밑줄 등 문자를 꾸며주는 속성
  • 배경: 면적부분에 이미지를 배경에 삽입가능하게 하는 속성
  • 배치: 특정 요소를 내가 원하는 좌표에 위치시키는 속성
  • 플렉스(정렬): 수직이나 수평에 대한 정렬 관련 속성, HTML 블록 요소들은 자동으로 수직 정렬이라 수평으로 놓으려면 따로 플렉스 속성으로 지정해줘야함
  • 전환: 요소의 전 상태와 후 상태로 자연스럽게 애니메이션을 만들어주는 속성, 자연스럽게 크기가 변하거나 자연스럽게 생상이 변하도록 함
  • 변환: 회전, 위치, 크기를 변경하는 속성 2D와 3D 가능
  • 띄움: 특정 요소 옆에 여백을 주는 속성
  • 애니메이션: 다양한 상태 간의 중간과정을 자연스럽게 만들어주는 속성 (전환 효과를 여러단계 사용하는것)
  • 그리드: 수직 수평 정렬해주는 플렉스(정렬)의 확장판, 플렉스는 수평 또는 수직 하나만 가능하지만 그리드는 수평과 수직을 동시에 제어가능 -> 2차원의 레이어 구조를 작업할 때 사용
  • 다단: 문서를 여러개의 단으로 쪼개는 속성
  • 필터: 요소에 포토샵에서 제공하는 필터를 사용할 수 있는 속성 (흐림, 흑백, 반전 등)