DevSSOM

형제간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } 한 쪽은 150px이라고 하는 margin-bottom이고, 한 쪽은 100px margin-top이니까 box1과 box2영역의 마진 부분이 겹쳐. 공통된 부분을 두 개의 영역이 공유하게 되면, 이 공간의 크기는 250px이 되는게 아니라 150이 됨. 항상 큰 값에 우선순위가 있어서 큰 값이 작은 값을 병합시켜버리는 것. 부모-자식간의 마진 병합 /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } main이라고..

캐스케이딩 : CSS의 우선순위를 결정하는 세 가지 요소. 1. 순서 동일하게 태그를 선택한 상황에서, 같은 속성을 사용하는데 속성값만 다름. 이 경우에는, 나중에 작성한 속성값의 우선순위가 높기 때문에 이 때 컬러는 blue로 표기가 됨. Hello World // style.css 문서 p { color: red; } p { color: blue; } 2. 디테일 같은 태그라도, 하나는 부모를 명시해줬고, 다른 하나는 그냥 태그라면, header 안의 p가 좀 더 구체적으로 작성된 CSS 선택자이기 때문에 색상은 red로 나타나게 됨. Hello World // style.css 문서 header p { color: red; } p { color: blue; } 3. 선택자 사용하는 선택자에 따라서도..