background-position 관련 질문합니다.
325
작성한 질문수 2
본 강좌 <모던 HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기5> 강의 7:35 분쯤에서 background-position 값을 center 10% > center 50% 로 바꿨을 때 y축 값이 커졌으므로 그림이 아래로 내려가는게 맞다고 생각하는데 왜 그림이 위로 올라가는 건가요 ?
답변 1
0
안녕하세요. 답변 도우미입니다.
이 속성은 배경 이미지의 위치를 정의하는 데 사용되는데, 값이 center 10%에서 center 50%로 바뀌면 일반적으로는 이미지가 Y축을 따라 아래로 이동할 것 같다고 생각할 수 있어요. 하지만 실제로는 그렇지 않아요. 왜 그런지 설명해 드릴게요.
background-position의 x y 값은 배경 이미지가 어디에 위치해야 하는지를 지정합니다. 여기서 y 값인 10%나 50%는 이미지 상단 모서리의 위치를 의미해요.
center 10%: 상단 모서리가 컨테이너의 높이의 10% 지점에 오게 됩니다.center 50%: 상단 모서리가 컨테이너의 높이의 50% 지점에 오게 됩니다.
즉, y 값이 커질수록 배경 이미지의 상단 모서리는 아래로 이동하지 않고 오히려 위로 이동하게 돼요. 그래서 center 50%로 바꾸면 이미지가 오히려 위로 올라가는 것처럼 보이게 됩니다.
간단히 말해서, y 축의 백분율 값이 커질수록, 그 값은 배경 이미지의 상단을 기준으로 하기 때문에 이미지는 오히려 위로 올라가게 되는 것입니다.
감사합니다.
0
답변 감사합니다. 답변 내용이 어느정도 이해가가지만 궁금증이 또 생겨서 질문드립니다.
보통 background-position y축은 맨위를 기준으로 점점 아래로 내려갈수록 퍼센테이지가 커지는걸로 알고있습니다. https://ossam5.tistory.com/42 여기 홈페이지에 나와있는 2) 코드완성뷰 부분처럼요! (100 % 100% 이면 우측 가장 하단 예시)
근데 이 예시는 왜 컨테이너 맨밑을 기준으로 점점 위로 올라갈수록 퍼센테이지가 커지는 건가요 ?
교육기간을 연장할 수 있는지 문의드립니다.
0
38
1
메일 확인부탁드립니다
0
58
1
CodeSandbox Vanilla 질문있습니다
0
60
1
part1을 수강하지 않아도 지장이 없다 하셨는데
0
107
1
강의에 관해 문의 드립니다.
0
91
1
메일확인 부탁드립니다.
0
91
1
14강 - 72,73번 강의 영상이 동일한거 같습니다.
0
106
1
Symbol 관련 테스트 코드 실행 결과 문의
0
141
1
호환성 관련 태그
0
120
1
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
0
136
1
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
0
146
1
div id="highlighter"가 강의화면에는 없는데 왜 샌드박스파일에는 있는지 궁금해요
0
86
1
강의화면에 height 가 vh가 아닌 vw라고 나와있는데 뭐가맞는거죠
0
117
1
메일 확인 부탁드립니다.
0
146
1
메일 확인 부탁드립니다
0
150
1
특별한 형태의 javascript배열에서
0
135
1
메일 확인부탁드립니다!
0
162
1
codesandbox 업데이트..
0
144
1
pdf 파일에 있는 링크주소로 들어가지지가 않습니다.
0
266
2
강의에서 알려주신 Properties for the flex container 복습 사이트, 검색 발견되어서 공유드립니다~
0
152
1
removeEventlistener 를 왜 해주어야 하는지
0
227
1
100vw 관련 질문
0
335
2
VS CODE html:5 <tab>기능이 안됩니다
0
350
1
[모던웹페이지 만들기9](1:40)class-desc 카드부분관련
0
247
2