CSS
-
-
position:absolute 와 margin: auto 를 이용한 가운데 배치CSS 2022. 11. 21. 12:10
부모에 position: relative; 자식에 position: absolute; top: 0, bottom: 0, margin: auto 0; = 수직 가운데 정렬 position: absolute; top: 0, bottom: 0, left: 0, right: 0, margin: auto; = 컨텐츠 내 중앙 정렬 margin이 화면 내에 position:relative 되어 있는 부모 기준으로 자동 계산해서 배치함 * 단, 조건은 요소에 너비가 존재해야 한다. (수직 정렬일 경우 height, 수평 정렬일 경우 width) 너비가 있어야 수직 또는 수평 중앙 정렬 가능
-
<img> 태그 block 요소로 처리 하는 이유?CSS 2022. 11. 18. 18:11
img 태그는 기본적으로 인라인 요소이다. 인라인요소는 텍스트를 위한? 요소인데 img태그도 인라인 요소를 기본적으로 갖는다. 때문에 이미지를 삽입한건데 브라우저는 텍스트라고 생각을 하고 빈 공간을 만들게 된다. 이미지를 넣었을 때 하단에 생기는 빈 공백을 없애는 방법은 -> img 태그의 기본 설정을 block으로 설정해두는것이다. 브라우저에서 더이상 img는 inline(텍스트를 위한 요소)로서 사용되지 않고 레이아웃의 기능만을 갖게 된다. 그러므로 더이상 텍스트 작성을 위한 inline이 주는 공백이 없어진다.