코딩 기초 교육: HTML, CSS, JavaScript 단계별 이해

총무팀 실무 예시: 비품 신청서 만들기

코드 (HTML만)

<!-- HTML: 웹페이지의 "뼈대"를 담당 --> <table> <thead> <tr> <th>번호</th> <th>품목명</th> <th>수량</th> <th>신청자</th> <th>상태</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A4 용지</td> <td>10</td> <td>김철수</td> <td>승인</td> </tr> <tr> <td>2</td> <td>볼펜</td> <td>20</td> <td>이영희</td> <td>대기</td> </tr> </tbody> </table>

실행 결과

번호품목명수량신청자상태
1A4 용지10김철수승인
2볼펜20이영희대기
3포스트잇5박민수승인

HTML만 있을 때의 특징

  • 내용과 구조만 표시 가능
  • 기본적인 표 형태 제공
  • 디자인은 브라우저 기본값
  • 사용자와 상호작용 불가
  • 정적인 화면만 보여줌

코드 (HTML + CSS)

/* CSS: 웹페이지의 "디자인"을 담당 */ table { width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } th { background: linear-gradient(135deg, #ff6b35, #f7931e); color: white; padding: 12px 16px; font-weight: 600; } td { padding: 10px 16px; border-bottom: 1px solid #eee; } tr:nth-child(even) { background: #f8f9fa; } tr:hover { background: #fff3e6; }

실행 결과

번호품목명수량신청자상태
1A4 용지10김철수승인
2볼펜20이영희대기
3포스트잇5박민수승인

HTML + CSS가 있을 때의 특징

  • 보기 좋은 디자인 적용 가능
  • 회사 브랜드 컬러 적용
  • 호버 효과 등 시각적 피드백
  • 여전히 정적인 화면
  • 데이터 추가/삭제는 수동

코드 (HTML + CSS + JS)

// JS: 웹페이지의 "동작"을 담당 const data = [ { id: 1, item: "A4 용지", qty: 10, user: "김철수", status: "승인" }, { id: 2, item: "볼펜", qty: 20, user: "이영희", status: "대기" } ]; function renderTable() { const tbody = document.getElementById('tbody'); tbody.innerHTML = data.map(row => ` <tr> <td>${row.id}</td> <td>${row.item}</td> <td>${row.qty}</td> <td>${row.user}</td> <td>${row.status}</td> </tr> `).join(''); } function addItem(item, qty, user) { data.push({ id: data.length + 1, item, qty, user, status: "대기" }); renderTable(); }

실행 결과 (직접 조작해보세요!)

총 3건
번호품목명수량신청자상태관리

HTML + CSS + JS가 있을 때의 특징

  • 데이터 추가/삭제 가능
  • 실시간 검색/필터링
  • 사용자와 상호작용
  • 동적인 화면 업데이트
  • JSON 데이터 활용 가능

MS Power Platforms 연계 구조

HTML
구조
CSS
디자인
JavaScript
동작
JSON/SharePoint
데이터

Power Apps에서 HTML 컨트롤로 UI를 만들고, Power Automate로 데이터를 연동합니다