- 질문 게시판입니다.
Date 18/02/22 13:05:12
Name   nickyoPD
Subject   자바스크립트 관련 질문입니다 ㅠㅠ
코딩 목적: 배열로 들어있는 정보를 C:forEach 를 통해 div 안에 뿌리는데 img 크기가 div보다 클 경우 자동으로 조정해주는 자바스크립트 window.onload를 처리,
클래스 네임 :  .logo => <img src 태그 클래스 네임>, .img <div 태그 클레스 네임>

<----자바스크립트 부분------->

<script>
window.onload = function() {
var divs = document.querySelectorAll('.logo > .img');
for(var i=0; i<=4; i++){
var div = divs[i];
var divAspect = div.offsetHeight / div.offsetWidth;
div.style.overflow = 'hidden';

var img = div.querySelector('.logo');
var imgAspect = img.height / img.width;

if (imgAspect <= divAspect) {
// 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 잘라낸다
var imgWidthActual = div.offsetHeight / imgAspect;
var imgWidthToBe = div.offsetHeight / divAspect;
var marginLeft = -Math
.round((imgWidthActual - imgWidthToBe) / 2)
img.style.cssText = 'width: auto; max-height: 100%; margin-left: '
+ marginLeft + 'px;'
} else {
// 이미지가 div보다 길쭉한 경우 가로를 div에 맞추고 세로를 잘라낸다
img.style.cssText = 'max-width: 100%; height: auto; margin-left: 0;';
}
}
};
</script>

<------데이터 표시 부분 -------->

<c:forEach items="${JobPost_Main }" var="JobList">
<div class="four wide column" style="border: 1px solid black; text-color: black;">
<div class="ui centered fluid card">
<div class="img">
      <a href="${conPath }/JobPostContentView.do?postNo=${JobList.postNo}">
                                     <img src="${conPath }/CompanyLogoImage/${JobList.postCompanyLogo}" class="logo" /></a>
        </div>
</div>
</div>
</c:forEach>


입니다. 자바스크립트에서 for문이랑 divs 선언을 빼고 document.queryselector 로 클래스 네임을 받아서 돌리면 첫번째 이미지까지는 해결이 되는데 배열로 정보를 받아오는거라 4번째까지 해결하려면 자바스크립트에서 받은 클래스 정보를 배열에 넣고 해야하는데 ㅠㅠ 아무리 이리저리해봐도 해결이 안됩니다.. 도와주세요..



0


이거 jQuery 쓰시는 거에요?
혹시 CodePen 같은 걸 통해서 다시 올려주실 수 있나요?
nickyoPD
쌩자바스크립트긴한데ㅜㅜ코드펜 이따 찾아보겠습니다 포 이치안에 이엘랭귀지 들어가는건 디비에서 받은거 백엔드서 세션에넣고굴리는거라 ㅜ
April_fool
정말 간단하게 쌩 자바스크립트를 사용하는 예제 코드를 보여드리겠습니다. 이 코드는 logo라는 클래스를 가진 모든 DOM 요소(여기서는 이미지들)의 기본 width값을 웹브라우저 콘솔창에 출력하고, width값을 100으로 바꾸고, 다시 바뀐 width값을 콘솔창에 출력하는 예제입니다. 이 예제를 응용하면 되겠죠?

window.onload = function() ~{
var logos = document.querySelectorAll(".logo");
logos.forEach(function(image) ~{
console.log(image.width);
image.width = 100;
console.log(image.width);
});
};
1
호라타래
컴린이들의 구원자시여... 복 받으실 겁니다.
April_fool
헤헷 감사합니다.
nickyoPD
으음 ㅠㅠ 이렇게 하면 뷰 페이지에 style로 width 100% 넣는거랑 차이가 있는건가요? 페이지가 그림크기보다 줄어들때 div는 반응형으로 줄어드는데 img가 안줄어드는 경우에 줄여줘야 하는거라서요 ㅠㅠ
그런 거면 이렇게 어렵게 할 게 아니라 img style에 [object-fit: contain;] 요 CSS 속성만 넣어주면 되지 않을까요?

https://stackoverflow.com/a/30794589/6704601
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
nickyoPD
으음 예시대로면 되어야하는데 잘 안되네요 ㅠㅠ 감사합니다 더 시도해보겠습니다
object-fit은 IE11에서도 지원하지 않아서 실무에서는 거의 사용하지 않는 속성이네요 ㅎㅎ
일단 이미지 좌우나 상하를 잘라내는 것은 반응형 철학(?)에는 맞지 않습니다.
화면 사이즈와 무관하게 컨텐츠의 100%를 볼 수 있어야 한다는게 원칙이라...

하지만 뭐 그런 의미를 담는다기 보다는 그냥 제일 적절한 느낌으로 보이게 한다라는 의미로 쓰이는 '소위 반응형'의 의미로 작업하고 계시는 것일테니...

좌우 잘라내는 처리는 <a><img></a> 의 구조보다는 <a style="background-image:url('/img.jpg');"></a> 의 구조가 ... 더 보기
일단 이미지 좌우나 상하를 잘라내는 것은 반응형 철학(?)에는 맞지 않습니다.
화면 사이즈와 무관하게 컨텐츠의 100%를 볼 수 있어야 한다는게 원칙이라...

하지만 뭐 그런 의미를 담는다기 보다는 그냥 제일 적절한 느낌으로 보이게 한다라는 의미로 쓰이는 '소위 반응형'의 의미로 작업하고 계시는 것일테니...

좌우 잘라내는 처리는 <a><img></a> 의 구조보다는 <a style="background-image:url('/img.jpg');"></a> 의 구조가 처리하기 수월하긴 합니다.
CSS의 background-size에는 cover란 속성 값이 있거든요.

