CSS
-
position - CSS코드잇 2023. 11. 26. 22:29
CSS position 속성은 문서 상에 요소를 자유롭게 배치할 때 쓴다. static 기본 값이다. 요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 위치를 적용할 수 있다. 이때 요소의 원래 자리는 그대로 차지하고 있다. // red는 top에서 20px 아래로 밀려나고, left는 30px 오른쪽으로 밀려난다. .red { position: relative; top: 20px; left: 30px; } 값이 모두 똑같은 경우 inset을 쓴다. 모든 방향에 대해서 20p..
-
CSS Cascading (우선순위)코드잇 2023. 11. 26. 21:19
CSS Cascading 우선 순위가 높은 규칙일 수록 우선적으로 속성을 적용한다. 스타일 시트의 순서 브라우저의 기본 스타일(user Agent Stylesheet)은 우선순위가 낮아서 사용자가 작성한 코드로 덮어 씌어진다. 개발자 도구에서 user agnet style이 브라우저 기본 스타일이다. 예시 ) 브라우저 기본 스타일보다 유저가 작성한 스타일시트가 우선순위가 높아서 h1은 15px로 적용된다. // 브라우저 기본 스타일 h1 { display: block; font-size: 13px; ... } // 유저가 작성한 스타일 h1 { font-size: 15px; } 참고로 html에 직접 작성하는 인라인스타일이 우선순위가 가장 높다. // style.css .login { background..
-
마진 상쇄 - CSS코드잇 2023. 11. 22. 19:11
마진 상쇄(margin Collapsing)는 html 태그끼리 세로 마진을 겹쳐서 더 큰 마진을 적용한다. 가로 마진은 겹치지 않는다. 위 아래 겹치는 태그는 마진 상쇄가 일어난다. 부모와 자식간의 태그인 경우 border나 padding이 있으면 마진 상쇄되지 않는다. - 위 아래 겹치는 태그 a b 세로로 연달아 있는 태그들이다. 이 둘의 마진을 겹치면 40px이 된다. - 부모 자식간에 margin만 있는 경우 (상쇄 됨) b d - 부모 자식간에 border가 있는 경우 (상쇄 안됨) b d border 테두리에 막혀서 margin 끼리 상쇄가 되지 않는다.