라벨이 collapse인 게시물 표시

[CSS] 마진 중첩(상쇄) 현상 (margin overlap 또는 margin collapse)

이미지
박스 모델을 사용할 때 주의해야할 점이 있다. 요소들을 세로로 배치할 경우 각각의 요소들의 margin과 margin이 만나는 지점에서 값이 큰쪽으로 겹쳐진다(중첩된다)는 점을 주의해야한다. 일반적으로 생각했을 때 각 요소에 margin 값이 20px로 지정되어있다고하면 요소간의 간격이 40px이 될거라고 생각하기 쉽지만 실제 간격은 20px이 된다.  이러한 현상을 마진 중첩(margin overlap) 또는 마진 상쇄(margin collapse)라고 한다. 반면에 가로로 요소들을 배치할 경우 이러한 margin 중첩현상은 발생하지 않는다.

[CSS] 표에서 이중선 없애기(border-collapse)

이미지
표를 만들때 table, th, tr, td 태그를 사용한다. table은 표를 만드는 태그 th는 표의 헤더 부분을 만드는 태그 tr은 표의 행을 만드는 태그 td는 표의 열을 만드는 태그 table과 td 태그에 border 속성을 사용하면 두 줄로 표시된다.  border-collapse 미적용 이때 border-collapse 속성을 사용하면 표의 바깥 테두리와 각 셀의 테두리가 떨어져 있는것을 그대로 둘지 혹은 두 테두리를 하나로 합칠 것인지 결정할 수 있다. border-collapse 적용