- 질문 게시판입니다.
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줄 이내로도 가능할거 같은데...
프론트-엔드 프로그래밍이 이렇게 어렵습니다. 여러분
목록
번호 제목 이름 날짜 조회 추천
28 기타감사합니다 9 15/06/02 7554 1
8 기타그럼 게시판규정은 피지알대로 가나요? 6 15/05/30 8412 1
16 기타관리 코드..? 2 15/06/01 7264 0
20 기타혹시 경제학에 밝은 분 있을까요? (2국가모형 문제) 1 15/06/01 8333 0
23 기타감사합니다 14 15/06/01 7171 1
118 기타신림동 원룸값이 유난히 싼 이유는? 9 15/06/28 16074 1
119 IT/컴퓨터스마트폰 MVNO나 알뜰요금제 질문입니다. 2 15/06/28 5853 0
140 게임- 20 15/07/05 5698 0
154 기타- 4 15/07/13 5461 0
185 진로- 2 15/07/24 5940 0
204 연애센트럴시티 음식점 11 15/07/31 6046 0
218 게임[북미WOW] 서버 질문입니다. 7 15/08/08 6892 0
371 법률혹시 교통사고 과실비율 좀 알 수 있을까요?? 2 15/10/23 5466 0
4361 의료/건강혹시 안경에 대해 잘 아시는분 계신가요? 12 Blackparade 18/03/28 4929 0
3974 의료/건강귀 입구쪽에 뾰루지? 같은게 생겼는데.. Euphoria 18/01/10 8615 0
4205 기타고등어 조기 어느게 비리신가요? 7 Euphoria 18/02/25 4322 0
6863 기타혹시 합숙형 다이어트 하는곳에대해 아시는분 계실까요? Euphoria 19/03/30 4383 0
3970 IT/컴퓨터java/jsp/html/css 웹사이트관련 질문입니다 6 nickyoPD 18/01/10 4819 0
3986 IT/컴퓨터jsp로 임베드나 iframe 가능한 게시판을 짜고 있는데요 7 nickyoPD 18/01/12 7065 0
3996 IT/컴퓨터iframe 태그 적용 질문 nickyoPD 18/01/14 5255 0
4023 IT/컴퓨터웹/java 개발자 혹은 관련 분들께 질문.. 6 nickyoPD 18/01/18 4966 0
4193 IT/컴퓨터오라클 DB 쿼리문 작성 질문입니다 10 nickyoPD 18/02/21 5258 0
4197 IT/컴퓨터자바스크립트 관련 질문입니다 ㅠㅠ 14 nickyoPD 18/02/22 5345 0
4254 의료/건강A형 간염 예방접종받았는데요 7 nickyoPD 18/03/07 4968 0
7957 기타객관적으로 보도하는 언론사는? 17 쿠쿠z 19/09/30 5150 0
목록

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

댓글