본문 바로가기
etc/블록체인 뉴딜일자리사업

CSS 기초: 미디어쿼리, transition / 사례로 보는 NFT

by vellahw 2023. 6. 7.

 

💭 서론

교육 23일차

오전 수업은 사례로 알아보는 NFT에 대한 수업이 진행 됐다. 실제 NFT 프로젝트를 예로 들어주며 설명해주셔서 재미있게 들었다.

오후 수업은 HTML/CSS 기초 수업이었다. 미디어 쿼리를 찍먹 해보고 position, transition 등 실무에서 유용하게 쓸만한 것들을 배웠다. CSS를 깊게 공부한게 아니라 프로젝트 하면서 혼자 독학한 수준이라 자세히 배우고 싶은 마음이 컸는데 간단하게 넘어가서 좀 아쉽 ㅠㅠ.. 내가 조금 더 공부해야지!!! 

 

 

 

CSS 기초

✔️position - absolute와 relative

  • absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있다.
  • relative: 원래 있던 위치를 기준으로 좌표를 지정함

position 속성이 relative인 컨테이너 내부에 absolute인 객체가 있으면 절대 좌표를 계산할 때 relative 컨테이너를 기준점으로 잡는다. (없다면 전체 문서가 기준)

 

<html>
<head>
<style>
#box-container{
	position: relative;
    height: 90px; 
    margin-top: 40px; 
    border: 2px solid red;
}
#box-inner{
    position: absolute; 
    top: 30px; 
    left: 20px; 
    border: 2px solid blue; 
}
</style>
</head>
<body>
	<div id="box-container">
		컨테이너
		<div id="box-inner">absolute 박스</div>
	</div>
</body>
</html>

 

relative인 외부 컨테이너를 기준으로 입력한 top, left 속성이 지정되어 absolute 박스의 위치가 결정된다.

 

 

 

 

✔️ 미디어 쿼리 찍먹

@media(max-width:767px){
    body {
        background-color: gold;
    }

    ul li {
        display:block;
    }
}

미디어 쿼리는 위처럼 @media(조건문) { 스타일 } 형식으로 작성한다.

괄호안에 조건문을 작성하며, 위와 같은 경우 최대 가로 길이가 767px일 때까지만 background-color는 gold, ul li 태그는 display block 속성을 갖는다.

 

 

@media (max-width: 400px) {
    body {
        background-color: palevioletred;
    }
}
      
@media (min-width: 401px) and (max-width: 600px) {
    body {
        background-color: plum;
    }
}
      
@media (min-width: 601px) {
    body {
        background-color: pink;
    }
}

가로 사이즈에 따라 배경색이 바뀌도록 css를 작성했다.

 

🔻 코드전문

더보기 
<!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>Media Query</title>
    <style>
      /*
      min-width
      max-width
      0~400px blue
      401px ~ 600px red
      601px ~ yellow
      */
      @media (max-width: 400px) {
        body {
          background-color: palevioletred;
          font-size: 2em;
        }
      }
      @media (min-width: 401px) and (max-width: 600px) {
        body {
          background-color: plum;
          font-size: 1.5em;
        }
      }
      @media (min-width: 601px) {
        body {
          background-color: pink;
        }
      }
    </style>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, dolores? Voluptate, asperiores sed ipsum architecto provident quidem delectus voluptatibus expedita similique voluptatum rem
      magni minima dolorem accusamus perspiciatis autem facere! Itaque aliquid officia sapiente accusamus quibusdam voluptate eius, porro quod repellendus, vitae in nam, quis fuga. Fugit molestiae
      omnis facere. In, doloribus at earum enim magni aut similique quo totam! Possimus doloremque tenetur aliquid voluptatibus numquam delectus atque. In hic sit aut magnam odit suscipit
      necessitatibus neque quam ad sint? Iste repellendus earum perspiciatis sapiente ad repellat sequi accusamus nesciunt! Aut, perspiciatis. Dolorum est sapiente odit quaerat, eaque ab placeat
      debitis! Explicabo saepe illo et nemo id magnam, natus iusto, amet praesentium labore excepturi. Quasi veritatis magni earum qui sed? Cum ea voluptate quo odio, debitis distinctio, quibusdam
      impedit nihil nemo non ratione pariatur magnam obcaecati quae cupiditate voluptatum eius perferendis neque corporis quasi totam. Praesentium maxime officia odit quos.
    </p>
  </body>
