- 질문 게시판입니다.
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줄 이내로도 가능할거 같은데...
프론트-엔드 프로그래밍이 이렇게 어렵습니다. 여러분
목록
번호 제목 이름 날짜 조회 추천
공지 질문 게시판 이용 규정 11 토비 15/06/19 25557 4
16943 기타광주광역시 맥주집 추천 부탁드립니다 호미밭의파스꾼 25/08/16 9 0
16942 여행부산 맛집 추천부탁드립니다 2 연구개발 25/08/15 177 0
16941 의료/건강뇌가 짱 쉬는 법 21 + 골든햄스 25/08/15 568 0
16940 여행제주 중문 근처 아기랑 가기 좋은 음식점 3 Xeri 25/08/15 204 0
16938 여행경남 남해 관광지 추천 부탁드립니다. 15 OshiN 25/08/13 418 0
16937 IT/컴퓨터Office 2021에서 자동저장 켤 수 있나요? 6 루루얍 25/08/13 264 0
16936 의료/건강아이가 틱인지 아닌지 구분이 안갑니다. + 상담 좀 6 2025 25/08/12 552 0
16935 기타중고 냉장고 어디서 구매 하면 좋을까요!? 4 닉넴멀루하지 25/08/11 334 0
16934 IT/컴퓨터모니터 HDMI 케이블을 연결했을 때 노트북 상판에 전기가 흐르는 현상? 1 달씨 25/08/11 250 0
16933 댓글잠금 의료/건강마트롤환은 어떤 약인가요 1 [익명] 25/08/11 411 0
16932 체육/스포츠10월 9일까지 10.9km 뛰는 몸 만들기 어느 정도 난이도일까요 28 kaestro 25/08/10 615 0
16931 기타회사에 대한 개인의 의견제시. 할까요 말까요? 11 연구개발 25/08/10 611 1
16930 IT/컴퓨터폴드7용 차량 거치대 어떤 것이 좋을까요? 6 다군 25/08/10 269 0
16929 가정/육아자취를 시작하려는 아는 동생에게 선물 36 kaestro 25/08/09 741 0
16928 기타자소서 표절률이 1 물리물리 25/08/09 470 0
16927 체육/스포츠스마트워치 추천해 주실 수 있을까요? 12 두부곰 25/08/08 513 0
16926 기타세탁기 구매 질문입니다 2 맥주만땅 25/08/07 287 0
16925 기타공주 9/27 1박 숙소 질문드립니다. 8 Omnic 25/08/07 310 0
16924 IT/컴퓨터랩탑 파우치 추천 3 pils 25/08/07 282 0
16923 의료/건강서울 수면클리닉 관련 질문 2 거소 25/08/07 273 0
16922 IT/컴퓨터초등학생 타블렛 따로 써야 할까요 5 Picard 25/08/06 422 0
16921 여행홍콩 환전 필수인가요? 11 Cascade 25/08/05 585 0
16920 IT/컴퓨터갤럭시 폴드 글자크기 질문 있습니다 2 햄볶는돼지 25/08/05 250 0
16919 진로카드 결제 내역 문자가 일부만 보입니다 7 린디합도그 25/08/05 383 0
목록

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

댓글