studiomeal

<p style="text-align: left"><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.crockford.com/colors.html">https://www.crockford.com/colors.html</a><br>이 사이트 말씀이신가요? :)</p>

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

<p style="text-align: left">아 감사합니다 ㅎㅎ<br>AI가 나오면서, 개발이나 교육에 대한 방향에 대해 많이 고민 중이랍니다. 방향이 정해지면 또 여러 채널을 통해 말씀드리도록 할게요!</p>

vue강의는안하시나요?!

<p>Babel 사용법은 이 강의 커리큘럼에 없을텐데, 어떤 영상을 말씀하시는 걸까요?</p>

Babel의 사용법 아래 링크의 영상이 비공개 동영상이라고 뜹니다.

<p>구체적인 디자인이나 동작에 따라 차이가 있겠지만, 게임이라면 일반적으로는 위치를 계산해서 position absolute로 하시는게 좋을 것 같습니다. 그렇게 하시는게 카드를 원하는 위치로 움직이는 애니메이션 처리하기도 수월하고요. 딱 어떤 방법이 제일 좋다기보다는, 원하는 형태가 나올 수 있다면, 동원님께서 구현하기 좋은 방법으로 하시는게 좋을 것 같아요.</p>

웹에서 위치?값

<p>아, 제가 확인이 늦었습니다. 아래 소스를 사용하시면 됩니다!</p><pre class="hljs"><code><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Event Delegation</title>
	<link rel="stylesheet" href="../reset.css">
	<style>
		body {
			display: flex;
			align-items: center;
			justify-content: center;																						
		}
		@keyframes pointer-ani {
			0% { transform: scale(0); }
			50% { transform: scale(1); }
			100% { transform: scale(1.5); opacity: 0; }
		}
		.pointer {
			position: absolute;
			left: 0;
			top: 0;
			width: 60px;
			height: 60px;
			margin: -30px 0 0 -30px;
			border-radius: 50%;
			background: url('../images/ilbuni2.png') no-repeat 0 0 / cover;
			transform: scale(0);
			animation: pointer-ani 0.5s linear;
		}
		.menu {
			display: flex;
			margin-top: -10vh;
			padding: 2em;
			border-radius: 20px;
			background: #eee;
		}
		.menu-btn {
			display: inline-flex;
			align-items: center;
			margin: 0 1em;
			padding: 0.5em 1em 0.5em 0.5em;
			border: 5px solid white;
			border-radius: 20px;
			outline: 0;
			font: 900 1.2rem NotoSans;
			background: linear-gradient(0deg, rgba(223,210,0,1) 0%, rgba(255,240,0,1) 24%, rgba(255,240,0,1) 70%, rgba(255,255,255,1) 100%);
			box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset;
		}
		.btn-label {
			text-shadow: rgba(255,255,255,1) 0 1px 0;
			/*pointer-events: none;*/
		}
		.icon {
			width: 60px;
			/*pointer-events: none;*/
		}
	</style>
	<script src="IlbuniPointer.js"></script>
	<script>
		window.addEventListener('DOMContentLoaded', () => new IlbuniPointer());
	</script>
</head>
<body>
	<div class="menu">
		<button class="menu-btn" data-value="1">
			<img class="icon" src="../images/ilbuni1.png" alt="">
			<span class="btn-label">일분이 1</span>
		</button>
		<button class="menu-btn" data-value="2">
			<img class="icon" src="../images/ilbuni2.png" alt="">
			<span class="btn-label">일분이 2</span>
		</button>
		<button class="menu-btn" data-value="3">
			<img class="icon" src="../images/ilbuni3.png" alt="">
			<span class="btn-label">일분이 3</span>
		</button>
	</div>

	<script>
		const menu = document.querySelector('.menu');

		function clickHandler(event) {
			let elem = event.target;
			while (!elem.classList.contains('menu-btn')) {
				elem = elem.parentNode;

				if (elem.nodeName == 'BODY') {
					elem = null;
					return;
				}
			}

			console.log(elem.dataset.value);
		}

		menu.addEventListener('click', clickHandler);
	</script>
</body>
</html></code></pre>

'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다

<p>사실 이게 딱 정해진 규칙은 없어서, 프로젝트에 맞다고 생각되는 정책을 정하신 후 그걸 지키시는게 제일 좋기는 합니다. 값에 따라서 고정된 픽셀값을 사용하는게 편한게 있고, 폰트 크기에 따라가도록 하는게 편한 경우도 있답니다.<br>아래 영상은 제가 예전에 올려둔 영상인데, 한번 참고해 보시면 좋을 것 같습니다.<br><a target="_blank" rel="noopener noreferrer nofollow" href="https://youtu.be/S5uMXoGogkk?si=TC1oql-KiqLbfrXb">https://youtu.be/S5uMXoGogkk?si=TC1oql-KiqLbfrXb</a></p>

px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

<p>사용되는 Three.js 버전에 따라서, 빛의 강도가 일정하지 않은 현상이 있더라고요. 직접 npm으로 최신 버전을 설치하시도록 강의가 구성되어서, 제가 강의를 진행할 때 사용했던 Three.js 버전과 맞지 않아서 생긴 문제일 수도 있답니다.  Light의 강도(intensity)를 조정해보시겠어요?</p>

징검다리 예제에서 SpotLight가 동작 오류

<p>아, 제가 확인이 늦었네요. 혹시 해결 하셨나요? 코드를 이미지로 말고 텍스트로 올려주시면, 저도 한번 찾아보도록 하겠습니다.</p>

게속 오류떠서 글 작성해봐요....

<p>전역변수는 말 그대로, 모든 곳에서 공유되는 변수입니다. 그러다보니 전역변수를 많이 사용하게 되면 예기치 못한 오류(다른 곳에서 값이 바뀐다든지)가 발생하기가 쉬워서, 전역변수 사용을 피하는 경우가 많답니다.<br>같은 맥락으로 "전역변수를 사용하지 않기 위해서"라고 말한 것입니다 :)</p>

섹션5 자바스크립트 이벤트 다루기 질문

<p>간혹 Three.js의 버전에 따라 밝기가 다르게 나타나더라고요!<br>강의를 촬영할 때 사용한 버전과, 현재 설치하신 버전이 달라서 발생하는 차이로 보입니다. 프로젝트 개발 중간에 Three.js의 버전을 바꿀일은 잘 없으니, 현재 버전에 맞추어 적당한 밝기를 선택하시면 될 것 같습니다.</p>

studiomeal

Posts