오전수업
1교시
저번주에 수업한 내용 리마인드
블록체인 자료구조
무어의 법칙
추천 도서
- The Blocksize War
2교시
공개키, 개인키
채굴
공개키
- 계좌번호
- 거래시 사용됨
- 실제 주인의 신원 파악은 불가능
- 개인키로부터 형성
개인키
- 비밀번호와 비슷한 개념
- 디지털 서명시 사용됨
개인키에서 공개키가 형성이되고, 공개키에서 지갑주소가 형성이 됩니다.
지갑주소 형성 과정
https://royalforkblog.github.io/2014/08/11/graphical-address-generator/
채굴(Mining) -> 컴퓨팅 파워를 사용하여(논스를 바꾸며) 문제를 푸는 과정(블록 생성되는 과정)
3교시
블록이 생성되는 과정
질의응답시간
오후수업
4교시
멋쟁이사자처럼 시작 홈페이지 저번 수업에 이어서 계속 진행
flexbox, grid 활용
5교시
inline, inline-block, block 의 차이
overflow
6교시
node.js 설치
sass & scss 설치
vs code에서 설정하기
7교시
scss 사용하기
scss 사용하는 이유 및 장점
Nesting & Modules 배우기
Nesting
index.html
<!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>SCSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>다양한</h1>
<h2>색상을</h2>
<h3>SCSS를</h3>
<h4>사용해서</h4>
<h5>적용해</h5>
<h6>보세요.</h6>
</body>
</html>input.scss
$offBlack: #253342;
$rosePink: #ebb8dd;
$darkRed: #bf2c34;
$seaGreen: #53bda5;
$lightGray: #cbd6e2;
$magenta: #be398d;
div {
h1 {
color: $offBlack;
}
h2 {
color: $darkRed;
}
h3 {
color: $lightGray;
}
h4 {
color: $magenta;
}
h5 {
color: $rosePink;
}
a {
h6 {
color: $seaGreen;
}
}
}Modules(위 html 파일 공유)
input.scss
@use "color";
h1 {
color: color.$offBlack;
}
h2 {
color: color.$darkRed;
}
h3 {
color: color.$lightGray;
}
h4 {
color: color.$magenta;
}
h5 {
color: color.$rosePink;
}
h6 {
color: color.$seaGreen;
}color.scss
$offBlack: #253342;
$rosePink: #ebb8dd;
$darkRed: #bf2c34;
$seaGreen: #53bda5;
$lightGray: #cbd6e2;
$magenta: #be398d;8교시
Mixins & Extend 배우기
Mixins
index.html
<!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>SCSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="info">조회</button>
<button class="alert">취소</button>
<button class="success">확인</button>
</body>
</html>input.scss
@use "buttons";
.info {
@include buttons.btnStyle;
}
.alert {
@include buttons.btnStyle($color: darkred);
}
.success {
@include buttons.btnStyle($color: darkgreen);
}button.scss
@mixin btnStyle($color: darkgray) {
background-color: $color;
color: whitesmoke;
border: 0;
border-radius: 12px;
padding: 12px;
}Extend(위 html 파일 공유)
index.html
<!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>SCSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="info">조회</button>
<button class="alert">취소</button>
<button class="success">확인</button>
</body>
</html>input.scss
@use "buttons";
.info {
@extend %btnStyle;
background-color: darkgray;
}
.alert {
@extend %btnStyle;
background-color: darkred;
}
.success {
@extend %btnStyle;
background-color: darkgreen;
}button.scss
%btnStyle {
color: whitesmoke;
border: 0;
border-radius: 12px;
padding: 12px;
}이번에 배운 꿀단축키 공유
ctrl + ( / ) : 선택한것 주석처리
마무리멘트
오전에 배운 이론은 계속 한귀로 듣고 한귀로 흘리네요. 어려워서 그런지 집중력이 떨어지네요 ㅠㅜ 그래도 집중하고 이해할려고 노력을 해봐야할것같아요. 오후 코딩 수업도 미친 진도를 나갔는데, 그래도 다른 언어였지만 코딩경험이 있어서 그런가 아직까지는 이해하면서 진행하는데에는 큰 문제는 없는것 같습니다. 내일 오늘 배운거 다시 한번더 하신다니까 확실하게 터득하고 넘어갈수 있을것같습니다. 내일을 위해서 오늘 배운거 간단히 복습하고 쉬어보겠습니다.
