정의 그동안 display 속성하면 inline, inline-block, block 이 3가지만 알고 있었다. 하지만 반응형 웹을 만들기 위해서 필수로 알아야하는 게 바로 display: flex 이다. 이 속성은 화면이 줄어들고 늘어남에 따라 변화하는 반응형 웹을 조금 더 쉽고 효율적으로 만들기 위해서 필요한 준비물이라고 보면 되겠다. display: flex를 주게 되면, block 속성을 가진 엘리먼트들도 마치 float를 먹인 것처럼 flex 안으로 들어온다. 개인적으로 flex를 줄 때, 엘리먼트를 젤리화한다고 생각한다. 뭔가 젤리를 만졌을 때 유연하고 말랑해서 모양 변화가 쉽기 때문에 이런 식으로 자연스럽게 연상하게 되는 것 같다. (이해를 위한 나만의 방식이다) flex의 속성인 flex-..

정의 position: relative 요소의 위치를 상대적인 위치 및 기준점으로 설정한다는 속성으로, 대개 absolute 속성을 가진 자식의 부모 태그에 많이 쓰여진다. absolute의 경우 부모 태그의 relative가 없이 쓰게 되면 전체 인터페이스를 기준으로 엘리먼트의 위치를 잡기 때문에 최상단이나 최하단의 위치한 경우가 아니고서야 엘리먼트의 위치를 제대로 지정하기 어렵게 된다. 이것을 방지하기 위해서는 그 엘리먼트가 속한 부모 태그에 position: relative를 줌으로써 너무 자유분방한 absolute에게"너는 내 안에서만 놀아!"라고 공간을 제어해줄 수 있다. position: absolute 요소의 위치를 절대적 값으로 설정한다는 속성으로, 이미 다 짜놓은 태그 위에 특정 엘리먼트..