아침 : 과제 점검 + 경일홈페이지 취업자인터뷰 공부
오후 : 블록체인 특강
<!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="text.css">
</head>
<body>
<!-- Wrap 브라우저의 100% 를 쓰기 위해
-->
<div id="wrap"><!--width100%-->
<div id="header_wrap"> <!--width100%-->
<div id="header"> <!--width1200px;-->
얘가 마진 0auto 줄수잇는
</div>
<div id="snb_wrap"> <!--width100%-->
<div id="snb"> <!--width1200px;-->
<!--snb contents-->
</div>
</div>
</div>
</div>
<div id="visual_wrap"><!--width100%-->
<div id="visual"> <!--width:1920px;-->
</div>
</div>
</body>
</html>
wrap 활용
/* 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%
}
#header_wrap{
width:100%;
/*height:300px; 얘를 없애야 visual_wrap 이 absolute 이 작동*/
background:red;
}
#header{
width:1200px;
margin:0 auto;
height:100px;
background: blue;
}
#snb_wrap{
width:100%;
height:200px;
background: yellow;
position:absolute;
}
#snb{
width:1200px;
margin:0 auto;
height:200px;
background: violet;
}
#visual_wrap{
width:100%;
height:500px;
background: yellowgreen;
}
#visual{
width:1920px;
margin:0 auto;
height:500px;
background:tomato;
}
header_wrap: height를 없애면 abolute 작동함
#snb_wrap{
width:100%;
height:200px;
/*background: yellow;*/
position:absolute;
}
position: 주면 안먹히는 거 -> margin: 0 auto; 가 안먹힘
그래서 가로정렬은 left:50% transform:translateX(-50%); 함 or relative 쓰면 됨
Relative -> 띄어지지만 margin 영역 먹힘
중간에 놓쳐서 구글에 넣어드길 부탁드림@!!!
-> 꼭 집가서 분석 해보기
food.zip -> 점심 먹는 메뉴 예습용 으로 쌤이 올려두심! 확인 하기~~
<!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="text.css">
</head>
<body>
<!-- Wrap 브라우저의 100% 를 쓰기 위해
-->
<div id="wrap"><!--width100%-->
<div id="header_wrap"> <!--width100%-->
<div id="header"> <!--width1200px;-->
얘가 마진 0auto 줄수잇는
</div>
<div id="snb_wrap"> <!--width100%-->
<div id="snb"> <!--width1200px;-->
<!--snb contents-->
</div>
</div>
</div>
<div id="visual_wrap"><!--width100%-->
<div id="visual"> <!--width:1920px;-->
</div>
</div>
<div id="contents"> <!-- 1200px; margin0 auto-->
<div id="interview"> <!--600px-->
<h2>취업자인터뷰</h2>
<ul class="interview_content">
<li>
<!--img size width:238px; height:158px;-->
<img src="./경일/경일images/1543220395_43861_2.png" class="img">
<p> 글자내용1 </p>
</li>
<li>
<img src="./경일/경일images/1546844612_13784_2.png"class="img">
<p> 글자내용2 </p>
</li>
<li>
<img src="./경일/경일images/1560756325_67127_2.png"class="img">
<p> 글자내용3 </p>
</li>
<li>
<img src="./경일/경일images/1588839379_51962_2.png"class="img">
<p> 글자내용4 </p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
/* 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%
}
#header_wrap{
width:100%;
/*height:300px; 얘를 없애야 visual_wrap 이 absolute 이 작동*/
background:red;
}
#header{
width:1200px;
margin:0 auto;
height:100px;
background: blue;
}
#snb_wrap{
width:100%;
height:200px;
background: yellow;
position:absolute;
z-index:3;
}
#snb{
width:1200px;
margin:0 auto;
height:200px;
background: tomato;
}
#visual_wrap{
width:100%;
/* height:500px; */
background:green;
}
#visual{
width:1920px;
margin:0 auto;
height:500px;
background:silver;
position:relative;
z-index:1;
}
#contents{
width:1200px;
margin:0 auto;
height:600px;
background:black;
}
.interview_content{
width:300px;
position:relative;
}
.interview_content>li{
position:absolute;
top:0;
}
.img{
width:238px;
height:158px;
}
-:> li 의 넓이를 쳌
<li> <!--그림 하나당 넓이가 238px이당..-->
<!--img size width:238px; height:158px;-->
<img src="./경일/경일images/1543220395_43861_2.png" class="img">
<p> 글자내용1 </p>
</li>첫번재: left:0;
두번째: left: 238px;
세번째: left: 476px;
네번째: left: 714px;
이렇게 계산을 할 수 있음.
class 를 각각 주는 방법도 있지만
.interview_content>li:nth-child()
interview_content li여러개 중에 안에 숫자값을 넣으면 첫번째, 두번째 를 선택하겠다.
css 만으로도 li 순서대로 적을 수 있음.
이제 첫번재 영역만 보이게 만들기
-> overflow:hidden 을 쓰기 !
li 을 감싸고 있는 ul 부분에 주기
.interview_content{
width:300px;
position:relative;
height: 500px;
overflow:hidden;
}
-> 넓이 똑같이 줄여주기 238px;로 !
li 각각 하나씩 주기 값이 다르기 떄문.
.interview_content>li{
position:absolute;
left:0;
display:none;
}
none 주기
.interview_content>li.on{
display:block;
animation:slider1 1s;
}
.interview_content>li.out{
display:block;
animation:slider2 1s;
}
@keyframes slider1{
from{left:238px}to{left:0px;}
}
@keyframes slider2{
from{left:0px}to{left:-238px;}
}
slider2 현재 보이고 있는것
slider1 오른ㅉ꼬에 있는걸 왼쪼긍로 보내는
slider 1,2 함께 컨트롤
<li class="out"> <!--그림 하나당 넓이가 238px이당..-->
<!--img size width:238px; height:158px;-->
<img src="./경일/경일images/1543220395_43861_2.png" class="img">
<p> 글자내용1 </p>
</li>
<li class="on">
<img src="./경일/경일images/1546844612_13784_2.png"class="img">
<p> 글자내용2 </p>
</li>
<li class="out">
<img src="./경일/경일images/1560756325_67127_2.png"class="img">
<p> 글자내용3 </p>
</li>
<li class="out">
<img src="./경일/경일images/1588839379_51962_2.png"class="img">
<p> 글자내용4 </p>
</li>요롷코롬
처음 5초동안 멈추기 해야함.
setInterval 을 먼저 쓰고
index 를 설정
내가 생각해본 함수 -> 쌤것과 비교해서 왜 안되는지 생각해보기
var index=0;
var rolling;
function slider(){
content=document.querySelectorAll('.interview_content');
if (index>=content.length){
index=0;
}
for(i=0; i<content.length; i++){
if (i==index){
content.item(i).setAttribute('class', 'out');
content.item(i+1).setAttribute('class', 'in');
}
}
index++;
}
setInterval(slider, 2000);
교수님 방법
<script>
var index=0;
function slider(){
index++;
}
setInterval(slider, 2000);
</script>setInterval + index + 설정
function 안, index++ 위에만 index 4개까지만 나오는 if 설정 할 수 있는 위치
index=4 index는 4가 되어라~
index==4 비교연산자 이건 두개 같은거~
if 문 안에는 == 무조건 두개 이상 써라 ~
<script>
var index=0;
function slider(){
if(index==4){ //if('code') 비교연산자(항상 boolean date type [true,false] 들어감)
index=0;
}
index++;
}
setInterval(slider, 2000);
</script>//if('code') 비교연산자(항상 boolean date type [true,false] 들어감)
console.log(index); 넣어서 index 0,1,2,3으로 나오는지 확인
4 hard coding 보다 더 스마트하게 만들기 ->
<script>
var index=0;
function slider(){
li=document.querySelectorAll('.interview_content>li');
console.log(li);
if(index==li.length){ //if('code') 비교연산자(항상 boolean date type [true,false] 들어감)
index=0;
}
console.log(index);
index++;
}
setInterval(slider, 2000);
</script>
JS
1. setInterval (함수, 시간); -> 인자값 - > 여기서 시간만큼 맨 처음에는 움직이지않음
2. 함수 설정 , 시간 설정
3. index값 증가시키는거 만ㄷ르기
var index=0; 함수 안에 li길이별로 증가하는걸로 조건문 걸어 만들기 -> 장점: li가 추가되도 js 수정할 필요x 가변적.
<script>
var index=0;
function slider(){
li=document.querySelectorAll('.interview_content>li');
if(index==li.length){ //if('code') 비교연산자(항상 boolean date type [true,false] 들어감)
index=0;
}
for(i=0; i<li.length; i++);{
if(i==index){
console.log('내가 보낼 녀석:', i);
}
if(i==index+1){
console.log('앞으로 올 녀석:', i);
}
}
index++;
}
setInterval(slider, 2000);
</script>3일 때 0을 끌고 와야함
if(i==index){
console.log(i, '번 째 class 명 out ', i);
}
if(i==index+1){
console.log(i, '번째 class 명 on', i);
}
왜 난 안뜨지..
if 문은 0부터 3까지.
마지막 console에서 쳌해보면
index+1
마지막 3일때 4가 됨.
4가 되었을 때 0으로 바꿔줘~ 라는 조건이 필요.
===================================완성 본==================================
<!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="text.css">
</head>
<body>
<!-- Wrap 브라우저의 100% 를 쓰기 위해
-->
<div id="wrap"><!--width100%-->
<div id="header_wrap"> <!--width100%-->
<div id="header"> <!--width1200px;-->
얘가 마진 0auto 줄수잇는
</div>
<div id="snb_wrap"> <!--width100%-->
<div id="snb"> <!--width1200px;-->
<!--snb contents-->
</div>
</div>
</div>
<div id="visual_wrap"><!--width100%-->
<div id="visual"> <!--width:1920px;-->
</div>
</div>
<div id="contents"> <!-- 1200px; margin0 auto-->
<div id="interview"> <!--600px-->
<h2>취업자인터뷰</h2>
<ul class="interview_content">
<li class=""> <!--그림 하나당 넓이가 238px이당..-->
<!--img size width:238px; height:158px;-->
<img src="./경일/경일images/1543220395_43861_2.png" class="img">
<p> 글자내용1 </p>
</li>
<li class="">
<img src="./경일/경일images/1546844612_13784_2.png"class="img">
<p> 글자내용2 </p>
</li>
<li class="">
<img src="./경일/경일images/1560756325_67127_2.png"class="img">
<p> 글자내용3 </p>
</li>
<li class="">
<img src="./경일/경일images/1588839379_51962_2.png"class="img">
<p> 글자내용4 </p>
</li>
</ul>
<input type="button" value=" > " onclick=>
</div>
</div>
</div>
<script>
var index=0;
function slider(){
li=document.querySelectorAll('.interview_content>li');
if(index==li.length){ //if('code') 비교연산자(항상 boolean date type [true,false] 들어감)
index=0;
}
for(i=0; i<li.length; i++){
var onNum=index+1;
if(onNum==4){
onNum=0;
}
console.log(index,onNum);
if(i==index){
li.item(i).setAttribute('class','out');
} else if(i==onNum){
li.item(i).setAttribute('class','on');
} else {
li.item(i).setAttribute('class','');
}
}
index++;
}
setInterval(slider, 2000);
</script>
</body>
</html>
/* 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%
}
#header_wrap{
width:100%;
/*height:300px; 얘를 없애야 visual_wrap 이 absolute 이 작동*/
background:red;
}
#header{
width:1200px;
margin:0 auto;
height:100px;
background: blue;
}
#snb_wrap{
width:100%;
height:200px;
background: yellow;
position:absolute;
z-index:3;
}
#snb{
width:1200px;
margin:0 auto;
height:200px;
background: tomato;
}
#visual_wrap{
width:100%;
/* height:500px; */
background:green;
}
#visual{
width:1920px;
margin:0 auto;
height:500px;
background:silver;
position:relative;
z-index:1;
}
#contents{
width:1200px;
margin:0 auto;
height:600px;
background:darkcyan;
}
.interview_content{
width:238px;
position:relative;
height: 200px;
overflow:hidden;
background:darkkhaki;
}
.interview_content>li{
position:absolute;
left:0;
display:none;
}
.img{
width:238px;
height:158px;
}
.interview_content>li.on{
display:block;
animation:slider1 1s;
animation-fill-mode:forwards;
}
.interview_content>li.out{
display:block;
animation:slider2 1s;
animation-fill-mode:forwards;
}
@keyframes slider1{
from{left:238px}to{left:0px;}
}
@keyframes slider2{
from{left:0px}to{left:-238px;}
}
if 절을 족즘 다르게 써보기
setAttribute에 오타있었음..
그리고 i만 쓰면 헷갈리고 + 컴터가 코드읽을때 헷갈리니까 i, index를 함께 쓰기
<script>
var index=0;
function slider(){
li=document.querySelectorAll('.interview_content>li');
if(index==li.length){
index=0;
}
for(i=0; i<li.length; i++){
var onNum=index+1;
if(onNum==4){
onNum=0;
}
if(i==index){
li.item(i).setAttribute('class','out');
li.item(onNum).setAttribute('class','on');
}
}
index++;
}
setInterval(slider, 2000);
</script>숙제 : 버튼만들어서 움직이기 해보기
Json 오늘 구글 파일 food 에 쓰여있음
앞으로 JS 쓸 때 이런 형태로 많이 쓸 것이기 때문에 공부 ~
===============블록체인 특강 ===================
1. 블록체인 미래 전망
보험
가상화폐
개인인증
유통- 택배 -> 택배회사별 다름, 불편 -> 자신 블록체인 띄워서 송장확인 가능
2. 블록체인이란?
데이터 분산 처리 기술
dapp - 나만의 인스타그램 블록체인 네트웤을 만드는게 가능
네트워크 구성만으로도 가능하대 블록체인은. 중앙 서버 없이
블록체인은 누가 발명한고지???
History
Bitcoin, Ethereum and Litecoin transactions per day (January 2011 – January 2021)
Cryptographer David Chaum first proposed a blockchain-like protocol in his 1982 dissertation "Computer Systems Established, Maintained, and Trusted by Mutually Suspicious Groups."[9] Further work on a cryptographically secured chain of blocks was described in 1991 by Stuart Haber and W. Scott Stornetta.[4][10] They wanted to implement a system where document timestamps could not be tampered with. In 1992, Haber, Stornetta, and Dave Bayer incorporated Merkle trees to the design, which improved its efficiency by allowing several document certificates to be collected into one block.[4][11]
출처 : wikipedia
-> David Chaum is an American computer scientist and cryptographer. He is known as a pioneer in cryptography and privacy-preserving technologies, and widely recognized as the inventor of digital cash.
특장점
-분산저장
-위,변조 어려움
-해킹의 어려움아침 : 과제 점검 + 경일홈페이지 취업자인터뷰 공부
- '보안'이라는게 매우 중요함.
- 이중지불 (시간차 공격) 돈 1000만원을 인출한 뒤, 잔고가 0으로 갱신되기 전 재빨리 1000만원을 재출금하는 시간차 공격
- 채굴방식
작업증명
지분증명
~
~
거래소의 보안이 엄청 중요함
ex ) 빗썸, 업비트, 코인원 등..
거래소는 해킹 당할 수 있지만 블록이 해킹당하는게 아님.
3. 블록체인의 기술 정의
Genesis block -> 최초의 블록
블록체인 -> 링크드 리스트(Linked list) 자료구조임.
비트코인은 10분에 한 번씩 블록이 생성됨.
블록체인의 네트웤이 어떻게 돌아가는지
사토시가 비트코인을 만들어서 어떻게 알리지?
-> 네트워크 구성
seed node 만듬
ㅁ ㅁ ㅁ
Genesis DNS Seed ㅁ
ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ
ㅁ ㅁ ㅁ ㅁ ㅁ ㅁㅁ ㅁ ㅁ ㅁ ㅁ ㅁ
Genesis 블록을 만들어놔야 나머지 참가자들이 네트워크 통해 서로 싱크를 맞추게됨
사토시가 저기에 비트코인 50개 내꺼~ 하면 다 복붙
mining
결론 : Genesis Block 은 매우 중요하고 필수적임
block은 밑으로 linked list 로 blocks 이 달라붙음.
Block 다수의 거래 정보의 묶음.
분산 장부 / 공통장부
블록의 정확한 이름 = TXID 블록의 해시 값.
SHA256으로 변환된 값.
블록의 해더 - 버전 / 난이도 / - 넌스 - 바뀌는 값 0부터 계속 변경되면서 SHA256값을 찾는.. / -머큘러씨? - 블록과 블록의 해시값에 대한 정보 ( 안바뀜)
블록의 바디 - 거래정보 (transaction)
DNS?
Domain Name System (도메인 네임 시스템)
4. 채굴 방식
합의 알고리즘
채굴증명방식, 합의 프로토콜, 합의 메카니즘
작업증명(POW / Proof of work)- 해시를 찾는 것 - 하드웨어 장비를 사용해 코인을 채굴 - 내가 직접 일해서 채굴
단방향 암호화 알고리즘
가장 빨린 채굴된 블록만 인정을 받고 나머지는 버려지게 때문에 이중지불 문제가 해결됨.
대표코인 : 비트코인, 라이트코인, 제트캐시, 모네로
지분증명 (POS / Proof of Stake)
내가 채굴 안해도 내가 100가지고있으면 남이 채굴할 때 나에게 들어옴. ㅇ
그래도 내가 채굴할꺼야 하면 -> 수수료 + 채굴량 더 많이 범
* 네트워크에 접속이 되어있어야함.
이자개념
대표코인
퀀텀, 네오, 스트라티스
위임지분증명(DPOS (delegated Proof-Stake)
채굴을 너네만 해. 이자만 줘~
채굴하는 node들을 투표를 통해 채굴해라~
많이 가지고 있을 수록 더 많이 갖게됨
Dpos는 Pos와 달리 소규모 참여자에게는 꿀단지 (?)
대표코인 :
위임지분증명, 지분증명은 본인이 가진게 많아야~ 결국 많이 범.
하드웨어가 많으면 많을수록 채굴이 빨라짐
->
5. p2p와 블록체인 네트워크 비교
- P2P-Network - 일정부분만 공개
- 블록체인network - 모든걸 공개
mining tool....
블록체인 과 연결한 사이트 개발 *
C , C++ 문법만 알면 다른 언어 금방 할 수 있댕..
그래야 블록체인 네트웤을 개발할 수 있음.
6. 블록체인 배워야하는 이유
모든 사물에 ip를 부여하는 시대가 오는 중
-> 카피가 불가능한.
명품, 게임아이템, 그림 등 모두 블록체인으로 사기를 칠 수 없는 세상이 가능..
7. 블록체인 개발하기 위해
1. 언어 : C/c++, Java, Java Script, Python, Nodejs, Json, XML 등
2. 개발 플랫폼 : windows, Linux, Mac, Android, iOS 등
3. 데이터 베이스 :mysql, mssql, Oracle, redis, MongoDB등
4. 개발 클라우드 : Amazon, Google 등
하이브리드 앱? -> 아래 모든 언어에 웹페이지를 올려줌.
native app-> JAva, Android
Object C, swift -> 애플
XML 파일 - 웹페이지 데이터를 받아올 때
mysql(원래 오픈소스엿음), mssql(Microsoft에서개발), Oracle, SQL이라는 데이터베이트랭귀지를 이용 - 절차적인 랭귀지
redis, MongoDB - 노에스케일 (?) 자연어에 가까움
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [12일차]20210330 경일홈페이지 취업자인터뷰 버튼만들기 / 조건문, 반복문, 함수 function기초 복습 (0) | 2021.03.30 |
|---|---|
| [11일차 연습] 움직이는 이미지 overflow:hidden, Java script (0) | 2021.03.30 |
| [10일차 연습] 경일게임아카데미 홈페이지 만들기 (0) | 2021.03.28 |
| [10일차]20210326 여태까지 배운거 적용해서 경일게임아카데미 홈페이지 만들기 (0) | 2021.03.26 |
| [9일차 연습]to do list, 움직이는 배너 imgs (0) | 2021.03.26 |
