-
질문 & 답변
카테고리
-
세부 분야
기타 (개발 · 프로그래밍)
-
해결 여부
미해결
이미지크기
21.08.21 19:27 작성 조회수 86
1
안녕하세요 강의 잘 듣고 있습니다.
이미지크기가 강의와는 다르게 너무 커서
.cont-movie .list-movieInfo li img {
width: 180px;
height: 250px;
}
를 작성해서 조절 해주었는데 이 방법이 맞을까요 ?그리고 강의에 맞게 코드 잘 작성하였고 github 코드랑도 비교해도 문제가없는데
이미지 크기가 왜 다르게 나오는지 궁금합니다.
답변을 작성해보세요.
0
-J-
지식공유자2021.08.23
안녕하세요~ 케냐더블에이님!
코드를 검토해 보았는데요! 말씀주신데로 이미지의 크기가 너무 커서 생긴 문제인것 같습니다.
제가 따로 코드에서 이미지의 크기를 지정하지는 않았고요!
포스터의 이미지는 피그마에서 다운받아 사용하시는게 좋습니다! 노션의 이미지는 원본이라 너무 큽니다!
피그마에서 다운받는 법은
1. 화면에서 다운받을 이미지를 마우스로 클릭해 선택하시고
2. 오른쪽 상단의 Export 탭에서 하단의 Export 버튼을 누르시면 다운받으실 수 있습니다!
그리고 강의에서 사용하는 코드들은 모두 깃헙에 올리셔도 상관없습니다! 마음껏 공부해주세요~
감사합니다 :) ㅎㅎㅎ
0
-J-
지식공유자2021.08.21
안녕하세요~ 케냐더블에이님!
혹시 작성하고 계신 코드를 저에게 파일로 보내주시거나, (메일주소는 nugurejeil1@gmail.com 입니다!)
깃허브로 관리하고 계시다면 주소를 알려주실 수 있을까요??
제가 분석해보고 문제가 무엇인지 파악해보겠습니다!
감사합니다~ :) ㅎㅎㅎ
French
2021.08.21
https://github.com/psh9408p/UI_COMPONENT
입니다.
.cont-movie .list-movieInfo li img {
width: 180px;
height: 250px;
overflow: hidden;
border: 1px solid #bdbdbd;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
// 일단 이렇게 img 사이즈를 잡아서 사용했습니다.
.cont-movie .list-movieInfo li .link-teaser::before {
display: inline-block;
content: "";
width: 16px;
height: 16px;
background: url("../images/아이콘_재생.png");
background-size: cover;
vertical-align: top;
margin: 11px 2px 0 0;
}
// 이부분도 왜인진 모르겠지만 강의와는 다르게 이미지 사이즈때문에 안나오는건지 size:cover를 해주니까 보여지더라구요
아 그리고 혹시 강의를 보면서 학습하면서 코드들 깃헙에 올리는데 올리면 안되는 것들이 있을까요??
답변 2