-
- 캐스 캐이딩
- HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선 순위가 결정되어야합니다.
- CSS가 어디에서 선언되었는지(중요도)
- <head>의 <style>
- <head>의 <style> 내의 @import
- <link>로 연결된 CSS 파일
- <link>로 연결된 CSS 파일 내의 @import
- 브라우저의 기본 CSS
- 대상을 명확하게 지정할수록(명시도)
- !important
- inline 스타일
- 아이디 selector
- 클래스 / 가상 선택자
- 태그 선택자
- 상속된 스타일
- 코드순서
- Position
- Static(스태틱) : css positon 값을 할당하지 않으면 가지는 기본 값이다. 자기가 원래 위치해야 하는 그곳에 정적으로 위치
- Relative(렐러티브) : 자기가 원래 위치해야 하는 위치를 기준으로 상대적인 offset 거리 만큼 이동
- absolute(앱설룻) : static이 아닌 조상의 position 위치를 기준으로 element의 offset을 적용하고 싶을 때 사용
- fixed(픽스) : 고정 시킬 때 사용
- CSS 애니메이션과 JS 애니메이션의 차이
- CSS 애니메이션
- 외부 라이브러리를 필요로 하지 않습니다.
- 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현이 가능 합니다.
- 미디어쿼리를 사용해서 반응형으로 애니메이션을 구현 할 수 있습니다.
- 메인 쓰레드가 아닌 별도의 컴포지터 쓰레드(Compositor Thread)에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적입니다.
- JS 애니메이션
- 애니메이션을 세밀하게 제어해야 하는 경우 JS를 사용 합니다.
- 크로스 브라우징 측면에서 JS 애니메이션을 사용하는 것이 유리 합니다.(브라우저 호환성이 좋다.)
- GPU를 통한 하드웨어 가속을 제어할 수 있씁니다. CSS 애니메이션의 경우 특정 속성에 의한 GPU가속이 됨으로서 저사양의 컴퓨팅인 경우에 성능 하락을 발생시킬 수 있으나 이를 막을수 있습니다.
- margin과 padding의 차이점
- margin은 Object와 화면과의 여백(외부여백)
- Padding은 Object내의 내부여백
- CSS, SASS, SCSS의 차이
- SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
- SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식
