-
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 요청이 한 번 발생, 이해도가 낮은 상태에서 공통 스타일을 만들면 ..
- 다음 시간 맛보기 (레이아웃)
