특성
익명성 - 공개키, 지갑주소만으로 사람의 신원을 알 수 없음
추적가능성 - 모든 거래에는 공개키가 사용, 기록됨
무신뢰성 - 신뢰받는 제 3기관이 존재하지 않음. 시스템 자체가 신뢰
분산원장 - 시스템 내 모든 참가자는 거래의 정보를 기록
탈중앙화 - 중앙화된 주체가 없음
합의 알고리즘 - 참가자 모두 동일한 권한을 가지고 있기 때문에 옳은 정보를 결정하는 규칙이 필요
변경 불가능성 - 블록체인에 한 번 정보가 들어가면 변경 어려움
블록체인에서의 첫 번째 블록이며, 블록 0번이라 불림
html과 css를 배우는 오후 시간에는 간단하게 테킷 홈페이지 클론코딩을 했다.
우선 이번주에는 헤더와 배너 만드는 작업을 했다.
<div class="header">
<div class="menu">
<img class="logo" src="techit_logo.svg" alt="techit" />
<button>테킷 스쿨</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"
></path>
</svg>
</div>
</div>
<div class="banner">
<img
src="https://glob-dev-resource.s3.ap-northeast-2.amazonaws.com/course/banner/2560w_home_banner_Kakao_event.png"
alt="banner image"
/>
<div class="bannerMessage">
<div class="bannerTitle">TECHIT 카카오톡 채널 추가 이벤트</div>
<div>할인 쿠폰 전원 증정(*VOD 클래스 한정)</div>
</div>
</div>
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css);
body {
margin: 0;
color: #222222;
font-family: "Pretendard";
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
max-width: 1280px;
margin: auto;
}
.logo {
width: 108px;
}
button {
background-color: white;
font-size: 16px;
font-weight: 600;
}
.menu button {
display: none;
border: 0px;
padding-left: 16px;
padding-right: 16px;
}
.menu button:nth-child(2) {
margin-left: 44px;
}
.loginBox {
display: flex;
align-items: center;
}
.login {
display: inline-block;
border: 1px solid rgb(232, 232, 232);
border-radius: 9999px;
padding: 8px 16px;
font-size: 14px;
}
.ellipsis {
width: 24px;
margin-left: 16px;
}
@media (min-width: 1024px) {
.menu button {
display: inline-block;
}
.login {
color: #737373;
font-size: 16px;
border: 0px;
padding: 0px;
}
.ellipsis {
display: none;
}
}
.banner {
position: relative;
}
.banner img {
width: 100%;
height: 400px;
object-fit: cover;
}
.bannerMessage {
position: absolute; /*top:0 이면 배너맨위에 딱 붙음*/
top: 50%;
transform: translateY(-50%); /*배너 중앙에 옴*/
font-size: 18px;
margin-left: 96px;
}
.bannerTitle {
font-size: 32px;
font-weight: bold;
margin-bottom: 12px;
}