반응형
여기 기본적인 반도체 웨이퍼맵을 HTML, CSS, 그리고 JavaScript로 구현하는 코드입니다. 이 코드는 SVG를 사용하여 원형 웨이퍼를 만들고, 내부 칩을 색상으로 시각화할 수 있도록 했습니다.
주요 기능:
- SVG를 사용하여 원형 웨이퍼를 생성
- 격자로 칩을 배치
- 각 칩을 클릭하면 색상이 변경되도록 설정
반도체 웨이퍼맵
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반도체 웨이퍼맵</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
svg {
background-color: #f0f0f0;
}
.chip {
stroke: black;
stroke-width: 0.5;
cursor: pointer;
}
</style>
</head>
<body>
<h2>반도체 웨이퍼맵</h2>
<svg id="wafer" width="500" height="500" viewBox="0 0 500 500">
<!-- 웨이퍼 원형 -->
<circle cx="250" cy="250" r="200" fill="silver" stroke="black" stroke-width="2"/>
<!-- 칩 셀 -->
<g id="chip-container"></g>
</svg>
<script>
const waferSize = 400; // 웨이퍼의 크기
const chipSize = 30; // 칩 한 개의 크기
const numRows = Math.floor(waferSize / chipSize);
const numCols = Math.floor(waferSize / chipSize);
const waferCenter = 250;
function isInsideWafer(x, y) {
let dx = x - waferCenter;
let dy = y - waferCenter;
return Math.sqrt(dx * dx + dy * dy) < 200; // 원 안에 있는지 확인
}
function createWaferMap() {
const container = document.getElementById('chip-container');
for (let row = 0; row < numRows; row++) {
for (let col = 0; col < numCols; col++) {
let x = 50 + col * chipSize;
let y = 50 + row * chipSize;
if (isInsideWafer(x + chipSize / 2, y + chipSize / 2)) {
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", chipSize);
rect.setAttribute("height", chipSize);
rect.setAttribute("fill", "lightgreen");
rect.setAttribute("class", "chip");
rect.addEventListener("click", function () {
let currentColor = this.getAttribute("fill");
this.setAttribute("fill", currentColor === "lightgreen" ? "red" : "lightgreen");
});
container.appendChild(rect);
}
}
}
}
createWaferMap();
</script>
</body>
</html>기능 설명:
- **SVG 원(circle)**을 이용해 웨이퍼의 기본 형태를 만듦
- **격자로 칩(rect)**을 배치하고, 클릭하면 색상이 변경되도록 이벤트 추가
- 칩이 원형 웨이퍼 내부에 있을 경우에만 렌더링되도록 설정
이 코드를 실행하면 반도체 웨이퍼 위에 칩들이 배치되고, 각 칩을 클릭하면 색상이 바뀌는 인터랙티브한 웨이퍼맵이 생성됩니다. 필요에 따라 칩 색상, 크기, 배치 등을 조정할 수 있습니다.
반응형
'IT > SW Dev.' 카테고리의 다른 글
| python으로 작성한 코테 알고리즘 별 사례 (1) | 2025.02.15 |
|---|---|
| 쉬운 AI Coding - 공학용 계산기 코드 생성 예시(html, css, javscript, math.js) (1) | 2025.02.13 |
| 쉬운 AI Coding - Slack(incoming webhooks) 메세지 전송 Python 코드 작성 예시 (1) | 2025.02.13 |
| 코테(코딩 테스트)에서 주로 사용하는 알고리즘(자료구조, 그리디 등)에 대해 아시나요? (0) | 2025.02.13 |
| slack 에 대해 아시나요? - 소개, 기능 및 사용 사례 (0) | 2025.02.13 |