오전 - 객체 설명 수업 (설명위해 한글로 변수명 설정)
객체 만드는법
let obj=new Object(); //객체를 만드는법 1
let obj={}; //객체를 만드는법 2
console.log(obj);
console.log(obj2);<body>
<자동차>
<핸들></핸들>
<바퀴></바퀴>
<차키></차키>
</자동차>
<script type="text/javascript">
let obj=new Object(); //객체를 만드는법 1
let obj2={}; //객체를 만드는법 2
console.log(obj);
console.log(obj2);
let 자동차 ={};
자동차.핸들 ='동그라미';
자동차.바퀴 ='4개';
자동차.차키 ='스마트키';
자동차.내부 = {};
자동차.내부.네비게이션 = 'v1.01.23';
자동차.내부.에어컨작동키 = 'on';
자동차.내부.짐 ={};
자동차.내부.짐.가방 = '있다';
console.log(자동차);
</script>
</body>이 안에 뭐가있고 ~~~~~~ 객체지향 성격.
. 요 쩜을 js는 많이 씀
객췌....
JS 객체 사용방법만 알면 어렵지않을것..
<body>
<div id="root">Hello</div>
<자동차>
<핸들></핸들>
<바퀴></바퀴>
<차키></차키>
</자동차>
<script type="text/javascript">
let obj=new Object(); //객체를 만드는법 1
let obj2={}; //객체를 만드는법 2
console.log(obj);
console.log(obj2);
let 자동차 ={};
자동차.핸들 ='동그라미';
자동차.바퀴 ='4개';
자동차.차키 ='스마트키';
자동차.내부 = {};
자동차.내부.네비게이션 = 'v1.01.23';
자동차.내부.에어컨작동키 = 'on';
자동차.내부.짐 ={};
자동차.내부.짐.가방 = '있다';
console.log(자동차);
document.querySelector('#root'); //document라는 객체 안에 querySelector가 있ㅇ므
document.innerHTML // innerHTML은 document랑 관계없음ㅇ경로가 틀림
// = 자동차.네비게이션 과같이 쓴것처럼 내용이 안보이게됨
document.querySelector('#root').innerHTML //요렇게 쓰거나 변수에 담거나
a= document.querySelector('#root');
a.innerHTML=""; //요렇게
let root=document.querySelector('#root'); //인자값 root를 넣어서 해당값 을 가져옴
console.log(root.innerHTML); // 그 안에 있는 html 가져오겠다.
root.innerHTML = "hi";
root.appendChild(); // document.appendChild 이렇게 사용 못함. 경로 잘 찾긔~
//appendChild() 요 안에는 string 이 들어갈 수 없음.
console.log(자동차.내부.네비게이션); // console.log(root.innerHTML);얘랑 비슷 ~
자동차.내부.네비게이션='v1.01.26'; //변경하기
console.log(자동차);
</script>
</body><body>
<div id ="root">메롱</div>
<script type="text/javascript">
let obj = new Object();
let obj2 = {};
let 자동차 = {};
자동차.핸들 = '동그라미';
자동차.바퀴 = '4개';
자동차.차키 = '스마트키';
자동차.내부 ={};
자동차.내부.네비게이션 = 'v1.01.23';
자동차.내부.에어컨작동키 = 'on';
자동차.내부.짐 = {};
자동차.내부.짐.가방 = '있다';
console.log(자동차);
console.log(자동차.내부);
console.log(자동차.내부.짐);
let root=document.querySelector('#root');
let li = document.createElement('li');
li.innerHTML=자동차.차키;
root.appendChild(li);
root.innerHTML="dd";
</script>
</body>복습
========================어제 공부하다 몰랐던 거 질문 ================
<script>
var index=10;
function hello(){
index=0; //var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용
console.log(index);
}
index++;
hello();
console.log(index);
hello();
</script>//var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용
var 선언은 메모리 잡아먹음
var를 안선언하면 이미 선언되었던 그 메모리를 사용하는 것
몇이 나올지 생각해보기 !
1.
<script>
var index=10;
function hello(){
index=0; //var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용
console.log(index);
}
console.log(index);
index++;
console.log(index);
hello();
console.log(index);
hello();
</script>2.
<script>
index=10;
function hello(){
index=0; //var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용
console.log(index);
}
console.log(index);
index++;
console.log(index);
hello();
console.log(index);
hello();
</script>3.
<script>
index=10;
function hello(){
var index=0; //var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용
console.log(index);
}
console.log(index);
index++;
console.log(index);
hello();
console.log(index);
hello();
</script>4.
<script>
var index=10;
function hello(){
var index=0; //var index였다면 메모리에 인덱스 사용할게~ .. var가없으면 이전에 선언했던 var의 메모리를 사용
console.log(index);
}
console.log(index);
index++;
console.log(index);
hello();
console.log(index);
hello();
</script>
사이트 소개 ->
DBCUT 잘 만들어진 사이트를 올려준~
다 쳌해보고 사용빈도 높은 기술을 그 기술들이 많이 들어간 걸 만드는게 좋음
흔히 많이 사용하는 모션들을 미리 배우는게 가성비 좋음 + 예제 소스도 많고..
편안하게 볼 수 있는 사이트.
===================2교시 =====다른 사이트 파보기 겅부 ==================
5GX Cloud Marketplace
www.sktcloudmarketplace.com
f12 켜서
Head 잘 보기..
css, script 파일 어ㅐ캐햇뉸지ㅣ
css 파일 나눠서 여러개 첨부 . js도 따로 만들어 첨부하는게 나에게, 남에게 편함.
bootstrap? - css파일을 미리 만들어놓은 css임.
class명만 주면 버튼etc. 이 나옴.
스크롤에 의한 이미지 슉슉 나오는거 **
1. 레이아웃 먼저 짜기
2. 안에있는 html code 따라하지 않기
3. css 파일 어떤 규칙으로 하는지 보기
4. 이미지 , 영상이 너무 큰 사이트는 피하쟝 ( 넘 쉬우니걘)
===================3교시 하고싶은 웹사이트 찾아서 구현할 거 연습 ======================
chrome://flags/#enable-force-dark
크롬 배경색 다크에서 기본으로 바꾸기
===========================fiveeㄱ오전 - 객체 설명 수업 (설명위해 한글로 변수명 설정)
사이트 소개 ->
DBCUT 잘 만들어진 사이트를 올려준~
다 쳌해보고 사용빈도 높은 기술을 그 기술들이 많이 들어간 걸 만드는게 좋음
흔히 많이 사용하는 모션들을 미리 배우는게 가성비 좋음 + 예제 소스도 많고..
편안하게 볼 수 있는 사이트.
===================2교시 =====다른 사이트 파보기 겅부 ==================
www.sktcloudmarketplace.com/
5GX Cloud Marketplace
www.sktcloudmarketplace.com
f12 켜서
Head 잘 보기..
css, script 파일 어ㅐ캐햇뉸지ㅣ
css 파일 나눠서 여러개 첨부 . js도 따로 만들어 첨부하는게 나에게, 남에게 편함.
bootstrap? - css파일을 미리 만들어놓은 css임.
class명만 주면 버튼etc. 이 나옴.
스크롤에 의한 이미지 슉슉 나오는거 **
1. 레이아웃 먼저 짜기
2. 안에있는 html code 따라하지 않기
3. css 파일 어떤 규칙으로 하는지 보기
4. 이미지 , 영상이 너무 큰 사이트는 피하쟝 ( 넘 쉬우니걘)
===================3교시 하고싶은 웹사이트 찾아서 구현할 거 연습 ======================
chrome://flags/#enable-force-dark
크롬 배경색 다크에서 기본으로 바꾸기
===========================fiverr 로 선택쓰 ~ ==========================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel ="stylesheet" href="./fiverr.css">
</head>
<body>
<div id="wrap"> <!--100%-->
<div id="container"> <!--100%-->
<div id="container2"> <!--100%-->
<span>
<h2>Popular professional services</h2>
</span>
<div class="slider-package"> <!--100%-->
<div class="btn">
<button class="lbtn" onclick="left();"><</button>
<button class="rbtn" onclick="right();">></button>
</div>
<div class="slick-list-bg">
<div class="slick-list"> <!--100%-->
<ul class = "list1"> <!--ul1[0]-->
<li><img src="./images/1-1.jpg"></li>
<li><img src="./images/1-2.jpg"></li>
<li><img src="./images/1-3.jpg"></li>
<li><img src="./images/1-4.jpg"></li>
<li><img src="./images/1-5.jpg"></li>
</ul>
<ul class="list2 "> <!--ul1[1]-->
<li><img src="./images/2-1.jpg"></li>
<li><img src="./images/2-2.jpg"></li>
<li><img src="./images/2-3.jpg"></li>
<li><img src="./images/2-4.jpg"></li>
<li><img src="./images/2-5.jpg"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
slick1=document.querySelector('.slick-list>ul.list1');
slick2=document.querySelector('.slick-list>ul.list2');
ul1=document.querySelectorAll('.slick-list>ul');
var index=0;
function left(){
var i= 0;
if(index==i){
slick1.setAttribute('class', 'list1 going2');
slick2.setAttribute('class', 'list2 coming2');
} else if(index!=i){
slick1.setAttribute('class', 'list1 coming2');
slick2.setAttribute('class', 'list2 going2');
}
index++;
if(index>=ul1.length){ index=0;}
}
function right(){
var i=0;
if(index==i){
slick1.setAttribute('class','list1 going');
slick2.setAttribute('class','list2 coming');
} else if(index!=i){
slick1.setAttribute('class','list1 coming');
slick2.setAttribute('class','list2 going');
}
index++;
if(index>=ul1.length){ index=0;}
}
</script>
</body>
</html>내가 생각해서 만든 함수 코드
구구단 이후로 두번쨰... 마지막 index++; , if 넣는 위치 교수님 지도로 제대로 넣고 돌리니 클릭할떄마다 돌아가는거 구현됨
신기한데 넘 어렵당 ..
첨에 for 구문 (i=0; i<ul1.length; i++){~ if 이렇게 하면 맨 처음에 if1,2가 동실에 실행되서 for 삭제 var i=-0; 을 넣음
/* CSS Style Sheet*/
*{margin:0;padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
img{display:block;line-height:0;}
#wrap{
width:100%;
height:100%;
background-color: darkcyan;
float:left;
}
#container{
width:100%;
height:2000px;
background:darkkhaki;
margin: 0 auto;
}
#container2{
width:100%;
height:407px;
background-color:darkgreen;
margin-top:100px;
}
#container2>span{
width:1400px;
height:62px;
margin: 0 auto;
background:chartreuse;
}
#container2>span>h2{
color:white;
font-size: 24px;
display: inline-block;
}
.slider-package{
width:100%;
height:345px;
position:absolute;
z-index:0;
}
.slick-list{
width:1400px;
height:345px;
background:darkmagenta;
position: relative;
overflow: hidden;
margin:0 auto;
}
.slick-list>ul>li{
display: inline-block;
padding:0 10px;
}
.slick-list>ul{
display: inline-block;
position:absolute;
width:1400px;
}
.list2{
left:1400px;
}
.slick-list>ul>li>img{
width:252px;
height:345px;
}
.btn{
width: 1393px;
height:40px;
position:absolute;
z-index:5;
left:49%;
transform: translateX(-49%);
top:150px;
}
.slider-package>.btn>.lbtn{
width:30px;
height:30px;
background:white;
color:black;
font-weight:bold;
border:1px solid white;
border-radius: 20px;
cursor:pointer;
float:left;
}
.slider-package>.btn>.rbtn{
width:30px;
height:30px;
background:white;
color:black;
font-weight:bold;
border:1px solid white;
border-radius: 20px;
cursor:pointer;
float:right;
}
.slick-list>.coming{
animation:slider1 1s;
animation-fill-mode: forwards;
}
@keyframes slider1{
from{left:1400px}to{left:0px}
}
.slick-list>.going{
animation:slider2 1s;
animation-fill-mode: forwards;
}
@keyframes slider2{
from{left:0px}to{left:-1400px}
}
/*/////////////////////////////*/
.slick-list>.coming2{
animation:slider3 1s;
animation-fill-mode: forwards;
}
@keyframes slider3{
from{left:-1400px}to{left:0px}
}
.slick-list>.going2{
animation:slider4 1s;
animation-fill-mode: forwards;
}
@keyframes slider4{
from{left:0px}to{left:1400px}
}
완성 ㅠ ㅠ
집가서 -> 오늘한거 복습
fiverr 레이아웃 짜고 background 주기
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [15일차] fiverr 웹사이트, 반응형, 스크롤 (0) | 2021.04.02 |
|---|---|
| [14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼 (0) | 2021.04.01 |
| [13일차 복습] JavaScript 함수, 객체 , 배열 연습 (1) | 2021.04.01 |
| [13일차]20210331 var, let, const ,객체 공부 정사각형, 피라미드 별 만들기 (0) | 2021.03.31 |
| [12일차 복습] JavaScript 기초 문법 연습 (0) | 2021.03.30 |
