IT TIP

번개 모양 디자인 만들기 (예 : The Flash)

itqueen 2020. 10. 30. 21:22
반응형

번개 모양 디자인 만들기 (예 : The Flash)

플래시 기호가있는 티셔츠

Flash (DC Comics) (또는 Big Bang Theory 의 Sheldon Cooper가 착용 한 티셔츠)의 번개 모양 심볼을 CSS 로 재현하려고합니다 .

이것은 별 등급 시스템처럼 작동 할 것이며 대신 '번개 등급 시스템'일뿐입니다.

그러나 HTML을 최소한으로 유지하려고하므로 CSS로만 스타일을 지정하고 싶습니다.

나는 다음 단계에 이르렀다.

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
  height: 50vw;
  width: 50vw;
  position: relative;
  margin: 0 auto;
}
.circ:hover{
  background:gray;
  }
.circ:hover .bolt{
  background:gold;
  }
.circ {
  height: 50%;
  width: 50%;
  background: white;
  border: 5px solid black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:0 0 10px 2px black;
}
.bolt {
  position: absolute;
  top: 5%;
  left: 50%;
  height: 70%;
  width: 30%;
  background: yellow;
  border: 2px solid black;
  border-bottom: none;
  transform: perspective(200px) skewX(-10deg) rotateX(15deg);
}
.bolt:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20%;
  height: 50%;
  width: 100%;
  background: inherit;
  border: 2px solid black;
  transform:  ;
}
/*
.bolt:after{
  content:"";
  position:absolute;
  top:-40%;left:20%;
  height:50%;
  width:100%;
  background:inherit;
  transform:perspective(50px) skewX(-10deg) rotateX(45deg);
  }*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrap">

  <div class="circ">

    <div class="bolt"></div>
  </div>
</div>

그러나 여기서 계속하는 방법을 모릅니다.

나는 perspective속성을 사용하려고 시도했지만 아직은 그것에 대해 잘 다루지 못했다고 생각합니다. 주로 그것이 적용되는 속성 :before과 :after속성 에 대해 약간 혼란 스럽기 때문입니다. 부모의.

클릭시 흰색 배경과 볼트 색상이 변경되므로 CSS를 선택했습니다. CSS를 사용하는 방법을 알고 있기 때문입니다.

(여기에서 SVG가 더 나은 옵션 일 수 있다는 것을 알고 있지만 시간 제한으로 인해 이것을 배울 수 없었기 때문에 '사용 방법을 알고있는 것', 즉 CSS를 사용하는 것을 선호합니다)

SVG

여기 @ Professor.CSS가 있습니다. @ jbutler483
원
과 다각형

svg {
  background-color: red;
}
<svg width="100px" height="200px" viewBox="0 0 100 150">
  <circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
  <polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>

또는 CSS

조명에 대한 그것의 정당 ::before하고 ::after요소. drop-shadow조명 컨테이너에.

body {
  background-color: red;
}
.container {
  -webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
  display: inline-block;
  border-radius: 50%;
  background-color: white;
  border: 5px solid black;
  border-color: black;
}
.lightning {
  position: relative;
  margin: 50px;
  width: 30px;
  height: 50px;
  transform-origin: 50% 50%;
  transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
  background-color: yellow;
}
.lightning:before {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent yellow transparent;
  top: -39px;
  left: -17px;
  content: "";
}
.lightning:after {
  position: absolute;
  border-style: solid;
  border-width: 0 0 40px 30px;
  border-color: transparent transparent transparent yellow;
  bottom: -39px;
  right: -17px;
  content: "";
}
<div class="circle">
  <div class="container">
    <div class="lightning"></div>
  </div>
</div>

면책 조항 : 복잡한 이미지에는 SVG를 사용하십시오. 우리는 여전히 CSS로 약간의 재미를 가질 수 있지만, 프로덕션 구현이 아닌 학습용으로 사용하십시오.

단일 HTML 요소로 가능합니까?

네! ... 제한이 있습니다. 주로 볼트에 테두리가 없습니다 ... 그러나 최소한의 HTML입니다!

  • 상단과 하단 부분은으로 만든 투명 국경 삼각형 트릭 에 :before와:after
  • 중간 볼트가 만들어집니다 box-shadow의:before

매우 거친 예

참고 : 이 예제에서는 <div>의사 요소 자식이 필요하므로 를 사용합니다 .

body {
  background: #F00;
}
div {
  height: 300px;
  width: 300px;
  background: #FFF;
  border-radius: 50%;
  border: solid 5px #000;
  margin-top: 200px;
  position: relative;
}
div:before,
div:after {
  content: '';
  position: absolute;
  transform: skewY(-30deg) rotate(20deg);
}
div:before {
  border-right: solid 70px yellow;
  border-top: solid 160px transparent;
  box-shadow: 50px 100px yellow;
  left: 50%;
  margin-left: -50px;
  top: -70px;
}
div:after {
  border-right: solid 70px transparent;
  border-top: solid 160px yellow;
  bottom: -30px;
  left: 100px;
}
<div></div>

면책 조항 : SVG를 권장하지만 그렇다고 CSS를 재미있게 사용해서는 안된다는 의미는 아닙니다. 학습용으로 사용하지만 프로덕션 구현에는 사용하지 마십시오.

다음은 단일 요소 (+ 몇 개의 의사)와 일부 배경으로 모양을 만드는 방법 linear-gradients입니다. 모양은 왜곡없이 크기를 조정할 수 있습니다.

모양을 얻은 방법에 대한 설명 :

  • 검은 색 테두리가있는 흰색 원 border-radius은 의사 요소 ( :after)를 사용하여 만든 일반 CSS 원입니다 .
  • 또 다른 가상 요소 ( :before)가 추가되고 X 및 Y 축을 따라 기울어 져 볼트의 부품이 기울어 진 모양을 제공합니다.
  • 볼트는 실제로 여러 개 linear-gradients를 겹쳐서 만들어집니다 . 여기에는 볼트의 내부 노란색 부분에 대한 3 개와 회색 테두리에 대한 3 개가있는 6 개의 그라데이션 이미지가 포함됩니다.
  • 배경 이미지 (그라데이션)의 크기는 볼트의 크기에 따라 결정되며 각각 번개 모양의 모양을 생성하는 방식으로 배치됩니다.
  • 볼트의 중앙 부분은 실제로 단색이 하나 뿐이지 만 단색 배경의 크기를 제어 할 수 없기 때문에 그래디언트를 사용하여 생성됩니다.

참고 : transform: scale(...)높이 / 너비 변경 + 전환 대신를 사용 하면 크기 조정이 매우 잘 작동합니다 .

.lightning {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin: 50px auto;
}
.lightning:after,
.lightning:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.lightning:after {
  background: white;
  border: 2px solid;
  border-radius: 50%;
  z-index: -1;
}
.lightning:before {
  background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
  background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
  background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: skewY(-30deg) skewX(-30deg);
  z-index: 2;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
  transition: all 1s;
}
.lightning:hover {
  transform: scale(1.5);
}
<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="lightning"></div>

Bolt 용 애니메이션 :

.lightning {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  margin: 50px auto;
}
.lightning:after, .lightning:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.lightning:after {
  background: white;
  border: 2px solid;
  border-radius: 50%;
  z-index: -1;
}
.lightning:before {
  background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
  background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
  background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: skewY(-30deg) skewX(-30deg);
  z-index: 2;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
  transition: all 1s;
}
.lightning:hover:before {
  animation: boltstrike 1s;
}
@-webkit-keyframes boltstrike {
  25% {
    transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
  }
  50% {
    transform: translateX(7.5%) translateY(-7.5%) skewY(-30deg) skewX(-30deg);
  }
  100% {
    transform: skewY(-30deg) skewX(-30deg);
  }
}
@keyframes boltstrike {
  25% {
    transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
  }
  50% {
    transform: translateX(5%) translateY(-5%) skewY(-30deg) skewX(-30deg);
  }
  100% {
    transform: skewY(-30deg) skewX(-30deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="lightning"></div>

애니메이션, 클릭시 색상 변경 등의 전체 데모를 보려면 여기 를 클릭하십시오.

테두리가없는 이전 버전 :

.lightning {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.lightning:after,
.lightning:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0%;
  left: 0%;
}
.lightning:after {
  background: white;
  border: 2px solid;
  border-radius: 50%;
  z-index: -1;
}
.lightning:before {
  background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 50%, transparent 50%), linear-gradient(to top left, transparent 50%, yellow 50%);
  background-size: 20% 40%, 20% 40%, 20% 40%;
  background-position: 50% 50%, 30% 5%, 70% 100%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: skewY(-30deg) skewX(-30deg);
  z-index: 2;
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
  transition: all 1s;
}
.lightning:hover {
  height: 250px;
  width: 250px;
}
<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="lightning"></div>

CSS skews를 사용하여이를 완료하고 일부 위치를 지정하여 회전합니다.

가장 깨끗하지 않고 응답 성이나 크기 변경에도 좋지 않지만 짧은 시간 공간에서 얻을 수있는 한 가깝습니다.

코드는 다음과 같습니다.

#lightning {
  position: relative;
  height: 1000px;
  width: 600px;
  background: red;
}
.above,
.below {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 100px;
}
.above .middle {
  background: yellow;
  position: absolute;
  top: 300px;
  left: 100px;
  height: 125px;
  width: 400px;
  -webkit-transform: rotate(111deg) skew(35deg);
  transform: rotate(111deg) skew(35deg);
}
.above .toptri {
  position: absolute;
  height: 200px;
  width: 0px;
  padding: 0px;
  top: -175px;
  left: 300px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 50px solid transparent;
  border-right: 128px solid transparent;
  border-bottom: 284px solid #FFFF00;
  -webkit-transform: rotate(350deg) skew(141deg);
  transform: rotate(350deg) skew(141deg);
}
.above .bottri {
  position: absolute;
  height: 200px;
  width: 0px;
  padding: 0px;
  top: 400px;
  left: 125px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 50px solid transparent;
  border-right: 128px solid transparent;
  border-bottom: 284px solid #FFFF00;
  -webkit-transform: rotate(170deg) skew(141deg);
  transform: rotate(170deg) skew(141deg);
}
.below .middle {
  background: grey;
  position: absolute;
  top: 280px;
  left: 80px;
  height: 165px;
  width: 440px;
  -webkit-transform: rotate(111deg) skew(35deg);
  transform: rotate(111deg) skew(35deg);
}
.below .toptri {
  position: absolute;
  height: 160px;
  width: 0px;
  padding: 0px;
  top: -200px;
  left: 265px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 80px solid transparent;
  border-right: 158px solid transparent;
  border-bottom: 370px solid grey;
  -webkit-transform: rotate(350deg) skew(141deg);
  transform: rotate(350deg) skew(141deg);
}
.below .bottri {
  position: absolute;
  height: 200px;
  width: 0px;
  padding: 0px;
  top: 400px;
  left: 125px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 50px solid transparent;
  border-right: 128px solid transparent;
  border-bottom: 284px solid #FFFF00;
  -webkit-transform: rotate(170deg) skew(141deg);
  transform: rotate(170deg) skew(141deg);
}
.below .bottri {
  position: absolute;
  height: 160px;
  width: 0px;
  padding: 0px;
  top: 380px;
  left: 100px;
  -webkit-transform: rotate(0deg) skew(141deg);
  transform: rotate(0deg) skew(141deg);
  border-top: 0px transparent;
  border-left: 80px solid transparent;
  border-right: 158px solid transparent;
  border-bottom: 370px solid grey;
  -webkit-transform: rotate(170deg) skew(141deg);
  transform: rotate(170deg) skew(141deg);
}
<div id="lightning">
  <div class="below">
    <div class="toptri"></div>
    <div class="middle"></div>
    <div class="bottri"></div>
  </div>
  <div class="above">
    <div class="toptri"></div>
    <div class="middle"></div>
    <div class="bottri"></div>
  </div>
</div>

CodePen

CSS

CSS는 사용 :before및 :after의사 요소, CSS 삼각형과 transform. borders는 백분율 기반이 될 수 없기 때문에 CSS 삼각형의 사용을 고려할 때이 특정 솔루션을 반응 형으로 만드는 것은 어려울 수 있습니다. 이 솔루션은 div번개 볼트와 윤곽선의 기초로 두 개의 s를 사용합니다 .

볼트는 다음과 같은 방법으로 생성됩니다.

  • 볼트의 중간은 .boltOuter/에 지정되어 .boltInner있습니다. 기울어 진 마름모로 만들기 위해 X 및 Y 축에서 기울어 진 직사각형입니다.
  • 은 "프롱"가있다 :before와 :after유사 요소는 컨테이너에 상대적 위치 .boltOuter/.boltInner
  • "프롱"은 CSS 삼각형 (0 height및 width선택적 요소가있는 요소)을 사용하여 만들어집니다 border. 삼각형이 회전하여 원하는 각도를 얻습니다.
  • 의 모든 요소 는 은색 윤곽선 역할 을 할 수 있도록 .boltInner더 작게 만들어지고 오프셋됩니다..boltOuter.boltOuter

body {
    background-color: red;
}
.circle {
    background-color: white;
    border: 5px solid black;
    border-radius: 50%;
    height: 400px;
    left: 100px;
    position: relative;
    top: 200px;
    width: 400px;
}
.boltOuter, .boltInner {
    position: absolute;
}
.boltOuter:before, .boltOuter:after, .boltInner:before, .boltInner:after {
    content: "";
    display: block;
    height: 0;
    position: absolute;
    transform: rotateY(-60deg);
    width: 0;
}
.boltOuter {
    background-color: silver;
    height: 300px;
    left: 140px;
    top: 50px;
    transform: skewX(-10deg) skewY(-20deg);
    width: 110px;
    z-index: 2;
}
.boltOuter:before, .boltOuter:after {
    border: 150px solid transparent;
    z-index: 1;
}
.boltOuter:before {
    border-bottom-color: silver;
    border-right-color: silver;
    left: -150px;
    top: -200px;
}
.boltOuter:after {
    border-left-color: silver;
    border-top-color: silver;
    bottom: -200px;
    right: -150px;
}
.boltInner {
    background-color: gold;
    height: 290px;
    left: 5px;
    top: 5px;
    width: 100px;
    z-index: 4;
}
.boltInner:before, .boltInner:after {
    border: 140px solid transparent;
    z-index: 3;
}
.boltInner:before {
    border-bottom-color: gold;
    border-right-color: gold;
    left: -143px;
    top: -190px;
}
.boltInner:after {
    border-top-color: gold;
    border-left-color: gold;
    bottom: -190px;
    right: -143px;
}
<div class="circle">
    <div class="boltOuter">
        <div class="boltInner"></div>
    </div>
</div>

JS 피들 : https://jsfiddle.net/o7gm6dsb/

단일 .NET Framework로 결과를 얻을 수있는 다른 CSS 방법입니다 div.

이 방법은 http://fontello.com/ 을 사용하여 생성 된 사용자 지정 아이콘 글꼴을 사용합니다.이 방법 의 이점은 글꼴을 약간의 노력이나 코드 없이도 확장 할 수 있다는 것입니다.

  • 글꼴은 @font-face. 이 예에서 글꼴은 CSS 파일에 직접 포함됩니다.
  • .bolt 다음을 사용하여 포함하는 원을 그리는 데 사용됩니다. border-radius: 50%;
  • :before의사 부재는 볼트에 사용되는 상대적 위치 .bolt와는 원형 테두리 밖으로 나갈 수 있도록 중심
  • 최신 웹킷 브라우저 -webkit-text-stroke: 3px silver;에서는 볼트에 대한 개요를 제공하는 데 사용할 수 있습니다.
  • -webkit-text-stroke지원되지 않는 경우 text-shadow대신 임시 테두리를 제공하는 데 사용할 수 있습니다.

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,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') format('woff'),
url('data:application/octet-stream;base64,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') format('truetype');
}
body {
  background-color: red;
}
.bolt {
  background-color: white;
  border: 5px solid black;
  border-radius: 50%;
  height: 100px;
  margin: 50px;
  position: relative;
  text-align: center;
  width: 100px;
}
.bolt:before {
  -webkit-text-stroke: 3px silver;
  color: gold;
  content: '\e800';
  display: block;
  font-family: "fontello";
  font-size: 200px;
  line-height: 100px;
  position: absolute;
  text-shadow: 2px 0 0 silver, -2px 0 0 silver, 0 2px 0 silver, 0 -2px 0 silver, 1px 1px silver, -1px -1px 0 silver, 1px -1px 0 silver, -1px 1px 0 silver;
  width: 100%;
}
<div class="bolt"></div>

html 기호 로 약간 다른 조명 볼트를 얻을 수 있습니다 . 모든 브라우저가 모든 브라우저를 지원하는 것은 아닙니다.

다음은 css / html로 할 수있는 간단한 예입니다.

.circle {
	border-radius: 50%;
    border: 4px solid black;
	width: 100px;
	height: 100px;
    font-size: 70px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    background: white;
}

.square{
    border: 4px solid red;
    width: 106px;
    height: 106px;
    background: red;
}
<div class="square">
    <div class="circle">⚡</div>
</div>

이것의 장점은 이것이 간단하고 아무것도 필요하지 않다는 것입니다. 단점은 볼트가 약간 다르며 모든 브라우저가 기호를 지원하는 것은 아니라는 것입니다.

정확한 그림이 필요한 경우 SVG로 생성하고 svg 또는 글꼴로 추가하십시오.

슬프게도 표지판이 창에 보이지 않는 것처럼 보이지만 macOS (크롬)에서는 다음과 같이 보입니다.

여기에 이미지 설명 입력

우분투에서도 볼 수 있지만 다르게 보입니다.

SVG를 원하지 않는다는 것을 알고 있지만 CSS로 만드는 것보다 정말 쉽고 빠릅니다.

  • 번개 모양의 스크린 샷을 만드십시오.
  • http://www.base64-image.de/로 이동 하여 이미지 (jpg, png, gif)를 업로드합니다.
  • CSS 배경 이미지 코드 가져 오기

전제 조건이나 기술 없이도 상상력을 발휘하고 SVG 개체를 자유롭게 그릴 수있는 마법의 Drawsvg 웹 사이트 를 사용하는 것이 좋습니다 .

여기에 이미지 설명 입력

그리기가 끝나면 저장 버튼을 클릭하기 만하면 SVG 코드, 이전 이미지의 예제 코드 :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="200px" viewBox="0 0 100 200" preserveAspectRatio="xMidYMid meet" >
    <rect id="svgEditorBackground" x="0" y="0" width="100" height="200" style="stroke: none;" fill="red"/>
    <circle id="e1_circle" cx="50.9398" cy="93.985" stroke="black" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="48.5487" fill="white" transform="matrix(1 0 0 1 -1.12782 4.13534)"/><g id="e4_group" fill="yellow" style=""/>
    <polyline stroke="black" id="e5_polyline" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" points="67.1053 21.8045 33.6466 74.812 50.188 69.5489 25 114.286 45.6767 106.767 14.8496 158.271 70.8647 92.8571 45.3008 97.7444 69.3609 56.391 50.188 62.0301 66.7293 21.8045" fill="yellow"/>
</svg>

도움이 되었기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/30640309/create-a-lightning-bolt-design-like-the-flash

반응형

'IT TIP' 카테고리의 다른 글

jquery / ajax를 사용하여 Div의 콘텐츠 새로 고침 / 다시로드  (0) 2020.10.30
iOS 8에서 카메라 권한 대화 상자 표시  (0) 2020.10.30
Android facebook applicationId는 null 일 수 없습니다.  (0) 2020.10.30
Swift를 사용하여 iOS에서 오른쪽에서 왼쪽으로 뷰 컨트롤러를 표시하는 방법  (0) 2020.10.30
C #에서 SMTP를 인증하는 방법  (0) 2020.10.30

'IT TIP'의 다른글

  • 현재글번개 모양 디자인 만들기 (예 : The Flash)

관련글

댓글

티스토리툴바