[CSS스터디] 1회 - CSS란?

CSS 흑마법사가 되어봅시다.

 

• CSS란?
  • 캐스캐이딩 스타일 시트
  • 시트는 데이터가 나열된 공간
  • 논리적인 결과물을 만들지는 않는다.
  • 캐스캐이딩은 폭포 라는 영단어로 폭포같은 특성을 지님
  • 버전이 의미있지 않음
  • 특정한 스타일에 대한 표준이 만들어지고 표준을 관리한다.
  • 모듈 단위로 관리 된다.
• 셀렉터 101
  • CSS는 Style의 나열
  • Style을 HTML 요소를 선택해서 적용
  • 요소 셀렉터
  • 클래스 셀렉터
  • 콤비네이터
• 콤비네이터 101
  • 셀렉터의 조합은 이론상 무제한 
  • 특정한 요소의 자손 요소에 스타일을 주고싶은 경우
    • 자손 콤피네이터 공백
    • 조상 요소공백자식 요소 { } ex) .box .title { }
    • 자식 요소에 관계 없이, 자손 요소 중 해당 요소가 있다면 적용
  • 특정한 요소의 자식 요소에 스타일을 주고싶은 경우
    • 자식 콤비네이터 >
    • 부모 요소 > 자식 요소 { } ex) .box > .title { }
  • 특정한 요소의 형제 요소에 스타일을 주고싶은 경우
    • 첫째는 형제를 몰라요 (앞의 요소를 기준으로 형제를 따진다)
    • 형제 콤비네이터 ~
      • 특정한 요소의 형제이기만 하면 적용됨
      • 첫째 요소 ~ 막내 요소 { } 
    • 인접 형제 콤비네이터 + 
      • 특정한 요소의 형제이면서 해당 요소에 바로 붙어있는 형제 요소
      • 첫째 요소 + 둘째 요소 { }
      • ul>li 로 네비게이터 만들 때 형제 콤비네이터 많이 씀
  • 콤비네이터는 부모를 몰라요...
     
• 가상 셀렉터, 가상 요소
  • 가상 (psuedo, 의사) : 코드 상으로 존재는 하나 개념적으로 존재하는 것들
  • 가상 셀렉터 : 특정한 요소에 마우스를 올린 상태와 같은
    • 마우스를 올린 상태 :hover (터치 스크린에서는 한 번 클릭한 상태)
    • 마우스를 클릭한(활성화 된) 상태 :active
    • 특정한 링크를 이미 사용한 상태 :visited
    • 특정한 요소에 포커스가 간 상태 :focus
  • 가상 요소 : 어떤 스타일을 넣기 위해 요소를 추가해야 하지만 의미론적으로는 필요 없는 것에 활용
    • 요소의 앞에 ::before
    • 요소의 뒤에 ::after
    • placeholder ::placeholder
    • before, after는 content 속성이 필수, display를 지정하지 않으면 text로 취급
• 캐스케이딩
  • 스타일이 중복되거나, 여러 스타일을 한 요소에 적용했을 때 어떤 걸 적용할지 결정
  • 가장 마지막의 것
  • 캐스케이딩 계산
    • 스타일이 어느 위치에 존재하는지 - 같은 특정성이라면 뒤쪽에 존재하는 게 적용
    • 특정성이 높은 순서대로 적용
    • 특정성 계산 알고리즘
      • 셀렉터 하나당 1점 - 셀렉터의 갯수를 세서 a b c 순으로 나열
      • 셀렉터 중 ID 셀렉터의 갯수를 셉니다. a 
      • 셀렉터 중 클래스 셀렉터, 속성 셀렉터, 가상 클래스의 갯수를 셉니다. b 
      • 셀렉터 중 타입 셀렉터와 의사 요소의 갯수를 셉니다. c
      • 전역 셀렉터는 무시합니다.
      • 특정성의 숫자가 높을 수록 반영
    • !important (안 쓰는게 좋아..)
• 상속
  • 부모에 적용된 스타일이 자손 요소까지 영향을 주는 경우
  • inherit 이라는 속성 값을 지정해서 자체적인 스타일을 명시적으로 상속
  • body의 폰트 사이즈 값이 input에 상속되게 하는 것이 좋다 
• 스타일 적용법과 각 적용법별 장단점
  • 3가지 방법
    • 특정한 요소에 style 인라인 속성을 이용해서 style 부여
      • 장점 : 딱 해당 요소에만 스타일이 들어가고 우선 순위가 높음
      • 단점 : 확장성 저하, 그 외 모든 것
    • 해당 페이지에 <style></style> 요소를 사용해서 style 부여
      • 리액트 같은 모던 웹 애플리케이션 개발에서 많이 쓰임 (Styled Component에서 쓰임)
      • 장점 : 페이지 내에서 필요한 스타일만 지정해서 사용, CSSOM을 통해 자바스크립트로 제어하기 수월
      • 단점 : 모든 페이지 내에서 공통 스타일을 관리하기에는 어려움
    • 외부 파일로 .css 파일을 만들어 <link rel="stylesheet" href="" />로 style 부여
      • 장점 : 공통으로 쓰이는 스타일 관리가 쉬움
      • 단점 : 외부에 파일이 있어서 HTTP 요청이 한 번 발생, 이해도가 낮은 상태에서 공통 스타일을 만들면 ..
• 다음 시간 맛보기 (레이아웃)