[멋사] 블록체인스쿨 #4, #5

이현진·2023년 3월 20일
0

블록체인

특성

익명성 - 공개키, 지갑주소만으로 사람의 신원을 알 수 없음
추적가능성 - 모든 거래에는 공개키가 사용, 기록됨
무신뢰성 - 신뢰받는 제 3기관이 존재하지 않음. 시스템 자체가 신뢰
분산원장 - 시스템 내 모든 참가자는 거래의 정보를 기록
탈중앙화 - 중앙화된 주체가 없음
합의 알고리즘 - 참가자 모두 동일한 권한을 가지고 있기 때문에 옳은 정보를 결정하는 규칙이 필요
변경 불가능성 - 블록체인에 한 번 정보가 들어가면 변경 어려움

Genesis Block

블록체인에서의 첫 번째 블록이며, 블록 0번이라 불림

Block Structure

  • 해시
  • 버전
  • 이전 블록해시 값
  • 머클 루트
  • 타임스탬프
  • 난이도
  • 논스

Body

  • 수수료
  • 거래 (Transaction)

html, css

html과 css를 배우는 오후 시간에는 간단하게 테킷 홈페이지 클론코딩을 했다.

우선 이번주에는 헤더와 배너 만드는 작업을 했다.

html 코드

<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>

css 코드

@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;
}
profile
https://github.com/lhjbg0821

0개의 댓글