😀 CSS의 Cascading
: HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위
- css의 정식 명칭 'Cascading Style Sheets'인 만큼 캐스캐이딩이 중요
-> 폭포, 위에서 아래로 쏟아지는의 의미를 지님
스타일 우선순위는 아래의 3가지에 의해서 결정
1. 중요도 : CSS가 어디에서 선언되었는지
2. 명시도(적용범위): 적용 대상을 명확하게 표시할수록(적용범위가 적을수록)
3. 코드 순서
각각에 대해 조금 더 살펴보자.
❤️ 중요도
: 스타일이 선언된 위치에 따라서
- 사용자 스타일 시트 (사용자) > 제작자 스타일 시트 (웹 개발자) > 브라우저 기본 스타일 시트
-> 즉, 기본적인 스타일 시트보다 내가 작성한 스타일 시트가 더 높은 우선순위를 가지고, 그것보다 사용자가 직접 설정한 스타일이 더 높은 우선순위를 가진다.
❤️ 명시도(적용 범위)
: 좁을수록 우선순위 높음 (중요도가 같을 경우에는 '적용범위'의 영향을 받는다)
but, !important가 붙은 경우, 모든 범위에 앞서는 가장 중요한 스타일
!important>인라인 스타일>id 스타일>class 스타일>태그 스타일
-> inline style보다는 style태그나 외부 CSS 파일로 빼는 것이 좋습니다.
- specify caculator
: 위와 같은 경우에는 파랑이 아닌 빨강이 적용되는 것을 알 수 있다. 같은 스타일이 적용되면, 점수화되어 어떤 스타일을 적용할 지 결정해준다.
https://specificity.keegan.st/
-> 이를 통해 계산 가능
❤️ 코드 순서
: 나중에 작성한 스타일 코드가 우선순위가 가장 높다.
-> 중요도와 적용 범위가 모두 같은 경우, 코드 순서의 영향을 받는다.
--> 스타일 적용에 있어서 상속 관계에 영향을 받는다. 부모의 스타일은 자식의 스타일로 전달된다. 배경색, 배경 이미지는 상속에서 제외된다.
😀 position의 속성
: position의 속성 값으로는 static, relative, absolute, fixed, sticky가 있다. 또, 원래의 위치에서 완전히 벗어나며 공백이 메워지는 지의 여부에 따라 static, relative, sticky/absolute, fixed와 같이 나뉜다. 각각에 대해서 알아보자.
- static
: 위치 변화 없음 (default 값)
- relative
: 원래 위치를 기준으로 이동
-> 원래 위치를 기준으로 얼마나 떨어져 있는 지 (top, bottom, left, right 속성을 통해서 정해줄 수 있다.: 음수도 쓸 수 있음)
- sticky
: 브라우저를 기준으로 어디서부터 들러붙게 할 것인지 (top, bottom, left, right 속성을 통해서 정해줄 수 있다.: 음수도 쓸 수 있음)
-> top: 60px이면, scroll하면서 그 요소가 위에서부터 60px 거리에 위치하면, 그 요소를 고정시켜준다.
- absolute
: 상위의 가장 가까운 포지셔닝된 요소를 기준으로 이동
-> 기준으로할 요소를 'position: relative'를 통해 포지셔닝 해줘야 함
-> 대상 요소: position: absolute'를 적용하여, 기준을 대상으로 어디에 위치시킬지 (top, bottom, left, right 속성을 통해서 정해줄 수 있다.)
- fixed
: 브라우저를 기준으로 요소의 위치 고정
-> 여기서도 마찬가지로, top, bottom, left, right 속성을 통해서 정해줄 수 있다.
-> 하단 nav를 고정시킨다면, 그 위의 요소들에 대해 margin-bottom을 충분히 주어야, 마지막 요소의 내용이 가리지 않는다는 것
