CSS 2

이미지를 a태그로 감쌌을 때 여백이 생기는 이유

회사에서 마크업 작업을 하다가 아래와 같이 a태그 안에 이미지 태그를 넣으니 이미지 사이사이 여백이 생기는 현상이 생겼다.해당 작업을 하면서 새롭게 알게 된 사실을 정리해본다!    ✅ 여백이 생기는 이유1. 인라인 요소의 특성 태그는 기본적으로 인라인 요소.인라인 요소는 텍스트와 같은 방식으로 취급되어 베이스라인(baseline)을 기준으로 정렬된다. 2. 베이스라인과 여백 인라인 요소는 베이스라인 위에 배치되며, 베이스라인 아래에는 소문자 g, p, y 등을 위한 여분의 공간이 존재한다.이미지는 이 공간을 사용하지 않지만, 여전히 그 공간이 남아있어 여백으로 보이게 된다.  3. HTML 코드의 공백 여러 이미지를 나란히 배치할 때, HTML 코드에서 태그 사이의 줄바꿈이나 공백이 브라우..

[반응형] css 단위 px/em/rem

🔎 절대단위px(픽셀), pt(포인트) 🔎 상대단위고정적이지 않고 기준에 따라 유동적으로 바뀜em, rem, % 등 🔎 em과 rem 📌 em현재의 font-size를 정의부모요소인 html에 100% 기준을 두고 하위 요소 들의 폰트사이즈가 결정em은 요소의 글꼴 크기 1em을 갖는다. h2타이틀 영역 p텍스트 p태그 내부의 span 텍스트 ✅ 위와 같은 경우라면?h2태그 : 16px * 2 = 32pxp태그 : 16px * 1.5 = 24pxspan의 경우에는 content 영역 ➡️ p태그 영역 ➡️ span 태그이므로 16*1.5*0.5 = 12px 📌 remrem의 r은 root를 뜻함rem의 경우 html 최상위 요소의 f..

반응형