display,visibility 속성 정리
·
Study/Markup
display 속성 display: inline 기본값으로, 요소를 inline 요소처럼 표시합니다. => 앞뒤로 줄바꿈 되지 않습니다. display: block 요소를 block 요소처럼 표시합니다. => 따라서 요소 앞 뒤로 줄바꿈 됩니다 display: none 박스가 생성되지 않습니다. => 따라서 공간을 차지하지도 않습니다. display: inline-block 요소는 inline인데 내부는 block 처럼 표시함. => 즉, 박스 모양이 inline 처럼 옆으로 늘어섬. visibility 속성 visibility: visible 기본값으로 요소가 그대로 보입니다.visibility: hidden 요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.visibility: co..
display: inline-block 여백이 생기는 현상
·
Study/Markup
1. 문제 발생 (예제) 1000px 로 설정한 div를 다시 150px, 700px, 150px 로 나누고 안쪽의 div에는 display: inline-block 속성을 주었는데 맨 오른쪽 div 영역이 아래쪽으로 밀려내려감 *** div의 padding과 margin, border는 모두 0px 이었음 2. 원인 태그 등으로 다른 태그들을 묶어주는 경우, div 태그 또한 inline-element로 인식을 하기 때문에 div들끼리 마주하는 부분에서 여백이 생김 div 뿐만아니라, span도 마찬가지 3. 해결 방법 1) .container { // 부모 랩퍼 ... font-size: 0px; letter-spacing: 0px; word-spacing: 0px; } .container > div..