Techit 블록체인 스쿨 3기 Today I Learned D+4
블록체인 관련 책 추천
-왜 달러는 비트코인을 싫어하는가?
-비트코인 백서
:비트코인을 시작한 이유, 목적, 특징 그리고 구성 요소에 대한 설명이 요약되어 있는 문서
-마스터링 비트코인
-사토시의 서
-프로그래밍 비트코인
:비트코인을 하나씩 직접 코딩으로 만들어보는 과정을 알려주는 책, 기본적 으로 비트코인에 대한 이해가 높은 상태에서 읽어야 의미가 있음. 코딩을 기본적으로 할 줄 알아야 함
-인벤팅 비트코인
What is Blockchain?
Blockchain is Distributed Ledger Technology that is working on the Decentralized Network system
비트코인 특징
html,css 헤더 만들기
techit 헤더 클론코딩
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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="techit_logo.svg" alt="logo"/>
<button class="firstBtn">테킷 스쿨</button>
<button>스타트업 스테이션</button>
<button>VOD 클래스</button>
<button>기업교육</button>
<button>이벤트</button>
<button class="login">로그인</button>
</header>
</body>
</html>
style.css
img{
width:108px;
}
button{
background-color: white;
border:0;
color: #222222;
font-size: 16px;
font-weight: 600;
padding-left: 16px;
padding-right: 16px;
}
.login{
color:#737373;
float: right;
}
header{
padding: 24px;
margin-left: 144px;
margin-right: 144px;
}
.firstBtn{
margin-left: 80px;
}display:flex => 부모 요소에 적용
주축 기본 값: row
flex-direction: column => 주축 column
justify-content: 주축 정렬;
align-items: 교차 축 정렬;
justify-content 정렬 알아보기
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
flex활용해서 Header만들기
<!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="style.css">
</head>
<body>
<header>
<div class="menu">
<img src="techit_logo.svg" alt="logo" />
<button class="firstBtn">테킷 스쿨</button>
<button>스타트업 스테이션</button>
<button>VOD 클래스</button>
<button>기업교육</button>
<button>이벤트</button>
</div>
<div class="loginBox">
<button class="login">로그인</button>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
class="ellipsis"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</div>
</header>
</body>
</html><style>
body{
margin:0;
}
header{
padding: 24px;
display: flex;
justify-content: space-between;
max-width: 1280px;
margin:auto;
}
img{
width:108px;
}
button{
background-color: white;
border:0;
color: #222222;
font-size: 16px;
font-weight: 600;
padding-left: 16px;
padding-right: 16px;
display: none;
}
.login{
display: inline-block;
border: 1px solid rgb(232, 232, 232);
border-radius: 100px;
font-size: 14px;
padding: 8px 16px;
}
.firstBtn{
margin-left: 80px;
}
.loginBox{
display: flex;
align-items: center;
}
.ellipsis{
margin-left: 16px;
width:24px;
}
@media (min-width:1024px){
button{
display: inline-block;
}
.ellipsis{
display: none;
}
.login{
color: #737373;
font-size: 16px;
border: 0;
padding: 0;
}
}
</style>기본 화면
미디어쿼리 적용화면
<style>
@media (min-width:1024px){
button{
display: inline-block;
}
.ellipsis{
display: none;
}
.login{
color: #737373;
font-size: 16px;
border: 0;
padding: 0;
}
}
</style>