2023.4.20.
1교시
●메뉴를 누르면 한번에 나오는 것
▶ 보이고자 하는 카테고리(div)에 div 하나 추가해서 class ="subBox"를 만들어줌
1. display: flex; flex-wrap: wrap; // 오버된 부분(subBox) 밑으로 내리기
nav {
width: 100%;
}
nav div {
width: 10%; //7개 70%
}
nav div:first-child {
width: 30%; //1개 30%
}
nav .subBox {
width: 100%; //1개 100%
}
->nav의 길이를 계산하면 총 200%로 화면의 100%를 넘어가므로
display: flex; flex-wrap: wrap; 하여 subBox 밑으로 내리기
2. overflow: hidden; // 오버된 부분(subBox) 숨기기
nav {
width: 100%; height: 50px; //길이100% 높이 50px
}
#nav .subBox {
width: 100%; height: 250px; //길이100% 높이 250px
}
3. nav:hover { // 마우스 올리면 높이가 길어짐 50->300
height: 300px;
}
->nav의 높이는 50px인데 flex-wrap 효과로 overflow 되어서 300px만큼 보이므로
nav에 overflow: hidden; 을 적용하고 nav:hover 를 하면 높이가 300px 이 되게 설정
* align-items: center; 세로 가운데 정렬
2교시
● Object를 활용하여 forEach로 카테고리(nav)와 세부카테고리(subBox)에 내용(문자) 넣기
▶const macA에서 A는 강사님만의 식별표시로 개인에 취향에 따라 변경 가능하다.
강사님은 A를 데이터가 모여있는 곳이기 때문에 array의 의미로 사용한다고 하셨다
▶변수를 설정하여 html의 값을 읽어오고 forEach를 통해 Object에 작성한 데이터를 html에 넣는다.
(자세한 설명은 프론트엔드-7에 ...)
-(참고)for문으로도 넣기 가능 - 강사님 ver.
● 사진 넘겨보기
1. at0 css 작성
* nav(fixed)와 article(부모relative, 자식absolute)에 포지션을 설정해주어야 화면이 겹치지 않음
- position: fixed; top: 0; left: 0; // nav 고정하기
- z-index: 99; // nav 먼저보기
▶사진
* 5개 넣을거니까
-width: 500%; // 100*5
*정렬
-display: flex;
-justify-content: space-between;
> 화면 길이가 500%가 되어 하단에 스크롤바가 생성된다
* 하단의 스크롤바 고정
body {
overflow-x: hidden; // x축 숨기기
}
▶숫자(버튼)
-포지션을 이용해 원하는 위치에 디자인
2. at0 javascript 작성
3교시
*function = 함수 = 실행문 모임
*setInterval() 일정시간동안 반복
▷이론연습(javascript) -윈도우 온로드 밖의 영역
1. 변수 선언
let timer=setInterval("show()", 1000); // 일정 시간 간격으로 일처리를 반복 동작함 1000=1초)
let count=0;
2. 함수 적용
function show() {
count++;
if(count%10 == 0) //10번째에서 "쉬었다" 출력
console.log("쉬었다")
else
console.log("go");
}
*1초마다 console.log() 출력
-> 그림 지나가는데 활용
● 사진 자동으로 넘겨보기
-JQurey에서 animate 사용할때 position 필요
let timer=setInterval("show()", 5000); //변수선언, 5초마다 show 실행문을 적용
$(".img5Box").animate({"left":"-=100%"}, 1000); , function(){ // 함수 실행문, 1초 후에 img5Box클래스를 왼쪽으로-100%를 움직인다
$(".img5Box li:first").appendTo(".img5Box"); // 1번 뒤로 보내기->빈 공간이 되어 2번이 1번 자리로 이동함
$(".img5Box").css("left", "+=100%"); // 2번 제자리 보내기
}
*appendTo : 뒤로 붙여라
->사진은 5개인데 계속 지나가서 그림이 안나옴
▶조건문을 활용하여 5번까지만 순환하게 만들기
초기값 count=0 이므로 0부터 시작하니까
if문에서 count<4 를 적용하면 count = 0, 1, 2, 3 까지 적용되고
4를 넘어가면 count=0 으로 적용된다.
0, 1, 2, 3 , 4 count 값
1, 2, 3, 4, 0 조건문이 적용된 값(첫 번째를 뒤로 붙였음)
4교시
● 사진에 숫자(버튼) 적용하기
* window.onload=function() {
메모리로 프로그램을 읽어들이면서 바로 실행
}
* $(function() { //제이쿼리 작업 영역
onload 작업이 끝나면 바로 실행
}
->window.onload=function()에 작성해도 상관 없으나 너무 복잡해지기에 분리
5교시
●상세 카테고리 누르면 나오는 화면 설정
1. 상세카테고리에 있는 만큼 아티클 작성하기 (18개) -> at2~at20까지 모두 디자인 해줘야 함
2. 아티클 0(광고), 1(제품정보)가 홈 화면에 보여야하는 화면이므로 ,겹치지 않게 포지션을 설정해주고
모든 아티클에 class "at" 를 주고 class at0, at1만 보이게 설정하고
.at {
display: none; //모든 아티클 안보이게
}
.at0, .at1 {
display: block; // class at0, at1 보이게(홈화면 내용)
}
3. 제이쿼리 영역에 상세카테고리 클릭 시 함수 실행문 작성
$(".subBox li").on("click", function(){
no=$(this).attr("class").substr(4,2); // 5번째부터 숫자2개 가져옴
$(".at").hide(); // at클래스 숨기기(모든 아티클 숨기기)
$(".at" +no ).show(); // at+클릭한 것\의 2자리 숫자를 가진 아티클 보이기
});
*substr : 문자열 가져오기 (0부터 시작)
m e n u 1 ->1이라는 숫자를 읽고 싶다면
0 1 2 3 4 - 컴퓨터는 첫 번째의 것을 0이라고 읽는다
substr( 4 , 1 ) : 5번째 부터 1개 가져오기(1을 읽음)
m e n u 1 2 ->12이라는 숫자를 읽고 싶다면
0 1 2 3 4 5
substr( 4 , 2 ) : 5번째 부터 2개 가져오기(12를 읽음)
6교시
● 상세 카테고리 누르면 나오는 화면 작성
/* 작업화면 고정 */ - 상단에 at0, at1을 블록처리 해줬기 때문에 제일 하단에 작업하고자 하는 화면을 블록 처리해줘야함
.at20 {
display: block;
}
★★ 주의 하단에 블록이 되어있으면 작업화면에 display: fiex 가 안됨
● menu(목차)클릭하면 다른 내용 나오는 기능
$(".at20_menu li").on("click", function(){ // 제이쿼리 온클릭 함수 실행
$(".at20_menu li").css("background", "white") // li의 배경은 흰색이다 - 설정하지 않으면 다른 li의 색이 누적됨
$(this).css("background", "#FFBC0D") // 클릭한 li의 배경은 노란색(#FFBC0D)이다
no=$(this).index(); // 색인번호 no에 대입
$(".at20_menuBox").hide(); // at20_menuBox를 숨긴다
$(".at20_menuBox" + no).show(); // at20_menuBox+클릭한 번호를 보여준다
})
7교시
● 광고사진 하단의 숫자를 누르면 해당 광고로 넘어가는 기능 (아티클 19)
* 하단의 스크롤바 고정 기능 주석
body {
/* overflow-x: hidden; */ 작업동안 주석처리
}
* html,css 디자인
-전체화면 길이를 1000px 설정해주고 사진이 들어갈 길이를 5000px (=1000*5)를 주어 화면에 오버되게 만든다.
-display: flex; 하여 가로배열로 바꾼다
*아티클에 사진 5개를 넣음(자바스크립트)
-forEach , background 활용하여 사진 넣기
*제이쿼리로 slide 효과
$("#at19_choose li").on("click", function(){ // 온클릭 함수(클릭하면 실행문 작동)
no=$(this).index(); // 누른 것의 번호를 no에 대입하겠다
$("#at19_choose li").css("background", "white"); // id=at19_choose li의 배경을 흰색으로 디자인
$("#at19_choose li:eq(" + no + ")").css("background", "red"); // 누른 것의 번호의 배경을 빨간색으로 디자인
pos=-1000*no; // 1000px(화면의 길이 )*누른숫자 = pos
$(".at19_box_img5").animate({"left": pos+"px"}, 500); //왼쪽으로 pos+"px"만큼 움직이는 시간 0.5초
})
(참고)
- setInterval() 일정시간동안 반복 -> 자동으로 움직임
- $(" ").on("click", function(){ }을 통해 animate() 움직임 효과 주기
8교시
* 총 금액 계산
내일 이어서