</html>

 

 

 

🔗 실습 - transition

(코드 출처)

1. 마우스를 올리면 div요소의 width가 300px로 늘어나는 과정이 3초동안 보이도록 작성하기

<!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>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: width 3s;
    }

    div:hover {
        width: 300px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

완성

 

transition에는 효과를 추가하려는 CSS 속성과 효과의 지속 시간을 입력한다.

 

  • div에 마우스를 올리기 전 가로폭은 100px이고 3초 동안 변환된다.
  • 마우스를 올리면 div의 가로폭은 점차 300px까지 커진다.
  • 마우스를 밖으로 가져가면 가로폭이 점차 100px로 줄어든다.

 

2. 마우스 올렸을때만 이미지위에 검은색-투명도 80의 배경에 흰색의 타이틀이 가운데 오도록 CSS 작성하기

🔻 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" type="text/css" href="07.css">
</head>
<body>
<ul>
    <li>
      <figure>
        <img src="https://assets.codepen.io/485050/normal5.jpg" />
        <figcaption>image title</figcaption> 
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://assets.codepen.io/485050/normal5.jpg" />
        <figcaption>image title</figcaption> 
      </figure>   
    </li>
  </ul> 
</body>
</html>

 

🔻 CSS

li {
  list-style:none; 
  width:192px; 
  height:128px; 
  position: relative;
  overflow: hidden; 
} 

figure {
  margin: 0;
}

img {
 width: 100%;
  height: 128px;
}

li figcaption {
  position : absolute;
  top: 100%;
  background-color: black;
  left: 0;
  right: 0;
  top: 100%;
  bottom: -100%;
  text-align: center;
  color: #fff;
  line-height: 128px;
  transition: all 1s;
  opacity: 0;
  }

li:hover figcaption {
  top: 0;
  bottom: 0;
  opacity:0.8;
}

완성

  • li 태그에 position을 relative로 주고 overflow는 hidden을 줘 넘치는 부분은 가려지게 설정했다.
  • figucaption 태그에 타이틀이 입력되었으니 figucaption 태그에 스타일을 적용했다.
  • 부모 요소 li에 position을 relative로 주었으니 figucaption 태그에는 absolute로 설정해주어야 애니메이션이 작동되었다.
  • top: 100% 는 부모요소를 기준으로 최하단에서 100%까지(?) 영역을 차지한단 뜻
  • bottom은 -100%를 줘 완전히 안 보여지게...
  • opacity 0.8은 불투명도 (80%, 1이면 완전히 불투명, 0이면 투명)

 

 

 

 

사례로 보는 NFT

 

 

✔️ X2E NFT

  • X TO Earn의 약자로 'X'에는 행위가 들어갈 수 있다.
  • 특정 행동을 통해 수익을 얻는 개념의 NFT
  • MoveToEarn, PlayToEarn, ReviewToEarn 등

 

 

 

✔️ 멤버쉽 NFT

기존 전체 고객을 대상으로 하는 멤버쉽 서비스를 NFT로 적용하여 더 제한된 인원에게 더 다양한 서비스를 제공하는 형태

단순한 금액 소비를 넘어 제한된 VIP 고객을 다양한 방식으로 상품에 참여하게 하고 기존보다 더 특별한 경험을 제공할 수 있다.

결과과적으로 고객은 브랜드에 대한 애착도가 더 형성될 수 있을 것임.

 

사례로 스타벅스가 있는데 스타벅스는 NFT를 구매하면 커피 농장 체험 등의 기존에 돈으로 살 수 없던 특별한 서비스를 제공했다.

 

 

 

 

✔️ 굿즈, 티켓 등의 소장품 NFT

뮤지컬 '잭 더 리퍼' NFT 티켓 🤹

출처:&nbsp;https://cobak.co.kr/community/1/post/624580

아로와나 NFT 마켓이 잭 더 리퍼 공연을 기획·제작한 글로벌콘텐츠와 업무협약을 맺고, 22년 6월 15일 오후 7시 공연 잭더리퍼 티켓에 NFT를 적용한 한정판 VIP 티켓을 판매했다. 아로와나토큰과 이더리움으로 거래할 수 있는 티켓이었다.

이 NFT 티켓을 구매할 경우 앞자리 공연 관람과 함께 배우 엄기준의 싸인이 있는 포토 티켓을 제공받을 수 있었다고 한다.

또한 아로와나 NFT 마켓에서 해당 NFT 티켓을 구매한 고객에게 한하여 100% 토큰 증정 이벤트(토큰 에어드랍 이벤트)를 함께 진행했었다고 한다.

 

아로와나 NFT 마켓은 이전에 쇼미더머니10 콘서트 VIP NFT 티켓을 성공적으로 완판하여 NFT의 가치를 인정받아, 경매를 통해 1장에 약 40만원에 판매됐었다고..

 

(잭 더리퍼 NFT 구매·관람 후기)

 

르세라핌 NFT 🩰

22년 12월 20일, 업비트 운영사 두나무와 하이브 엔터가 합작해 설립한 글로벌 블록체인 플랫폼 레벨스가 아이돌 그룹의 콘텐츠를 담은 NFT를 담은 ‘테이크’ 발매를 예고했다. 테이크는 아티스트의 순간을 담은 NFT다. 

세븐틴과 르세라핌 등 하이브 소속 아티스트들의 사진과 영상 뿐만 아니라 멤버별 음성 메시지와 손글씨, 친필 서명 등을 디지털 형태로 소장할 수 있는 NFT를 발행하고 거래할 수 있는 '모먼티카'를 출시했다.

 

하지만 케이팝 팬덤의 NFT에 대한 시각은 부정적인 편이라 당장의 사업의 수익성보단 NFT에 대한 진입장벽을 낮추는 데 집중하는 게 좋을 것..

 

LG 트윈스 NFT ⚾️

22년 6월, LG트윈스와 네이버의 디지털 콘텐츠 파트너십 협약을 통해 출시되었다.

유니크, 레어, 스페셜, 노멀 등급으로 발매되었다.

유니크 등급 혜택으로 2022 포스트시즌 LG트윈스 현장 티켓, LG트윈스 유광점퍼 코카콜라 에디션 및 선수 친필 싸인, 피규어 NFT 실물 카드를 증정했다.

 

 

 

✔️ 가상 부동산과 메타버스

가상부동산?

현실의 부동산 처럼 가상 세계 내에서 부동산을 구매, 판매, 소유 할 수 있도록 했다. 현실 부동산 처럼 가상 세계 내의 위치 등의 가치를 측정하고 거래되고 있다.

 

더샌드박스 👾

만들어진 메타버스 속에서 단순히 나만의 캐릭터로 플레이어가 되는 것이 아닌, 내가 직접 나의 공간을 보유하여 그 공간을 꾸미고 이벤트를 만들어 나간다.

누구나 이곳에서 자신의 공간을 create 할 수 있는 간편한 툴의 기능을 함

가상 부동산이 자체로 주는 가치가 아닌 내가 만들어 나가는 비즈니스 기회를 가질 수 있음

 

 

빠르게 변화하는 NFT에 맞춰 메타버스 생태계 또한 발전하고 있지만 기본적인 개발 소요 시간을 5년 이상 전망할 정도로 길기 때문에, NFT보다 더 많은 시간이 필요한 것이 현 상황이다.

그렇기에 NFT와는 다르게 현재 무엇이 시장을 점유하고 있다 같은 이야기를 하기는 어렵다고..

 

 

 

✔️ 국내 NFT 프로젝트

선미야 클럽 🦋

22년 2월에 런칭된 연예인 선미를 IP로 세계관을 구축한 PFP NFT

Favor Alliance라는 자체 생태계를 구축하고 있다.

수익보단 생태계를 만드는 것을 목표로 G마켓과의 협업을 통한 Favor의 오프라인 연결, 세계관 테마의 NFT 홀더 오프라인 모임 개최 등을 시도함

 

다다즈 DADAZ 👫

단순히 지인들에게 선물을 주기 위해, 또 자신의 작품을 포트폴리오 개념으로 온체인에 저장하기 위해 NFT를 적용한 것이 다다즈 프로젝트의 시작이었다.

다른 PFP NFT를 적용하고 있는 사람들에게도 해당 PFP의 아이덴티티를 작가의 아이덴티티로 재해석하여 선물했다.

이로인해 나만의 NFT를 받을 수 있다는 점이 많은 사람들의 이목을 끌어 활발한 커뮤니티가 생성되었다.

NFT 보유자들이 자신의 NFT를 2차 창작하며 선물로 주는 등의 활발한 활동도 일어나 오프라인 밋업과 전시회가 개최되기도 했다.

 

실제로 작가로 활동하고 있던 작가는 아니고 NFT로 시작한 작가였는데 콜렉터 커뮤니티의 영향으로 서울옥션의 전속작가가 되기도 했다.

작가의 트위터

 

 

✔️ 해외 NFT 프로젝트

클론엑스 CloneX

(참고)

출처:https://www.ttimes.co.kr/article/2022060315407780605
무라카미 다카시가 참여한 NFT

무라카미 다카시가 참여하고 나이키가 인수한 PFP NFT 프로젝트

 

위 사진에서 보이듯 클론엑스는 3D 아바타 형태인데, 해당 아바타를 분신 삼아 가상세계에서 자유롭게 활동하도록 했다.

3D 애니메이션 회사와 협업하여 클론엑스 NFT 보유자들에게 3D 파일을 제공한다는 계획을 세웠는데, 해당 파일이 있으면 보유자들은 아바타의 체형이나 키를 원하는대로 설정하고, 움직이게 하는 등 각기 다른 메타버스 플랫폼의 아바타 규격에 맞게 클론을 재설정할 수 있다.

 

클론엑스 보유자들에게 추가로 제공되는 NFT인 '스페이스 포드'와 '루트 포드'는 창고나 갤러리 등으로 사용하거나 클론들이 살 집의 역할을 한다. 보유자들은 자신의 집을 원하는대로 꾸밀 수 있고, 다른 사람을 초대하거나 놀러갈 수도 있다고 한다. 자신이 보유한 NFT 수집품을 전시해놓을 수도 있다.

 

나이키와의 협업 '모노리스'

클론엑스 보유자들에게 하나씩 무료로 제공 되었는데 퀘스트를 깨서 오픈해야하는 상자였다.

이 안에 나이키 스니커즈 NFT가 들어있던 것. '스킨 바이알' 이라는 NFT도 들어있었는데 운동화에 적용 시키면 디자인이나 색깔이 변경되었다.

나이키 스니커즈 NFT

모노리스 상자를 여는 퀘스트가 꽤 어려웠는데 상자를 열면 어떤게 나올지 보유자들에게 궁금증과 기대감을 줘 커뮤니티가 열광했던 듯 하다.. 나이키와 RTFKT와 협업하여 스니커즈 뿐만 아니라 스웨터 NFT도 출시한다는 것 같다. 패션산업의 미래가 궁금해진다.

 

 

 

저작자표시 비영리 변경금지

'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글

비즈니스 기획하기  (0) 2023.06.12
NFT 발행 실습  (0) 2023.06.09
NFT 종류와 민팅, 화이트리스트  (0) 2023.06.02
블록체인 게임, 메타버스  (0) 2023.06.01
블록체인 비교사례법, 가치평가 실습  (0) 2023.05.31

관련글

댓글

티스토리툴바