css 중첩 시, 적용 우선순위
css 속성이 하나의 태그에 중첩된 경우, 다음 순서대로 우선순위가 결정됩니다. 즉, 우선순위가 높은 항목이 이겨서 우선적으로 적용됩니다.
- inline style
- id 선택자
- class 선택자
- tag 선택자
포괄적 < 정교함
단, 속성 뒤에 !important를 붙이면 가장 높은 우선순위를 부여받게 됩니다.
block & inline
혼자 화면폭 전체을 차지하는 특징을 block이라고 하고, 한 줄에 다른 요소들과 함께 존재할 수 있는 것을 inline이라고 합니다.
inline 방식에서는 width와 height 속성이 무시됩니다.
마진 겹침
형제
서로 접해있는 요소들의 마진 속성이 서로 겹칠 경우, 더 큰 값으로 두 요소 사이의 간격에 적용이 됩니다.
부모 자식
부모 엘리먼트가 시각적인 속성이 없는 투명한 상태일 땐, 부모와 자식의 마진값 중 더 큰 값이 자식 요소의 속성값으로 적용됩니다. 하지만 확실한 시각적인 속성이 있다면, 그냥 각자 갖고 있는 마진값이 적용됩니다.
이러한 디테일한 규칙이 있다는 것을 인지만 하고, 실무에서 이슈를 만났을 때 발생 원인을 찾아낼 수 있는 직관만 있으면 됩니다. 모든 문법을 외울 수 없기 때문에, 필요할 때마다 찾아서 적용할 수 있으면 되는 것이죠.
position
relative
left, top 과 같은 offset 속성을 사용하려면, position 속성을 relative로 설정해야 가능합니다. relative라는 말 그대로 기준에 따라 상대적으로 자신의 위치를 정하는데, 그 기준이 원래 자신이 존재하는 '부모 엘리먼트'입니다. 만약 relative로 설정하지 않으면, 기본값인 static이 됩니다.
absolute
relative처럼 기준에 따라서 상대적으로 자신의 위치를 정하는데, 부모 중에 포지션 타입이 지정되지 않은 부모 엘리먼트를 기준으로 갖습니다.
하지만 top, left 같은 offset을 설정하는 순간, 그 기준이 최상위 태그인 'html 태그'입니다.
absolute를 설정했을 때, width 값이 없어진 이유는 부모 엘리먼트의 속성을 그대로 상속받아서 쓰다가 부모와의 연결이 끊어졌기 때문에 그 속성을 잃어버린 것입니다. 그래서 자신의 콘텐츠 크기만큼의 width를 갖게 되는 것입니다. 부모 입장에게도 자식 엘리먼트를 없는 것처럼 인식하게 됩니다.
상대적인 속성을 갖는 position에서는 offset 속성을 주면 기준대로 변경되고, offset 속성이 없다면 원래 갖고 있는 속성을 그대로 가져갑니다.
fixed
지정된 속성 위치에 완전히 고정시켜서, 스크롤과 독립적으로 존재하도록 하는 속성입니다. 스크롤을 움직여도 해당 화면 위치에서 움직이지 않습니다.
css는 동일한 관계일 때는 더 아래에 위치하는 코드가 우선적으로 적용됩니다.
참조링크
