제작환경) 광고 중이라서
- 이미지 태그 삭제 불가! (이미지 클릭한 걸 자바스크립트가 정보 수집...?)
- 반응형으로 제작하는데, 목록배열 규칙패턴 있음 (5, 3, 5, 3)
+) 3번째 상품은 화면 100%로 노출되어야 함
예를들면
사용성에 관하여) 왜 이렇게 하는지?
- 조건/사용환경 : 반응형+쇼핑몰 +광고가 들어간다 (=해시태그 있음!)
- 그러므로 과도한 자바스크립트는 망한다! CSS로 많은 것 처리해야 함
제이쿼리 NO! 자바스크립트로! - 이미지 절대 삭제 X (하지만 보이지 않게 )
└> 쇼핑몰은 이미지 배경 처리 안함, 거진 적응형이라서.
└> 근데 그러면 모바일에서는 못생겨짐! 그래서 모바일/PC 나눔 (少)
└> 모바일에서 썸네일이 정비례가 돼야 예쁨
쇼핑몰은 거진 적응형. 근데 쇼핑몰을 반응형으로 만드는 이유? 개발자 포폴용
모바일에서 <더보기> 존재 이유 : 로딩 시간 벌려고 (빨리 나갈 애들 빨리 응대나가!)
1. 반응형 & 사용성 적용된 목록 list 만들기
1-1. li/a 없는 ul 생성 & 자바스크립트로 영역 잡기
부트스트랩 붙이고 시작
1-2. li목록 초기값 20개 지정
1-3. for문으로 화면노출
배열/객체, 아무것도 없을 땐 for문으로! ( for-in 안됨 )
for 하는 수만큼 '< li >< /li >' 를 proArr에 삽입해 → 화면노출
1-4. 큰 화면에서 4개 & 중간 화면에 2개 & 모바일에서 1개
- ul class="row"
- 큰화면에서 4개 (col-md-3)
- 중간화면에 2개 (col-sm-6)
- 모바일에서 1개 (안 씀)
1-5. 모바일에서 썸네일이 정비례가 돼야 예쁨
- 항상 정비례 유지! (=이미지를 배경으로 돌린다?)
- 광고하니까! (~한 이유로?) 백틱 안에 img 박아놈!
이미지 목록이 이렇게 뜬다
1-6. 이미지 안 보이게 처리
- d-none 보다는, 투명하게! (검색에 걸려들도록!)
그래야 (이미지 클릭한 걸 자바스크립트가 정보 수집...?)
- 다시 목록만 보임.
그러나 이미지는 사라진 것이 아니고, 투명해진 것 뿐!
1-7. HTML에 더보기 버튼 삽입
1-8. 더보기 버튼 클릭 시, 발생하는 이벤트 지정
위치 고정! 절대 옮기면 안됨!
proArr 이 화면에 뿌려진 다음, 이미지를 배경처리 해야 하니까!
ex) "클릭됨" 창이 뜨도록
클릭 이벤트) 초기값 12
더보기 버튼 클릭 시, 상품이 24개 보임
더보기 버튼 클릭 시, 상품이 36개 보임
더보기 버튼 클릭 시, 상품이 48개 보임
.
.
.
1-9. liArr.forEach( )
'#pro_list li' 를 영역으로 가지는 liArr 배열 선언
그 liArr 배열 안의 목록을 forEach해서 꺼내는 식 작성
1-9-1) 자식한테 접근하는 방법 3가지
- el.children
- el.childNodes
- el.children[0]
뭐가 무슨 값인지 화면에 콘솔로그 해보기
1-9-2) src 값을 가져와 변수에 저장
1-9-3) 이미지를 배경처리!
2. 오후실습
Q1) li 안에 a 삽입하고 CSS도 에러없이 잘 구동되게 처리
<style>
*{ padding:0; margin: 0;}
li{ list-style: none;}
#pro_list li{
background-color: #ccc;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border:1px solid #000;
}
#pro_list li:after{ content: ""; display: block; height: 0; padding-bottom: 100%; }
#pro_list li img{ opacity: 0; width: 0; height: 0;}
</style>
<body>
<div class="list" id="pro_list">
<ul class="row">
</ul>
<button class="bg-dark text-white p-2 ">더보기</button>
</div>
<script>
var proArr = '';
var liCount = 12; // 처음 노출개수
var litotal = 30; // 상품전체개수
for(var i = 0; i < liCount; i++ ){
proArr +=`<li class='col-md-3 col-sm-6'>
<img src="img${i}.jpg">
</li>`;
}
document.querySelector("#pro_list > ul").innerHTML = proArr;
document.querySelector('#pro_list button').addEventListener('click', function(){
document.querySelector("#pro_list > ul").innerHTML += proArr;
})
////////////////////////////위치절대 옮기면 안돼
var liArr = document.querySelectorAll("#pro_list li");
liArr.forEach(function(el, index){
//console.log(el.children, el.childNodes, el.children[0])
var bgData = el.children[0].getAttribute('src');
console.log(bgData)
el.style.backgroundImage = 'url('+bgData+')';
})
</script>
</body>방법 1 "#pro_list a"
방법 2 el.children[0].children[0]
CSS 수정
Q2) 더보기 할때는 6개씩 노출하다가
- 5번째, 8번째, 13번째, 16번째... 전체개수를 다 노출하면 버튼 없애기
- 모바일 사이즈에서 상품리스트 100%로 노출되기
<script>
// 선생님 식 ------------------------------------------
freelayout53();
function freelayout53(){
var pro_list_freelayoutli = document.querySelectorAll('#pro_list li');
var countno = 4; // 초기값 (5가 아니라) 4
var transnum = true;
var litargetNum = []; // 0, 4, 7, 12, 15, 20
pro_list_freelayoutli.forEach( function( el, index){
if( index == countno ){ // index = 4이면
litargetNum.push(countno) // 빈배열 litargetNum 뒤에 밀어넣기
if( transnum ){ // 만약 transnum 참이면!!!!!!!!!
countno += 3; // 초가값 countno 4에 += 3 (3씩 더하라) // 7 15(12+3) ...
transnum = false; // transnum은 false로 전환
}else{ // 만약 transnum 거짓이면????????
countno +=5; // 초가값 countno 4에 +=5 (5씩 더하라) // 12 20(15+5) ...
transnum = true; // false였던 transnum은 다시 true로 전환
}
}
})
console.log(litargetNum) // 이제 배열들이 추가추가된 litargetNum을 콘솔로그 해보자 // 0, 4, 7, 12, 15, 20
litargetNum.forEach( function(value, index){ // litargetNum 배열 값을 하나하나 pro_list_freelayoutli에 삽입하라
pro_list_freelayoutli[value].classList.remove('col-6') // 더보기 할때는 6개씩 노출하다가?
pro_list_freelayoutli[value].classList.add('col-12') // 5번째, 8번째, 13번째, 16번째... 전체개수를 다 노출하면 버튼 없애기?
})
}
</script>Q3) for문으로 구구단 만들기 (1 - 1/2/3 응용)
- 입력된 값이 없으면 숫자 넣으라고 경고창 띄우기
- input 넣은 숫자를 단으로 ul에 뿌리기
<body>
<input type="text"name="gugu"><button class="btn">click</button>
<ul id="gugudan">
<!-- input 넣은 숫자를 단으로 ul에 뿌리기 -->
</ul>
<script>
$(".btn").click(function(){
if( $('[name="gugu"]').val() != '' ){
$('#gugudan').html($('[name="gugu"]').val())
}
})
</script>
</body>
<body>
<input type="text"name="gugu"><button class="btn">click</button>
<ul id="gugudan">
<!-- input 넣은 숫자를 단으로 ul에 뿌리기 -->
</ul>
<script>
$(".btn").click(function(){
if( $('[name="gugu"]').val() != '' ){
var guguNum = $('[name="gugu"]').val() // 사용자가 입력한 숫자 ex) 3
var guguArr = '';
var liCount = 10; // li 개수 초기값
for( let i=1; i<10; i++ ){
guguArr += `<li>${guguNum} x ${i} = ${guguNum*i}</li>`
}
$('#gugudan').html(guguArr)
}else{
alert('숫자를 입력하세요');
}
})
</script>
</body>