꺾이지 않는 마음

오늘 실무에서 자주 쓰이는 유용한 CSS 스킬을 하나 배웠다! 바로 요소를 영역 내에서 중앙에 고정하는 방법이다. position과 margin, calc() 함수를 사용하면 쉽게 할 수 있다. 순서는 다음과 같다. 1. 중앙 배치할 요소에 position: absolute; 를 주고, 부모 요소에게 position: relative를 준다. (부모 요소 안에서 독립적으로 포지셔닝을 하기 위함) 2. 중앙 배치할 요소에 left: 50%; 를 준다. (부모 영역 가로의 정 중앙 위치에서부터 콘텐츠가 배치된다.) 3. 중앙 배치할 요소에 margin-left: (요소의 가로 길이 / -2); 를 준다. (중앙 배치할 요소도 자체의 가로 길이를 가지기 때문에 2번 과정을 통해 정 중앙에서 요소가 시작되도록..