인프런 커뮤니티 질문&답변
작성한 질문수
툴팁을 요소의 정중앙에 위치시키기 질문
해결된 질문
작성
·
122
1
안녕하세요.
실전 퍼블리싱 파트1 강의 중 마우스오버 시 툴팁 나타나게 하는 부분 듣고 있는데요, span 태그의 transform 속성을 이용해서 툴팁이 아이콘의 너비에 상관없이 아이콘의 정중앙에 오게 하는 방법이 이해가 되지 않아 질문드립니다.
강의에 보면
left: 50%;
transform: translateX(-50%);위와 같이 속성을 부여하면 된다고 말씀하셨는데, translateX 속성은 span 태그의 현재 위치를 기준으로 위치를 바꾸는 것이라 이게 왜 아이콘의 중앙에 툴팁을 위치시킬 수 있는지 잘 이해가 되지 않습니다.
추가적인 설명 해주시면 감사하겠습니다!
답변 1
0
코딩웍스(Coding Works)
지식공유자
left: 50%; 는 부모요소를 기준, transform: translateX(-50%);는 자기 자신을 기준합니다.
left: 50%를 하면 자식요소의 왼쪽이 부모요소의 수평 중앙에 오게 됩니다.
그래서 자식요소가 자신의 너비의 5%만큼 왼쪽으로 가면 완벽한 정중앙이 되기 때문에 transform: translateX(-50%);를 줍니다.
수평에서 마이너스는 왼쪽으로 이동, 플러스는 오른쪽으로 이동
수직에서는 마이너스는 위로 이동, 플러스는 아래로 이동