인프런 커뮤니티 질문&답변
작성한 질문수
background-position 관련 질문합니다.
작성
·
275
0
본 강좌 <모던 HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기5> 강의 7:35 분쯤에서 background-position 값을 center 10% > center 50% 로 바꿨을 때 y축 값이 커졌으므로 그림이 아래로 내려가는게 맞다고 생각하는데 왜 그림이 위로 올라가는 건가요 ?
답변 1
0
잔재미코딩 DaveLee
지식공유자
안녕하세요. 답변 도우미입니다.
이 속성은 배경 이미지의 위치를 정의하는 데 사용되는데, 값이 center 10%에서 center 50%로 바뀌면 일반적으로는 이미지가 Y축을 따라 아래로 이동할 것 같다고 생각할 수 있어요. 하지만 실제로는 그렇지 않아요. 왜 그런지 설명해 드릴게요.
background-position의 x y 값은 배경 이미지가 어디에 위치해야 하는지를 지정합니다. 여기서 y 값인 10%나 50%는 이미지 상단 모서리의 위치를 의미해요.
center 10%: 상단 모서리가 컨테이너의 높이의 10% 지점에 오게 됩니다.center 50%: 상단 모서리가 컨테이너의 높이의 50% 지점에 오게 됩니다.
즉, y 값이 커질수록 배경 이미지의 상단 모서리는 아래로 이동하지 않고 오히려 위로 이동하게 돼요. 그래서 center 50%로 바꾸면 이미지가 오히려 위로 올라가는 것처럼 보이게 됩니다.
간단히 말해서, y 축의 백분율 값이 커질수록, 그 값은 배경 이미지의 상단을 기준으로 하기 때문에 이미지는 오히려 위로 올라가게 되는 것입니다.
감사합니다.
답변 감사합니다. 답변 내용이 어느정도 이해가가지만 궁금증이 또 생겨서 질문드립니다.
보통 background-position y축은 맨위를 기준으로 점점 아래로 내려갈수록 퍼센테이지가 커지는걸로 알고있습니다. https://ossam5.tistory.com/42 여기 홈페이지에 나와있는 2) 코드완성뷰 부분처럼요! (100 % 100% 이면 우측 가장 하단 예시)
근데 이 예시는 왜 컨테이너 맨밑을 기준으로 점점 위로 올라갈수록 퍼센테이지가 커지는 건가요 ?