HTML&CSS

🔍 <h1>, <h2>, ... <h6> 기본이지만 헷갈릴 수 있는 h태그에 대해 알아보자<section>안의 마크업에서 이상한 일이 벌어졌다. 따로 폰트 크기를 설정하지 않았음에도 <h1>과 <h2>의 크기가 같은 것이었다. 🫥자세

🔍 분명히 마진을 줬는데 적용이 안 될 때가 있다. 원인을 미리 알아두어 맞닥뜨렸을 때 당황하지 않도록 하자.인접한 두 요소에 마진 값을 주었을 때 더 큰 마진 값만이 적용될 때가 있다. 또 자식 요소에 마진 값을 주어도 부모의 높이에는 영향을 미치지 않는 경우도 있

CSS에서 요소를 배치하는 방식은 여러가지가 있다. float, flex, grid ... 그 동안 주로 flex 방식을 사용해 정렬해왔는데, float는 요소가 둥둥 '떠'버린다는 어떤 불안 요소가 있었다. float에 대해 자세히 정리하며 그 불안을 해결해보자!

flex와 grid에 대해 알아보자 스마트폰, 패드 등 다양한 디바이스가 생기면서 다양한 크기의 화면 각각에 맞는 레이아웃을 고려해야 하는 상황이 되었다. 또한 번역으로 인해 글의 길이가 달라지기도 하는 등 1px에 따라 레이아웃이 달라질 위험이 있는 float로는

🔍 translate? position? 요소를 배치하기 위해 어떤 속성을 사용해야 할까? reflow, repaint 과정을 통해 알아보자. transform: translate과 position은 모두 요소의 위치를 설정하기 위해 사용되는 속성이다. 둘 중 어느

> 🔍 부모요소에 `display: flex`를 준 것이 아니더라도 중앙 정렬이 될까? 과제를 하던 중 부모 요소에 flex를 준 것이 아님에도 flex를 활용해 중앙 정렬된 것을 발견했다.