img 태그를 사용해서 처리하려면... 스크립트로 번거로운 계산을 피하기 어렵죠.
일단 요게 좀 이상한데요.
var divs = document.querySelectorAll('.logo > .img');

.logo가 .img 보다 상위에 없기 때문에 실제로 저 안에 담기는 내용이 없을겁니다.
쿼리셀렉터에서 사용되는 > 는 부등호가 아니라서 어느쪽이 크냐의 방향이 아니고 자식선택자라 직계 자식만 고르게됩니다.
손자나 증손자에게는 적용이 안되고 자식만 해당이 된다는 뜻이지요.
근데 코드를 보면 .logo는 무자식이거든요.

var divs = document.querySelectorAll... 더 보기
일단 요게 좀 이상한데요.
var divs = document.querySelectorAll('.logo > .img');

.logo가 .img 보다 상위에 없기 때문에 실제로 저 안에 담기는 내용이 없을겁니다.
쿼리셀렉터에서 사용되는 > 는 부등호가 아니라서 어느쪽이 크냐의 방향이 아니고 자식선택자라 직계 자식만 고르게됩니다.
손자나 증손자에게는 적용이 안되고 자식만 해당이 된다는 뜻이지요.
근데 코드를 보면 .logo는 무자식이거든요.

var divs = document.querySelectorAll('.img'); 그냥 이렇게 되어야 할 것 같은데요.
아니면
var divs = document.querySelectorAll('.card > .img'); 요렇게...
1
nickyoPD
오오 ..그 부등호가 그게아니군요ㅜㅜㅜㅜㅜ이러니 암것도안들어오지..감사..압도적감사..
음... 그리고 작성하신 코드가 너무 기네요.
어쩌면 5줄 이내로도 가능할거 같은데...
프론트-엔드 프로그래밍이 이렇게 어렵습니다. 여러분
목록
번호 제목 이름 날짜 조회 추천
4899 IT/컴퓨터Kt 인터넷 질문입니다 1 [익명] 18/06/25 2591 0
4895 IT/컴퓨터배그 돌아가는 노트북보다는 본체+싼 노트북이 낫겠죠? 4 빠독이 18/06/25 5368 0
4858 IT/컴퓨터컴알못) 컴퓨터 이대로 둬도 될까요. 6 [익명] 18/06/20 3028 0
4852 IT/컴퓨터카톡만 되는 휴대폰 있을까요? 3 [익명] 18/06/19 18893 0
4842 IT/컴퓨터첨보는 e드라이브가 생겼는데.. 3 파란 회색 18/06/17 4472 0
4829 IT/컴퓨터불여우 쓰시는 분? 6 Raute 18/06/14 4509 0
4817 IT/컴퓨터포토샵 기능 질문! 3 [익명] 18/06/12 2583 0
4815 IT/컴퓨터옛날 한글을 모음과 같이 입력하고 싶습니다. 2 캣리스 18/06/12 4506 0
4807 IT/컴퓨터현업에 종사하고 계신 개발자분들께 질문드립니다. 19 [익명] 18/06/11 3393 0
4801 IT/컴퓨터안드로이드에서 특정 링크가 저절로 열리는 현상 김우라만 18/06/11 6003 0
4798 IT/컴퓨터카톡사진 저처럼 깨지는분 계신가요? waltzz 18/06/10 10066 0
4797 IT/컴퓨터프로그램 간단한 거 요청받아 만들어주는 곳 있을까요? 7 [익명] 18/06/10 2990 0
4783 IT/컴퓨터Zotero sync 에러가 나요 (SSL 인증 오류) 지겐 18/06/09 7110 0
4762 IT/컴퓨터엑셀 질문 19 기쁨평안 18/06/05 4327 1
4761 IT/컴퓨터[데이터분석] 특정 서비스 가입회원들의 활동이력을 분석하려고 합니다. 5 기쁨평안 18/06/05 3349 0
4758 IT/컴퓨터(해결) 엑셀알못 도와주세요 ㅠㅠㅠㅠㅠ 7 la fleur 18/06/05 4889 0
4748 IT/컴퓨터브라우저 자동 새로고침하면서 페이지 변경사항 있으면 알람 가능할까요? 4 loliloli-love 18/06/04 12855 0
4732 IT/컴퓨터워드프레스 쇼핑몰 제작 어떻게 공부하면 좋을까요? 2 루키루키 18/06/01 4734 0
4728 IT/컴퓨터공공기관 재직중인데 인터넷사이트 차단 질문입니다 6 [익명] 18/05/31 2869 0
4726 IT/컴퓨터자바 코딩 관련 질문드립니다 ㅜㅜ L'Etranger 18/05/31 4088 0
4721 IT/컴퓨터[코딩] 자바 코딩에 관해 질문 드려도 될까요?? (스윙 이미지 움직임 관련) 4 L'Etranger 18/05/30 4410 0
4685 IT/컴퓨터들고다니기 편한 노트북은 14인치와 15인치 중 어느 것이 더 편할까요...? 14 [익명] 18/05/24 11023 0
4682 IT/컴퓨터realtek 설정 관련 질문입니다. 3 구밀복검 18/05/24 8597 0
4678 IT/컴퓨터같은 1080p영화인데 화질이 차이가 날수 있을까요? 8 혼돈의카오스 18/05/23 9367 0
4667 IT/컴퓨터해외에서 인터넷 전화를 쓰고 싶습니다. 7 CONTAXS2 18/05/21 4955 0
목록

+ : 최근 2시간내에 달린 댓글
+ : 최근 4시간내에 달린 댓글

댓글