css3 CSS 우선순위 (Cascade) CSS는 기본적으로 더 나중에 작성된 것이 우선순위가 높다. 그러나 항상 그런 것만도 아니며 조금 더 복잡한 구석이 있기 때문에 주의해야한다. (미리 밝혀두자면 작성 위치에 따른 우선순위는 inline > style태그 > style.css 이며, 본 글은 같은 element에 대해 붙었을 때 CSS가 누구의 손을 들어주는지에 대해 작성했습니다.) 어떤 선택자가 이기는지는 다음 순서에 따른다. (1위가 가장 우선순위가 높다.) 1. Importance 2. Specificity 3. Source order 1. Importance 아래와 같이 !important를 붙여 준 것이 가장 우선순위가 높다. h2 { color: red !important; } 2. Specificity specificity는 .. 2020. 3. 24. CSS의 단위 사이트 레이아웃을 구성하면서 왼쪽 부분에 사이드바(주황색 부분)를 만들고 싶었다. 위 그림과 같이 화면 전체의 15%정도(?)를 차지하도록 하고싶었는데, width: 15%으로는 꿈쩍도 하지 않았다. 그래서 이것을 해결할 방법을 알아보다가 새로운 단위들을 더 알게되어 이렇게 정리하게 되었다. CSS의 단위는 고정적인 길이(absolute length)가 있고, 상대적인 길이(relative length)가 있다. 1. 고정적인 길이(Absolute length) 고정적인 길이는 어느 화면으로 보든지 같은 사이즈로 나타난다. 요즘에는 휴대폰, 패드, 노트북 등 다양한 기기로 보기 때문에 고정적인 길이를 사용하는 것을 추천하지는 않는다. cm centimeters mm millimeters in inches.. 2020. 1. 10. [CSS] 마진 겹침/ 상쇄(margin collapsing) 마진 겹침 현상은 top margin과 bottom margin이 겹쳐질 때 서로 상쇄되는 것을 말한다. 이렇게 말하면 이해하기 어려울 수 있으나 아래 그림을 보면 쉽게 이해할 수 있다. 각 박스 안에는 margin 값이 들어있다. 노란색 박스의 margin은 100px이고 주황색 박스의 margin이 50px이라면 둘 사이의 공간은 150px만큼 떨어져 있어야 하겠지만, margin collapsing 현상에 의해 큰 값으로 상쇄된다. 따라서 100px이 되는 것이다. 주의사항 음수 마진이 포함된 경우는 가장 큰 양수마진과 가장 큰 음수 마진의 합으로 상쇄된다. 부동 요소(float)나 절대적으로 위치가 지정된(absolutely positioned) 요소의 마진은 상쇄하지 않는다. 보더, 패딩, 인라.. 2020. 1. 8. 이전 1 다음
