강의

멘토링

커뮤니티

Inflearn コミュニティ Q&A

sss9524560292 のプロフィール画像
sss9524560292

投稿した質問数

インタラクティブWeb開発を正しく開始する

動くキャラクターの例でクリックイベントを習得する

선생님 position 관련 질문입니다.

解決済みの質問

作成

·

338

0

선생님 움직이는 이벤트예제입니다.

.ilbuni에서 background-position: 50% 50%;와 
.ilbuni .a에서 left: 5%; bottom: 5%;의 position 속성이 
경합되는 것 아닌가요??

background-position: 50% 50%가 무슨 역할을 하는지 이해를 못하겠습니다.

HTML/CSS인터랙티브-웹javascript

回答 5

1

studiomeal님의 프로필 이미지
studiomeal
インストラクター

아- 신경 써주셔서 감사합니다^^;
공부 화이팅 하시길!

1

studiomeal님의 프로필 이미지
studiomeal
インストラクター

네 50%같은 경우도 left: 50%;는 엘리먼트의 왼쪽 부분이 절반 위치에 와서 오른쪽으로 치우치게 되고,
background-position: 50%는 배경이미지가 딱 정 가운데 오거든요.
그런식으로 동작이 차이가 있으니 여러가지로 값을 넣어가며 테스트 해보시면 감 잡으실 수 있을거에요^^

1

studiomeal님의 프로필 이미지
studiomeal
インストラクター

left: 5%랑 bottom: 5%는 .ilbuni 엘리먼트의 위치를 지정하는 값이고요,
background-position: 50% 50%는 .ilbuni 엘리먼트의 배경이미지를 가운데 위치하도록, 즉 배경이미지의 위치를 지정하는 속성입니다^^ background-position: 50% 50% 대신 background-position: center center; 이렇게 써도 같은 효과입니다.

0

ss S님의 프로필 이미지
ss S
質問者

선생님 답변 감사합니다.
아 그리고 별표 5개로 수정했습니다!! 이제 컴터키고 다시 살펴봤는데 어제는 아무리 찾아도 수강평을 어디서 볼 수 있는지 못 찾았는데 오늘 딱 찾았습니다!!

0

ss S님의 프로필 이미지
ss S
質問者

선생님의 background-image관련 답변을 듣고 곰곰히 생각해보고 이 답변을 보니 이해가 좀 됩니다. 
background-position: 50% 50%는 ".ilbuni" element의 background image를 가운데 위치하도록!!
이 background라는 단어를 단순히 배경으로 생각했는데 그게 어떤 배경을 뜻하는가의 부분이 제가 이해못했던 핵심인 것 같습니다.
또한 background-position: 50% 50%를 주석처리해봤는데도 무슨차이가 있는지 도저히 알 수가 없더라구요. 그러다보니 더욱 어려웠던 것 같습니다.
답변해 주셔서 감사합니다!!

sss9524560292 のプロフィール画像
sss9524560292

投稿した質問数

質問する