“안녕 블록” — 첫 블록 만들어보기

ℹ️ 블록을 만들기 위해서는 HTML, CSS, JavaScript에 대한 기본적인 지식이 필요해요!

간단한 블록을 만들기 위해서는 HTML/CSS 정도로 구현할 수 있지만, 더 다양한 기능을 제공하는 블록을 만들기 위해서는 기본적인 JavaScript 지식도 필요해요.

예시 코드는 빨간색의 “안녕 블록” 텍스트를 포함하는 <h1> 태그를 그리고 <button>을 클릭 시 설명을 출력하는 블록의 예시에요.

<style>

	h1 {
		color: red;
		font-size: 24px;
	}

</style>

<template>

	<h1>안녕 블록!</h1>
	<ul>
		<li>제목 색상: red</li>
		<li>제목 사이즈: 24px</li>
	</ul>
	<button>설명 보기</button>

</template>

<script>

	const container = bm.container;
	const context = bm.context;

	function clicked(e) {

		e.preventDefault();

		if (e.target.matches('button')) {
			alert(`제목 색상은 red이고 사이즈는 24px 이에요!`);
		}
	}

	container.addEventListener('click', clicked, true);

</script>

기본 블록 문법 설명

• 하나의 블록은 하나의 코드 파일로 구성돼요.
• 하나의 블록은 크게 3개의 최상위 HTML 태그인 <style> , <template> , <script> 태그로 구성될 수 있고, 태그별로 하나만 최상위 태그로 가질 수 있어요.
  • <style>: 구현하려는 블록의 스타일(CSS)을 입력할 수 있어요.
  • <template>: 구현하려는 블록의 기본적인 템플릿(HTML)을 입력할 수 있어요.
  • <script>: 구현하려는 블록의 JavaScript 코드를 입력할 수 있어요.