[CSS] display 속성 총정리! (block, inline, inline-block, flex 등)
이런 저런 코드를 참고하다 보면 다양한 display 속성을 자주 만날 수 있다. 이 속성은 말 그대로 요소를 어떻게 보여줄지 결정하는 속성이다. 대체 이 display 속성이 요소를 어떤 식으로 보여주는지 확실하게 알아보도록 하자. none 요소를 랜더링하지 않도록 설정한다. 자리 차지도 하지 않고 완전히 사라진다. 예시 display none 설정 none 설정 안 됨 결과 none 설정 안 됨 block 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다. width, height 속성을 지정할 수 있으며 block 요소 바로 오른쪽에 배치될 수 있는 태그도 줄바꿈이 되어 표시된다. div, p, h, li 태그 등이 이에 해당한다. 예시 bloc..
[CSS] em vs rem 사용법과 비교 총정리
css에서 조금 더 유연한 크기 지정 단위로 em과 rem을 많이 사용하고 있을 것이다. 그러나 이 단위가 어떤 것을 기준으로 변화하는지, 어디에 무엇을 사용하면 좋을지 헷갈릴 때가 많다. 이번 포스팅에서 이들의 차이점과 적절한 사용법을 정리해보겠다. rem 페이지의 최상위 요소, 즉 html 요소의 폰트 크기를 기준으로 변화한다.예를 들어 최상위 요소의 폰트 크기가 16px이라면, 10rem은 160px이 된다. em 스타일을 지정한 요소의 폰트 크기를 기준으로 변화한다.현재 지정된 요소에 폰트 크기가 지정되지 않았다면, 상위 요소의 폰트 크기를 기준으로 변화한다.예를 들어 한 요소의 폰트 크기가 20px이라면, 10em은 200px이 된다. 브라우저가 HTML 폰트 크기에 미치는 영향 기본적으로 브라..