[Tistory] 블로그 내 랜덤으로 바뀌는 (개발자)명언 추가

개발자 명언

 

“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.
컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”

- Jef Raskin

맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도

 

개발자 명언 소스코드 (새로고침시 업데이트)

<!-- 개발자 명언 추가 (출처: https://inpa.tistory.com) -->
<article id="postArticle" class="content z-index-5" style="margin-top:-20px;">
	<blockquote class="blockquote pb-5 pb-lg-6 px-4 px-lg-6 border-top shadow-lg border-danger border-3 rounded-4 position-relative mb-9 mb-lg-13 z-index-1 hover-shadow-xl" style="background-color:var(--h-button-background); margin-top: -35px; font-style: italic; line-height: 1.5;">
		<div>
			<div class="width-7x height-7x position-relative mt-n5 flex-center rounded-circle bg-danger mb-5" style="filter: drop-shadow(2px 3px 4px #b7181880);">
				<svg xmlns="http://www.w3.org/2000/svg" width="40px" height="30px" viewBox="0 0 40 30" version="1.1" class="injected-svg fill-white width-2x h-auto">
					<path d="M0,30 L0,12.7208481 L7.32934132,0 L15.9520958,0 L9.48502994,12.7208481 L18,12.7208481 L18,30 L0,30 Z M22,30 L22,12.7208481 L29.3293413,0 L37.9520958,0 L31.4850299,12.7208481 L40,12.7208481 L40,30 L22,30 Z" fill="currentColor"></path>
				</svg>
			</div>
			<p id="desc" class="mb-6 fs-5">“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.<br>컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”</p>
			<div class="d-flex align-items-center">
				<!--<img id="avatar" src="" alt="Image" class="avatar lg shadow-lg rounded-pill me-3 flex-shrink-0">-->
				<div>
					<h5 id="author" class="mb-0"><span style="color:rgb(246,86,96)">-</span> Jef Raskin</h5>
					<small id="author2" class="text-muted ms-3">맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도</small>
				</div>
			</div>
		</div>
		<svg class="bq-randomBtn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1rem" height="1rem">
			<path d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"></path>
		</svg>
		<!--
		<svg id="blueSign" xmlns="http://www.w3.org/2000/svg" width="207" height="118" viewBox="0 0 207 118" fill="none" class="injected-svg width-18x me-md-n3 h-auto fill-primary position-absolute end-0 bottom-0">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1751 115.919C29.159 115.857 29.1435 115.795 29.1274 115.734H19.5915C19.5958 115.795 19.5995 115.857 19.6045 115.919H29.1751ZM122.169 41.6271C118.968 44.7786 115.466 47.6922 113.769 52.0277C116.568 48.5602 119.368 45.0939 122.169 41.6271ZM105.756 77.5403C105.756 78.1586 105.706 78.7818 105.763 79.3945C106.692 89.2716 114.781 91.8228 122.005 89.8106C124.361 89.1551 126.345 87.8758 128.242 86.4806C129.933 85.2379 131.615 83.8625 132.922 82.24C136.183 78.1895 138.043 73.418 139.041 68.3602C140.429 61.3236 140.711 54.2883 138.047 47.4307C136.486 43.4175 134.19 39.9717 130.405 37.6534C129.317 36.9868 128.616 37.1776 127.775 37.9867C121.604 43.9242 115.929 50.2626 111.731 57.7929C108.304 63.9386 105.817 70.3773 105.756 77.5403ZM49.278 111.846C44.221 113.016 39.1646 114.184 34.1076 115.353C38.0704 114.766 42.0134 114.012 45.9279 113.133C47.0754 112.875 48.1429 112.26 49.2501 111.812C51.6045 111.859 53.3882 110.49 55.2321 109.275C53.2476 110.132 51.2625 110.989 49.278 111.846ZM131.887 34.3656C138.124 38.2872 141.99 43.7613 143.778 50.4943C147.197 63.3674 145.221 75.4246 137.003 86.0686C133.143 91.0676 127.834 94.1931 121.51 95.1255C116.171 95.9123 111.503 94.1324 107.555 90.5274C103.628 86.9422 101.095 82.4692 100.67 77.1908C100.306 72.6677 100.707 68.0739 102.442 63.7732C103.83 60.333 105.257 56.8934 106.955 53.6012C107.978 51.6181 109.495 49.8729 110.892 48.1011C114.174 43.9385 117.518 39.8242 120.785 35.332C119.562 35.6821 118.286 35.9107 117.124 36.4063C113.375 38.0065 110.375 40.6494 107.694 43.6392C101.236 50.8431 96.924 59.3653 92.8503 68.0324C89.3076 75.5708 85.7023 83.0794 80.8504 89.9035C71.3467 103.269 58.6429 111.787 42.6002 115.367C32.7743 117.559 22.8282 117.186 12.8809 117.145C9.13681 117.13 5.39085 117.434 1.64551 117.585C1.44106 117.594 1.23288 117.532 0.796692 117.472C1.25023 117.047 1.55382 116.762 1.61516 116.705C1.08295 116.272 0.541428 115.831 -7.62939e-05 115.39C0.4646 114.838 0.825821 114.079 1.41875 113.781C2.2973 113.34 3.32767 113.086 4.31528 112.996C7.02777 112.752 9.7533 112.661 12.4707 112.46C15.5736 112.231 18.6715 111.932 21.7749 111.706C22.529 111.651 23.3041 111.851 24.0538 111.778C27.6417 111.429 31.2507 111.185 34.8009 110.594C37.988 110.063 41.0828 108.983 44.2674 108.424C46.6937 107.997 48.9223 107.142 51.1398 106.176C56.4756 103.85 61.5605 101.219 65.9632 97.2232C72.1385 91.619 77.0536 85.0483 81.3349 78.0254C83.8857 73.8398 85.5263 69.1085 87.7301 64.6994C90.0065 60.1465 92.4327 55.6667 94.8646 51.1937C96.0901 48.9399 97.276 46.6192 98.8342 44.6026C100.822 42.0285 103.103 39.6675 105.384 37.3387C106.865 35.8289 108.435 34.3259 110.205 33.1972C114.313 30.5753 118.839 29.7798 123.586 31.1013C125.035 31.504 126.068 31.3695 127.242 30.3405C135.925 22.7259 145.611 16.6366 156.146 11.9493C162.432 9.15215 168.738 6.32278 175.241 4.1154C183.629 1.26869 192.328 -0.318535 201.264 0.0538025C202.709 0.113899 204.175 0.394547 205.561 0.811485C206.137 0.984955 206.526 1.78228 207 2.29525C206.48 2.6428 205.989 3.21586 205.434 3.28772C204.486 3.41039 203.496 3.2301 202.526 3.1539C201.87 3.10248 201.21 2.90237 200.567 2.95503C193.638 3.52747 186.872 4.9846 180.289 7.1647C163.139 12.8451 147.427 21.179 133.57 32.8638C133.06 33.2938 132.573 33.7522 131.887 34.3656Z" fill="#172327"></path>
		</svg>
		-->
	</blockquote>
	<script>
		(async function () {
			try {
				const res = await fetch('https://tistory4.daumcdn.net/tistory/4939852/skin/images/quote.json');
				const phrase_ = await res.json();
				const $desc = document.getElementById('desc');
				const $author = document.getElementById('author');
				const $author2 = document.getElementById('author2');
				function ranQuote() {
					const ran1 = Math.floor(Math.random() * phrase_.length);
					const { description: desc, author, author2 } = phrase_[ran1];
					$desc.innerHTML = `“ ${desc} ”`;
					$author.innerHTML = `<span style="color:rgb(246,86,96)">-</span> ${author}`;
					$author2.innerHTML = author2;									
				}
				ranQuote();
				document.querySelector('.bq-randomBtn').addEventListener('click', ranQuote);
			} catch (err) {
				console.log(err);
			}
		})();
	</script>
</article>

 

참고

• [Tistory] Dev Scroll Blog: https://inpa.tistory.com/